Remove sx prop support from ToggleSwitch

[liuliu-dev]

Migrates the ToggleSwitch component away from Box components and sx prop support to use CSS modules, closes #4826

What Changed

• Removed Box wrapper and sx prop support from the main ToggleSwitch component

• Replaced sx prop styling with CSS modules and data attributes for state-based styling

• Added ToggleSwitch to the styled-react package for repos still using sx props

• Note: SwitchButton and ToggleKnob still use styled-components (styled.button and styled.div) and will be migrated in a future iteration

Rollout strategy

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

[changeset-bot]

🦋 Changeset detected

Latest commit: d073e36

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]

👋 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]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	90.03 KB (+0.02% 🔺)
packages/react/dist/browser.umd.js	90.18 KB (-0.05% 🔽)

[primer-integration]

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

[primer-integration]

🔴 golden-jobs completed with status failure.

[Copilot]

Pull Request Overview

Removes sx prop support from the ToggleSwitch component by migrating from Box-based layout to CSS modules and data attributes for styling. This is part of the broader effort to move away from styled-components and sx prop usage throughout the design system.

• Replaced Box wrapper components with native HTML elements styled via CSS modules
• Removed sx prop support from ToggleSwitch component interface
• Added backward compatibility by providing an sx-enabled wrapper in the @primer/styled-react package

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/styled-react/src/index.ts	Adds ToggleSwitch with sx support using createStyledComponent wrapper
packages/styled-react/src/tests/snapshots/exports.test.ts.snap	Updates test snapshot to reflect ToggleSwitch export order change
packages/react/src/ToggleSwitch/ToggleSwitchStoryWrapper.tsx	Converts Box-based layout to CSS module styling
packages/react/src/ToggleSwitch/ToggleSwitchStoryWrapper.module.css	Defines CSS module styles for story wrapper component
packages/react/src/ToggleSwitch/ToggleSwitch.tsx	Removes sx prop and Box components, implements CSS module styling with data attributes
packages/react/src/ToggleSwitch/ToggleSwitch.module.css	CSS module implementation of component styles with state-based data attribute selectors
.changeset/bright-parents-flow.md	Documents breaking change for ToggleSwitch sx removal

[francinelucca]

looks like this was previously following alphabetical order, can we fix back ?

[liuliu-dev]

exports.test.ts.snap is auto-generated by the test runner.
I guess the reason ToggleSwitch appears first is that it's handled differently from other components, it's wrapped with createStyledComponent and exported separately.

[liuliu-dev]

integration checks manually ran here: https://github.com/github/github-ui/pull/1177