diff --git a/.changeset/warm-spoons-own.md b/.changeset/warm-spoons-own.md
new file mode 100644
index 00000000000..25f6f2287a6
--- /dev/null
+++ b/.changeset/warm-spoons-own.md
@@ -0,0 +1,5 @@
+---
+"@primer/styled-react": patch
+---
+
+Remove PageHeader from @primer/styled-react
diff --git a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
index b820f78df42..aa7ccdcd6f4 100644
--- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -21,7 +21,6 @@ exports[`@primer/styled-react exports 1`] = `
"LinkButton",
"merge",
"Overlay",
- "PageHeader",
"SegmentedControl",
"Spinner",
"sx",
@@ -54,7 +53,6 @@ exports[`@primer/styled-react/deprecated exports 1`] = `
exports[`@primer/styled-react/experimental exports 1`] = `
[
"Dialog",
- "PageHeader",
"Table",
"Tooltip",
]
diff --git a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx
index 41f705068d3..1d3fbebeff9 100644
--- a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx
@@ -1,6 +1,6 @@
import {render, screen} from '@testing-library/react'
import {describe, expect, test} from 'vitest'
-import {Dialog, PageHeader, Table, Tooltip} from '../experimental'
+import {Dialog, Table, Tooltip} from '../experimental'
describe('@primer/react/experimental', () => {
test('Dialog supports `sx` prop', () => {
@@ -8,12 +8,6 @@ describe('@primer/react/experimental', () => {
expect(window.getComputedStyle(screen.getByRole('dialog')).backgroundColor).toBe('rgb(255, 0, 0)')
})
- test('PageHeader supports `sx` prop', () => {
- const {container} = render()
- expect(container.firstElementChild!).toHaveAttribute('role', 'article')
- expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
- })
-
test('Table.Container', () => {
render(
)
expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 6008918c033..2d0b1b7424a 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -19,7 +19,6 @@ import {
Link,
LinkButton,
Overlay,
- PageHeader,
SegmentedControl,
Spinner,
Text,
@@ -197,22 +196,6 @@ describe('@primer/react', () => {
expect(screen.getByTestId('component')).toHaveAttribute('role', 'dialog')
})
- test('PageHeader supports `sx` prop', () => {
- const {container} = render()
- expect(container.firstElementChild!).toHaveAttribute('role', 'article')
- expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
- })
-
- test('PageHeader.Actions supports `sx` prop', () => {
- const {container} = render()
- expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
- })
-
- test('PageHeader.Title supports `sx` prop', () => {
- const {container} = render()
- expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
- })
-
test('SegmentedControl supports `sx` prop', () => {
render()
expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
diff --git a/packages/styled-react/src/components/PageHeader.tsx b/packages/styled-react/src/components/PageHeader.tsx
deleted file mode 100644
index 4b703882da0..00000000000
--- a/packages/styled-react/src/components/PageHeader.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import {
- PageHeader as PrimerPageHeader,
- type PageHeaderProps as PrimerPageHeaderProps,
- type PageHeaderTitleProps as PrimerPageHeaderTitleProps,
- type PageHeaderActionsProps as PrimerPageHeaderActionsProps,
- type PageHeaderTitleAreaProps as PrimerPageHeaderTitleAreaProps,
-} from '@primer/react'
-import styled from 'styled-components'
-import {sx, type SxProp, type CSSCustomProperties} from '../sx'
-import type {ForwardRefComponent} from '../polymorphic'
-import {Box} from './Box'
-import type {PropsWithChildren} from 'react'
-import React from 'react'
-
-type PageHeaderProps = PrimerPageHeaderProps & SxProp
-
-const StyledPageHeader: ForwardRefComponent<'div', PageHeaderProps> = styled(
- PrimerPageHeader,
-).withConfig({
- shouldForwardProp: prop => prop !== 'sx',
-})`
- ${sx}
-`
-
-const PageHeaderImpl = React.forwardRef(({as, ...props}, ref) => (
-
-)) as ForwardRefComponent<'div', PageHeaderProps>
-
-type PageHeaderActionsProps = PrimerPageHeaderActionsProps & SxProp
-
-function PageHeaderActions({sx, ...rest}: PageHeaderActionsProps) {
- const style: CSSCustomProperties = {}
- if (sx) {
- // @ts-ignore sx has height attribute
- const {height} = sx
- if (height) {
- style['--custom-height'] = height
- }
- }
-
- // @ts-expect-error type mismatch between Box usage here and PrimerPageHeader.Actions
- return
-}
-
-type PageHeaderTitleProps = PropsWithChildren & SxProp
-
-function StyledPageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) {
- const style: CSSCustomProperties = {}
- if (sx) {
- // @ts-ignore sx can have color attribute
- const {fontSize, lineHeight, fontWeight} = sx
- if (fontSize) {
- style['--custom-font-size'] = fontSize
- }
-
- if (lineHeight) {
- style['--custom-line-height'] = lineHeight
- }
-
- if (fontWeight) {
- style['--custom-font-weight'] = fontWeight
- }
- }
-
- // @ts-expect-error type mismatch between Box usage here and PrimerPageHeader.Title
- return
-}
-
-const PageHeaderTitle = ({as, ...props}: PageHeaderTitleProps) => (
-
-)
-
-type PageHeaderTitleAreaProps = PropsWithChildren & SxProp
-
-const PageHeaderTitleArea: ForwardRefComponent<'div', PageHeaderTitleAreaProps> = styled(
- PrimerPageHeader.TitleArea,
-).withConfig({
- shouldForwardProp: prop => prop !== 'sx',
-})`
- ${sx}
-`
-
-type PageHeaderComponentType = ForwardRefComponent<'div', PageHeaderProps> & {
- Actions: typeof PageHeaderActions
- ContextArea: typeof PrimerPageHeader.ContextArea
- ParentLink: typeof PrimerPageHeader.ParentLink
- ContextBar: typeof PrimerPageHeader.ContextBar
- TitleArea: typeof PageHeaderTitleArea
- ContextAreaActions: typeof PrimerPageHeader.ContextAreaActions
- LeadingAction: typeof PrimerPageHeader.LeadingAction
- Breadcrumbs: typeof PrimerPageHeader.Breadcrumbs
- LeadingVisual: typeof PrimerPageHeader.LeadingVisual
- Title: typeof PageHeaderTitle
- TrailingVisual: typeof PrimerPageHeader.TrailingVisual
- Description: typeof PrimerPageHeader.Description
- TrailingAction: typeof PrimerPageHeader.TrailingAction
-}
-
-const PageHeader: PageHeaderComponentType = Object.assign(PageHeaderImpl, {
- Actions: PageHeaderActions,
- ContextArea: PrimerPageHeader.ContextArea,
- ParentLink: PrimerPageHeader.ParentLink,
- ContextBar: PrimerPageHeader.ContextBar,
- TitleArea: PageHeaderTitleArea,
- ContextAreaActions: PrimerPageHeader.ContextAreaActions,
- LeadingAction: PrimerPageHeader.LeadingAction,
- Breadcrumbs: PrimerPageHeader.Breadcrumbs,
- LeadingVisual: PrimerPageHeader.LeadingVisual,
- Title: PageHeaderTitle,
- TrailingVisual: PrimerPageHeader.TrailingVisual,
- Description: PrimerPageHeader.Description,
- TrailingAction: PrimerPageHeader.TrailingAction,
-})
-
-export {PageHeader}
-export type {PageHeaderProps, PageHeaderActionsProps, PageHeaderTitleProps}
diff --git a/packages/styled-react/src/experimental.tsx b/packages/styled-react/src/experimental.tsx
index 5fb3791675a..23574d6cf65 100644
--- a/packages/styled-react/src/experimental.tsx
+++ b/packages/styled-react/src/experimental.tsx
@@ -12,32 +12,6 @@ export {
type DialogProps,
} from './components/Dialog'
-export {
- /**
- * @deprecated Usage of the `sx` prop with this component is no longer
- * supported. Use the component from `@primer/react` with CSS Modules instead.
- */
- PageHeader,
-
- /**
- * @deprecated Usage of the `sx` prop with this component is no longer
- * supported. Use the component from `@primer/react` with CSS Modules instead.
- */
- type PageHeaderProps,
-
- /**
- * @deprecated Usage of the `sx` prop with this component is no longer
- * supported. Use the component from `@primer/react` with CSS Modules instead.
- */
- type PageHeaderActionsProps,
-
- /**
- * @deprecated Usage of the `sx` prop with this component is no longer
- * supported. Use the component from `@primer/react` with CSS Modules instead.
- */
- type PageHeaderTitleProps,
-} from './components/PageHeader'
-
export {
/**
* @deprecated Usage of the `sx` prop with this component is no longer
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 67d0ad3d6f8..10e0f6d9b93 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -311,32 +311,6 @@ export {
Overlay,
} from './components/Overlay'
-export {
- /**
- * @deprecated Usage of the `sx` prop with this component is no longer
- * supported. Use the component from `@primer/react` with CSS Modules instead.
- */
- PageHeader,
-
- /**
- * @deprecated Usage of the `sx` prop with this component is no longer
- * supported. Use the component from `@primer/react` with CSS Modules instead.
- */
- type PageHeaderProps,
-
- /**
- * @deprecated Usage of the `sx` prop with this component is no longer
- * supported. Use the component from `@primer/react` with CSS Modules instead.
- */
- type PageHeaderActionsProps,
-
- /**
- * @deprecated Usage of the `sx` prop with this component is no longer
- * supported. Use the component from `@primer/react` with CSS Modules instead.
- */
- type PageHeaderTitleProps,
-} from './components/PageHeader'
-
export {
/**
* @deprecated Usage of the `sx` prop with this component is no longer