Skip to content

data-component adr part 4 - #7838

Merged
llastflowers merged 10 commits into
mainfrom
llastflowers/6497/data-component-ADR-part-4
May 15, 2026
Merged

data-component adr part 4#7838
llastflowers merged 10 commits into
mainfrom
llastflowers/6497/data-component-ADR-part-4

Conversation

@llastflowers

@llastflowersllastflowers commented May 13, 2026

Copy link
Copy Markdown
Contributor

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

Changelog

New

Add data-component attributes and associated tests for Hidden, InlineMessage, KeybindingHint, Label, and LabelGroup

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

CopilotAI review requested due to automatic review settings May 13, 2026 21:53
@llastflowers
llastflowers requested a review from a team as a code ownerMay 13, 2026 21:53
@changeset-bot

changeset-botBot commented May 13, 2026•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 5348dfc

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

This PR includes changesets to release 1 package
NameType
@primer/reactMinor

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

github-actionsBot commented May 13, 2026

Copy link
Copy Markdown
Contributor

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

@github-actionsgithub-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 13, 2026
@llastflowers
Update @primer/react version and add data-component attributes
3e6bb8a
Add data-component attributes and associated tests for Hidden, InlineMessage, KeybindingHint, Label, and LabelGroup
CopilotAI reviewed May 13, 2026
View reviewed changes

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds stable data-component attributes for several @primer/react components as part of the ADR-driven stable selector rollout, with unit tests covering the new selectors.

Changes:

  • Adds data-component to Hidden, InlineMessage, KeybindingHint, Label, and LabelGroup roots.
  • Adds tests asserting those selectors are rendered.
  • Updates LabelGroup’s two render paths to include the selector.
Show a summary per file
FileDescription
packages/react/src/Hidden/Hidden.tsxAdds data-component="Hidden" to the root div.
packages/react/src/Hidden/Hidden.test.tsxTests Hidden selector rendering.
packages/react/src/InlineMessage/InlineMessage.tsxAdds data-component="InlineMessage" to the root div.
packages/react/src/InlineMessage/InlineMessage.test.tsxTests InlineMessage selector rendering.
packages/react/src/KeybindingHint/KeybindingHint.tsxAdds data-component="KeybindingHint" to the rendered kbd wrapper.
packages/react/src/KeybindingHint/KeybindingHint.test.tsxTests KeybindingHint selector rendering.
packages/react/src/Label/Label.tsxAdds data-component="Label" to the polymorphic root.
packages/react/src/Label/Label.test.tsxTests Label selector rendering.
packages/react/src/LabelGroup/LabelGroup.tsxAdds data-component="LabelGroup" to both LabelGroup root render paths.
packages/react/src/LabelGroup/LabelGroup.test.tsxTests LabelGroup selector rendering for the default path.

Copilot's findings

  • Files reviewed: 11/11 changed files
  • Comments generated: 2

Comment threadpackages/react/src/Label/Label.tsx
Comment threadpackages/react/src/LabelGroup/LabelGroup.tsx
@github-actions
github-actionsBot requested a deployment to storybook-preview-7838 May 13, 2026 21:58 Abandoned
@github-actions
github-actionsBot requested a deployment to storybook-preview-7838 May 13, 2026 22:04 Abandoned
@github-actions
github-actionsBottemporarily deployed to storybook-preview-7838 May 13, 2026 22:25 Inactive
@llastflowersllastflowers added the Canary Release Apply this label when you want CI to create a canary release of the current PR label May 14, 2026
@github-actions
github-actionsBottemporarily deployed to storybook-preview-7838 May 14, 2026 15:38 Inactive
@llastflowersllastflowers changed the title Llastflowers/6497/data component adr part 4data-component adr part 4May 14, 2026
francinelucca
francinelucca requested changes May 15, 2026
View reviewed changes
Comment threadpackages/react/src/LabelGroup/LabelGroup.tsx
Comment on lines 315 to 337
<InlineToggle
collapseButtonRef={collapseButtonRef}
collapseInlineExpandedChildren={collapseInlineExpandedChildren}
expandButtonRef={expandButtonRef}
hiddenItemIds={hiddenItemIds}
isOverflowShown={isOverflowShown}
showAllTokensInline={showAllTokensInline}
totalLength={React.Children.toArray(children).length}
/>
) : (
<OverlayToggle
closeOverflowOverlay={closeOverflowOverlay}
expandButtonRef={expandButtonRef}
hiddenItemIds={hiddenItemIds}
isOverflowShown={isOverflowShown}
openOverflowOverlay={openOverflowOverlay}
overlayPaddingPx={overlayPaddingPx}
overlayWidth={overlayWidth}
totalLength={React.Children.toArray(children).length}
>
{children}
</OverlayToggle>
)}

@francineluccafrancineluccaMay 15, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wonder if these should have data-component as well 🤔. or maybe on the ToggleWrapper we add data-component="LabelGroup.Toggle" to cover both cases

@github-actions
github-actionsBot requested a deployment to storybook-preview-7838 May 15, 2026 19:02 Abandoned
@github-actions
github-actionsBottemporarily deployed to storybook-preview-7838 May 15, 2026 19:11 Inactive
@primer-integration

primer-integrationBot commented May 15, 2026

Copy link
Copy Markdown

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

@primer-integration

primer-integrationBot commented May 15, 2026

Copy link
Copy Markdown

Integration test results from github/github-ui:

Passed CI  Passed
Passed VRT  Passed
Passed Projects  Passed

All checks passed!

@llastflowers
llastflowers added this pull request to the merge queueMay 15, 2026
Merged via the queue into main with commit 8ddf1b0May 15, 2026
53 checks passed
@llastflowers
llastflowers deleted the llastflowers/6497/data-component-ADR-part-4 branch May 15, 2026 19:50
@primerprimerBot mentioned this pull request May 15, 2026
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code reviewCopilot
Copilot review effort, defaults to Lite
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@siddharthkpsiddharthkpsiddharthkp approved these changes
@joshblackjoshblackjoshblack approved these changes
@francineluccafrancineluccafrancinelucca approved these changes

Assignees

No one assigned

Labels

Canary ReleaseApply this label when you want CI to create a canary release of the current PRintegration-tests: recommendedThis change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@llastflowers@siddharthkp@joshblack@francinelucca