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/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>

packages/react/src/ActionList/ActionList.test.tsx

@@ -258,3 +258,180 @@ describe('ActionList', () => {
     expect(linkElements[2]).toHaveAttribute('data-size', 'medium') // default should be medium
   })
 })
+
+describe('ActionList data-component attributes', () => {
+  it('renders ActionList with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Item>Item</ActionList.Item>
+      </ActionList>,
+    )
+
+    const actionList = container.querySelector('[data-component="ActionList"]')
+    expect(actionList).toBeInTheDocument()
+  })
+
+  it('renders ActionList.Item with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Item>Item</ActionList.Item>
+      </ActionList>,
+    )
+
+    const item = container.querySelector('[data-component="ActionList.Item"]')
+    expect(item).toBeInTheDocument()
+  })
+
+  it('renders ActionList.Item.Wrapper with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Item>Item</ActionList.Item>
+      </ActionList>,
+    )
+
+    const wrapper = container.querySelector('[data-component="ActionList.Item.Wrapper"]')
+    expect(wrapper).toBeInTheDocument()
+  })
+
+  it('renders ActionList.Item.Label with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Item>Item</ActionList.Item>
+      </ActionList>,
+    )
+
+    const label = container.querySelector('[data-component="ActionList.Item.Label"]')
+    expect(label).toBeInTheDocument()
+  })
+
+  it('renders ActionList.Item--DividerContainer with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Item>Item</ActionList.Item>
+      </ActionList>,
+    )
+
+    const dividerContainer = container.querySelector('[data-component="ActionList.Item--DividerContainer"]')
+    expect(dividerContainer).toBeInTheDocument()
+  })
+
+  it('renders ActionList.Group with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Group>
+          <ActionList.GroupHeading as="h3">Group</ActionList.GroupHeading>
+          <ActionList.Item>Item</ActionList.Item>
+        </ActionList.Group>
+      </ActionList>,
+    )
+
+    const group = container.querySelector('[data-component="ActionList.Group"]')
+    expect(group).toBeInTheDocument()
+  })
+
+  it('renders ActionList.GroupHeading with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Group>
+          <ActionList.GroupHeading as="h3">Group Heading</ActionList.GroupHeading>
+          <ActionList.Item>Item</ActionList.Item>
+        </ActionList.Group>
+      </ActionList>,
+    )
+
+    const groupHeading = container.querySelector('[data-component="GroupHeadingWrap"]')
+    expect(groupHeading).toBeInTheDocument()
+  })
+
+  it('renders ActionList.Divider with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Item>Item 1</ActionList.Item>
+        <ActionList.Divider />
+        <ActionList.Item>Item 2</ActionList.Item>
+      </ActionList>,
+    )
+
+    const divider = container.querySelector('[data-component="ActionList.Divider"]')
+    expect(divider).toBeInTheDocument()
+  })
+
+  it('renders ActionList.Description with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Item>
+          Item
+          <ActionList.Description>Description</ActionList.Description>
+        </ActionList.Item>
+      </ActionList>,
+    )
+
+    const description = container.querySelector('[data-component="ActionList.Description"]')
+    expect(description).toBeInTheDocument()
+  })
+
+  it('renders ActionList.LeadingVisual with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Item>
+          <ActionList.LeadingVisual>Icon</ActionList.LeadingVisual>
+          Item
+        </ActionList.Item>
+      </ActionList>,
+    )
+
+    const leadingVisual = container.querySelector('[data-component="ActionList.LeadingVisual"]')
+    expect(leadingVisual).toBeInTheDocument()
+  })
+
+  it('renders ActionList.TrailingVisual with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Item>
+          Item
+          <ActionList.TrailingVisual>Icon</ActionList.TrailingVisual>
+        </ActionList.Item>
+      </ActionList>,
+    )
+
+    const trailingVisual = container.querySelector('[data-component="ActionList.TrailingVisual"]')
+    expect(trailingVisual).toBeInTheDocument()
+  })
+
+  it('renders ActionList.Selection with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList selectionVariant="single" aria-label="List">
+        <ActionList.Item selected>Item</ActionList.Item>
+      </ActionList>,
+    )
+
+    const selection = container.querySelector('[data-component="ActionList.Selection"]')
+    expect(selection).toBeInTheDocument()
+  })
+
+  it('renders ActionList.Heading with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Heading as="h2">Heading</ActionList.Heading>
+        <ActionList.Item>Item</ActionList.Item>
+      </ActionList>,
+    )
+
+    const heading = container.querySelector('[data-component="ActionList.Heading"]')
+    expect(heading).toBeInTheDocument()
+  })
+
+  it('renders ActionList.TrailingAction with data-component attribute', () => {
+    const {container} = HTMLRender(
+      <ActionList aria-label="List">
+        <ActionList.Item>
+          Item
+          <ActionList.TrailingAction label="Action" />
+        </ActionList.Item>
+      </ActionList>,
+    )
+
+    const trailingAction = container.querySelector('[data-component="ActionList.TrailingAction"]')
+    expect(trailingAction).toBeInTheDocument()
+  })
+})

packages/react/src/ActionList/Group.tsx

@@ -98,7 +98,12 @@ export const Group: FCWithSlotMarker<React.PropsWithChildren<ActionListGroupProp
   }
 
   return (
-    <li className={clsx(className, groupClasses.Group)} role={listRole ? 'none' : undefined} {...props}>
+    <li
+      className={clsx(className, groupClasses.Group)}
+      data-component="ActionList.Group"
+      role={listRole ? 'none' : undefined}
+      {...props}
+    >
       <GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
         {title && !slots.groupHeading ? (
           // Escape hatch: supports old API <ActionList.Group title="group title"> in a non breaking way
@@ -177,6 +182,7 @@ export const GroupHeading: FCWithSlotMarker<React.PropsWithChildren<ActionListGr
           className={groupClasses.GroupHeadingWrap}
           aria-hidden="true"
           data-variant={variant}
+          // TODO: next-major: switch for data-component="ActionList.GroupHeading" next major
           data-component="GroupHeadingWrap"
           as={headingWrapElement}
           {...props}
@@ -192,6 +198,7 @@ export const GroupHeading: FCWithSlotMarker<React.PropsWithChildren<ActionListGr
           className={groupClasses.GroupHeadingWrap}
           data-variant={variant}
           as={headingWrapElement}
+          // TODO: next-major: switch for data-component="ActionList.GroupHeading" next major
           data-component="GroupHeadingWrap"
         >
           <Heading

packages/react/src/ActionList/Heading.tsx

@@ -41,6 +41,7 @@ export const Heading = forwardRef(({as, size, children, visuallyHidden = false,
         // use custom id if it is provided. Otherwise, use the id from the context
         id={props.id ?? headingId}
         className={clsx(className, classes.ActionListHeader)}
+        data-component="ActionList.Heading"
         data-list-variant={listVariant}
         {...props}
       >