Remove Box usage and `sx` prop from components #6825

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

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

Changelog

New

Changed

Removed

sx support was removed from
- Announce
- AriaStatus
- AriaAlert
- Dialog
- Heading
- Link
- NavList and children
- PageLayout and children
- UnderlineNav
- UnderlineNav.Item

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: 06ae495

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

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

packages/react/src/UnderlineNav/UnderlineNavItem.tsx

+        // typecasting to get around a confusing mismatch between `as` props
+        // between UnderlineNavItem and UnderlineItem
+        as={as as React.ElementType}


The type casting and comment indicate a type system mismatch that should be resolved properly. Consider aligning the type definitions between UnderlineNavItem and UnderlineItem to eliminate the need for this workaround.

Suggested change

// typecasting to get around a confusing mismatch between `as` props

// between UnderlineNavItem and UnderlineItem

as={as as React.ElementType}

as={as}

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

packages/react/src/NavList/NavList.tsx

+            // @ts-expect-error unsure why this started to cause an error after ActionList.Item removed
+            // the legacy `as PolymorphicForwardRefComponent<'li', ActionListItemProps>`
            ref={forwardedRef}


The @ts-expect-error comment indicates incomplete migration from the legacy polymorphic component system. This should be properly resolved by updating the ActionList.Item type definitions to work with the new system rather than suppressing the error.

Suggested change

// @ts-expect-error unsure why this started to cause an error after ActionList.Item removed

// the legacy `as PolymorphicForwardRefComponent<'li', ActionListItemProps>`

ref={forwardedRef}

ref={forwardedRef as React.Ref<HTMLButtonElement>}

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

packages/react/src/ActionList/Item.tsx

+            // @ts-ignore this can be a `button` or `li`, so the type of ref will be different
+            ref={forwardedRef}


The @ts-ignore comment indicates a polymorphic ref typing issue. Consider using a more robust typing approach with proper union types or generic constraints to handle the different ref types without suppressing TypeScript errors.

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-17T02:54:27Z

This has spiraled way out of control. Unless this gets reviewed soon, I'm going to split it out into multiple PRs:

This PR
ActionList/NavList/Autocomplete
UnderlineNav
PageHeader
PageLayout

…sues

…AutocompleteMenu

primer-integration · 2025-09-17T03:54:01Z

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

primer-integration · 2025-09-17T04:06:44Z

🔴 ci completed with status failure.

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

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

ecb1484

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

github-actions bot temporarily deployed to storybook-preview-6825 September 15, 2025 21:39 Inactive

mperrotti added 2 commits September 16, 2025 11:49

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

d7e66df

…from-components

adds SxProp type to styled-react

634a103

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

github-actions bot temporarily deployed to storybook-preview-6825 September 16, 2025 16:03 Inactive

attempts to fix type errors in integration tests

6f04f57

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

github-actions bot temporarily deployed to storybook-preview-6825 September 16, 2025 21:31 Inactive

mperrotti added 3 commits September 16, 2025 22:23

more ActionList type fixes

a664932

UnderlineNavItem type fixes

f6bcc88

get rid of ts-expect-error directives (woohoo)

dd28ce5

github-actions bot requested a deployment to storybook-preview-6825 September 17, 2025 02:56 Abandoned

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

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

still trying to fix ActionList type errors - ActionMenu.tsx having is…

82ab9a4

…sues

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

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

mperrotti added 2 commits September 16, 2025 23:45

more ActionList.Item type fixes, patches new type errors surfaced in …

b8ffdbd

…AutocompleteMenu

ugh linter fix

41477d0

github-actions bot requested a deployment to storybook-preview-6825 September 17, 2025 03:51 Abandoned

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

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

trying a dumb fix for new ActionList integration test error

06ae495

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

github-actions bot deployed to storybook-preview-6825 September 17, 2025 05:20 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Remove Box usage and `sx` prop from components #6825

Remove Box usage and `sx` prop from components #6825

Uh oh!

mperrotti commented Sep 10, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Sep 10, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 10, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 10, 2025

Uh oh!

Copilot AI Sep 10, 2025

Uh oh!

mperrotti Sep 10, 2025

Uh oh!

Copilot AI Sep 10, 2025

Uh oh!

Copilot AI Sep 10, 2025

Uh oh!

Copilot AI Sep 10, 2025

Uh oh!

github-actions bot commented Sep 10, 2025 •

edited

Loading

Uh oh!

mperrotti commented Sep 17, 2025 •

edited

Loading

Uh oh!

primer-integration bot commented Sep 17, 2025

Uh oh!

primer-integration bot commented Sep 17, 2025

Uh oh!

Uh oh!

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

		// @ts-ignore this can be a `button` or `li`, so the type of ref will be different
		ref={forwardedRef}

Remove Box usage and sx prop from components #6825

Are you sure you want to change the base?

Remove Box usage and sx prop from components #6825

Uh oh!

Conversation

mperrotti commented Sep 10, 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 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!

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!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

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 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

primer-integration bot commented Sep 17, 2025

Uh oh!

primer-integration bot commented Sep 17, 2025

Uh oh!

Uh oh!

Remove Box usage and `sx` prop from components #6825

Remove Box usage and `sx` prop from components #6825

mperrotti commented Sep 10, 2025 •

edited

Loading

changeset-bot bot commented Sep 10, 2025 •

edited

Loading

github-actions bot commented Sep 10, 2025 •

edited

Loading

mperrotti commented Sep 17, 2025 •

edited

Loading