Remove `sx` from the `SegmentedControl` component #6741

liuliu-dev · 2025-09-05T20:17:19Z

Remove sx from the SegmentedControl component
Closes #5834

sx usage, tracking here: https://github.com/github/primer/issues/5827

Rollout strategy

Major release; if selected, include a written rollout or migration plan

changeset-bot · 2025-09-05T20:17:22Z

🦋 Changeset detected

Latest commit: 32f40fe

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

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Major
@primer/styled-react	Major

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 · 2025-09-05T20:17:51Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-09-05T20:21:33Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	88.57 KB (-0.08% 🔽)
packages/react/dist/browser.umd.js	88.63 KB (-0.11% 🔽)

…-segmentcontrol

….com/primer/react into liuliu/remove-sx-from-segmentcontrol

primer-integration · 2025-09-09T22:32:58Z

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

….com/primer/react into liuliu/remove-sx-from-segmentcontrol

primer-integration · 2025-09-09T23:20:58Z

🟢 ci completed with status success.

Copilot

Pull Request Overview

This PR removes the sx prop from the SegmentedControl component and its sub-components (Button and IconButton), aligning with the broader effort to phase out styled-system support from Primer React components. The change updates both the main React package and the styled-react compatibility package to maintain backwards compatibility.

Removes sx prop support from SegmentedControl, SegmentedControlButton, and SegmentedControlIconButton components
Adds compatibility wrappers in the styled-react package to preserve sx functionality for legacy consumers
Updates component exports, documentation, and tests to reflect the removal

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/styled-react/src/index.tsx	Adds SegmentedControl wrapper components that preserve sx prop functionality
packages/styled-react/src/tests/primer-react.browser.test.tsx	Updates tests to verify sx prop support in styled-react package
packages/react/src/index.ts	Exports SegmentedControl type definitions
packages/react/src/tests/snapshots/exports.test.ts.snap	Updates snapshot with new exported types
packages/react/src/SegmentedControl/index.ts	Exports component type definitions
packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx	Removes sx prop and BoxWithFallback usage
packages/react/src/SegmentedControl/SegmentedControlButton.tsx	Removes sx prop and BoxWithFallback usage
packages/react/src/SegmentedControl/SegmentedControl.tsx	Removes sx prop, exports type, and removes BoxWithFallback usage
packages/react/src/SegmentedControl/SegmentedControl.docs.json	Removes sx prop from documentation
packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx	Removes sx-related stories
e2e/components/SegmentedControl.test.ts	Removes tests for sx-related stories
.changeset/witty-chicken-leave.md	Documents breaking change

Copilot · 2025-09-09T23:22:02Z

packages/react/src/SegmentedControl/SegmentedControl.tsx

+                // Width is now handled by CSS: 32px default, 100% when data-full-width is set on parent
+                className={classes.IconButton}


The comment mentions that width is handled by CSS using classes.IconButton, but this class is not defined in the visible changes and may not actually handle the width styling that was previously managed by the sx prop. This could result in incorrect styling behavior.

Reusing the IconButton className in SegmentedControl.module.css

github-actions · 2025-09-10T15:47:04Z

Uh oh! @liuliu-dev, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

Images should have meaningful alternative text (alt text) at line 8

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

packages/styled-react/src/__tests__/primer-react.browser.test.tsx

liuliu-dev added 2 commits September 5, 2025 20:14

remove sx and box

1df14c5

changeset

3985a24

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 5, 2025

liuliu-dev deployed to github-pages September 5, 2025 20:25 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6741 September 5, 2025 20:25 Inactive

remove sx test

a4d0efe

liuliu-dev deployed to github-pages September 5, 2025 20:40 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6741 September 5, 2025 20:40 Inactive

Merge remote-tracking branch 'origin/main' into liuliu/remove-sx-from…

637b0d3

…-segmentcontrol

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 8, 2025

liuliu-dev deployed to github-pages September 8, 2025 18:13 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6741 September 8, 2025 18:14 Inactive

github-actions bot temporarily deployed to storybook-preview-6741 September 8, 2025 20:15 Inactive

liuliu-dev deployed to github-pages September 8, 2025 20:23 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6741 September 8, 2025 20:23 Inactive

liuliu-dev force-pushed the liuliu/remove-sx-from-segmentcontrol branch from 363f0f4 to 637b0d3 Compare September 8, 2025 20:32

