feat: implement ADR-023 Part 1 by francinelucca · Pull Request #7724 · primer/react

francinelucca · 2026-04-02T03:04:46Z

Towards https://github.com/github/primer/issues/6497

Adds data-component attribute (see ADR) for:

ActionBar
ActionList
Button
FilteredActionList
Link
LinkButton
Pagination
SelectPanel
Table
TextInput
TextInputWithTokens
TooltipV2

Changelog

New

stable selectors for listed components
tests for stable selectors added

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

changeset-bot · 2026-04-02T03:04:51Z

🦋 Changeset detected

Latest commit: 1cbc315

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-04-02T03:05:15Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

francinelucca · 2026-04-02T03:06:57Z

+            aria-label={ariaLabel}
+            icon={icon}
+            {...props}
+            // TODO: does this make sense? it'll override IconButton's data-component


I feel like this indeed makes no sense, but does that mean that subcomponents like ActionBar.Menu don't have a data-component, despite being public subcomponents? how would you target them then?: [data-component="ActionBar"] [data-component="IconButton"] isn't specific enough because ActionBar.IconButton would match this as well 🤔
Should we wrap everything top-level in a span for these cases just so we can attach the data-component attribute? is there any chance for that to mess anything up?

In this scenario, i think it makes sense to override the menu IconButton because there are other IconButtons in this component as well. (I'd call it ActionBar.MoreIconButton or ActionBar.MenuIconButton)

It's likely that it will be used with a classname on the ActionBar root .myActionBar [data-component=ActionBar.MoreIconButton]

That said, I don't think <Actionbar.IconButton> should get a data-component at all because

they already have a data-component

you can pass a classname to that

Should we wrap everything top-level in a span for these cases just so we can attach the data-component attribute?

Not a good idea because it will introduce nesting, which in best of cases is unnecessary and in the worst cases breaks dom validation rules or slots constraints

There will be other similar scenarios where we might choose to override the child's data-component when there are two distinct IconButtons that are baked in the component and not accessible in the API, for example the previous and next icon buttons in Pagination.

…dr-023

francinelucca · 2026-04-07T22:08:16Z

+            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"


should this be:

ActionBar.MenuIconButton

ActionBar.Menu

ActionBar.Menu.IconButton
?

I feel like this is the IconButton that belongs to the Menu that is a subcomponent of ActionBar, which is why ActionBar.Menu.IconButton makes sense to me 🤔. ActionBar.Menu seems disingenuous because really this is not the menu itself, just the Icon trigger. But I could see the case for ActionBar.MenuIconButton

I vote for ActionBar.Menu.IconButton too!

tl;dr: both ActionBar.MenuIconButton and ActionBar.Menu.IconButton are fine, i like one more than the other

ActionBar.Menu 👎 that's for the menu, not the button

ActionBar.Menu.IconButton it's fine, but the double dots feels weird, idk why. Maybe because ActionBar.Menu is actually a shorthand for ActionMenu... but ActionBar.ActionMenu.IconButton feels worse for some reason.

ActionBar.MenuIconButton: 👍 I like this the most. consistent pattern everywhere

what about here

you vote for ActionList.ItemLabel?

Hmmmmmm, I know i'm being very inconsistent with my feeling or taste™, but i like ActionList.Item.Label there because ActionList.Item is where you would put your className 🤔

❌ bad:

<ActionList> <ActionList.Item><span className={styles.myLabel}>label</span></ActionList.Item> </ActionList> <style> .myLabel { font-weight: bold } </style>

✅ good:

<ActionList> <ActionList.Item className={styles.myActionListItem}>label</ActionList.Item> </ActionList> <style> // with direct data-component, good!: .myActionListItem [data-component="ActionList.Item.Label"] { font-weight: bold } </style>

I think I was wrong about ActionBar.Menu.IconButton. If ActionBar.Menu is part of the public API, then ActionBar.Menu.IconButton should be the better choice.

Do you mind also including Pagination and SelectPanel in this PR? I think those are the most opaque components, once we go through them, all the rest will be straightforward.

francinelucca · 2026-04-08T02:47:15Z

        <HeadingWrap
          role="presentation"
          className={groupClasses.GroupHeadingWrap}
          aria-hidden="true"
          data-variant={variant}
-          data-component="GroupHeadingWrap"
+          data-component="ActionList.GroupHeading"
          as={headingWrapElement}
          {...props}
        >
          <span className={clsx(className, groupClasses.GroupHeading)} id={groupHeadingId}>
            {_internalBackwardCompatibleTitle ?? children}
          </span>


Here the actual user-supplied className is in the span within the "HeadingWrap";
Should the data-component always be where the className is? or does it make sense for it to go on the outermost element?
if so:
For this case, should we do: data-component="GroupHeading.Wrapper" and data-component="GroupHeading"?
If so:
does that mean we should always have data-component for wrappers?

does that mean we should always have data-component for wrappers?

EDIT: no, quoting ADR: "Elements that are purely for layout and have no semantic meaning (spacers,
wrappers that exist only for CSS grid/flex layout) do not require this
attribute."

therefor also no

For this case, should we do: data-component="GroupHeading.Wrapper" and data-component="GroupHeading"?

primer · 2026-04-08T02:50:09Z

🤖 Lint issues have been automatically fixed and committed to this PR.

… Tooltip.KeybindingHintContainer

…dr-023

…Wrap

siddharthkp · 2026-04-20T11:33:42Z

+- **TextInputwithTokens**
+- **TooltipV2**
+
+This enables consumers to query and test components using stable selectors like `[data-component="Table.Row"]`.


General comment, that's why I'm leaving it on the changelog.

How i understand it, the problem that we're trying to solve with data-component is to expose stable selectors which otherwise would be hidden or tucked away.

