feat: implement ADR-023 Part 1

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

@@ -417,3 +417,65 @@
     expect(document.activeElement).toEqual(menuButton)
   })
 })
+
+describe('ActionBar data-component attributes', () => {
+  it('renders ActionBar with data-component attribute', () => {
+    const {container} = render(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Bold" />
+      </ActionBar>,
+    )
+
+    const actionBar = container.querySelector('[data-component="ActionBar"]')
+    expect(actionBar).toBeInTheDocument()
+  })
+
+  it('renders ActionBar.IconButton with data-component attribute', () => {
+    render(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Bold" />
+      </ActionBar>,
+    )
+
+    const iconButton = screen.getByRole('button', {name: 'Bold'})
+    expect(iconButton).toHaveAttribute('data-component', 'ActionBar.IconButton')
+  })
+
+  it('renders ActionBar.Divider with data-component attribute', () => {
+    const {container} = render(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Bold" />
+        <ActionBar.Divider />
+        <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic" />
+      </ActionBar>,
+    )
+
+    const divider = container.querySelector('[data-component="ActionBar.Divider"]')
+    expect(divider).toBeInTheDocument()
+  })
+
+  it('renders ActionBar.Group with data-component attribute', () => {
+    const {container} = render(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.Group>
+          <ActionBar.IconButton icon={BoldIcon} aria-label="Bold" />
+          <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic" />
+        </ActionBar.Group>
+      </ActionBar>,
+    )
+
+    const group = container.querySelector('[data-component="ActionBar.Group"]')
+    expect(group).toBeInTheDocument()
+  })
+
+  it('renders ActionBar.Menu with data-component attribute', () => {
+    render(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.Menu aria-label="More options" icon={BoldIcon} items={[{label: 'Option 1', onClick: vi.fn()}]} />
+      </ActionBar>,
+    )
+
+    const menuButton = screen.getByRole('button', {name: 'More options'})
+    expect(menuButton).toHaveAttribute('data-component', 'ActionBar.Menu')
+  })
+})

packages/react/src/ActionBar/ActionBar.tsx

@@ -353,7 +353,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
 
   return (
     <ActionBarContext.Provider value={{size, isVisibleChild}}>
-      <div ref={navRef} className={clsx(className, styles.Nav)} data-flush={flush}>
+      <div ref={navRef} className={clsx(className, styles.Nav)} data-component="ActionBar" data-flush={flush}>
         <div
           ref={listRef}
           role="toolbar"
@@ -511,6 +511,8 @@ export const ActionBarIconButton = forwardRef(
         size={size}
         onClick={clickHandler}
         {...props}
+        // TODO: does this make sense? it'll override IconButton's data-component
+        data-component="ActionBar.IconButton"
         variant="invisible"
       />
     )
@@ -532,7 +534,7 @@ export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, f
 
   return (
     <ActionBarGroupContext.Provider value={{groupId: id}}>
-      <div className={styles.Group} ref={ref}>
+      <div className={styles.Group} data-component="ActionBar.Group" ref={ref}>
         {children}
       </div>
     </ActionBarGroupContext.Provider>
@@ -571,7 +573,14 @@ export const ActionBarMenu = forwardRef(
     return (
       <ActionMenu anchorRef={ref} open={menuOpen} onOpenChange={setMenuOpen}>
         <ActionMenu.Anchor>
-          <IconButton variant="invisible" aria-label={ariaLabel} icon={icon} {...props} />
+          <IconButton
+            variant="invisible"
+            aria-label={ariaLabel}
+            icon={icon}
+            {...props}
+            // TODO: does this make sense? it'll override IconButton's data-component
+            data-component="ActionBar.Menu"
+          />
         </ActionMenu.Anchor>
         <ActionMenu.Overlay {...(returnFocusRef && {returnFocusRef})}>
           <ActionList>{items.map((item, index) => renderMenuItem(item, index))}</ActionList>