Remove Box usage and `sx` prop from PageHeader by mperrotti · Pull Request #6873 · primer/react

mperrotti · 2025-09-17T22:40:50Z

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

Changelog

New

Changed

sx prop was removed from PageHeader and its subcomponents

Removed

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-17T22:40:53Z

🦋 Changeset detected

Latest commit: e0b38ac

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-17T22:41:23Z

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

Copilot

Pull Request Overview

This PR removes the sx prop from PageHeader and its subcomponents while maintaining backward compatibility by creating a wrapped version in the styled-react package. The change supports the migration away from Box usage and the sx prop system as part of a design system modernization effort.

Key changes:

Removes sx prop usage from PageHeader components in the main react package
Creates backward-compatible wrapped components in styled-react package that restore sx support
Refactors PageHeader components to use modern polymorphic patterns

Reviewed Changes

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

Show a summary per file

File	Description
`packages/react/src/PageHeader/PageHeader.tsx`	Removes `sx` prop from Title component and refactors components to use modern polymorphic patterns
`packages/styled-react/src/components/PageHeader.tsx`	Creates wrapped PageHeader components with `sx` prop support for backward compatibility
`packages/styled-react/src/index.tsx`	Updates exports to use the new wrapped PageHeader from styled-react instead of the main react package
`packages/styled-react/src/sx.ts`	Adds utility function for handling `sx` prop styling
`packages/styled-react/src/types/AriaRole.ts`	Adds AriaRole type definitions copied from the main react package

Copilot · 2025-09-17T22:41:32Z

-) as PolymorphicForwardRefComponent<'a', ParentLinkProps>
-ParentLink.displayName = 'ParentLink'
+function UnwrappedParentLink<TAs extends React.ElementType = 'a'>(
+ props: React.PropsWithChildren<ChildrenPropTypes & LinkProps & PolymorphicProps<TAs, 'a'>>,


The LinkProps type parameter is now generic but the function signature still uses the non-generic version. This should be LinkProps<TAs> to maintain type consistency with the generic parameter.
Suggested change
props: React.PropsWithChildren<ChildrenPropTypes&LinkProps&PolymorphicProps<TAs,'a'>>,
props: React.PropsWithChildren<ChildrenPropTypes&LinkProps<TAs>&PolymorphicProps<TAs,'a'>>,

Copilot · 2025-09-17T22:41:32Z

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


Using @ts-expect-error to suppress TypeScript errors indicates a type system issue that should be resolved rather than suppressed. Consider properly typing the component or using a more specific type assertion.
Suggested change
// @ts-expect-error - PrimerPageHeader.Title is not recognized as a valid component type
return<Boxas={PrimerPageHeader.Title}ref={ref}{...props}/>
return<Boxas={PrimerPageHeader.TitleasReact.ElementType}ref={ref}{...props}/>

Copilot · 2025-09-17T22:41:33Z

+})
+
+// weird typecast to get around mysterious TS error
+const PageHeader = Object.assign(PrimerPageHeader as unknown as React.FC<PageHeaderProps>, {


The type assertion as unknown as React.FC<PageHeaderProps> is overly broad and potentially unsafe. Consider using a more specific type or properly typing the PageHeader component to avoid this casting.

liuliu-dev

Hey 👋 It looks like PageHeader is already covered in this PR (primer/react#6871). Feel free to close this one if that’s the case!

mperrotti · 2025-09-24T00:49:19Z

Closing because PageHeader was handled by #6871

pulls PageHeader changes from mp/rm-box-and-sx-from-pageheader
b36e7f3

CopilotAI review requested due to automatic review settings September 17, 2025 22:40

mperrotti requested a review from a team as a code owner September 17, 2025 22:40

mperrotti requested a review from joshblack September 17, 2025 22:40

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

CopilotAI reviewed Sep 17, 2025
View reviewed changes

mperrotti had a problem deploying to github-pages September 17, 2025 22:47 — with GitHub Actions Failure

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

mperrotti added 2 commits September 17, 2025 18:59

pulls in modern-polymorphic
d48ec5d

adds changeset
483f23a

github-actionsBot requested a deployment to storybook-preview-6873 September 17, 2025 23:05 Abandoned

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

github-actionsBottemporarily deployed to storybook-preview-6873 September 17, 2025 23:14 Inactive

exports PageHeader types
3db1f4a

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

github-actionsBottemporarily deployed to storybook-preview-6873 September 18, 2025 13:16 Inactive

updates snapshots
1828a41

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

github-actionsBottemporarily deployed to storybook-preview-6873 September 18, 2025 13:36 Inactive

updates snapshots
229570e

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

github-actionsBottemporarily deployed to storybook-preview-6873 September 18, 2025 16:00 Inactive

fixes Vite crash, updates snapshots for some reason?
e0b38ac

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

github-actionsBottemporarily deployed to storybook-preview-6873 September 18, 2025 16:49 Inactive

lesliecdubs requested review from liuliu-dev and removed request for joshblack September 23, 2025 00:55

liuliu-dev reviewed Sep 23, 2025
View reviewed changes

mperrotti closed this Sep 24, 2025

primerBot deleted the mp/rm-box-and-sx-from-pageheader branch June 30, 2026 18:09

Navigation Menu

Uh oh!

Remove Box usage and `sx` prop from PageHeader - #6873

Remove Box usage and `sx` prop from PageHeader#6873
mperrotti wants to merge 7 commits into
mainfrom
mp/rm-box-and-sx-from-pageheader

mperrotti commented Sep 17, 2025•
edited
Loading

Uh oh!

changeset-botBot commented Sep 17, 2025•
edited
Loading

Uh oh!

github-actionsBot commented Sep 17, 2025

Uh oh!

CopilotAI left a comment

Uh oh!

CopilotAISep 17, 2025

Uh oh!

CopilotAISep 17, 2025

Uh oh!

CopilotAISep 17, 2025

Uh oh!

liuliu-dev left a comment

Uh oh!

mperrotti commented Sep 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	props: React.PropsWithChildren<ChildrenPropTypes&LinkProps&PolymorphicProps<TAs,'a'>>,
	props: React.PropsWithChildren<ChildrenPropTypes&LinkProps<TAs>&PolymorphicProps<TAs,'a'>>,

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

	// @ts-expect-error - PrimerPageHeader.Title is not recognized as a valid component type
	return<Boxas={PrimerPageHeader.Title}ref={ref}{...props}/>
	return<Boxas={PrimerPageHeader.TitleasReact.ElementType}ref={ref}{...props}/>

Uh oh!

Conversation

mperrotti commented Sep 17, 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-botBot commented Sep 17, 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 17, 2025

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

CopilotAISep 17, 2025

Choose a reason for hiding this comment

Uh oh!

CopilotAISep 17, 2025

Choose a reason for hiding this comment

Uh oh!

CopilotAISep 17, 2025

Choose a reason for hiding this comment

Uh oh!

liuliu-dev left a comment

Choose a reason for hiding this comment

Uh oh!

mperrotti commented Sep 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mperrotti commented Sep 17, 2025•
edited
Loading

changeset-botBot commented Sep 17, 2025•
edited
Loading