Skip to content

feat(PageHeader): remove support for sx#6871

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
francinelucca merged 9 commits into from
Sep 22, 2025
Merged

feat(PageHeader): remove support for sx #6871

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
27a21a3
docs(styled-react): update architecture for polymorphic components
joshblack Sep 17, 2025
b527e7c
docs: update example
joshblack Sep 17, 2025
1197412
Add generic to withConfig so that shouldForwardProp is typed
joshblack Sep 17, 2025
6380130
chore: format files
joshblack Sep 17, 2025
59424de
feat(PageHeader): remove support for sx
joshblack Sep 17, 2025
d3d5d7c
refactor: update sx usage with style
joshblack Sep 17, 2025
ec85448
chore: remove unused export
joshblack Sep 17, 2025
4f45cf4
chore: add back in TitleProps
joshblack Sep 17, 2025
ee038a3
Merge branch 'main' into 6770-remove-sx-from-page-header
francinelucca Sep 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wet-mammals-feel.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@primer/react': major
---

Remove support for `sx` from `PageHeader`
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

50 changes: 0 additions & 50 deletions packages/react/src/PageHeader/PageHeader.dev.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -47,53 +47,3 @@ export const LargeVariantWithMultilineTitle = () => (
</PageHeader>
</div>
)

export const ArrayTypeFontSizeOnTitle = () => (
<div className={classes.Container}>
<PageHeader role="banner" aria-label="Issue Title">
<PageHeader.TitleArea>
<PageHeader.Title
sx={{
lineHeight: '1.25',
fontWeight: 'normal',
fontSize: ['26px', '26px', 'var(--text-title-size-large, 32px)', 'var(--text-title-size-large, 32px)'], // it doesn't support this format right now.
}}
>
Issue Title
</PageHeader.Title>
</PageHeader.TitleArea>
</PageHeader>
</div>
)

export const ThemeBaseFontSizeOnTitle = () => (
<div className={classes.Container}>
<PageHeader role="banner" aria-label="Issue Title">
<PageHeader.TitleArea>
<PageHeader.Title
sx={{
fontSize: 8,
}}
>
Issue Title
</PageHeader.Title>
</PageHeader.TitleArea>
</PageHeader>
</div>
)

export const StringTypeFontSizeOnTitle = () => (
<div className={classes.Container}>
<PageHeader role="banner" aria-label="Issue Title">
<PageHeader.TitleArea>
<PageHeader.Title
sx={{
fontSize: '56px',
}}
>
Issue Title
</PageHeader.Title>
</PageHeader.TitleArea>
</PageHeader>
</div>
)
78 changes: 2 additions & 76 deletions packages/react/src/PageHeader/PageHeader.docs.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -69,11 +69,6 @@
"type": "AriaRole",
"description": "The ARIA role to assign to the top-level node of this component."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
},
{
"name": "as",
"type": "React.ElementType",
Expand All@@ -100,11 +95,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand DownExpand Up@@ -134,11 +124,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "`{ narrow: false regular: true wide: true }`",
"description": "Whether the parent link is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand All@@ -156,11 +141,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand All@@ -178,11 +158,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand All@@ -206,11 +181,6 @@
"type": "| 'subtitle' | 'medium' | 'large' | { narrow?: | 'subtitle' | 'medium' | 'large' regular?: | 'subtitle' | 'medium' | 'large' wide?: | 'subtitle' | 'medium' | 'large' }",
"defaultValue": "medium",
"description": "Default title (medium) is the most common page title size. Use for static titles in most situations.\nLarge variant should be used for user-generated content such as issues, pull requests, or discussions.\nSubtitle variant can be used when a PageHeader.Title is already present in the page, such as in a SplitPageLayout."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand All@@ -228,11 +198,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand All@@ -250,11 +215,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand All@@ -273,11 +233,6 @@
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
},
{
"name": "as",
"type": "React.ElementType",
Expand All@@ -299,11 +254,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand All@@ -321,11 +271,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand All@@ -343,11 +288,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand All@@ -365,11 +305,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand All@@ -387,11 +322,6 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
},
Expand DownExpand Up@@ -425,13 +355,9 @@
"type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
"defaultValue": "false",
"description": "Whether the content is hidden."
},
{
"name": "sx",
"type": "SystemStyleObject",
"deprecated": true
}
]
}
]
}
}

Loading
Loading