Merge eb57b92 into 4e03ac2

primer · Oct 29, 2024 · f2a9919 · f2a9919
2 parents 4e03ac2 + eb57b92
commit f2a9919
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx
@@ -43,6 +43,14 @@ export const Default = () => (
   </ActionBar>
 )
 
+export const TextLabels = () => (
+  <ActionBar aria-label="Toolbar">
+    <Button>Edit</Button>
+    <Button>Duplicate</Button>
+    <Button>Export to CSV</Button>
+  </ActionBar>
+)
+
 export const SmallActionBar = () => (
   <ActionBar size="small" aria-label="Toolbar">
     <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>

diff --git a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -233,6 +233,64 @@ export const ShortcutMenu = () => {
   )
 }
 
+export const ContextMenu = () => {
+  const ListItemWithContextMenu = ({children}: {children: string}) => {
+    const handleContextMenu: React.MouseEventHandler<HTMLLIElement> = event => {
+      event.preventDefault()
+      setOpen(true)
+    }
+
+    const [open, setOpen] = React.useState(false)
+    const triggerRef = React.useRef<HTMLLIElement>(null)
+
+    return (
+      // We need to add an aria-label for improving support for more assistive technologies. For example: VoiceOver might not detect the `name` without `aria-label`
+      // Since this has a custom context menu, it's ok to add a tabIndex
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      <li ref={triggerRef} onContextMenu={handleContextMenu} tabIndex={0} aria-label={children}>
+        {children}
+        <ActionMenu open={open} onOpenChange={setOpen} anchorRef={triggerRef}>
+          <ActionMenu.Button sx={{visibility: 'hidden', height: 0}}>Anchor</ActionMenu.Button>
+          <ActionMenu.Overlay>
+            <ActionList>
+              <ActionList.Item>
+                Copy link
+                <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+              </ActionList.Item>
+              <ActionList.Item>
+                Quote reply
+                <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+              </ActionList.Item>
+              <ActionList.Item>
+                Edit comment
+                <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+              </ActionList.Item>
+              <ActionList.LinkItem href="#">View file</ActionList.LinkItem>
+              <ActionList.Divider />
+              <ActionList.Item variant="danger">
+                Delete file
+                <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+              </ActionList.Item>
+            </ActionList>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      </li>
+    )
+  }
+
+  return (
+    <>
+      <div>Right click the list items below to see the context menu</div>
+
+      <ul>
+        <ListItemWithContextMenu>List item one</ListItemWithContextMenu>
+        <ListItemWithContextMenu>List item two</ListItemWithContextMenu>
+        <ListItemWithContextMenu>List item three</ListItemWithContextMenu>
+      </ul>
+    </>
+  )
+}
+
 export const CustomAnchor = () => (
   <ActionMenu>
     <ActionMenu.Anchor>