SegmentedControl: add subtle variant and action slot

[liuliu-dev]

Closes https://github.com/github/primer/issues/6973

Adds a lower-emphasis subtle variant to SegmentedControl, including optional dividers for grouping related segments.

This also adds SegmentedControl.Action, an optional trailing action that adapts to the responsive presentation:

Changelog

New

• Adds a lower-emphasis subtle variant.
• Add dividerBefore to SegmentedControl.Button and SegmentedControl.IconButton.
• Add SegmentedControl.Action for actions such as adding a new view.

variant: subtle, with divider, and add view action

variant: default with add view action

variant: dropdown with add view action

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

[changeset-bot]

🦋 Changeset detected

Latest commit: b11f4ae

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.

[Copilot]

Pull request overview

Adds new UI capabilities to SegmentedControl in @primer/react by introducing a lower-emphasis variant="subtle" and a new compound slot SegmentedControl.Action intended for trailing actions (e.g., “Add view”), with supporting styling, docs, Storybook examples, and tests.

Changes:

• Added variant="subtle" styling and dividerBefore support for grouping segments visually.
• Introduced SegmentedControl.Action and wired it into SegmentedControl via useSlots.
• Updated docs/stories/tests and added a changeset for a minor release.

Show a summary per file

File	Description
packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx	Adds dividerBefore prop and exposes it via data-divider-before.
packages/react/src/SegmentedControl/SegmentedControlButton.tsx	Adds dividerBefore prop and exposes it via data-divider-before.
packages/react/src/SegmentedControl/SegmentedControlAction.tsx	Adds new SegmentedControl.Action slot component (trailing action).
packages/react/src/SegmentedControl/SegmentedControl.tsx	Supports subtle variant and extracts/renders the new Action slot via useSlots.
packages/react/src/SegmentedControl/SegmentedControl.test.tsx	Adds tests for subtle variant, dividers, and action click behavior.
packages/react/src/SegmentedControl/SegmentedControl.module.css	Implements subtle variant visuals, divider rendering, and action button sizing/hover styles.
packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx	Adds feature stories for subtle variant and trailing action.
packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css	Styles the reset button in the new feature story.
packages/react/src/SegmentedControl/SegmentedControl.docs.json	Documents subtle, dividerBefore, and the new SegmentedControl.Action API.
packages/react/src/SegmentedControl/index.ts	Exports SegmentedControlActionProps type.
.changeset/segmented-control-subtle-add-view.md	Declares a minor bump for the new public API surface.

Review details

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

• Files reviewed: 11/11 changed files
• Comments generated: 5
• Review effort level: Lite

[primer]

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

[TylerJDev]

Looking good so far! Wanted to leave some initial comments before I finish the review tomorrow ✨

[TylerJDev]

I'm wondering if we should make this a subcomponent to keep it consistent with other divider implementations? Something like <SegmentedControl.Divider>, like how we do it in ActionList / ActionMenu.

[liuliu-dev]

I replaced dividerBefore prop with SegmentedControl.Divider.

This required some additional index mapping to ensure dividers don’t count as selectable segments. I’m curious what you think 👀

[primer-integration]

Integration test results from github/github-ui PR:

  CI Passed
  VRT Running
  Projects Waiting