add comment to docs for import

primer · Nov 15, 2021 · 72e6643 · 72e6643
1 parent a2e195b
commit 72e6643
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/docs/content/ActionList2.mdx b/docs/content/ActionList2.mdx
@@ -58,7 +58,8 @@ import {ActionList} from '@primer/components/unreleased'
 ## Minimal example
 
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/unreleased'
+const {ActionList} = unreleased // ignore this, import like that ↑
 
 render(
   <ActionList>
@@ -79,7 +80,8 @@ Leading visuals are optional and appear at the start of an item. They can be oct
 
 <!-- prettier-ignore -->
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/unreleased'
+const {ActionList} = unreleased // ignore this, import like that ↑
 
 render(
   <ActionList>
@@ -106,7 +108,8 @@ render(
 Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does.
 
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/unreleased'
+const {ActionList} = unreleased // ignore this, import like that ↑
 
 render(
   <ActionList>
@@ -137,7 +140,8 @@ render(
 Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present.
 
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/unreleased'
+const {ActionList} = unreleased // ignore this, import like that ↑
 
 render(
   <ActionList showDividers>
@@ -172,7 +176,8 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI
 
 <!-- prettier-ignore -->
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/unreleased'
+const {ActionList} = unreleased // ignore this, import like that ↑
 
 render(
   <ActionList>
@@ -207,7 +212,8 @@ render(
 ## With Groups
 
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/unreleased'
+const {ActionList} = unreleased // ignore this, import like that ↑
 
 const SelectFields = () => {
   const [options, setOptions] = React.useState([