chore(Octicon): remove sx #6945

francinelucca · 2025-10-04T17:43:37Z

Removes sx from Octicon component and exports styled wrapper from styled-react

Changelog

New

Octicon styled-component wrapper in @primer/styled-react

Changed

Removed

sx support for Octicon
Update documentation and tests in lieu of Octicon sx removal change

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

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-10-04T17:43:41Z

🦋 Changeset detected

Latest commit: 4ac195e

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-10-04T17:44:11Z

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

primer-integration · 2025-10-04T17:50:46Z

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

Copilot

Pull Request Overview

This PR removes the sx prop from the Octicon component as part of a migration away from styled-components. The change replaces inline sx styling with CSS modules for improved performance and consistency.

Key Changes

Removed sx prop support from the main Octicon component in @primer/react
Added a styled-components wrapper for backward compatibility in @primer/styled-react
Migrated all usage from sx props to CSS classes throughout the codebase

Reviewed Changes

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

Show a summary per file

File	Description
packages/react/src/Octicon/Octicon.tsx	Simplified component by removing styled-components and sx prop support
packages/styled-react/src/components/Octicon.tsx	Added styled wrapper to maintain sx prop compatibility for legacy package
packages/styled-react/src/deprecated.tsx	Updated export to use local Octicon wrapper instead of deprecated one
Multiple story files	Replaced sx props with CSS module classes for styling
Multiple CSS module files	Added CSS classes to replace inline sx styling
packages/react/src/StateLabel/StateLabel.tsx	Replaced width prop with data attribute for conditional styling

packages/react/src/StateLabel/StateLabel.module.css

francinelucca · 2025-10-06T12:05:03Z

Will need https://github.com/github/github-ui/pull/3844/commits/d977c23ff5cf30e7b410870ed28c24a9219dcd4c, https://github.com/github/github-ui/pull/3844/commits/967d8b30c0b162218823c932ec9f5127f31181f6, https://github.com/github/github-ui/pull/3844/commits/e3a73f7a615a78871845936ae79ebf9066644cd2

Co-authored-by: Copilot <[email protected]>

github-actions · 2025-10-06T12:06:13Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

Copilot

Pull Request Overview

Copilot reviewed 28 out of 28 changed files in this pull request and generated 2 comments.

packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css

github-actions · 2025-10-06T18:41:07Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

primer-integration · 2025-10-06T19:10:15Z

🟢 ci completed with status success.

siddharthkp

pew pew pew

siddharthkp

Some of the visual diffs look suspicious, otherwise all good

Approving in advance

siddharthkp · 2025-10-06T19:13:19Z

...ght/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-dimmed-linux.png

whoop, this diff looks suspicious

I approved it with @langermank! We had some styles that weren't being correctly applied in styles components, so when I migrated I inadvertently "fixed" them

…rom-octicon

github-actions · 2025-10-06T21:07:16Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

Co-authored-by: Copilot <[email protected]>

chore(Octicon): remove sx

9d5b1b0

github-actions bot added the staff Author is a staff member label Oct 4, 2025

Update @primer/react version to major

bd6797b

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 Oct 4, 2025

github-actions bot requested a deployment to storybook-preview-6945 October 4, 2025 17:47 Abandoned

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 Oct 4, 2025

francinelucca deployed to github-pages October 4, 2025 17:55 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6945 October 4, 2025 17:55 Inactive

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 Oct 4, 2025

francinelucca marked this pull request as ready for review October 6, 2025 12:03

francinelucca requested a review from a team as a code owner October 6, 2025 12:03

francinelucca requested review from TylerJDev and Copilot October 6, 2025 12:03

Copilot AI reviewed Oct 6, 2025

View reviewed changes

packages/react/src/StateLabel/StateLabel.module.css Outdated Show resolved Hide resolved

Update packages/react/src/StateLabel/StateLabel.module.css

92ea951

Co-authored-by: Copilot <[email protected]>

francinelucca requested a review from Copilot October 6, 2025 12:05

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 Oct 6, 2025

Copilot AI reviewed Oct 6, 2025

View reviewed changes

packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css Outdated Show resolved Hide resolved

packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css Outdated Show resolved Hide resolved

francinelucca deployed to github-pages October 6, 2025 12:14 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6945 October 6, 2025 12:14 Inactive

francinelucca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 6, 2025

test(vrt): update snapshots

fb03098

primer bot requested a review from a team as a code owner October 6, 2025 17:10

francinelucca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 6, 2025

test(vrt): update snapshots

392e9f9

primer bot deployed to github-pages October 6, 2025 18:52 View deployment

github-actions bot temporarily deployed to storybook-preview-6945 October 6, 2025 18:52 Inactive

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 Oct 6, 2025

siddharthkp approved these changes Oct 6, 2025

View reviewed changes

siddharthkp reviewed Oct 6, 2025

View reviewed changes

francinelucca added this pull request to the merge queue Oct 6, 2025

francinelucca removed this pull request from the merge queue due to a manual request Oct 6, 2025

langermank approved these changes Oct 6, 2025

View reviewed changes

Merge branch 'main' of github.com:primer/react into chore/remove-sx-f…

4ac195e

…rom-octicon

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 Oct 6, 2025

francinelucca deployed to github-pages October 6, 2025 21:15 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6945 October 6, 2025 21:16 View deployment

francinelucca added this pull request to the merge queue Oct 6, 2025

Merged via the queue into main with commit 1c84c0f Oct 6, 2025
40 of 41 checks passed

francinelucca deleted the chore/remove-sx-from-octicon branch October 6, 2025 21:28

primer bot mentioned this pull request Oct 6, 2025

Release tracking (rc) #6952

Open

pksjce pushed a commit that referenced this pull request Oct 7, 2025

chore(Octicon): remove sx (#6945)

2843b6e

Co-authored-by: Copilot <[email protected]>

chore(Octicon): remove sx #6945

chore(Octicon): remove sx #6945

Uh oh!

Conversation

francinelucca commented Oct 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Oct 4, 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 Oct 4, 2025

Uh oh!

primer-integration bot commented Oct 4, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

Uh oh!

francinelucca commented Oct 6, 2025

Uh oh!

github-actions bot commented Oct 6, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Oct 6, 2025

Uh oh!

primer-integration bot commented Oct 6, 2025

Uh oh!

siddharthkp left a comment

Choose a reason for hiding this comment

Uh oh!

siddharthkp left a comment

Choose a reason for hiding this comment

Uh oh!

siddharthkp Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkp Oct 6, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 6, 2025

Uh oh!

Uh oh!

Uh oh!

francinelucca commented Oct 4, 2025 •

edited

Loading

changeset-bot bot commented Oct 4, 2025 •

edited

Loading