ActionBar: Add ActionBar.Menu component

.changeset/busy-islands-fail.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+ActionBar: Adds `ActionBar.Group` sub component

e2e/components/drafts/ActionBar.test.ts

@@ -20,6 +20,22 @@ test.describe('ActionBar', () => {
     }
   })
 
+  test.describe('Groups', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'experimental-components-actionbar-examples--with-groups',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          expect(await page.screenshot()).toMatchSnapshot(`drafts.ActionBar.WithGroups.${theme}.png`)
+        })
+      })
+    }
+  })
+
   test.describe('ActionBar Interactions', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

packages/react/src/ActionBar/ActionBar.docs.json

@@ -82,6 +82,16 @@
     {
       "name": "ActionBar.Divider",
       "props": []
+    },
+    {
+      "name": "ActionBar.Group",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "defaultValue": ""
+        }
+      ]
     }
   ]
 }

packages/react/src/ActionBar/ActionBar.examples.stories.tsx

@@ -17,6 +17,7 @@ import {
   TasklistIcon,
   ReplyIcon,
   ThreeBarsIcon,
+  TrashIcon,
 } from '@primer/octicons-react'
 import {Button, Avatar, ActionMenu, IconButton, ActionList, Textarea} from '..'
 import {Dialog} from '../DialogV1'
@@ -28,6 +29,55 @@ export default {
   title: 'Experimental/Components/ActionBar/Examples',
 } as Meta<typeof ActionBar>
 
+export const WithGroups = () => (
+  <ActionBar aria-label="Toolbar">
+    <ActionBar.Group>
+      <>
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
+        <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
+        <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
+        <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
+      </>
+    </ActionBar.Group>
+    <ActionBar.Divider />
+    <ActionBar.Group>
+      <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
+      <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
+    </ActionBar.Group>
+    <ActionBar.Group>
+      <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
+      <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
+    </ActionBar.Group>
+    <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={ReplyIcon} aria-label="Saved Replies"></ActionBar.IconButton>
+  </ActionBar>
+)
+
+export const WithMenus = () => (
+  <ActionBar aria-label="Toolbar">
+    <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
+    <ActionBar.Divider />
+    <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
+    <ActionBar.Menu aria-label="More Actions" icon={ThreeBarsIcon}>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <PencilIcon />
+        </ActionList.LeadingVisual>
+        Edit
+      </ActionList.Item>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <TrashIcon />
+        </ActionList.LeadingVisual>
+        Delete
+      </ActionList.Item>
+    </ActionBar.Menu>
+  </ActionBar>
+)
+
 export const TextLabels = () => (
   <ActionBar aria-label="Toolbar">
     <Button>Edit</Button>

packages/react/src/ActionBar/ActionBar.module.css

@@ -33,3 +33,8 @@
     background: var(--borderColor-muted);
   }
 }
+
+.Group {
+  display: flex;
+  gap: inherit;
+}

packages/react/src/ActionBar/ActionBar.test.tsx

@@ -100,6 +100,32 @@ describe('ActionBar Registry System', () => {
     expect(buttons[2]).toHaveAccessibleName('Third')
   })
 
+  it('should preserve group order with deep nesting', () => {
+    render(
+      <ActionBar aria-label="Deep test">
+        <div>
+          <ActionBar.Group>
+            <ActionBar.IconButton icon={BoldIcon} aria-label="First" />
+          </ActionBar.Group>
+        </div>
+        <ActionBar.Group>
+          <ActionBar.IconButton icon={ItalicIcon} aria-label="Second" />
+        </ActionBar.Group>
+        <div>
+          <ActionBar.Group>
+            <ActionBar.IconButton icon={CodeIcon} aria-label="Third" />
+          </ActionBar.Group>
+        </div>
+      </ActionBar>,
+    )
+
+    const buttons = screen.getAllByRole('button')
+    expect(buttons).toHaveLength(3)
+    expect(buttons[0]).toHaveAccessibleName('First')
+    expect(buttons[1]).toHaveAccessibleName('Second')
+    expect(buttons[2]).toHaveAccessibleName('Third')
+  })
+
   it('should handle conditional rendering without breaking order', async () => {
     const ConditionalTest = () => {
       const [show, setShow] = useState([true, true, true])
@@ -108,7 +134,9 @@ describe('ActionBar Registry System', () => {
         <div>
           <ActionBar aria-label="Conditional">
             {show[0] && <ActionBar.IconButton icon={BoldIcon} aria-label="First" />}
-            {show[1] && <ActionBar.IconButton icon={ItalicIcon} aria-label="Second" />}
+            <ActionBar.Group>
+              {show[1] && <ActionBar.IconButton icon={ItalicIcon} aria-label="Second" />}
+            </ActionBar.Group>
             {show[2] && <ActionBar.IconButton icon={CodeIcon} aria-label="Third" />}
           </ActionBar>
           <button type="button" onClick={() => setShow([false, true, true])}>