Remove Box usage and `sx` prop from Link and misc other areas (stories, etc) by mperrotti · Pull Request #6825 · primer/react

mperrotti · 2025-09-10T14:26:29Z

Relates to https://github.com/github/primer/issues/5424 and https://github.com/github/primer/issues/5425
Closeshttps://github.com/github/primer/issues/5714

Changelog

New

Changed

Removed

sx support was removed from Link

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-09-10T14:26:33Z

🦋 Changeset detected

Latest commit: bb77600

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-10T14:27:15Z

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

…in styled-react

…ype usage

Copilot

Pull Request Overview

This PR removes the Box component usage and sx prop from multiple components as part of a major migration. The changes eliminate the legacy styled-components dependency and styled system support, transitioning components to use CSS modules and modern polymorphic patterns instead.

Key Changes:

Removes sx prop support from components like Announce, AriaStatus, Dialog, Heading, Link, NavList, PageLayout, and UnderlineNav
Replaces Box component wrapping with direct HTML element rendering or CSS modules
Implements modern polymorphic component patterns using fixedForwardRef and PolymorphicProps

Reviewed Changes

Copilot reviewed 36 out of 36 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/styled-react/src/types/AriaRole.ts	Adds AriaRole type definitions for backwards compatibility
packages/styled-react/src/sx.ts	Creates sx utility function for styled-components compatibility layer
packages/styled-react/src/index.tsx	Updates exports and creates wrapped components with sx support
packages/styled-react/src/components/	New component wrappers that restore sx prop functionality
packages/react/src/utils/modern-polymorphic.ts	New utility for modern polymorphic component patterns
packages/react/src/*/index.ts	Updates component exports and type definitions
packages/react/src//.tsx	Component implementations migrated from Box+sx to direct elements+CSS modules
packages/react/src//.module.css	New CSS module styles replacing sx-based styling
packages/react/src//.docs.json	Documentation updates removing deprecated sx prop references
packages/react/src//.test.tsx	Test updates removing sx-related test cases

Copilot · 2025-09-10T23:34:18Z

+ // @ts-expect-error - PrimerPageLayout is not recognized as a valid component type
+ return <Wrapper as={PrimerPageLayout} ref={ref} {...props} />


The @ts-expect-error comment indicates a type system issue that should be properly resolved rather than suppressed. Consider creating proper type definitions for PrimerPageLayout or using a more specific typing approach to avoid the need for error suppression.

Copilot · 2025-09-10T23:34:18Z

+export type UnderlineItemProps<As extends React.ElementType = 'a'> = {
+ as?: As
 className?: string
 iconsVisible?: boolean
 loadingCounters?: boolean
 counter?: number | string
 icon?: FC<IconProps> | React.ReactElement
 id?: string
- ref?: React.Ref<unknown>
-} & SxProp
+ children?: React.ReactNode
+} & SxProp &
+ PolymorphicProps<As, 'a'>


The type definition includes both SxProp and modern polymorphic props. Since this PR is removing sx support, the SxProp should be removed from this type definition to maintain consistency with the migration goals.

Stop judging me, Copilot. That's a separate issue. We'll get to it...

github-actions · 2025-09-10T23:34:35Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.49 KB (-0.22% 🔽)
packages/react/dist/browser.umd.js	89.38 KB (-0.57% 🔽)

…react into mp/rm-box-and-sx-from-components

…from-components

…e PR

…from-components

…o styled component

…from-components

primer-integration · 2025-09-24T17:18:38Z

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

primer-integration · 2025-09-24T17:32:15Z

🟢 ci completed with status success.

mperrotti · 2025-09-24T17:40:09Z

This PR will pass integration tests with the following changes to imports in github-ui:
https://github.com/github/github-ui/pull/3212

github-actions · 2025-09-24T17:49:40Z

👋 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 · 2025-09-24T17:59:05Z

👋 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 · 2025-09-25T12:45: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!

francinelucca · 2025-09-25T13:58:20Z

@@ -0,0 +1,35 @@
+// Mostly taken from https://github.com/total-typescript/react-typescript-tutorial/blob/main/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx


can you elaborate on the need for this over the regular polymorphic we've been using?

Our current approach causes the following problems:
I don't think there's a good way to use ForwardRefComponent without casting (as ForwardRefComponent)
We can't access the prop types to automatically generate component API docs (project @adierkens is working on) when we cast with as ForwardRefComponent
The ForwardRefComponent type isn't portable, so I get an error when I try to import a component that uses ForwardRefComponent into styled-react
The DistributiveOmit (usually) handles type collisions better (for example: we specify an onClick, but the native HTML element type has a conflicting onClick)
I think the ForwardRefComponent approach is less type-safe, but I don't remember the specifics
@adierkens or somebody who is actually good at TypeScript can keep me correct on this.

All that said, I'm fine with going back to ForwardRefComponent for now 🙂
This just felt like a good opportunity to level-up our component types.

rm Box and sx prop from components, add to styled-react
d95b2f9

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 10, 2025

mperrotti deployed to github-pages September 10, 2025 14:35 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6825 September 10, 2025 14:35 Inactive

mperrotti added 4 commits September 10, 2025 17:40

fixes NavList/ActionList type errors surfaced when creating wrappers …
778eca1
…in styled-react

adds PageHeader to styled-react and replaces its legacy polymorphic t…
dac0887
…ype usage

fix type errors in styled-react UnderlineNav/UnderlineNav.Item
ea20922

adds changeset
3645c19

mperrotti marked this pull request as ready for review September 10, 2025 23:32

mperrotti requested a review from a team as a code owner September 10, 2025 23:32

mperrotti requested review from Copilot, joshblack and pksjce September 10, 2025 23:32

CopilotAI reviewed Sep 10, 2025
View reviewed changes

github-actionsBot requested a deployment to storybook-preview-6825 September 10, 2025 23:36 Abandoned

mperrotti deployed to github-pages September 10, 2025 23:50 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6825 September 10, 2025 23:50 Inactive

fix typescript issues in styled-react component ports
58b207b

mperrotti deployed to github-pages September 11, 2025 14:21 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6825 September 11, 2025 14:21 Inactive

Merge branch 'main' into mp/rm-box-and-sx-from-components
73803e7

mperrotti deployed to github-pages September 11, 2025 21:11 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6825 September 11, 2025 21:12 Inactive

mperrotti added 3 commits September 11, 2025 19:05

fixes mistake in UnderlineNavItem prop type
a0bbeb1

Merge branch 'mp/rm-box-and-sx-from-components' of github.com:primer/…
487ae53
…react into mp/rm-box-and-sx-from-components

Merge branch 'main' of github.com:primer/react into mp/rm-box-and-sx-…
c142b2e
…from-components

mperrotti deployed to github-pages September 11, 2025 23:20 — with GitHub Actions View deployment

mperrotti added 2 commits September 17, 2025 18:43

reverts PageLayout changes
2b47b69

reverts ActionList-related changes from SegmentedControl
207f275

github-actionsBot requested a deployment to storybook-preview-6825 September 17, 2025 22:49 Abandoned

adds expect-error directive for something that's handled in a separat…
557f2e6
…e PR

github-actionsBot requested a deployment to storybook-preview-6825 September 17, 2025 22:55 Abandoned

mperrotti deployed to github-pages September 17, 2025 23:10 — with GitHub Actions View deployment

mperrotti added 3 commits September 18, 2025 07:41

deal with failing tests
58fc145

reverts PageHeader subcomponent prop types export (moved to separate PR)
2e6cbbf

updates snapshots
9d7c05d

mperrotti mentioned this pull request Sep 19, 2025
Remove support for sx from the NavList component #6768
Closed
9 tasks

mperrotti added 6 commits September 23, 2025 20:44

Merge branch 'main' of github.com:primer/react into mp/rm-box-and-sx-…
5d688d2
…from-components

rm dupe checkbox imports in styled-react
5540417

correct heading lineheight assertions
5bcebe0

styled-react tweaks for int tests: exports LinkProps, converts Link t…
7b1ef28
…o styled component

Merge branch 'main' of github.com:primer/react into mp/rm-box-and-sx-…
c42c45b
…from-components

moves styled-react Heading and Link to their own component files
6ae78cc

reverts Heading changes - they're handled in a separate PR
2b24955

updates changelog
178e221

pksjce reviewed Sep 25, 2025
View reviewed changes

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

pksjce approved these changes Sep 25, 2025
View reviewed changes

un-skip tests
bb77600

francinelucca reviewed Sep 25, 2025
View reviewed changes

francinelucca approved these changes Sep 25, 2025
View reviewed changes

primerBot mentioned this pull request Sep 26, 2025
Release tracking (rc) #6913
Merged

		// @ts-expect-error - PrimerPageLayout is not recognized as a valid component type
		return <Wrapper as={PrimerPageLayout} ref={ref} {...props} />

		@@ -0,0 +1,35 @@
		// Mostly taken from https://github.com/total-typescript/react-typescript-tutorial/blob/main/src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx

Uh oh!

Conversation

mperrotti commented Sep 10, 2025• edited by francinelucca 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-botBot commented Sep 10, 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 10, 2025

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes:

Reviewed Changes

Uh oh!

CopilotAISep 10, 2025

Choose a reason for hiding this comment

Uh oh!

CopilotAISep 10, 2025

Choose a reason for hiding this comment

Uh oh!

mperrottiSep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actionsBot commented Sep 10, 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 24, 2025

Uh oh!

primer-integrationBot commented Sep 24, 2025

Uh oh!

mperrotti commented Sep 24, 2025

Uh oh!

github-actionsBot commented Sep 24, 2025

Uh oh!

github-actionsBot commented Sep 24, 2025

Uh oh!

Uh oh!

github-actionsBot commented Sep 25, 2025

Uh oh!

Uh oh!

francineluccaSep 25, 2025

Choose a reason for hiding this comment

Uh oh!

mperrottiSep 25, 2025

Choose a reason for hiding this comment

Uh oh!

mperrottiSep 25, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mperrotti commented Sep 10, 2025•
edited by francinelucca
Loading

changeset-botBot commented Sep 10, 2025•
edited
Loading

github-actionsBot commented Sep 10, 2025•
edited
Loading