Some of these components are top level components that support className and are not composed in an invisible manner inside another component (like selectpanel items), should we still add data-component to them?

and are not composed in an invisible manner inside another component

I think this is the key here. Which one of these falls into that category? 🤔 The way I see it these all are either:

parts of bigger components (ex: Button inside SelectPanel, Button inside table, Tooltip inside everywhere), so we want the data-component to be able to drill down:

Big components with smaller parts (SelectPanel has ActionList, Table has Button, ActionBar has Button...), so we need the top-level data-component to "inherit from":

primer · 2026-04-20T16:12:04Z

🤖 Lint issues have been automatically fixed and committed to this PR.

primer · 2026-04-20T16:25:31Z

🤖 Lint issues have been automatically fixed and committed to this PR.

siddharthkp

Please merge

primer · 2026-04-22T15:34:26Z

🤖 Lint issues have been automatically fixed and committed to this PR.

This reverts commit 21cbd6d.

This reverts commit e20e7a9.

feat(ActionBar): add data-component attributes for better accessibility

abfe9c4

github-actions Bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Apr 2, 2026

francinelucca commented Apr 2, 2026

View reviewed changes

francinelucca deployed to github-pages April 2, 2026 03:15 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7724 April 2, 2026 03:15 Inactive

fix test

6381280

francinelucca deployed to github-pages April 2, 2026 03:31 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7724 April 2, 2026 03:31 Inactive

francinelucca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 2, 2026

francinelucca added 2 commits April 7, 2026 17:59

Merge branch 'main' of github.com:primer/react into chore/implement-a…

091de76

…dr-023

fix(ActionBar): update data-component attributes for IconButton and Menu

32d4062

francinelucca commented Apr 7, 2026

View reviewed changes

francinelucca deployed to github-pages April 7, 2026 22:15 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7724 April 7, 2026 22:16 Inactive

Add data-component for ActionList

c7c0da7

francinelucca commented Apr 8, 2026

View reviewed changes

francinelucca deployed to github-pages April 8, 2026 02:53 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7724 April 8, 2026 02:53 Inactive

francinelucca added 2 commits April 7, 2026 23:12

fix(ActionList): add data-component attributes for Item and LinkItem

4cf2494

test(Tooltip): add tests for data-component attributes in Tooltip and…

2962363

… Tooltip.KeybindingHintContainer

francinelucca changed the title ~~feat(ActionBar): add data-component attributes for better accessibility~~ feat: implement ADR-023 Part 1 Apr 8, 2026

francinelucca added 3 commits April 9, 2026 15:24

Merge branch 'main' of github.com:primer/react into chore/implement-a…

3f92c21

…dr-023

fix: update data-component attribute for GroupHeading to GroupHeading…

273f681

…Wrap

fix comment

8c38035

github-actions Bot temporarily deployed to storybook-preview-7724 April 9, 2026 19:35 Inactive

francinelucca deployed to github-pages April 9, 2026 19:46 — with GitHub Actions View deployment

francinelucca deployed to github-pages April 16, 2026 02:07 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7724 April 16, 2026 02:07 Inactive

francinelucca requested a review from llastflowers April 17, 2026 18:06

siddharthkp reviewed Apr 20, 2026

View reviewed changes

francinelucca requested a review from siddharthkp April 20, 2026 16:04

Merge branch 'main' into chore/implement-adr-023

8e7bf4c

francinelucca added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Apr 20, 2026

francinelucca deployed to github-pages April 20, 2026 16:14 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7724 April 20, 2026 16:14 Inactive

test(vrt): update snapshots

e20e7a9

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 20, 2026

primer Bot deployed to github-pages April 20, 2026 16:27 View deployment

github-actions Bot temporarily deployed to storybook-preview-7724 April 20, 2026 16:28 Inactive

siddharthkp approved these changes Apr 21, 2026

View reviewed changes

Merge branch 'main' into chore/implement-adr-023

5f52ac4

francinelucca deployed to github-pages April 22, 2026 15:37 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7724 April 22, 2026 15:37 Inactive

francinelucca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 22, 2026

francinelucca and others added 2 commits April 22, 2026 11:45

test: add implementsClassName for FilteredActionList component

b6f32bf

test(vrt): update snapshots

21cbd6d

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 22, 2026

github-actions Bot temporarily deployed to storybook-preview-7724 April 22, 2026 15:59 Inactive

primer Bot deployed to github-pages April 22, 2026 16:08 View deployment

github-actions Bot deployed to storybook-preview-7724 April 22, 2026 16:09 View deployment

francinelucca added 2 commits April 22, 2026 13:11

Revert "test(vrt): update snapshots"

1e18968

This reverts commit 21cbd6d.

Revert "test(vrt): update snapshots"

1cbc315

This reverts commit e20e7a9.

Conversation

francinelucca commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot Bot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Apr 2, 2026

⚠️ Action required

Uh oh!

francinelucca Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siddharthkp Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

francinelucca Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

llastflowers Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

siddharthkp Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

francinelucca Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

siddharthkp Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

francinelucca Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

primer Bot commented Apr 8, 2026

Uh oh!

siddharthkp Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

primer Bot commented Apr 20, 2026

Uh oh!

primer Bot commented Apr 20, 2026

Uh oh!

siddharthkp left a comment

Choose a reason for hiding this comment

Uh oh!

primer Bot commented Apr 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

francinelucca commented Apr 2, 2026 •

edited

Loading

changeset-bot Bot commented Apr 2, 2026 •

edited

Loading

francinelucca Apr 2, 2026 •

edited

Loading

siddharthkp Apr 2, 2026 •

edited

Loading

siddharthkp Apr 8, 2026 •

edited

Loading

siddharthkp Apr 9, 2026 •

edited

Loading