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: 40063a9

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!

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

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 deployed to storybook-preview-7889 May 28, 2026 17:10 View deployment

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

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

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

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented May 27, 2026 •

edited

Loading