Various doc site bug fixes (#1518)

segmentio · Sep 16, 2022 · 80f4f65 · 80f4f65
1 parent 886a4c9
commit 80f4f65
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 760 deletions.
diff --git a/docs/documentation/components/menu.mdx b/docs/documentation/components/menu.mdx
@@ -181,7 +181,7 @@ function MenuOptionsGroupExample() {
           { label: 'Descending', value: 'desc' },
         ]}
         selected={selectedOrder}
-        onChange={selected => setSelectedOrder(selected)}
+        onChange={(selected) => setSelectedOrder(selected)}
       />
       <Menu.Divider />
       <Menu.OptionsGroup
@@ -194,7 +194,7 @@ function MenuOptionsGroupExample() {
           { label: 'Type', value: 'type' },
         ]}
         selected={selectedField}
-        onChange={selected => setSelectedField(selected)}
+        onChange={(selected) => setSelectedField(selected)}
       />
     </Menu>
   )
@@ -209,33 +209,33 @@ either have `[role="menuitemradio"]` or `[role="menuitem"]`.
 The focus styles are currently not working in the docs, sorry for the inconvenience!
 
 ```jsx
-<Popover
-  position={Position.BOTTOM_LEFT}
-  content={
-    <Menu>
-      <ul>
-        <li>
-          <a href="#..." role="menuitem">
-            Hey Evergreen,
-          </a>
-        </li>
-        <li>
-          <a href="#..." role="menuitem">
-            I want custom items
-          </a>
-        </li>
-        <hr />
-        <li>
-          <a href="#..." role="menuitem">
-            Oh sweet
-          </a>
-        </li>
-      </ul>
-    </Menu>
-  }
->
-  <Button>Custom Menu Items</Button>
-</Popover>
+function CustomMenuItemExample() {
+  const handleClick = React.useCallback(() => toaster.notify('Menu Item Clicked'), [])
+
+  return (
+    <Popover
+      position={Position.BOTTOM_LEFT}
+      content={
+        <Menu>
+          <Ul listStyle="square">
+            <Link cursor="pointer" role="menuitem" onClick={handleClick}>
+              <Li>Hey Evergreen,</Li>
+            </Link>
+            <Link cursor="pointer" role="menuitem" onClick={handleClick}>
+              <Li>I want custom items</Li>
+            </Link>
+            <Pane borderTop={true} marginRight={majorScale(2)} />
+            <Link cursor="pointer" role="menuitem" onClick={handleClick}>
+              <Li>Oh sweet</Li>
+            </Link>
+          </Ul>
+        </Menu>
+      }
+    >
+      <Button>Custom Menu Items</Button>
+    </Popover>
+  )
+}
 ```
 
 ## Menu without items

diff --git a/docs/documentation/components/tag-input.mdx b/docs/documentation/components/tag-input.mdx
@@ -145,7 +145,10 @@ manually controlled. `TagInput` will not remove items from this list after they
 function AutoCompleteTagInputExample() {
   const [values, setValues] = React.useState(['First', 'Second'])
 
-  const allValues = ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth', 'Seventh', 'Eighth', 'Ninth', 'Tenth']
+  const allValues = React.useMemo(
+    () => ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth', 'Seventh', 'Eighth', 'Ninth', 'Tenth'],
+    []
+  )
   const autocompleteItems = React.useMemo(() => allValues.filter((i) => !values.includes(i)), [allValues, values])
 
   return (

diff --git a/docs/documentation/components/toaster.mdx b/docs/documentation/components/toaster.mdx
@@ -41,39 +41,25 @@ The `toaster` is an instance of the `Toaster` class.
 ## Notify
 
 ```jsx
-<Button
-  onClick={() => toaster.notify('Evergreen is a open-source design system')}
->
-  Notify
-</Button>
+<Button onClick={() => toaster.notify('Evergreen is an open-source design system')}>Notify</Button>
 ```
 
 ## Success
 
 ```jsx
-<Button onClick={() => toaster.success('Your source is now sending data')}>
-  Success
-</Button>
+<Button onClick={() => toaster.success('Your source is now sending data')}>Success</Button>
 ```
 
 ## Warning
 
 ```jsx
-<Button onClick={() => toaster.warning('Changes will affect all Warehouses')}>
-  Warning
-</Button>
+<Button onClick={() => toaster.warning('Changes will affect all Warehouses')}>Warning</Button>
 ```
 
 ## Danger
 
 ```jsx
-<Button
-  onClick={() =>
-    toaster.danger('Something went wrong trying to create your audience')
-  }
->
-  Danger
-</Button>
+<Button onClick={() => toaster.danger('Something went wrong trying to create your audience')}>Danger</Button>
 ```
 
 ## Close all
@@ -91,7 +77,7 @@ The description can be a React node.
 <Button
   onClick={() =>
     toaster.success('Your source is now sending data', {
-      description: 'Connect your source to a destination to receive data.'
+      description: 'Connect your source to a destination to receive data.',
     })
   }
 >
@@ -109,7 +95,7 @@ The `duration` property is in seconds — not milliseconds.
 <Button
   onClick={() =>
     toaster.success('Stick around for 10 seconds', {
-      duration: 10
+      duration: 10,
     })
   }
 >
@@ -126,7 +112,7 @@ Passing a unique ID via `id` property allows Evergreen to close all previous toa
 <Button
   onClick={() =>
     toaster.warning('Only one toaster will be shown', {
-      id: 'forbidden-action'
+      id: 'forbidden-action',
     })
   }
 >