Allow SegmentedControl labels to wrap without overflow

[joshfarrant]

Closes github/primer#7156

SegmentedControl previously fixed its track to 32px, or 28px at the small size, which allowed multiline labels to escape the track and selected-state treatment. This PR updates the fixed height to min-height so the control grows to its tallest segment.

Changelog

New

• Add deterministic multiline Storybook coverage for selected and unselected labels across default and subtle variants, both sizes, icons, counters, and unchanged single-line references.
• Add Playwright geometry and accessibility stress coverage for equal segment heights, selected-content sizing, 320px reflow, enlarged text, and WCAG text spacing.
• Add an @primer/react patch changeset.

Changed

• Preserve the existing 32px and 28px control dimensions as minimum heights, allowing SegmentedControl to grow vertically with wrapped labels.

Removed

• None.

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

Primer React tests pass, and compatibility also verified in github-ui.

[changeset-bot]

🦋 Changeset detected

Latest commit: d7bfaa1

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	Patch

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]

Copilot review overview

🟡 Changes recommended

The enlarged-text test can pass despite horizontal overflow because it samples page overflow too early and only checks content height.

Get a fresh assessment by requesting another Copilot review.

Review effort: Balanced
Findings: 1

Open (1)

• Stress test misses horizontal overflow after style mutation · New

What changed in this PR

Updates SegmentedControl to grow vertically for wrapped labels while preserving standard minimum heights.

Changes:

• Replaces fixed heights with minimum heights.
• Adds multiline Storybook and Playwright coverage.
• Adds an @primer/react patch changeset.

File	Description
SegmentedControl.module.css	Allows vertical growth.
SegmentedControl.features.stories.tsx	Adds wrapping scenarios.
SegmentedControl.features.stories.module.css	Styles test scenarios.
SegmentedControl.test.ts	Adds layout and reflow tests.
.changeset/​segmented-control-wrap-labels.md	Documents the patch.

---

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

[joshfarrant]

Final github-ui integration assessment for github/github-ui#34664 at 05637c8aa:

• Primer Integration Changes, Projects, and VRT all passed.
• CI failed only in @github-ui/issue-metadata:test. The original attempt failed two ProjectItemSectionFieldListTanStack cases; a failed-jobs retry reproduced the same settles a confirmed field clear when the response also contains unrelated GraphQL errors failure at line 683.
• The same line-683 test already failed in the prior integration run (35755082152), before the final SegmentedControl package.
• The strict locator sees both the visible Choose an option value and Choose an option, filter text box and list of items… in the live region. That announcement comes from the FilteredActionList changes introduced on Primer main by SelectPanel: Announce filter input name on initial focus #8413 (d4e30ed18), not from this PR.
• This PR's source diff against origin/main contains only SegmentedControl source/stories/tests/snapshots and its changeset. packages/issue-metadata has no SegmentedControl usage, and the downstream VRT/Projects suites are green.

This is a real downstream test incompatibility with an unrelated Primer-main FilteredActionList change, not a SegmentedControl regression. The failed run and retry remain linked for follow-up; applying the repository-standard integration-tests: skipped manually disposition only for #8442. The PR remains draft.

[primer-integration]

Integration test results from github/github-ui PR:

  Changes Passed
  CI Failed
  VRT Passed
  Projects Passed

CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

[joshfarrant]

Thanks for the review @liuliu-dev!

Heads up that I spotted some VRTs were showing some unintended changes so I've pushed a fix for that. No changes to existing VRTs now, the only VRT change is the addition of the new ones.

Just flagging for you in case you wanted to take another look before I merge

[Copilot]

Copilot review overview

🟢 Approval recommended

The focused styling fix is well covered across sizes, variants, reflow, and unchanged single-line behavior.

Review effort: Balanced
Findings: None

Resolved since last review (1)

• Stress test misses horizontal overflow after style mutation