chore: testing upcoming useMenu fix [ DO NOT MERGE ⚠️ ]

packages/dropdowns/demo/menu.stories.mdx

@@ -5,6 +5,18 @@ import { MenuStory } from './stories/MenuStory';
 import README from '../README.md';
 import { BUTTON_TYPE, ITEMS } from './stories/data';
 
+import Arrow from './stories/Arrow';
+import Button from './stories/Button';
+import Danger from './stories/Danger';
+import Default from './stories/Default';
+import Disabled from './stories/Disabled';
+import GroupedItems from './stories/GroupedItems';
+import Media from './stories/Media';
+import MetaStory from './stories/Meta';
+import Nested from './stories/Nested';
+import Placement from './stories/Placement';
+import Size from './stories/Size';
+
 <Meta
   title="Packages/Dropdowns/Menu"
   component={Menu}
@@ -42,7 +54,12 @@ import { BUTTON_TYPE, ITEMS } from './stories/data';
       selectedItems: { control: false }
     }}
   >
-    {args => <MenuStory {...args} />}
+    {args => (
+      <>
+        <MenuStory button={BUTTON_TYPE[0]} items={ITEMS} label="Menu" />
+        <button>Click me</button>
+      </>
+    )}
   </Story>
 </Canvas>
 
@@ -68,9 +85,199 @@ import { BUTTON_TYPE, ITEMS } from './stories/data';
         const { type, ...rest } = changes;
         updateArgs(rest);
       };
-      return <MenuStory {...args} onChange={handleChange} />;
+      return (
+        <>
+          <MenuStory {...args} onChange={handleChange} />
+          <button>Click me</button>
+        </>
+      );
     }}
   </Story>
 </Canvas>
 
+# Arrow
+
+<Canvas>
+  <Story
+    name="Arrow"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <Arrow {...args} />}
+  </Story>
+</Canvas>
+
+# Button
+
+<Canvas>
+  <Story
+    name="Button"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+# Danger
+
+<Canvas>
+  <Story
+    name="Danger"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <Danger {...args} />}
+  </Story>
+</Canvas>
+
+# Default
+
+<Canvas>
+  <Story
+    name="Default"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <Default {...args} />}
+  </Story>
+</Canvas>
+
+# Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <Disabled {...args} />}
+  </Story>
+</Canvas>
+
+# Grouped Items
+
+<Canvas>
+  <Story
+    name="Grouped Items"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <GroupedItems {...args} />}
+  </Story>
+</Canvas>
+
+# Media
+
+<Canvas>
+  <Story
+    name="Media"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <Media {...args} />}
+  </Story>
+</Canvas>
+
+# Meta
+
+<Canvas>
+  <Story
+    name="Meta"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <MetaStory {...args} />}
+  </Story>
+</Canvas>
+
+# Nested
+
+<Canvas>
+  <Story
+    name="Nested"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <Nested {...args} />}
+  </Story>
+</Canvas>
+
+# Nested with adjacent button
+
+<Canvas>
+  <Story
+    name="Nested with adjacent button"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => (
+      <>
+        <Nested {...args} />
+        <button>Click me</button>
+      </>
+    )}
+  </Story>
+</Canvas>
+
+# Placement
+
+<Canvas>
+  <Story
+    name="Placement"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <Placement {...args} />}
+  </Story>
+</Canvas>
+
+# Size
+
+<Canvas>
+  <Story
+    name="Size"
+    argTypes={{
+      isExpanded: { control: false },
+      focusedValue: { control: false },
+      selectedItems: { control: false }
+    }}
+  >
+    {args => <Size {...args} />}
+  </Story>
+</Canvas>
+
 <Markdown>{README}</Markdown>

packages/dropdowns/demo/stories/Arrow.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable react/no-unstable-nested-components */
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React, { useCallback } from 'react';
+import { Grid } from '@zendeskgarden/react-grid';
+import { IconButton } from '@zendeskgarden/react-buttons';
+import { Menu, Item, IMenuProps } from '@zendeskgarden/react-dropdowns';
+import LeafIcon from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg';
+
+const Example = () => {
+  const handleChange = useCallback<NonNullable<IMenuProps['onChange']>>(changes => {
+    // eslint-disable-next-line no-alert
+    changes.value && alert(`You chose ${changes.value}`);
+  }, []);
+
+  return (
+    <Grid.Row justifyContent="center">
+      <Grid.Col textAlign="center">
+        <Menu
+          hasArrow
+          button={props => (
+            <IconButton {...props} aria-label="Choose a plant">
+              <LeafIcon />
+            </IconButton>
+          )}
+          onChange={handleChange}
+        >
+          <Item value="acacia">Acacia</Item>
+          <Item value="daisy">Daisy</Item>
+          <Item value="honeysuckle">Honeysuckle</Item>
+        </Menu>
+      </Grid.Col>
+    </Grid.Row>
+  );
+};
+
+export default Example;

packages/dropdowns/demo/stories/Button.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable react/no-unstable-nested-components */
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { Grid } from '@zendeskgarden/react-grid';
+import { Button } from '@zendeskgarden/react-buttons';
+import { Menu, Item } from '@zendeskgarden/react-dropdowns';
+import LeafIcon from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg';
+
+const Example = () => {
+  const handleChange = ({ value }: { value?: string }) => {
+    // eslint-disable-next-line no-alert
+    value && alert(`You chose ${value}`);
+  };
+
+  return (
+    <Grid.Row justifyContent="center">
+      <Grid.Col textAlign="center">
+        <Menu
+          button={props => (
+            <Button {...props} isPrimary>
+              <Button.StartIcon>
+                <LeafIcon />
+              </Button.StartIcon>
+              Pick flowers
+            </Button>
+          )}
+          onChange={handleChange}
+        >
+          <Item value="hydrangea">Hydrangea</Item>
+          <Item value="petunia">Petunia</Item>
+          <Item value="lily">Lily</Item>
+        </Menu>
+      </Grid.Col>
+    </Grid.Row>
+  );
+};
+
+export default Example;

packages/dropdowns/demo/stories/Danger.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React, { useCallback } from 'react';
+import { Grid } from '@zendeskgarden/react-grid';
+import LeafIcon from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg';
+import { Menu, Item, IMenuProps } from '@zendeskgarden/react-dropdowns';
+
+const Example = () => {
+  const handleChange = useCallback<NonNullable<IMenuProps['onChange']>>(changes => {
+    // eslint-disable-next-line no-alert
+    changes.value && alert(`You chose ${changes.value}`);
+  }, []);
+
+  return (
+    <Grid.Row justifyContent="center">
+      <Grid.Col textAlign="center">
+        <Menu button="Uproot" onChange={handleChange} buttonProps={{ isDanger: true }}>
+          <Item type="danger" value="acacia">
+            Acacia
+          </Item>
+          <Item type="danger" value="daisy">
+            Daisy
+            <Item.Meta>15 planted</Item.Meta>
+          </Item>
+          <Item type="danger" value="Honeysuckle">
+            Honeysuckle
+          </Item>
+          <Item type="danger" icon={<LeafIcon />} value="candytuft">
+            Candytuft
+          </Item>
+        </Menu>
+      </Grid.Col>
+    </Grid.Row>
+  );
+};
+
+export default Example;