data-component adr part 6 by llastflowers · Pull Request #7889 · primer/react

llastflowers · 2026-05-27T20:42:58Z

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

Changelog

New

Add data-component attributes and associated tests for PageHeader, PageLayout, Pagehead, Popover, Portal, and ProgressBar

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)

…e name

changeset-bot · 2026-05-27T20:43:03Z

🦋 Changeset detected

Latest commit: ab3a2b6

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-27T20:43:34Z

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

Add data-component attributes and associated tests for PageHeader, PageLayout, Pagehead, Popover, Portal, and ProgressBar

Copilot

Pull request overview

Part 6 of the data-component ADR work: adds data-component attributes to PageHeader, PageLayout, Pagehead, Popover, Portal, and ProgressBar (plus subcomponents), with accompanying tests. Also normalizes PageHeader subcomponent data-component values from PH_* / bare TitleArea to the dotted PageHeader.* convention.

Changes:

Adds data-component to root + subcomponent elements across six components and their tests.
Renames PageHeader subcomponent data-component values (PH_*, TitleArea) to PageHeader.* and updates the :has() selectors in PageHeader.module.css that referenced TitleArea.
Adds a minor changeset.

Show a summary per file

File	Description
packages/react/src/ProgressBar/ProgressBar.tsx	Adds data-component to ProgressBar root and Item.
packages/react/src/ProgressBar/ProgressBar.test.tsx	Tests for new data-component attributes.
packages/react/src/Portal/Portal.tsx	Sets data-component on the imperatively created portal div.
packages/react/src/Portal/Portal.test.tsx	Adds assertions for the portal data-component across cases.
packages/react/src/Popover/Popover.tsx	Adds data-component to Popover and Popover.Content.
packages/react/src/Popover/Popover.test.tsx	Tests for Popover data-component attributes.
packages/react/src/PageLayout/PageLayout.tsx	Adds data-component to Root, Header, Content, Pane, Sidebar, Footer.
packages/react/src/PageLayout/PageLayout.test.tsx	Tests for PageLayout data-component attributes.
packages/react/src/PageLayout/snapshots/PageLayout.test.tsx.snap	Updated snapshots reflecting new attributes.
packages/react/src/PageHeader/PageHeader.tsx	Adds/renames data-component across all PageHeader subcomponents to `PageHeader.*`.
packages/react/src/PageHeader/PageHeader.test.tsx	Tests for PageHeader data-component attributes.
packages/react/src/PageHeader/PageHeader.module.css	Updates `:has([data-component='TitleArea'])` selectors to use `PageHeader.TitleArea` (but leaves `PH_*` selectors).
packages/react/src/Pagehead/Pagehead.tsx	Adds data-component to Pagehead.
packages/react/src/Pagehead/Pagehead.test.tsx	Test for Pagehead data-component.
.changeset/pretty-coats-sell.md	Minor changeset describing the feature.

Copilot's findings

Files reviewed: 15/15 changed files
Comments generated: 1

      aria-labelledby={BaseComponent === 'nav' ? ariaLabelledBy : undefined}
      className={clsx(classes.Navigation, className)}
-      data-component="PH_Navigation"
+      data-component="PageHeader.Navigation"


joshblack

