data-component adr part 5 by llastflowers · Pull Request #7867 · primer/react

llastflowers · 2026-05-22T00:41:02Z

Relates to https://github.com/github/primer/issues/6497

Changelog

New

Add data-component attributes and associated tests for ActionMenu, AnchoredOverlay, Autocomplete, and NavList

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)

…ionBar.Menu.IconButton

changeset-bot · 2026-05-22T00:41:06Z

🦋 Changeset detected

Latest commit: 06c2480

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-05-22T00:41:37Z

⚠️ 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.

Copilot

Pull request overview

Adds data-component attributes to additional @primer/react components to support the ongoing “data-component” ADR work, along with targeted unit tests and a changeset for a minor release.

Changes:

Add data-component attributes for NavList (root + SubNav), Autocomplete (Input + Overlay), AnchoredOverlay (responsive close button container), and ActionMenu (Button + Overlay + attempted Anchor tagging).
Add/extend unit tests to assert the new attributes are present under expected render conditions.
Add a changeset for @primer/react minor release.

Show a summary per file

File	Description
packages/react/src/NavList/NavList.tsx	Adds `data-component` attributes to `NavList` root and `NavList.SubNav`.
packages/react/src/NavList/NavList.test.tsx	Adds a test asserting `NavList`/`SubNav` are tagged.
packages/react/src/Autocomplete/AutocompleteOverlay.tsx	Tags the rendered overlay with `data-component="Autocomplete.Overlay"`.
packages/react/src/Autocomplete/AutocompleteInput.tsx	Tags the input with `data-component="Autocomplete.Input"`.
packages/react/src/Autocomplete/Autocomplete.test.tsx	Adds a test asserting overlay is tagged when menu is shown.
packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx	Tags the responsive close button container.
packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx	Adds a test asserting the close button container is tagged.
packages/react/src/ActionMenu/ActionMenu.tsx	Tags `ActionMenu.Button` and `ActionMenu.Overlay`; adds conditional tagging logic for `ActionMenu.Anchor`.
packages/react/src/ActionMenu/ActionMenu.test.tsx	Adds a test asserting ActionMenu parts are tagged after opening.
.changeset/quick-ants-lead.md	Records a minor-release changeset for the new attributes/tests.

Copilot's findings

Files reviewed: 10/10 changed files
Comments generated: 3

…errides

primer-integration · 2026-05-28T17:06:28Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/21767

francinelucca · 2026-05-28T16:57:09Z

      <div
        ref={containerRef}
        className={styles.ActionMenuContainer}
+        data-component="ActionMenu.Overlay"


I kind of feel like this should be on the AnchoredOverlay instead (override)

francinelucca · 2026-05-28T17:01:04Z

      {React.cloneElement(child, {
        ...anchorProps,
        ref: anchorRef,
        className: clsx(anchorProps.className, child.props.className),
        onClick: onButtonClick,
        onKeyDown: onButtonKeyDown,
      })}


I think this should be data-component="ActionMenu.Anchor"

francinelucca · 2026-05-28T17:08:24Z

-            <div className={classes.ResponsiveCloseButtonContainer}>
+            <div
+              className={classes.ResponsiveCloseButtonContainer}
+              data-component="AnchoredOverlay.CloseButtonContainer"


I'd rename to data-component="AnchoredOverlay.CloseButton" and put it on the IconButton instead

francinelucca · 2026-05-28T17:08:50Z

        renderAnchor({
          ref: anchorRef,
          id: anchorId,
          'aria-haspopup': 'true',
          'aria-expanded': open,
          tabIndex: 0,
          onClick: onAnchorClick,
          onKeyDown: onAnchorKeyDown,
          ...(shouldRenderAsPopover ? {popoverTarget: popoverId} : {}),


I'd add data-component="AnchoredOverlay.Anchor"

francinelucca · 2026-05-28T17:09:06Z

        <Overlay
          returnFocusRef={anchorRef}


data-component="AnchoredOverlay"

francinelucca · 2026-05-28T17:10:49Z

+      expect(container.querySelector('[data-component="Autocomplete.Overlay"]')).toBeInTheDocument()
+    })


