data component adr part 8

[llastflowers]

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

Changelog

New

Add data-component attributes and associated tests for:

SplitPageLayout
Stack
StateLabel
SubNav
TabNav
Text
TextArea
ThemeProvider

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: 2f068ed

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. If this doesn't work, you can also use the original workflow here. 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 rollout by adding data-component attributes to several Primer React components and adding/adjusting unit tests (and snapshots) to assert those attributes are present, including composition cases like SplitPageLayout built on PageLayout.

Changes:

• Add data-component attributes to ThemeProvider, Text, Textarea, Stack/Stack.Item, StateLabel, SubNav (and subcomponents), and TabNav (and subcomponents).
• Add/update unit tests and snapshots to verify the new data-component attributes.
• Extend PageLayout (and slot components) to accept a data-component prop so composed wrappers (e.g. SplitPageLayout) can stamp their own identifiers.

Show a summary per file

File	Description
packages/react/src/ThemeProvider.tsx	Adds data-component="ThemeProvider" to the ThemeProvider wrapper element.
packages/react/src/tests/ThemeProvider.test.tsx	Adds an assertion that ThemeProvider renders data-component.
packages/react/src/Textarea/Textarea.tsx	Adds data-component="Textarea" to the <textarea>.
packages/react/src/Textarea/Textarea.test.tsx	Adds a test verifying Textarea’s data-component attribute.
packages/react/src/Text/Text.tsx	Adds data-component="Text" to the Text root element.
packages/react/src/Text/Text.test.tsx	Adds a test verifying Text’s data-component attribute.
packages/react/src/TabNav/TabNav.tsx	Adds data-component attributes to TabNav and TabNav.Link.
packages/react/src/TabNav/tests/TabNav.test.tsx	Adds a test verifying TabNav and TabNav.Link data-component attributes.
packages/react/src/SubNav/SubNav.tsx	Adds data-component attributes to SubNav, SubNav.Links, and SubNav.Link.
packages/react/src/SubNav/SubNav.test.tsx	Adds a test verifying SubNav and subcomponents data-component attributes.
packages/react/src/tests/snapshots/SubNavLink.test.tsx.snap	Updates snapshots to include data-component="SubNav.Link".
packages/react/src/StateLabel/StateLabel.tsx	Adds data-component="StateLabel" to the StateLabel root element.
packages/react/src/StateLabel/tests/StateLabel.test.tsx	Adds a test verifying StateLabel’s data-component attribute and adjusts formatting.
packages/react/src/StateLabel/tests/snapshots/StateLabel.test.tsx.snap	Updates snapshots to include data-component="StateLabel".
packages/react/src/Stack/Stack.tsx	Adds data-component to Stack and StackItem.
packages/react/src/Stack/tests/Stack.test.tsx	Adds a test verifying Stack’s data-component attribute.
packages/react/src/Stack/tests/StackItem.test.tsx	Adds a test verifying StackItem’s data-component attribute.
packages/react/src/SplitPageLayout/SplitPageLayout.tsx	Adds data-component stamping for SplitPageLayout and slot wrappers; copies slot markers to integrate with PageLayout’s slot system.
packages/react/src/SplitPageLayout/SplitPageLayout.test.tsx	Adds a test verifying data-component for SplitPageLayout and all subcomponents.
packages/react/src/PageLayout/PageLayout.tsx	Adds support for overriding data-component via props for PageLayout and slot components (used by composed wrappers like SplitPageLayout).

Review details

Comments suppressed due to low confidence (2)

packages/react/src/Text/Text.tsx:31

• data-component is set before {...rest}, which means a consumer-provided data-component prop will override it. If the intent is for Primer to own this identifier, move data-component after the spread so it always wins.

    <Component
      className={clsx(className, classes.Text)}
      data-component="Text"
      data-size={size}
      data-weight={weight}
      data-white-space={whiteSpace}
      {...rest}
      ref={ref}
    />

packages/react/src/Textarea/Textarea.tsx:150

• data-component is currently before {...rest}, so callers can override it by passing data-component in props. Move data-component after the spread so the component always controls this attribute.

          <textarea
            value={value}
            defaultValue={defaultValue}
            data-component="Textarea"
            data-resize={resize}
            aria-required={required}
            aria-invalid={isValid === 'error' ? 'true' : 'false'}
            ref={ref}
            disabled={disabled}
            rows={rows}
            cols={cols}
            className={classes.TextArea}
            onChange={handleTextareaChange}
            style={{
              minHeight,
              maxHeight,
              ...style,
            }}
            {...rest}
            aria-describedby={

• Files reviewed: 21/21 changed files
• Comments generated: 6
• Review effort level: Low