data component adr part 7

[llastflowers]

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

Changelog

New

Add data-component attributes and associated tests for:

Radio
RadioGroup
RelativeTime
ScrollableRegion
SegmentedControl
Select
SideNav
SkeletonBox
SkeletonAvatar
SkeletonText
Spinner

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)

[changeset-bot]

🦋 Changeset detected

Latest commit: 91e5369

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]

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

This PR continues the “data component ADR” work by adding data-component attributes and corresponding unit tests across several @primer/react components, improving stable DOM identification for testing, analytics, and integrations.

Changes:

• Add data-component attributes to component root elements (and select sub-elements) for: Radio/RadioGroup, RelativeTime, ScrollableRegion, SegmentedControl, Select, SideNav, SkeletonBox/SkeletonText/SkeletonAvatar, and Spinner.
• Add/extend unit tests to validate data-component attributes are present and correctly named.
• Update SkeletonBox to default data-component to "SkeletonBox" while still allowing an override via prop.

Show a summary per file

File	Description
packages/react/src/Spinner/Spinner.tsx	Adds data-component="Spinner" to the outer wrapper element.
packages/react/src/Spinner/Spinner.test.tsx	Adds a test asserting the Spinner root has the expected data-component.
packages/react/src/SkeletonText/SkeletonText.tsx	Adjusts data-component placement for single-line; introduces a wrapper data-component for multiline.
packages/react/src/SkeletonText/SkeletonText.test.tsx	Adds tests asserting data-component behavior for single-line and multiline SkeletonText.
packages/react/src/SkeletonAvatar/SkeletonAvatar.test.tsx	Adds a test asserting data-component="SkeletonAvatar".
packages/react/src/Skeleton/SkeletonBox.tsx	Defaults data-component to "SkeletonBox" and applies it on render.
packages/react/src/Skeleton/tests/SkeletonBox.test.tsx	Adds a test asserting data-component="SkeletonBox".
packages/react/src/SideNav.tsx	Adds data-component markers to SideNav and SideNav.Link.
packages/react/src/Select/Select.tsx	Adds data-component markers to Select, Option, OptGroup, and placeholder option.
packages/react/src/Select/Select.test.tsx	Adds tests asserting data-component markers across Select and its sub-elements.
packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx	Adds data-component marker to icon button variant.
packages/react/src/SegmentedControl/SegmentedControlButton.tsx	Adds data-component marker to button variant.
packages/react/src/SegmentedControl/SegmentedControl.tsx	Adds data-component="SegmentedControl" to the root <ul>.
packages/react/src/SegmentedControl/SegmentedControl.test.tsx	Adds tests asserting data-component on root/buttons/icon buttons.
packages/react/src/ScrollableRegion/ScrollableRegion.tsx	Adds data-component="ScrollableRegion" to the wrapper element.
packages/react/src/ScrollableRegion/ScrollableRegion.test.tsx	Adds a test asserting data-component="ScrollableRegion".
packages/react/src/RelativeTime/RelativeTime.tsx	Adds data-component="RelativeTime" to the rendered custom element.
packages/react/src/RelativeTime/RelativeTime.test.tsx	Adds a test asserting data-component="RelativeTime".
packages/react/src/RadioGroup/RadioGroup.tsx	Adds data-component="RadioGroup" to the shared group component.
packages/react/src/RadioGroup/RadioGroup.test.tsx	Adds a test asserting data-component markers for RadioGroup and related sub-parts.
packages/react/src/Radio/Radio.tsx	Adds data-component="Radio" to the input element.
packages/react/src/Radio/Radio.test.tsx	Adds a test asserting data-component="Radio".
packages/react/src/tests/SideNav.test.tsx	Adds a test asserting data-component markers for SideNav and link.

Copilot's findings

Comments suppressed due to low confidence (1)

packages/react/src/RadioGroup/RadioGroup.tsx:53

• data-component is currently placed before {...rest}, so passing a data-component prop (or spreading a props object that happens to include it) can override/remove the intended RadioGroup marker and also affects the derived .Label/.Caption/.Validation markers via parentName. Place data-component after the spread so the default is stable.

• Files reviewed: 24/24 changed files
• Comments generated: 5

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer-integration]

⚠️ Hi from github/github-ui! The integration workflow could not find a canary version for the latest commit on this PR.

A successful canary CI run (i.e., a valid canary version published via the release.yml workflow) must exist for the latest commit before integration checks will succeed.

Next steps:

1. Make sure the Canary Release label is applied to the PR — the release.yml workflow requires this label to publish a canary version.
2. Wait for the release.yml canary CI run to complete successfully for the latest commit on this PR.
3. Once a valid canary version exists, re-trigger the integration workflow by visiting the primer-react-pr-test workflow page, clicking Run workflow, and pasting this PR's URL.

For more details, see this workflow run.