liuliu-dev deployed to github-pages September 8, 2025 20:40 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6741 September 8, 2025 20:40 Inactive

Merge branch 'main' into liuliu/remove-sx-from-segmentcontrol

e897ebf

liuliu-dev deployed to github-pages September 8, 2025 23:27 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6741 September 8, 2025 23:28 Inactive

liuliu-dev added 4 commits September 8, 2025 16:32

Merge remote-tracking branch 'origin/main' into liuliu/remove-sx-from…

424c9f8

…-segmentcontrol

wrap segmentedcontrol in styled-react

0edc542

Merge branch 'liuliu/remove-sx-from-segmentcontrol' of https://github…

e633c32

….com/primer/react into liuliu/remove-sx-from-segmentcontrol

format

4533599

github-actions bot requested a deployment to storybook-preview-6741 September 9, 2025 16:31 Abandoned

liuliu-dev deployed to github-pages September 9, 2025 17:35 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6741 September 9, 2025 17:35 Inactive

fix lint issue

0b24ec2

liuliu-dev deployed to github-pages September 9, 2025 17:55 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6741 September 9, 2025 17:55 Inactive

Merge branch 'main' into liuliu/remove-sx-from-segmentcontrol

28f5b66

liuliu-dev deployed to github-pages September 9, 2025 22:35 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6741 September 9, 2025 22:35 Inactive

liuliu-dev added 2 commits September 9, 2025 15:50

import React

9d292d1

Merge branch 'liuliu/remove-sx-from-segmentcontrol' of https://github…

32f40fe

….com/primer/react into liuliu/remove-sx-from-segmentcontrol

liuliu-dev deployed to github-pages September 9, 2025 22:58 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6741 September 9, 2025 22:59 View deployment

github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Sep 9, 2025

liuliu-dev marked this pull request as ready for review September 9, 2025 23:21

Copilot AI review requested due to automatic review settings September 9, 2025 23:21

liuliu-dev requested a review from a team as a code owner September 9, 2025 23:21

liuliu-dev requested a review from joshblack September 9, 2025 23:21

Copilot AI reviewed Sep 9, 2025

View reviewed changes

joshblack approved these changes Sep 10, 2025

View reviewed changes

pksjce reviewed Sep 11, 2025

View reviewed changes

packages/styled-react/src/__tests__/primer-react.browser.test.tsx Show resolved Hide resolved

pksjce approved these changes Sep 11, 2025

View reviewed changes

liuliu-dev added this pull request to the merge queue Sep 11, 2025

Merged via the queue into main with commit 4896ef1 Sep 11, 2025
47 checks passed

liuliu-dev deleted the liuliu/remove-sx-from-segmentcontrol branch September 11, 2025 21:32

primer bot mentioned this pull request Sep 11, 2025

Release tracking (rc) #6842

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Remove `sx` from the `SegmentedControl` component #6741

Remove `sx` from the `SegmentedControl` component #6741

Uh oh!

liuliu-dev commented Sep 5, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Sep 5, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 5, 2025

Uh oh!

github-actions bot commented Sep 5, 2025 •

edited

Loading

Uh oh!

primer-integration bot commented Sep 9, 2025

Uh oh!

primer-integration bot commented Sep 9, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 9, 2025

Uh oh!

liuliu-dev Sep 9, 2025

Uh oh!

github-actions bot commented Sep 10, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

		// Width is now handled by CSS: 32px default, 100% when data-full-width is set on parent
		className={classes.IconButton}

Remove sx from the SegmentedControl component #6741

Remove sx from the SegmentedControl component #6741

Uh oh!

Conversation

liuliu-dev commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rollout strategy

Uh oh!

changeset-bot bot commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Sep 5, 2025

Uh oh!

github-actions bot commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

primer-integration bot commented Sep 9, 2025

Uh oh!

primer-integration bot commented Sep 9, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

liuliu-dev Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Remove `sx` from the `SegmentedControl` component #6741

Remove `sx` from the `SegmentedControl` component #6741

liuliu-dev commented Sep 5, 2025 •

edited

Loading

changeset-bot bot commented Sep 5, 2025 •

edited

Loading

github-actions bot commented Sep 5, 2025 •

edited

Loading

github-actions bot commented Sep 10, 2025 •

edited

Loading