From 85ccd4db8928a1177784b2f3851805f34031d4a7 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 10 Oct 2025 11:25:43 -0400
Subject: [PATCH 01/12] Add  component

---
 .../ActionBar/ActionBar.examples.stories.tsx  |  25 ++++
 packages/react/src/ActionBar/ActionBar.tsx    | 132 ++++++++++++++++--
 packages/react/src/ActionBar/index.ts         |   3 +-
 3 files changed, 147 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
index d7c18e79123..e8fdc884034 100644
--- a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
@@ -28,6 +28,31 @@ export default {
   title: 'Experimental/Components/ActionBar/Examples',
 } as Meta<typeof ActionBar>
 
+export const Groups = () => (
+  <ActionBar aria-label="Toolbar">
+    <ActionBar.Group label="Text formatting">
+      <>
+        <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 label="Insert">
+      <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
+      <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
+    </ActionBar.Group>
+    <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
+    <ActionBar.Group label="Lists">
+      <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
+      <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
+      <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
+    </ActionBar.Group>
+    <ActionBar.IconButton icon={ReplyIcon} aria-label="Saved Replies"></ActionBar.IconButton>
+  </ActionBar>
+)
+
 export const TextLabels = () => (
   <ActionBar aria-label="Toolbar">
     <Button>Edit</Button>
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index eacec560051..0ce2c64a458 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -26,8 +26,11 @@ type ChildProps =
       icon: ActionBarIconButtonProps['icon']
       onClick: MouseEventHandler
       width: number
+      groupId?: string
+      groupLabel?: string
     }
   | {type: 'divider'; width: number}