missing: Autocomplete.Input, Autocomplete.Menu

francinelucca · 2026-05-28T17:12:15Z

 describe('NavList', () => {
  implementsClassName(NavList)

+  it('renders data-component attributes for NavList and NavList.SubNav', () => {


missing: data-component tests for NavItems

primer-integration · 2026-05-28T17:31:37Z

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!

llastflowers added 5 commits May 21, 2026 16:52

update ActionMenu and add test

fff3f9d

update AnchoredOverlay and add test

dc1cc17

update Autocomplete sub-components and add test

d886f3c

update NavList and add tests

55b406e

tweak ActionMenu implementation to avoid downstream conflict with Act…

c6b08e9

…ionBar.Menu.IconButton

llastflowers requested a review from a team as a code owner May 22, 2026 00:41

llastflowers requested review from Copilot and joshblack and removed request for Copilot May 22, 2026 00:41

llastflowers changed the title ~~Llastflowers/6497/data component adr part 5~~ data-component adr part 5 May 22, 2026

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 22, 2026

add quick-ants-lead.md

3cd151f

Copilot AI review requested due to automatic review settings May 22, 2026 00:42

Copilot started reviewing on behalf of llastflowers May 22, 2026 00:42 View session

github-actions Bot requested a deployment to storybook-preview-7867 May 22, 2026 00:46 Abandoned

Copilot AI reviewed May 22, 2026

View reviewed changes

Comment thread packages/react/src/ActionMenu/ActionMenu.tsx Outdated

Comment thread packages/react/src/NavList/NavList.test.tsx

Comment thread packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx Outdated

llastflowers deployed to github-pages May 22, 2026 00:55 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7867 May 22, 2026 00:56 Inactive

joshblack approved these changes May 22, 2026

View reviewed changes

change override prevention logic in ActionMenu to prevent unwanted ov…

f3aa549

…errides

llastflowers deployed to github-pages May 22, 2026 16:25 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7867 May 22, 2026 16:25 Inactive

Merge branch 'main' into llastflowers/6497/data-component-ADR-part-5

55e192e

llastflowers deployed to github-pages May 22, 2026 16:53 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7867 May 22, 2026 16:53 Inactive

remove data-component from ActionMenu.Anchor

24026be

llastflowers deployed to github-pages May 22, 2026 17:06 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7867 May 22, 2026 17:07 Inactive

test fixes

bc3dc32

llastflowers added the Canary Release Apply this label when you want CI to create a canary release of the current PR label May 22, 2026

llastflowers deployed to github-pages May 22, 2026 18:07 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7867 May 22, 2026 18:07 Inactive

Merge branch 'main' into llastflowers/6497/data-component-ADR-part-5

fd4e024

llastflowers deployed to github-pages May 22, 2026 18:20 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7867 May 22, 2026 18:20 Inactive

Merge branch 'main' into llastflowers/6497/data-component-ADR-part-5

06c2480

llastflowers deployed to github-pages May 28, 2026 16:44 — with GitHub Actions View deployment

github-actions Bot deployed to storybook-preview-7867 May 28, 2026 16:44 View deployment

llastflowers added Canary Release Apply this label when you want CI to create a canary release of the current PR and removed Canary Release Apply this label when you want CI to create a canary release of the current PR labels May 28, 2026

francinelucca requested changes May 28, 2026

View reviewed changes

		expect(container.querySelector('[data-component="Autocomplete.Overlay"]')).toBeInTheDocument()
		})

Conversation

llastflowers commented May 22, 2026

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot Bot commented May 22, 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 May 22, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Uh oh!

Uh oh!

Uh oh!

primer-integration Bot commented May 28, 2026

Uh oh!

francinelucca May 28, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca May 28, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca May 28, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca May 28, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca May 28, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca May 28, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca May 28, 2026

Choose a reason for hiding this comment

Uh oh!

primer-integration Bot commented May 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot Bot commented May 22, 2026 •

edited

Loading