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: 59bcd12

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!

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 🙏🏽

primer-integration · 2026-06-08T23:17:00Z

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

Will report CI results once ready.

llastflowers · 2026-06-09T17:22:53Z

integration tests passing; not reporting to this PR https://github.com/github/github-ui/pull/22691

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

Copilotstarted 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

CopilotAI reviewed May 27, 2026
View reviewed changes

Comment threadpackages/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-actionsBot 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-actionsBot 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-actionsBottemporarily 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-actionsBottemporarily 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-actionsBottemporarily 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-actionsBottemporarily deployed to storybook-preview-7889 June 2, 2026 21:14 Inactive

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

Comment threadpackages/react/src/PageLayout/PageLayout.tsx

joshblack approved these changes Jun 5, 2026
View reviewed changes

llastflowersand others added 3 commits June 8, 2026 12:16

add data-component to a couple more PageLayout parts
6f862db

update tests
c3b7e89

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

github-actionsBot requested a deployment to storybook-preview-7889 June 8, 2026 19:21 Abandoned

llastflowers deployed to github-pages June 8, 2026 19:32 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-7889 June 8, 2026 19:32 Inactive

remove SidebarDivider attr; not needed
a762b3f

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

github-actionsBottemporarily deployed to storybook-preview-7889 June 8, 2026 21:11 Inactive

test fix
59bcd12

llastflowers deployed to github-pages June 8, 2026 22:44 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-7889 June 8, 2026 22:44 Inactive

llastflowers requested a review from francinelucca June 8, 2026 23:15

llastflowers added the integration-tests: skipped manually Changes in this PR do not require an integration test label Jun 9, 2026

llastflowers added this pull request to the merge queue Jun 9, 2026

Merged via the queue into main with commit 3af5edcJun 9, 2026
61 checks passed

llastflowers deleted the llastflowers/6497/data-component-ADR-part-6 branch June 9, 2026 17:32

primerBot mentioned this pull request Jun 9, 2026
Release tracking #7925
Merged

Navigation Menu

Uh oh!

data-component adr part 6 - #7889

data-component adr part 6#7889
llastflowers merged 16 commits into
mainfrom
llastflowers/6497/data-component-ADR-part-6

llastflowers commented May 27, 2026

Uh oh!

changeset-botBot commented May 27, 2026•
edited
Loading

Uh oh!

github-actionsBot commented May 27, 2026

Uh oh!

CopilotAI left a comment

Uh oh!

joshblack left a comment

Uh oh!

joshblackMay 27, 2026

Uh oh!

llastflowersMay 27, 2026

Uh oh!

joshblackMay 28, 2026

Uh oh!

llastflowersMay 28, 2026

Uh oh!

francinelucca left a comment

Uh oh!

Uh oh!

primer-integrationBot commented Jun 8, 2026•
edited
Loading

Uh oh!

llastflowers commented Jun 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

llastflowers commented May 27, 2026

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-botBot 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-actionsBot commented May 27, 2026

⚠️ Action required

Uh oh!

CopilotAI 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!

joshblackMay 27, 2026

Choose a reason for hiding this comment

Uh oh!

llastflowersMay 27, 2026

Choose a reason for hiding this comment

Uh oh!

joshblackMay 28, 2026

Choose a reason for hiding this comment

Uh oh!

llastflowersMay 28, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

primer-integrationBot commented Jun 8, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

llastflowers commented Jun 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-botBot commented May 27, 2026•
edited
Loading

primer-integrationBot commented Jun 8, 2026•
edited
Loading