+  | {type: 'group'; width: number; label: string}
 
 /**
  * Registry of descendants to render in the list or menu. To preserve insertion order across updates, children are
@@ -38,9 +41,18 @@ type ChildRegistry = ReadonlyMap<string, ChildProps | null>
 const ActionBarContext = React.createContext<{
   size: Size
   registerChild: (id: string, props: ChildProps) => void
-  unregisterChild: (id: string) => void
+  unregisterChild: (id: string, groupId?: string) => void
   isVisibleChild: (id: string) => boolean
-}>({size: 'medium', registerChild: () => {}, unregisterChild: () => {}, isVisibleChild: () => true})
+  groupId?: string
+  groupLabel?: string
+}>({
+  size: 'medium',
+  registerChild: () => {},
+  unregisterChild: () => {},
+  isVisibleChild: () => true,
+  groupId: undefined,
+  groupLabel: undefined,
+})
 
 /*
 small (28px), medium (32px), large (40px)
@@ -107,7 +119,10 @@ const getMenuItems = (
   childRegistry: ChildRegistry,
   hasActiveMenu: boolean,
 ): Set<string> | void => {
-  const registryEntries = Array.from(childRegistry).filter((entry): entry is [string, ChildProps] => entry[1] !== null)
+  const registryEntries = Array.from(childRegistry).filter(
+    (entry): entry is [string, ChildProps] =>
+      entry[1] !== null && (entry[1].type !== 'action' || entry[1].groupId === undefined),
+  )
 
   if (registryEntries.length === 0) return new Set()
   const numberOfItemsPossible = calculatePossibleItems(registryEntries, navWidth)
@@ -155,11 +170,17 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
 
   const [childRegistry, setChildRegistry] = useState<ChildRegistry>(() => new Map())
 
-  const registerChild = useCallback(
-    (id: string, childProps: ChildProps) => setChildRegistry(prev => new Map(prev).set(id, childProps)),
-    [],
-  )
-  const unregisterChild = useCallback((id: string) => setChildRegistry(prev => new Map(prev).set(id, null)), [])
+  const registerChild = useCallback((id: string, childProps: ChildProps) => {
+    setChildRegistry(prev => {
+      return new Map(prev).set(id, childProps)
+    })
+  }, [])
+
+  const unregisterChild = useCallback((id: string) => {
+    setChildRegistry(prev => {
+      return new Map(prev).set(id, null)
+    })
+  }, [])
 
   const [menuItemIds, setMenuItemIds] = useState<Set<string>>(() => new Set())
 
@@ -234,11 +255,11 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
 
                     if (menuItem.type === 'divider') {
                       return <ActionList.Divider key={id} />
-                    } else {
+                    } else if (menuItem.type === 'action' && !menuItem.groupLabel) {
                       const {onClick, icon: Icon, label, disabled} = menuItem
                       return (
                         <ActionList.Item
-                          key={label}
+                          key={id}
                           // eslint-disable-next-line primer-react/prefer-action-list-item-onselect
                           onClick={(event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
                             closeOverlay()
@@ -254,6 +275,49 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                         </ActionList.Item>
                       )
                     }
+
+                    const groupedItems = Array.from(childRegistry).filter(([, childProps]) => {
+                      if (childProps?.type !== 'action') return false
+                      if (childProps.groupId !== id) return false
+                      return true
+                    })
+
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    if (menuItem.type === 'group') {
+                      return (
+                        <ActionMenu key={id}>
+                          <ActionMenu.Anchor>
+                            <ActionList.Item>{menuItem.label}</ActionList.Item>
+                          </ActionMenu.Anchor>
+                          <ActionMenu.Overlay>
+                            <ActionList>
+                              {groupedItems.map(([key, childProps]) => {
+                                if (childProps && childProps.type === 'action') {
+                                  const {onClick, icon: Icon, label, disabled} = childProps
+                                  return (
+                                    <ActionList.Item
+                                      key={key}
+                                      onSelect={event => {
+                                        closeOverlay()
+                                        focusOnMoreMenuBtn()
+                                        typeof onClick === 'function' && onClick(event as React.MouseEvent<HTMLElement>)
+                                      }}
+                                      disabled={disabled}
+                                    >
+                                      <ActionList.LeadingVisual>
+                                        <Icon />
+                                      </ActionList.LeadingVisual>
+                                      {label}
+                                    </ActionList.Item>
+                                  )
+                                }
+                                return null
+                              })}
+                            </ActionList>
+                          </ActionMenu.Overlay>
+                        </ActionMenu>
+                      )
+                    }
                   })}
                 </ActionList>
               </ActionMenu.Overlay>
@@ -272,6 +336,7 @@ export const ActionBarIconButton = forwardRef(
     const id = useId()
 
     const {size, registerChild, unregisterChild, isVisibleChild} = React.useContext(ActionBarContext)
+    const {groupId} = React.useContext(ActionBarGroupContext)
 
     // Storing the width in a ref ensures we don't forget about it when not visible
     const widthRef = useRef<number>()
@@ -288,9 +353,12 @@ export const ActionBarIconButton = forwardRef(
         disabled: !!disabled,
         onClick: onClick as MouseEventHandler,
         width: widthRef.current,
+        groupId: groupId ?? undefined, // todo: remove conditional
       })
 
-      return () => unregisterChild(id)
+      return () => {
+        unregisterChild(id)
+      }
     }, [registerChild, unregisterChild, props['aria-label'], props.icon, disabled, onClick])
 
     const clickHandler = useCallback(
@@ -301,7 +369,7 @@ export const ActionBarIconButton = forwardRef(
       [disabled, onClick],
     )
 
-    if (!isVisibleChild(id)) return null
+    if (!isVisibleChild(id) || (groupId && !isVisibleChild(groupId))) return null
 
     return (
       <IconButton
@@ -311,11 +379,51 @@ export const ActionBarIconButton = forwardRef(
         onClick={clickHandler}
         {...props}
         variant="invisible"
+        data-testid={id}
       />
     )
   },
 )
 
+const ActionBarGroupContext = React.createContext<{
+  groupId: string | null
+  label: string | undefined
+}>({groupId: null, label: undefined})
+
+type ActionBarGroupProps = {
+  label: string
+}
+
+export const ActionBarGroup = forwardRef(
+  ({label, children}: React.PropsWithChildren<ActionBarGroupProps>, forwardedRef) => {
+    const backupRef = useRef<HTMLDivElement>(null)
+    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLDivElement>
+    const id = useId()
+    const {registerChild, unregisterChild} = React.useContext(ActionBarContext)
+
+    // Storing the width in a ref ensures we don't forget about it when not visible
+    const widthRef = useRef<number>()
+
+    useIsomorphicLayoutEffect(() => {
+      const width = ref.current?.getBoundingClientRect().width
+      if (width) widthRef.current = width
+      if (!widthRef.current) return
+
+      registerChild(id, {type: 'group', width: widthRef.current, label})
+
+      return () => {
+        unregisterChild(id)
+      }
+    }, [registerChild, unregisterChild])
+
+    return (
+      <ActionBarGroupContext.Provider value={{groupId: id, label}}>
+        <div ref={ref}>{children}</div>
+      </ActionBarGroupContext.Provider>
+    )
+  },
+)
+
 export const VerticalDivider = () => {
   const ref = useRef<HTMLDivElement>(null)
   const id = useId()
diff --git a/packages/react/src/ActionBar/index.ts b/packages/react/src/ActionBar/index.ts
index 64bf265ed8f..68db283a292 100644
--- a/packages/react/src/ActionBar/index.ts
+++ b/packages/react/src/ActionBar/index.ts
@@ -1,9 +1,10 @@
-import {ActionBar as Bar, ActionBarIconButton, VerticalDivider} from './ActionBar'
+import {ActionBar as Bar, ActionBarIconButton, VerticalDivider, ActionBarGroup} from './ActionBar'
 export type {ActionBarProps} from './ActionBar'
 
 const ActionBar = Object.assign(Bar, {
   IconButton: ActionBarIconButton,
   Divider: VerticalDivider,
+  Group: ActionBarGroup,
 })
 
 export default ActionBar

From 2b1871d3212251a080ec7b31b3950e59656536ef Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 10 Oct 2025 11:28:07 -0400
Subject: [PATCH 02/12] Clean up function

---
 packages/react/src/ActionBar/ActionBar.tsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 0ce2c64a458..909edf59ab4 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -170,17 +170,11 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
 
   const [childRegistry, setChildRegistry] = useState<ChildRegistry>(() => new Map())
 
-  const registerChild = useCallback((id: string, childProps: ChildProps) => {
-    setChildRegistry(prev => {
-      return new Map(prev).set(id, childProps)
-    })
-  }, [])
-
-  const unregisterChild = useCallback((id: string) => {
-    setChildRegistry(prev => {
-      return new Map(prev).set(id, null)
-    })
-  }, [])
+  const registerChild = useCallback(
+    (id: string, childProps: ChildProps) => setChildRegistry(prev => new Map(prev).set(id, childProps)),
+    [],
+  )
+  const unregisterChild = useCallback((id: string) => setChildRegistry(prev => new Map(prev).set(id, null)), [])
 
   const [menuItemIds, setMenuItemIds] = useState<Set<string>>(() => new Set())
 

From f8e21be0c9c8add838bc94e209561c5b63f5b56d Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 10 Oct 2025 11:29:20 -0400
Subject: [PATCH 03/12] Add comment

---
 packages/react/src/ActionBar/ActionBar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 909edf59ab4..1ac522c2862 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -395,7 +395,8 @@ export const ActionBarGroup = forwardRef(
     const id = useId()
     const {registerChild, unregisterChild} = React.useContext(ActionBarContext)
 
-    // Storing the width in a ref ensures we don't forget about it when not visible
+    // Like IconButton, we store the width in a ref ensures we don't forget about it when not visible
+    // If a child has a groupId, it won't be visible if the group isn't visible, so we don't need to check isVisibleChild here
     const widthRef = useRef<number>()
 
     useIsomorphicLayoutEffect(() => {

From dbcc75bb1bbb22ef14cfc308d9c4feeb407115e0 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 10 Oct 2025 12:29:53 -0400
Subject: [PATCH 04/12] Update story

---
 packages/react/src/ActionBar/ActionBar.examples.stories.tsx | 3 +--
 packages/react/src/ActionBar/ActionBar.module.css           | 4 ++++
 packages/react/src/ActionBar/ActionBar.tsx                  | 4 +++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
index e8fdc884034..ea418bf2cdb 100644
--- a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
@@ -43,12 +43,11 @@ export const Groups = () => (
       <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
       <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
     </ActionBar.Group>
-    <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
     <ActionBar.Group label="Lists">
       <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
       <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
-      <ActionBar.IconButton icon={TasklistIcon} aria-label="Task 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>
 )
diff --git a/packages/react/src/ActionBar/ActionBar.module.css b/packages/react/src/ActionBar/ActionBar.module.css
index d795c7b57a8..5381eeee94e 100644
--- a/packages/react/src/ActionBar/ActionBar.module.css
+++ b/packages/react/src/ActionBar/ActionBar.module.css
@@ -33,3 +33,7 @@
     background: var(--borderColor-muted);
   }
 }
+
+.Group {
+  display: flex;
+}
\ No newline at end of file
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 1ac522c2862..d6eac5a32ae 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -413,7 +413,9 @@ export const ActionBarGroup = forwardRef(
 
     return (
       <ActionBarGroupContext.Provider value={{groupId: id, label}}>
-        <div ref={ref}>{children}</div>
+        <div className={styles.Group} ref={ref}>
+          {children}
+        </div>
       </ActionBarGroupContext.Provider>
     )
   },

From b2bff28a474899a203d615c018eb5e6f408277f9 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 10 Oct 2025 12:42:28 -0400
Subject: [PATCH 05/12] Fix lint issue

---
 packages/react/src/ActionBar/ActionBar.module.css | 2 +-
 packages/react/src/ActionBar/ActionBar.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.module.css b/packages/react/src/ActionBar/ActionBar.module.css
index 5381eeee94e..3dffb07cae5 100644
--- a/packages/react/src/ActionBar/ActionBar.module.css
+++ b/packages/react/src/ActionBar/ActionBar.module.css
@@ -36,4 +36,4 @@
 
 .Group {
   display: flex;
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index d6eac5a32ae..884233aca12 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -270,13 +270,13 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                       )
                     }
 
+                    // TODO: refine this so that we don't have to loop through the registry multiple times
                     const groupedItems = Array.from(childRegistry).filter(([, childProps]) => {
                       if (childProps?.type !== 'action') return false
                       if (childProps.groupId !== id) return false
                       return true
                     })
 
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     if (menuItem.type === 'group') {
                       return (
                         <ActionMenu key={id}>

From 20dd785dc7caed033325dfaba6e9e66eb7f2b51c Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 13 Oct 2025 10:33:33 -0400
Subject: [PATCH 06/12] Update docs, tests

---
 .../react/src/ActionBar/ActionBar.docs.json   | 16 ++++++++++
 .../ActionBar/ActionBar.examples.stories.tsx  |  2 +-
 .../react/src/ActionBar/ActionBar.test.tsx    | 30 ++++++++++++++++++-
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.docs.json b/packages/react/src/ActionBar/ActionBar.docs.json
index 79a9c68f9f6..3257f05f766 100644
--- a/packages/react/src/ActionBar/ActionBar.docs.json
+++ b/packages/react/src/ActionBar/ActionBar.docs.json
@@ -82,6 +82,22 @@
     {
       "name": "ActionBar.Divider",
       "props": []
+    },
+    {
+      "name": "ActionBar.Group",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "Label for the group. This is utilized within the overflow menu to provide context for the group of actions."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "defaultValue": ""
+        }
+      ]
     }
   ]
 }
diff --git a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
index ea418bf2cdb..d9001921788 100644
--- a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
@@ -28,7 +28,7 @@ export default {
   title: 'Experimental/Components/ActionBar/Examples',
 } as Meta<typeof ActionBar>
 
-export const Groups = () => (
+export const WithGroups = () => (
   <ActionBar aria-label="Toolbar">
     <ActionBar.Group label="Text formatting">
       <>
diff --git a/packages/react/src/ActionBar/ActionBar.test.tsx b/packages/react/src/ActionBar/ActionBar.test.tsx
index 21139a9cb8e..a0c10351f37 100644
--- a/packages/react/src/ActionBar/ActionBar.test.tsx
+++ b/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 label="First Group">
+            <ActionBar.IconButton icon={BoldIcon} aria-label="First" />
+          </ActionBar.Group>
+        </div>
+        <ActionBar.Group label="Second Group">
+          <ActionBar.IconButton icon={ItalicIcon} aria-label="Second" />
+        </ActionBar.Group>
+        <div>
+          <ActionBar.Group label="Third 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 label="Second 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])}>

From 29f7f97e1fdbd45b81af372cb5faa9134fe84360 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 13 Oct 2025 10:34:42 -0400
Subject: [PATCH 07/12] Add changeset

---
 .changeset/busy-islands-fail.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/busy-islands-fail.md

diff --git a/.changeset/busy-islands-fail.md b/.changeset/busy-islands-fail.md
new file mode 100644
index 00000000000..dd1030b2ad3
--- /dev/null
+++ b/.changeset/busy-islands-fail.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+ActionBar: Adds `ActionBar.Group` sub component

From 7538ee408ba8497e64e24a0c9a4089bd009d53c2 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 21 Oct 2025 11:30:50 -0400
Subject: [PATCH 08/12] Remove menu functionality from groups

---
 packages/react/src/ActionBar/ActionBar.tsx | 80 ++++++++++++----------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 1cb7975fe5c..63ef0772997 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -238,6 +238,19 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     focusOutBehavior: 'wrap',
   })
 
+  const groupedItems = React.useMemo(() => {
+    const groupedItemsMap = new Map<string, Array<[string, ChildProps]>>()
+
+    for (const [key, childProps] of childRegistry) {
+      if (childProps?.type === 'action' && childProps.groupId) {
+        const existingGroup = groupedItemsMap.get(childProps.groupId) || []
+        existingGroup.push([key, childProps])
+        groupedItemsMap.set(childProps.groupId, existingGroup)
+      }
+    }
+    return groupedItemsMap
+  }, [childRegistry])
+
   return (
     <ActionBarContext.Provider value={{size, registerChild, unregisterChild, isVisibleChild}}>
       <div ref={navRef} className={clsx(className, styles.Nav)} data-flush={flush}>
@@ -263,7 +276,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
 
                     if (menuItem.type === 'divider') {
                       return <ActionList.Divider key={id} />
-                    } else if (menuItem.type === 'action' && !menuItem.groupLabel) {
+                    } else if (menuItem.type === 'action') {
                       const {onClick, icon: Icon, label, disabled} = menuItem
                       return (
                         <ActionList.Item
@@ -284,46 +297,37 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                       )
                     }
 
-                    // TODO: refine this so that we don't have to loop through the registry multiple times
-                    const groupedItems = Array.from(childRegistry).filter(([, childProps]) => {
-                      if (childProps?.type !== 'action') return false
-                      if (childProps.groupId !== id) return false
-                      return true
-                    })
+                    // Use the memoized map instead of filtering each time
+                    const groupedMenuItems = groupedItems.get(id) || []
 
+                    // If we ever add additional types, this condition will be necessary
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     if (menuItem.type === 'group') {
                       return (
-                        <ActionMenu key={id}>
-                          <ActionMenu.Anchor>
-                            <ActionList.Item>{menuItem.label}</ActionList.Item>
-                          </ActionMenu.Anchor>
-                          <ActionMenu.Overlay>
-                            <ActionList>
-                              {groupedItems.map(([key, childProps]) => {
-                                if (childProps && childProps.type === 'action') {
-                                  const {onClick, icon: Icon, label, disabled} = childProps
-                                  return (
-                                    <ActionList.Item
-                                      key={key}
-                                      onSelect={event => {
-                                        closeOverlay()
-                                        focusOnMoreMenuBtn()
-                                        typeof onClick === 'function' && onClick(event as React.MouseEvent<HTMLElement>)
-                                      }}
-                                      disabled={disabled}
-                                    >
-                                      <ActionList.LeadingVisual>
-                                        <Icon />
-                                      </ActionList.LeadingVisual>
-                                      {label}
-                                    </ActionList.Item>
-                                  )
-                                }
-                                return null
-                              })}
-                            </ActionList>
-                          </ActionMenu.Overlay>
-                        </ActionMenu>
+                        <React.Fragment key={id}>
+                          {groupedMenuItems.map(([key, childProps]) => {
+                            if (childProps.type === 'action') {
+                              const {onClick, icon: Icon, label, disabled} = childProps
+                              return (
+                                <ActionList.Item
+                                  key={key}
+                                  onSelect={event => {
+                                    closeOverlay()
+                                    focusOnMoreMenuBtn()
+                                    typeof onClick === 'function' && onClick(event as React.MouseEvent<HTMLElement>)
+                                  }}
+                                  disabled={disabled}
+                                >
+                                  <ActionList.LeadingVisual>
+                                    <Icon />
+                                  </ActionList.LeadingVisual>
+                                  {label}
+                                </ActionList.Item>
+                              )
+                            }
+                            return null
+                          })}
+                        </React.Fragment>
                       )
                     }
                   })}

From 87cb0c33bc33df32640582009fafa3d5e56a1177 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 21 Oct 2025 12:01:08 -0400
Subject: [PATCH 09/12] Remove `label` usage

---
 .../react/src/ActionBar/ActionBar.docs.json   |  6 --
 packages/react/src/ActionBar/ActionBar.tsx    | 61 ++++++++-----------
 2 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.docs.json b/packages/react/src/ActionBar/ActionBar.docs.json
index 3257f05f766..1dc9e2db588 100644
--- a/packages/react/src/ActionBar/ActionBar.docs.json
+++ b/packages/react/src/ActionBar/ActionBar.docs.json
@@ -86,12 +86,6 @@
     {
       "name": "ActionBar.Group",
       "props": [
-        {
-          "name": "label",
-          "type": "string",
-          "required": true,
-          "description": "Label for the group. This is utilized within the overflow menu to provide context for the group of actions."
-        },
         {
           "name": "children",
           "type": "React.ReactNode",
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 63ef0772997..fcefd219dcc 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -30,7 +30,7 @@ type ChildProps =
       groupLabel?: string
     }
   | {type: 'divider'; width: number}
-  | {type: 'group'; width: number; label: string}
+  | {type: 'group'; width: number}
 
 /**
  * Registry of descendants to render in the list or menu. To preserve insertion order across updates, children are
@@ -399,45 +399,38 @@ export const ActionBarIconButton = forwardRef(
 
 const ActionBarGroupContext = React.createContext<{
   groupId: string | null
-  label: string | undefined
-}>({groupId: null, label: undefined})
+}>({groupId: null})
 
-type ActionBarGroupProps = {
-  label: string
-}
-
-export const ActionBarGroup = forwardRef(
-  ({label, children}: React.PropsWithChildren<ActionBarGroupProps>, forwardedRef) => {
-    const backupRef = useRef<HTMLDivElement>(null)
-    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLDivElement>
-    const id = useId()
-    const {registerChild, unregisterChild} = React.useContext(ActionBarContext)
+export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, forwardedRef) => {
+  const backupRef = useRef<HTMLDivElement>(null)
+  const ref = (forwardedRef ?? backupRef) as RefObject<HTMLDivElement>
+  const id = useId()
+  const {registerChild, unregisterChild} = React.useContext(ActionBarContext)
 
-    // Like IconButton, we store the width in a ref ensures we don't forget about it when not visible
-    // If a child has a groupId, it won't be visible if the group isn't visible, so we don't need to check isVisibleChild here
-    const widthRef = useRef<number>()
+  // Like IconButton, we store the width in a ref ensures we don't forget about it when not visible
+  // If a child has a groupId, it won't be visible if the group isn't visible, so we don't need to check isVisibleChild here
+  const widthRef = useRef<number>()
 
-    useIsomorphicLayoutEffect(() => {
-      const width = ref.current?.getBoundingClientRect().width
-      if (width) widthRef.current = width
-      if (!widthRef.current) return
+  useIsomorphicLayoutEffect(() => {
+    const width = ref.current?.getBoundingClientRect().width
+    if (width) widthRef.current = width
+    if (!widthRef.current) return
 
-      registerChild(id, {type: 'group', width: widthRef.current, label})
+    registerChild(id, {type: 'group', width: widthRef.current})
 
-      return () => {
-        unregisterChild(id)
-      }
-    }, [registerChild, unregisterChild])
+    return () => {
+      unregisterChild(id)
+    }
+  }, [registerChild, unregisterChild])
 
-    return (
-      <ActionBarGroupContext.Provider value={{groupId: id, label}}>
-        <div className={styles.Group} ref={ref}>
-          {children}
-        </div>
-      </ActionBarGroupContext.Provider>
-    )
-  },
-)
+  return (
+    <ActionBarGroupContext.Provider value={{groupId: id}}>
+      <div className={styles.Group} ref={ref}>
+        {children}
+      </div>
+    </ActionBarGroupContext.Provider>
+  )
+})
 
 export const VerticalDivider = () => {
   const ref = useRef<HTMLDivElement>(null)

From cbd06b7782357e3824b4b7dba100333500a0ac9a Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 21 Oct 2025 12:12:12 -0400
Subject: [PATCH 10/12] Remove `label` from stories

---
 packages/react/src/ActionBar/ActionBar.examples.stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
index d9001921788..ff4f652a64b 100644
--- a/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.examples.stories.tsx
@@ -30,7 +30,7 @@ export default {
 
 export const WithGroups = () => (
   <ActionBar aria-label="Toolbar">
-    <ActionBar.Group label="Text formatting">
+    <ActionBar.Group>
       <>
         <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
         <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
@@ -39,11 +39,11 @@ export const WithGroups = () => (
       </>
     </ActionBar.Group>
     <ActionBar.Divider />
-    <ActionBar.Group label="Insert">
+    <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 label="Lists">
+    <ActionBar.Group>
       <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
       <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
     </ActionBar.Group>

From 4bbe643f5bcdc97a520b45e4af34b3ee6ba522a6 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 21 Oct 2025 13:05:59 -0400
Subject: [PATCH 11/12] Remove `label` from tests

---
 packages/react/src/ActionBar/ActionBar.test.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.test.tsx b/packages/react/src/ActionBar/ActionBar.test.tsx
index a0c10351f37..fba187d3f09 100644
--- a/packages/react/src/ActionBar/ActionBar.test.tsx
+++ b/packages/react/src/ActionBar/ActionBar.test.tsx
@@ -104,15 +104,15 @@ describe('ActionBar Registry System', () => {
     render(
       <ActionBar aria-label="Deep test">
         <div>
-          <ActionBar.Group label="First Group">
+          <ActionBar.Group>
             <ActionBar.IconButton icon={BoldIcon} aria-label="First" />
           </ActionBar.Group>
         </div>
-        <ActionBar.Group label="Second Group">
+        <ActionBar.Group>
           <ActionBar.IconButton icon={ItalicIcon} aria-label="Second" />
         </ActionBar.Group>
         <div>
-          <ActionBar.Group label="Third Group">
+          <ActionBar.Group>
             <ActionBar.IconButton icon={CodeIcon} aria-label="Third" />
           </ActionBar.Group>
         </div>
@@ -134,7 +134,7 @@ describe('ActionBar Registry System', () => {
         <div>
           <ActionBar aria-label="Conditional">
             {show[0] && <ActionBar.IconButton icon={BoldIcon} aria-label="First" />}
-            <ActionBar.Group label="Second Group">
+            <ActionBar.Group>
               {show[1] && <ActionBar.IconButton icon={ItalicIcon} aria-label="Second" />}
             </ActionBar.Group>
             {show[2] && <ActionBar.IconButton icon={CodeIcon} aria-label="Third" />}

From 8035d0a76092accb306c0987542568518afdfc01 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Tue, 21 Oct 2025 13:10:25 -0400
Subject: [PATCH 12/12] Remove comment

---
 packages/react/src/ActionBar/ActionBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index fcefd219dcc..0ceba816328 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -365,7 +365,7 @@ export const ActionBarIconButton = forwardRef(
         disabled: !!disabled,
         onClick: onClick as MouseEventHandler,
         width: widthRef.current,
-        groupId: groupId ?? undefined, // todo: remove conditional
+        groupId: groupId ?? undefined,
       })
 
       return () => {