Remove Box usage and `sx` prop from Link and misc other areas (stories, etc) #6825

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

Relates to https://github.com/github/primer/issues/5424 and https://github.com/github/primer/issues/5425
Closes https://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

packages/styled-react/src/components/PageLayout.tsx

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

packages/react/src/internal/components/UnderlineTabbedInterface.tsx

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

packages/react/src/UnderlineNav/UnderlineNavItem.tsx

packages/react/src/NavList/NavList.tsx

packages/react/src/ActionList/Item.tsx

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

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!

packages/styled-react/src/__tests__/primer-react.browser.test.tsx

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!

packages/styled-react/src/__tests__/primer-react.browser.test.tsx

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

packages/react/src/utils/modern-polymorphic.ts

@@ -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.

…s, etc) (#6825)

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

d95b2f9

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

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

github-actions bot temporarily 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 pksjce, Copilot and joshblack September 10, 2025 23:32

Copilot AI reviewed Sep 10, 2025

View reviewed changes

github-actions bot 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-actions bot temporarily 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-actions bot temporarily 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-actions bot temporarily 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

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

2b24955

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 Sep 24, 2025

mperrotti changed the title ~~Remove Box usage and sx prop from Heading, Link, and misc areas~~ Remove Box usage and sx prop from Link and misc other areas (stories, etc) Sep 24, 2025

mperrotti requested a review from francinelucca September 24, 2025 17:55

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

updates changelog

178e221

github-actions bot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 24, 2025

github-actions bot temporarily deployed to storybook-preview-6825 September 24, 2025 17:59 Inactive

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 Sep 24, 2025

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

github-actions bot temporarily deployed to storybook-preview-6825 September 24, 2025 18:12 Inactive

pksjce reviewed Sep 25, 2025

View reviewed changes

packages/styled-react/src/__tests__/primer-react.browser.test.tsx Outdated Show resolved Hide resolved

pksjce approved these changes Sep 25, 2025

View reviewed changes

un-skip tests

bb77600

github-actions bot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 25, 2025

mperrotti deployed to github-pages September 25, 2025 12:54 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6825 September 25, 2025 12:54 View deployment

francinelucca reviewed Sep 25, 2025

View reviewed changes

francinelucca approved these changes Sep 25, 2025

View reviewed changes

francinelucca added this pull request to the merge queue Sep 26, 2025

Merged via the queue into main with commit 4196e0e Sep 26, 2025
43 of 47 checks passed

francinelucca deleted the mp/rm-box-and-sx-from-components branch September 26, 2025 21:10

primer bot mentioned this pull request Sep 26, 2025

Release tracking (rc) #6913

Merged

llastflowers pushed a commit that referenced this pull request Sep 29, 2025

Remove Box usage and sx prop from Link and misc other areas (storie…

72f7f82

…s, etc) (#6825)

		// @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

Remove Box usage and sx prop from Link and misc other areas (stories, etc) #6825

Remove Box usage and sx prop from Link and misc other areas (stories, etc) #6825

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-bot bot 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-actions bot commented Sep 10, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes:

Reviewed Changes

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

mperrotti Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot 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!

mperrotti commented Sep 24, 2025

Uh oh!

github-actions bot commented Sep 24, 2025

Uh oh!

github-actions bot commented Sep 24, 2025

Uh oh!

Uh oh!

github-actions bot commented Sep 25, 2025

Uh oh!

Uh oh!

francinelucca Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

mperrotti Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

mperrotti Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Remove Box usage and `sx` prop from Link and misc other areas (stories, etc) #6825

Remove Box usage and `sx` prop from Link and misc other areas (stories, etc) #6825

mperrotti commented Sep 10, 2025 •

edited by francinelucca

Loading

changeset-bot bot commented Sep 10, 2025 •

edited

Loading

github-actions bot commented Sep 10, 2025 •

edited

Loading