@kaizen/components 1.68.12 → 1.69.0

package/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx

@@ -1,10 +1,9 @@
 import React, { FunctionComponent, ReactNode } from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
-import { Popover } from 'react-aria-components'
 import { Button } from '~components/__actions__/v3'
 import { Icon } from '~components/__future__/Icon'
-import { Menu, MenuItem, MenuTrigger } from '../index'
+import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuSection, MenuHeader } from '../index'
 
 const meta = {
   title: 'Actions/Menu/v3/Docs Assets',
@@ -13,7 +12,10 @@ const meta = {
     defaultOpen: isChromatic(),
     children: <></>,
   },
-  subcomponents: { Menu, MenuItem } as Record<string, FunctionComponent<any>>,
+  subcomponents: { Menu, MenuItem, MenuPopover, MenuSection, MenuHeader } as Record<
+    string,
+    FunctionComponent<any>
+  >,
 } satisfies Meta<typeof MenuTrigger>
 
 export default meta
@@ -41,12 +43,12 @@ export const Actions: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
           <MenuItem href="https://cultureamp.com">Action that navigates</MenuItem>
           <MenuItem onAction={() => null}>Non-navigation action</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -62,11 +64,11 @@ export const ItemsDo: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
           <DefaultMenuItems />
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -82,11 +84,11 @@ export const ItemsDont: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
           <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>Delete</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -98,12 +100,12 @@ export const SelectionDont: Story = {
         Sort by
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
           <MenuItem icon={<Icon name="check" isPresentational />}>Recommended</MenuItem>
           <MenuItem>Most recent</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -115,11 +117,11 @@ export const LabelChevronDo: Story = {
         Edit item
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
           <DefaultMenuItems />
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -128,11 +130,11 @@ export const LabelChevronDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
       <Button variant="secondary">Edit item</Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
           <DefaultMenuItems />
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -144,11 +146,11 @@ export const LabelDo: Story = {
         Actions [visually hidden], conversation with Harper[/visually hidden]
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu {...args}>
           <DefaultMenuItems />
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -160,11 +162,11 @@ export const LabelDont: Story = {
         Open menu
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu {...args}>
           <DefaultMenuItems />
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -180,7 +182,7 @@ export const IconsDont: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu {...args}>
           <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>
             Edit &lsquo;Strengths&rsquo;
@@ -191,7 +193,7 @@ export const IconsDont: Story = {
           <MenuItem>Export PDF</MenuItem>
           <MenuItem>Export Powerpoint</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -207,13 +209,13 @@ export const MenuItemLabelsDont: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu {...args}>
           <MenuItem>Save comment</MenuItem>
           <MenuItem>Edit comment</MenuItem>
           <MenuItem>Delete comment</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -229,13 +231,13 @@ export const SentenceCaseDo: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu {...args}>
           <MenuItem>Quick export</MenuItem>
           <MenuItem>Open a copy</MenuItem>
           <MenuItem>Share a link</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -251,13 +253,13 @@ export const SentenceCaseDont: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu {...args}>
           <MenuItem>Quick Export</MenuItem>
           <MenuItem>Open A Copy</MenuItem>
           <MenuItem>Share A Link</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -273,13 +275,13 @@ export const ElipsesDo: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu {...args}>
           <MenuItem>Quick export</MenuItem>
           <MenuItem>Open a copy</MenuItem>
           <MenuItem>Share a link</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -295,13 +297,13 @@ export const ElipsesDont: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu {...args}>
           <MenuItem>Quick export…</MenuItem>
           <MenuItem>Open a copy…</MenuItem>
           <MenuItem>Share a link…</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }

package/src/__actions__/Menu/v3/_docs/Menu.mdx

@@ -1,23 +1,14 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks'
-import {
-  ResourceLinks,
-  SbContent,
-  Installation,
-  DosAndDonts,
-  DoOrDont,
-} from '~storybook/components'
+import { ResourceLinks, Installation, DosAndDonts, DoOrDont } from '~storybook/components'
 import * as MenuDocsStories from './Menu.docs.stories'
 import * as MenuStories from './Menu.stories'
 
 <Meta title="Actions/Menu/v3/Usage Guidelines" />
 
-<SbContent>
-  # Menu (v3)
+# Menu (v3)
 
 Updated July 6, 2024
 
-</SbContent>
-
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Menu"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?m=auto&node-id=6262-0&t=I4H23jCrCJz4O2nf-1"
@@ -25,41 +16,37 @@ Updated July 6, 2024
   apiSpecification="/?path=/docs/actions-menu-v3-api-specification--docs"
 />
 
-<SbContent>
-  <Installation
-    installCommand="pnpm add @kaizen/components"
-    importStatement='import { MenuTrigger, Menu, MenuItem } from "@kaizen/components/v3/actions"'
-  />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { MenuTrigger, Menu, MenuItem, MenuPopover, MenuSection, MenuHeader } from "@kaizen/components/v3/actions"'
+/>
 
 ## Overview
 
 A menu displays a list of actions in a popover, toggled opened with a button.
 
-</SbContent>
-
 <Canvas
   of={MenuStories.Playground}
   source={{
     code: `
-<TooltipTrigger>
+<MenuTrigger>
   <Button>
     <Icon name="more_horiz" alt="Additional actions" />
   </Button>
-  <Popover>
+  <MenuPopover>
     <Menu>
       <MenuItem>Save</MenuItem>
       <MenuItem>Edit</MenuItem>
       <MenuItem>Delete</MenuItem>
     </Menu>
-  </Popover>
-</TooltipTrigger>
+  </MenuPopover>
+</MenuTrigger>
   `,
   }}
 />
 <Controls of={MenuStories.Playground} include={['placement', 'isOpen']} className="mb-64" />
 
-<SbContent className="mb-64">
-  ### Anatomy
+### Anatomy
 
 - A Menu is made up of:
   - A trigger button
@@ -68,17 +55,11 @@ A menu displays a list of actions in a popover, toggled opened with a button.
 - Menu items may be organised into sections, with a heading for each section.
 - The menu trigger button, which may be any variation of a button.
 
-</SbContent>
-
-<SbContent className="mb-64">
   ### When to use
 
 - When you have a group of related actions for a page or item on the page.
 - The actions either: - Cause an action on the page (e.g. delete), or - Navigate somewhere
 
-</SbContent>
-
-<SbContent className="mb-64">
   ### When not to use
 
 - When you want to persist a user selection.
@@ -88,128 +69,84 @@ A menu displays a list of actions in a popover, toggled opened with a button.
   - It's recommended that you avoid this because of the complexity it adds for accessibility.
 - Inside a navigation bar - Different DOM elements and behaviour is required for a dropdown menu in a navigation bar.
 
-</SbContent>
-
-<div className="flex flex-col mt-16 gap-40 mb-64">
-  <div className="flex flex-col m-0 gap-16">
-    <SbContent>
-      #### Do use a menu for an overflow of actions
-      Menus work well as an overflow for a list of actions on a page or section. Try to avoid using menus for a single action, favouring an inline button/link instead.
-
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={MenuDocsStories.ItemsDo} />
-      <DoOrDont story={MenuDocsStories.ItemsDont} isDont />
-    </DosAndDonts>
-
-  </div>
-</div>
-
-<div className="flex flex-col mt-16 gap-40 mb-64">
-  <div className="flex flex-col m-0 gap-16">
-    <SbContent>
-      #### Don't use Menus to persist a user selection
-
-      Menus are not intended for a list of options where a user selection persists. Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
-
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={MenuDocsStories.SelectionDont} isDont />
-    </DosAndDonts>
-
-  </div>
-</div>
-
-<div className="flex flex-col mt-16 gap-40 mb-64">
-  <div className="flex flex-col m-0 gap-16">
-    <SbContent>
-      #### Do use a chevron icon when using a text label
-      Providing this icon is an important part of visually communicating that the button triggers a menu.
-
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={MenuDocsStories.LabelChevronDo} />
-      <DoOrDont story={MenuDocsStories.LabelChevronDont} isDont />
-    </DosAndDonts>
-
-  </div>
-</div>
-
-<div className="flex flex-col mt-16 gap-40 mb-64">
-  <div className="flex flex-col m-0 gap-16">
-    <SbContent>
-      #### Do give the trigger button a concise and unique label
-      The label of the trigger button will be important for screen reader users to understand the purpose of the menu.
-
-      Menu button labels are often too generic and need context added. E.g. a label of &ldquo;Actions&rdquo; is too generic if you have multiple menus on a single page.
-
-      Avoid using the words &ldquo;Open/close&rdquo; or  &ldquo;Menu&rdquo; in the label, both of these things are communicated to screen reader users already with ARIA properties.
-
-      The following examples show you the verbose labels. In practice you will either want to use visually hidden text (when using a text-based trigger button), or an aria-label (when using an icon-based trigger button) to create the label.
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={MenuDocsStories.LabelDo} />
-      <DoOrDont story={MenuDocsStories.LabelDont} isDont />
-    </DosAndDonts>
-
-  </div>
-</div>
-
-<div className="flex flex-col mt-16 gap-40 mb-64">
-  <div className="flex flex-col m-0 gap-16">
-    <SbContent>
-      #### Do use icons in menu items for common actions
-      Icons beside items make sense for common actions (pencil for edit, trash can for delete, etc).
-
-      Avoid using icons when:
-      - The action is unique and doesn't have a commonly known icon associated.
-      - Not all menu items will have an icon
-      - You will have duplicates of icons in the list
-
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={MenuDocsStories.ItemsDo} />
-      <DoOrDont story={MenuDocsStories.IconsDont} isDont />
-    </DosAndDonts>
-
-  </div>
-</div>
-
-<div className="flex flex-col mt-16 gap-40 mb-64">
-  <div className="flex flex-col m-0 gap-16">
-    <SbContent>
-      #### Don't repeat the same word in the menu item labels Context may be useful in some cases,
-      but avoid adding context if it will be repeated in every menu item label.
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={MenuDocsStories.MenuItemLabelsDont} isDont />
-    </DosAndDonts>
-  </div>
-</div>
-
-<div className="flex flex-col mt-16 gap-40 mb-64">
-  <div className="flex flex-col m-0 gap-16">
-    <SbContent>
-      #### Do use sentence case for menu items Write menu items in sentence case unless they contain
-      words that are branded terms.
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={MenuDocsStories.SentenceCaseDo} />
-      <DoOrDont story={MenuDocsStories.SentenceCaseDont} isDont />
-    </DosAndDonts>
-  </div>
-</div>
-
-<div className="flex flex-col mt-16 gap-40 mb-64">
-  <div className="flex flex-col m-0 gap-16">
-    <SbContent>
-      #### Don't use elipses in menu items Avoid using ellipses (…) in menu item names within
-      products whenever possible. An ellipsis often implies that the action for a menu item will
-      open in a new view, or that a user will be taken elsewhere.
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={MenuDocsStories.ElipsesDo} />
-      <DoOrDont story={MenuDocsStories.ElipsesDont} isDont />
-    </DosAndDonts>
-  </div>
-</div>
+#### Do use a menu for an overflow of actions
+
+Menus work well as an overflow for a list of actions on a page or section. Try to avoid using menus for a single action, favouring an inline button/link instead.
+
+<DosAndDonts>
+  <DoOrDont story={MenuDocsStories.ItemsDo} />
+  <DoOrDont story={MenuDocsStories.ItemsDont} isDont />
+</DosAndDonts>
+
+#### Don't use Menus to persist a user selection
+
+Menus are not intended for a list of options where a user selection persists. Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
+
+<DosAndDonts>
+  <DoOrDont story={MenuDocsStories.SelectionDont} isDont />
+</DosAndDonts>
+
+#### Do use a chevron icon when using a text label
+
+Providing this icon is an important part of visually communicating that the button triggers a menu.
+
+<DosAndDonts>
+  <DoOrDont story={MenuDocsStories.LabelChevronDo} />
+  <DoOrDont story={MenuDocsStories.LabelChevronDont} isDont />
+</DosAndDonts>
+
+#### Do give the trigger button a concise and unique label
+
+The label of the trigger button will be important for screen reader users to understand the purpose of the menu.
+
+Menu button labels are often too generic and need context added. E.g. a label of &ldquo;Actions&rdquo; is too generic if you have multiple menus on a single page.
+
+Avoid using the words &ldquo;Open/close&rdquo; or &ldquo;Menu&rdquo; in the label, both of these things are communicated to screen reader users already with ARIA properties.
+
+The following examples show you the verbose labels. In practice you will either want to use visually hidden text (when using a text-based trigger button), or an aria-label (when using an icon-based trigger button) to create the label.
+
+<DosAndDonts>
+  <DoOrDont story={MenuDocsStories.LabelDo} />
+  <DoOrDont story={MenuDocsStories.LabelDont} isDont />
+</DosAndDonts>
+
+#### Do use icons in menu items for common actions
+
+Icons beside items make sense for common actions (pencil for edit, trash can for delete, etc).
+
+Avoid using icons when:
+
+- The action is unique and doesn't have a commonly known icon associated.
+- Not all menu items will have an icon
+- You will have duplicates of icons in the list
+
+<DosAndDonts>
+  <DoOrDont story={MenuDocsStories.ItemsDo} />
+  <DoOrDont story={MenuDocsStories.IconsDont} isDont />
+</DosAndDonts>
+
+#### Don't repeat the same word in the menu item labels
+
+Context may be useful in some cases, but avoid adding context if it will be repeated in every menu item label.
+
+<DosAndDonts>
+  <DoOrDont story={MenuDocsStories.MenuItemLabelsDont} isDont />
+</DosAndDonts>
+
+#### Do use sentence case for menu items
+
+Write menu items in sentence case unless they contain words that are branded terms.
+
+<DosAndDonts>
+  <DoOrDont story={MenuDocsStories.SentenceCaseDo} />
+  <DoOrDont story={MenuDocsStories.SentenceCaseDont} isDont />
+</DosAndDonts>
+
+#### Don't use elipses in menu items
+
+Avoid using ellipses (…) in menu item names within products whenever possible. An ellipsis often implies that the action for a menu item will open in a new view, or that a user will be taken elsewhere.
+
+<DosAndDonts>
+  <DoOrDont story={MenuDocsStories.ElipsesDo} />
+  <DoOrDont story={MenuDocsStories.ElipsesDont} isDont />
+</DosAndDonts>

package/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx

@@ -2,10 +2,9 @@ import React, { useState } from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import { expect, userEvent, waitFor, within, fn } from '@storybook/test'
 import isChromatic from 'chromatic'
-import { Popover, Header, Section } from 'react-aria-components'
 import { Button } from '~components/__actions__/v3'
 import { Icon } from '~components/__future__/Icon'
-import { Menu, MenuItem, MenuTrigger } from '../index'
+import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuHeader, MenuSection } from '../index'
 
 const meta = {
   title: 'Actions/Menu/v3/Tests',
@@ -44,10 +43,10 @@ export const KitchenSink: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
-          <Section>
-            <Header>Section One</Header>
+          <MenuSection>
+            <MenuHeader>Section One</MenuHeader>
             <MenuItem
               icon={<Icon name="bookmark" isPresentational />}
               href="https://cultureamp.com"
@@ -55,14 +54,14 @@ export const KitchenSink: Story = {
               Save
             </MenuItem>
             <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>Edit</MenuItem>
-          </Section>
-          <Section>
+          </MenuSection>
+          <MenuSection>
             <MenuItem icon={<Icon name="arrow_upward" isPresentational />}>Move Up</MenuItem>
             <MenuItem icon={<Icon name="arrow_downward" isPresentational />}>
               Menu item with a longer label
             </MenuItem>
-          </Section>
-          <Section>
+          </MenuSection>
+          <MenuSection>
             <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>Delete</MenuItem>
             <MenuItem icon={<Icon name="delete" isPresentational isFilled />} isDisabled>
               Delete but disabled
@@ -70,9 +69,9 @@ export const KitchenSink: Story = {
             <MenuItem>Other action</MenuItem>
             <MenuItem>Other action</MenuItem>
             <MenuItem>Other action</MenuItem>
-          </Section>
+          </MenuSection>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -89,7 +88,7 @@ export const Basic: Story = {
         Additional actions
       </Button>
 
-      <Popover>
+      <MenuPopover>
         <Menu>
           <MenuItem
             icon={<Icon name="warning" isPresentational isFilled />}
@@ -108,7 +107,7 @@ export const Basic: Story = {
           <MenuItem>Item 4</MenuItem>
           <MenuItem>Item 5</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
   play: async ({ canvasElement, step }) => {
@@ -165,7 +164,7 @@ export const DisabledItems: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
           <MenuItem isDisabled onAction={mockOnClick}>
             Item 1
@@ -175,7 +174,7 @@ export const DisabledItems: Story = {
           <MenuItem>Item 4</MenuItem>
           <MenuItem>Item 5</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
   play: async ({ canvasElement, step }) => {
@@ -210,22 +209,22 @@ export const WithSections: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
-          <Section>
-            <Header>Section One</Header>
+          <MenuSection>
+            <MenuHeader>Section One</MenuHeader>
             <MenuItem>Item 1</MenuItem>
             <MenuItem>Item 2</MenuItem>
-          </Section>
+          </MenuSection>
 
-          <Section>
-            <Header>Section Two</Header>
+          <MenuSection>
+            <MenuHeader>Section Two</MenuHeader>
             <MenuItem>Item 3</MenuItem>
             <MenuItem>Item 4</MenuItem>
             <MenuItem>Item 5</MenuItem>
-          </Section>
+          </MenuSection>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -246,7 +245,7 @@ export const Controlled: Story = {
           >
             Additional actions
           </Button>
-          <Popover>
+          <MenuPopover>
             <Menu>
               <MenuItem>Item 1</MenuItem>
               <MenuItem onAction={() => setOpen(true)}>Item 2</MenuItem>
@@ -254,7 +253,7 @@ export const Controlled: Story = {
               <MenuItem>Item 4</MenuItem>
               <MenuItem>Item 5</MenuItem>
             </Menu>
-          </Popover>
+          </MenuPopover>
         </MenuTrigger>
       </>
     )