Just wanted to leave a comment real quick, some of the data-component values that exist already might have usage (specifically thinking of the PH_* ones so just wanted to double-check on the release plan for those before approving 👀

joshblack · 2026-05-27T20:45:17Z

 const Actions = ({children, className, hidden = false}: ActionsProps) => {
  return (
-    <div className={clsx(classes.Actions, className)} data-component="PH_Actions" {...getHiddenDataAttributes(hidden)}>
+    <div


I think some of these may be used (like PH_Actions) based on: https://github.com/search?q=repo%3Agithub%2Fgithub-ui+PH_&type=code so we might need to be more careful for them

Yeah, I was thinking about this and was planning to check the dotcom usages as well! I think we should definitely update the attribute names in primer/react to keep things consistent, so we need to update them in dotcom too. Since there are only 3 files that reference the old attributes, this seems like an easy enough migration effort.

I suppose we would just need to make sure that we have a migration PR in the same github-ui deployment group as the primer/react version upgrade that involves this PR, since the changes need to happen in both places at the same time to avoid breaking anything 🤔 Coordinating with RC on this (possibly asking them to queue both PRs to make sure they're deployed together) seems like the way to do it safely. What do you think? 👀

Totally agreed, makes sense to me 👍

jk, @francinelucca correctly pointed out that this needs to be part of a major update. I'll revert everything related to the PH_ stuff in this PR and separate it out!

primer-integration · 2026-06-02T22:05:44Z

Integration test results from github/github-ui PR:

CI Passed
VRT Passed
Projects Passed

All checks passed!

francinelucca

let's make sure all the data-component attrs that need to be replaced next major are tracked in https://github.com/github/primer/issues/6501 🙏🏽

francinelucca · 2026-06-03T13:33:13Z

  draggable?: boolean
 }

 const VerticalDivider = memo<React.PropsWithChildren<VerticalDividerProps>>(


suggestion: add data-component to VerticalDivider, HorizontalDivider, SideBarDivider and DragHandle

llastflowers added 6 commits May 27, 2026 09:57

update PageHeader.tsx, add test, and update css to match new attribut…

8415bea

…e name

update PageLayout.tsx and add test

eea0b7d

update Pagehead.tsx and add test

bb57e45

update Popover.tsx and add test

b7737f5

update Portal.tsx and add tests

a10dfea

update ProgressBar.tsx and add tests

2a1da5a

llastflowers requested a review from a team as a code owner May 27, 2026 20:42

llastflowers requested review from Copilot and joshblack May 27, 2026 20:42

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 27, 2026

Copilot started reviewing on behalf of llastflowers May 27, 2026 20:43 View session

Update @primer/react version and add data-component attributes

b8cba4a

Add data-component attributes and associated tests for PageHeader, PageLayout, Pagehead, Popover, Portal, and ProgressBar

Copilot AI reviewed May 27, 2026

View reviewed changes

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

aria-labelledby={BaseComponent === 'nav' ? ariaLabelledBy : undefined}

className={clsx(classes.Navigation, className)}

data-component="PH_Navigation"

data-component="PageHeader.Navigation"

joshblack reviewed May 27, 2026

View reviewed changes

github-actions Bot requested a deployment to storybook-preview-7889 May 27, 2026 20:47 Abandoned

llastflowers had a problem deploying to github-pages May 27, 2026 20:59 — with GitHub Actions Failure

github-actions Bot requested a deployment to storybook-preview-7889 May 27, 2026 20:59 Abandoned

llastflowers marked this pull request as draft May 27, 2026 23:00

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

18117dd

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

github-actions Bot temporarily deployed to storybook-preview-7889 May 28, 2026 16:46 Inactive

rename a few more PageHeader attributes to match new convention

40063a9

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

github-actions Bot temporarily deployed to storybook-preview-7889 May 28, 2026 17:10 Inactive

revert all potentially breaking changes, but keep new test coverage

27655f9

llastflowers deployed to github-pages June 2, 2026 21:03 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7889 June 2, 2026 21:03 Inactive

llastflowers marked this pull request as ready for review June 2, 2026 21:05

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

ab3a2b6

llastflowers deployed to github-pages June 2, 2026 21:14 — with GitHub Actions View deployment

github-actions Bot deployed to storybook-preview-7889 June 2, 2026 21:14 View deployment

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

llastflowers requested review from francinelucca and joshblack June 2, 2026 22:44

francinelucca approved these changes Jun 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

data-component adr part 6#7889

data-component adr part 6#7889
llastflowers wants to merge 11 commits into
mainfrom
llastflowers/6497/data-component-ADR-part-6

llastflowers commented May 27, 2026

Uh oh!

changeset-bot Bot commented May 27, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

joshblack left a comment

Uh oh!

joshblack May 27, 2026

Uh oh!

llastflowers May 27, 2026

Uh oh!

joshblack May 28, 2026

Uh oh!

llastflowers May 28, 2026

Uh oh!

primer-integration Bot commented Jun 2, 2026

Uh oh!

francinelucca left a comment

Uh oh!

francinelucca Jun 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

llastflowers commented May 27, 2026

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot Bot commented May 27, 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 27, 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!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

joshblack May 27, 2026

Choose a reason for hiding this comment

Uh oh!

llastflowers May 27, 2026

Choose a reason for hiding this comment

Uh oh!

joshblack May 28, 2026

Choose a reason for hiding this comment

Uh oh!

llastflowers May 28, 2026

Choose a reason for hiding this comment

Uh oh!

primer-integration Bot commented Jun 2, 2026

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

francinelucca Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot Bot commented May 27, 2026 •

edited

Loading