feat: implement ADR-023 Part 1

.changeset/datatable-stable-selectors.md

@@ -0,0 +1,20 @@
+---
+'@primer/react': minor
+---
+
+Add stable `data-component` selectors to multiple components following ADR-023:
+
+- **ActionBar**
+- **ActionList** and friends
+- **Button**
+- **FilteredActionList** and friends
+- **Link**
+- **LinkButton**
+- **Pagination**
+- **SelectPanel** and friends
+- **Table** and friends
+- **TextInput**
+- **TextInputwithTokens**
+- **TooltipV2**
+
+This enables consumers to query and test components using stable selectors like `[data-component="Table.Row"]`.

packages/react/package.json

@@ -81,7 +81,7 @@
     "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/behaviors": "^1.10.2",
     "@primer/live-region-element": "^0.7.1",
-    "@primer/octicons-react": "^19.21.0",
+    "@primer/octicons-react": "^19.24.1",
     "@primer/primitives": "10.x || 11.x",
     "@tanstack/react-virtual": "^3.13.18",
     "clsx": "^2.1.1",

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

@@ -417,3 +417,65 @@ describe('ActionBar.Menu returnFocusRef', () => {
     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', () => {
+    const {container} = render(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Bold" />
+      </ActionBar>,
+    )
+
+    const iconButton = container.querySelector('[data-component="ActionBar"] [data-component="IconButton"]')
+    expect(iconButton).toBeInTheDocument()
+  })
+
+  it('renders ActionBar.VerticalDivider 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.VerticalDivider"]')
+    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.IconButton 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.IconButton')
+  })
+})

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"
@@ -532,7 +532,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 +571,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}
+            // overriding IconButton's data-component so that the ActionBar's "More Menu" Icon can be targetted specifically
+            data-component="ActionBar.Menu.IconButton"
+          />
         </ActionMenu.Anchor>
         <ActionMenu.Overlay {...(returnFocusRef && {returnFocusRef})}>
           <ActionList>{items.map((item, index) => renderMenuItem(item, index))}</ActionList>