Remove support for sx from CircleBadge component

[llastflowers]

Closeshttps://github.com/github/primer/issues/5780

Current sx usage: 5

✅ sx usages are only in repos other than github-ui; those usages have been added to the tracking issue

Changelog

Removed

Remove support for sx from the CircleBadge component, and associated stories, docs, and tests

Rollout strategy

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

We are using the @primer/styled-react component to mitigate removing sx usage. We will make sure usage is updated upstream before merging.

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]

🦋 Changeset detected

Latest commit: 9f01823

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	89.52 KB (+0.12% 🔺)
packages/react/dist/browser.umd.js	89.66 KB (+0.04% 🔺)

[Copilot]

Pull Request Overview

This pull request removes the deprecated sx prop support from the CircleBadge component as part of a broader effort to eliminate sx usage across Primer React components. The change is part of a major version release with an existing migration strategy in place.

Key changes:

• Removes sx prop support from CircleBadge component type definitions and styling
• Updates component documentation to reflect the removed prop
• Updates test snapshots to reflect the styling changes

Reviewed Changes

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

File	Description
packages/react/src/CircleBadge/CircleBadge.tsx	Removes sx prop from component interface and styled component implementation
packages/react/src/CircleBadge/CircleBadge.docs.json	Removes sx prop from component documentation
packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap	Updates test snapshots to reflect new CSS class names after sx removal
.changeset/cool-apricots-sneeze.md	Adds changeset entry documenting the breaking change for major version release

[francinelucca]

Looks like CircleBadge is still a styled component 🤔 , though it is up for deprecation, I'm not sure if we care to migrate? cc @TylerJDev
Also, let's make sure to run integration checks before merging

[llastflowers]

Looks like CircleBadge is still a styled component 🤔 , though it is up for deprecation, I'm not sure if we care to migrate? cc @TylerJDev Also, let's make sure to run integration checks before merging

Tyler confirmed in the issue comments that we should just migrate this one, since the removal might not happen in v38 👍

[francinelucca]

Tyler confirmed in the https://github.com/github/primer/issues/5780#issuecomment-3254503394 that we should just migrate this one, since the removal might not happen in v38 👍

should we migrate it to css modules then?

[primer-integration]

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

[primer-integration]

🟢 ci completed with status success.

[github-actions]

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

[github-actions]

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