Uh oh!
There was an error while loading. Please reload this page.
feat(PageHeader): remove support for sx - #6871
Conversation
🦋 Changeset detectedLatest commit: ee038a3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
👋 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! |
There was a problem hiding this comment.
Pull Request Overview
This PR removes support for the sx prop from the PageHeader component as part of a major version release. The change uses the @primer/styled-react package to provide backward compatibility for components that still require sx prop support during the migration period.
- Remove
sxprop from PageHeader component types and implementation - Create a wrapper implementation in
@primer/styled-reactpackage to maintainsxsupport for migration - Update export patterns to expose the wrapper component from the styled-react package
Reviewed Changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/PageHeader/PageHeader.tsx | Remove sx prop support from all PageHeader components and sub-components |
| packages/react/src/index.ts | Export additional PageHeader type definitions for the styled-react wrapper |
| packages/styled-react/src/components/PageHeader.tsx | Create styled-components wrapper to maintain sx prop support |
| packages/styled-react/src/index.tsx | Update exports to use the new PageHeader wrapper |
| packages/styled-react/src/experimental.tsx | Update experimental exports for PageHeader |
| packages/styled-react/src/sx.ts | Add re-export of sx utilities from @primer/react |
| packages/styled-react/src/components/Box.tsx | Add re-export of Box component |
| packages/styled-react/rollup.config.js | Add babel plugin for styled-components |
| packages/styled-react/package.json | Add babel-plugin-styled-components dependency |
| packages/styled-react/ARCHITECTURE.md | Update documentation to show styled-components pattern |
| packages/react/src/PageHeader/PageHeader.docs.json | Remove sx prop from documentation |
| packages/react/src/PageHeader/PageHeader.dev.stories.tsx | Remove stories demonstrating sx prop usage |
| .changeset/wet-mammals-feel.md | Document breaking change for major release |
| // @ts-ignore sx has height attribute | ||
| const {height} = sxProp | ||
| if (height) style['--custom-height'] = height |
There was a problem hiding this comment.
The variable sxProp is no longer defined after removing the sx prop parameter. This will cause a runtime error.
| // @ts-ignore sx has height attribute | |
| const{height}=sxProp | |
| if(height)style['--custom-height']=height |
| const {height} = sxProp | ||
| if (height) style['--custom-height'] = height |
There was a problem hiding this comment.
The variable sxProp is no longer defined after removing the sx prop parameter. This will cause a runtime error.
| const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, className, hidden = false, as = 'h2'}) => { | ||
| const style: CSSCustomProperties = {} | ||
| // @ts-ignore sxProp can have color attribute | ||
| const {fontSize, lineHeight, fontWeight} = sxProp |
There was a problem hiding this comment.
The variable sxProp is no longer defined after removing the sx prop parameter. This will cause a runtime error.
| const {height} = sxProp | ||
| if (height) style['--custom-height'] = height |
There was a problem hiding this comment.
The variable sxProp is no longer defined after removing the sx prop parameter. This will cause a runtime error.
| const {height} = sxProp | ||
| if (height) style['--custom-height'] = height |
There was a problem hiding this comment.
The variable sxProp is no longer defined after removing the sx prop parameter. This will cause a runtime error.
| const {height} = sxProp | ||
| if (height) style['--custom-height'] = height |
There was a problem hiding this comment.
The variable sxProp is no longer defined after removing the sx prop parameter. This will cause a runtime error.
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/2822 |
🟢 ci completed with status |
👋 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! |
Uh oh!
There was an error while loading. Please reload this page.
Closes#6770
Changelog
New
Changed
Removed
sxfromPageHeaderRollout strategy
This change uses our
@primer/styled-reactpackage for migration so that components that still havesxusage have been migrated