From 80f4f65714a02cdca69f6f4ac5663e38db111ec7 Mon Sep 17 00:00:00 2001 From: Brandon Scott Date: Fri, 16 Sep 2022 17:02:08 -0400 Subject: [PATCH] Various doc site bug fixes (#1518) --- docs/documentation/components/menu.mdx | 58 +- docs/documentation/components/tag-input.mdx | 5 +- docs/documentation/components/toaster.mdx | 28 +- docs/fixtures/profiles.json | 760 +++----------------- docs/lib/codesandbox.ts | 101 ++- 5 files changed, 192 insertions(+), 760 deletions(-) diff --git a/docs/documentation/components/menu.mdx b/docs/documentation/components/menu.mdx index d65a60e19..c22240fee 100644 --- 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)} /> setSelectedField(selected)} + onChange={(selected) => setSelectedField(selected)} /> ) @@ -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 - - - - } -> - - +function CustomMenuItemExample() { + const handleClick = React.useCallback(() => toaster.notify('Menu Item Clicked'), []) + + return ( + +
    + +
  • Hey Evergreen,
    • + + +
  • I want custom items
    • + + + +
  • Oh sweet
    • + +
+ + } + > + + + ) +} ``` ## Menu without items diff --git a/docs/documentation/components/tag-input.mdx b/docs/documentation/components/tag-input.mdx index 91c4f8ff5..7f7c5a0e6 100644 --- 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 index 776f3b761..6b492b61c 100644 --- 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 - + ``` ## Success ```jsx - + ``` ## Warning ```jsx - + ``` ## Danger ```jsx - + ``` ## Close all @@ -91,7 +77,7 @@ The description can be a React node.