Remove `sx` from the `SegmentedControl` component by liuliu-dev · Pull Request #6741 · primer/react

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

+ // 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.

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

remove sx and box
1df14c5

changeset
3985a24

github-actionsBot 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-actionsBottemporarily 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-actionsBottemporarily 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-actionsBot 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-actionsBottemporarily deployed to storybook-preview-6741 September 8, 2025 18:14 Inactive

github-actionsBottemporarily 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-actionsBottemporarily 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 637b0d3Compare September 8, 2025 20:32

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

github-actionsBottemporarily 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-actionsBottemporarily 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' ofhttps://github…
e633c32
….com/primer/react into liuliu/remove-sx-from-segmentcontrol

format
4533599

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

github-actionsBottemporarily 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-actionsBottemporarily 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-actionsBottemporarily 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' ofhttps://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-actionsBottemporarily deployed to storybook-preview-6741 September 9, 2025 22:59 Inactive

github-actionsBot 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

CopilotAI 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

CopilotAI 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

Comment threadpackages/styled-react/src/__tests__/primer-react.browser.test.tsx

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 4896ef1Sep 11, 2025
47 checks passed

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

primerBot mentioned this pull request Sep 11, 2025
Release tracking (rc) #6842
Merged

pksjce pushed a commit that referenced this pull request Sep 18, 2025
Removesxfrom theSegmentedControlcomponent (#6741)
7318c1b

Navigation Menu

Uh oh!

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

Remove `sx` from the `SegmentedControl` component#6741
liuliu-dev merged 17 commits into
mainfrom
liuliu/remove-sx-from-segmentcontrol

liuliu-dev commented Sep 5, 2025•
edited
Loading

Uh oh!

changeset-botBot commented Sep 5, 2025•
edited
Loading

Uh oh!

github-actionsBot commented Sep 5, 2025

Uh oh!

github-actionsBot commented Sep 5, 2025•
edited
Loading

Uh oh!

primer-integrationBot commented Sep 9, 2025

Uh oh!

primer-integrationBot commented Sep 9, 2025

Uh oh!

CopilotAI left a comment

Uh oh!

CopilotAISep 9, 2025

Uh oh!

liuliu-devSep 9, 2025

Uh oh!

github-actionsBot commented Sep 10, 2025•
edited
Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

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

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-botBot 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-actionsBot commented Sep 5, 2025

Uh oh!

github-actionsBot 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-integrationBot commented Sep 9, 2025

Uh oh!

primer-integrationBot commented Sep 9, 2025

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

CopilotAISep 9, 2025

Choose a reason for hiding this comment

Uh oh!

liuliu-devSep 9, 2025

Choose a reason for hiding this comment

Uh oh!

github-actionsBot 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

liuliu-dev commented Sep 5, 2025•
edited
Loading

changeset-botBot commented Sep 5, 2025•
edited
Loading

github-actionsBot commented Sep 5, 2025•
edited
Loading

github-actionsBot commented Sep 10, 2025•
edited
Loading