From e0f4a67751a756602c54270e3c0e79cfdf32bbf3 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 2 Apr 2026 18:28:46 +0000 Subject: [PATCH 1/2] Remove PageHeader from styled-react package Agent-Logs-Url: https://github.com/primer/react/sessions/0f62de09-891d-4484-8441-f7360d7edb50 Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com> --- .../__snapshots__/exports.test.ts.snap | 2 - ...primer-react-experimental.browser.test.tsx | 8 +- .../__tests__/primer-react.browser.test.tsx | 17 --- .../src/components/PageHeader.tsx | 116 ------------------ packages/styled-react/src/experimental.tsx | 26 ---- packages/styled-react/src/index.tsx | 26 ---- 6 files changed, 1 insertion(+), 194 deletions(-) delete mode 100644 packages/styled-react/src/components/PageHeader.tsx 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 From a331edf62ef63d8c6f2bebd20148d90e0501d515 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 2 Apr 2026 13:32:48 -0700 Subject: [PATCH 2/2] Remove PageHeader from @primer/styled-react --- .changeset/warm-spoons-own.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/warm-spoons-own.md 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