From 40a51a31f4a6149f7a29194d25210ca08aa99f06 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Mon, 22 Sep 2025 14:51:03 -0700 Subject: [PATCH 1/5] export TitleArea, add PropsWithChildren --- packages/react/src/PageHeader/PageHeader.tsx | 2 +- packages/react/src/index.ts | 1 + .../styled-react/src/components/PageHeader.tsx | 15 ++++++++++++++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx index 8fff2517360..af3e250160f 100644 --- a/packages/react/src/PageHeader/PageHeader.tsx +++ b/packages/react/src/PageHeader/PageHeader.tsx @@ -191,7 +191,7 @@ const ContextAreaActions: React.FC> = ) } -type TitleAreaProps = { +export type TitleAreaProps = { variant?: 'subtitle' | 'medium' | 'large' | ResponsiveValue<'subtitle' | 'medium' | 'large'> } & ChildrenPropTypes // PageHeader.TitleArea: The main title area of the page. Visible on all viewports. diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 9800c792fd1..6c59459dc36 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -211,6 +211,7 @@ export type { PageHeaderProps, TitleProps as PageHeaderTitleProps, ActionsProps as PageHeaderActionsProps, + TitleAreaProps as PageHeaderTitleAreaProps, } from './PageHeader' export {default as sx, merge} from './sx' diff --git a/packages/styled-react/src/components/PageHeader.tsx b/packages/styled-react/src/components/PageHeader.tsx index 739c677c3e1..ff88f7c71ac 100644 --- a/packages/styled-react/src/components/PageHeader.tsx +++ b/packages/styled-react/src/components/PageHeader.tsx @@ -3,11 +3,13 @@ import { 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} from '../sx' import type {ForwardRefComponent} from '../polymorphic' import {Box} from './Box' +import type {PropsWithChildren} from 'react' type PageHeaderProps = PrimerPageHeaderProps & SxProp @@ -35,7 +37,7 @@ function PageHeaderActions({sx, ...rest}: PageHeaderActionsProps) { return } -type PageHeaderTitleProps = PrimerPageHeaderTitleProps & SxProp +type PageHeaderTitleProps = PropsWithChildren & SxProp type CSSCustomProperties = { [key: `--${string}`]: string | number @@ -63,9 +65,20 @@ function PageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) { return } +type PageHeaderTitleAreaProps = PropsWithChildren & SxProp + +const PageHeaderTitleArea: ForwardRefComponent<'div', PageHeaderTitleAreaProps> = styled( + PrimerPageHeader.TitleArea, +).withConfig({ + shouldForwardProp: prop => prop !== 'sx', +})` + ${sx} +` + const PageHeader = Object.assign(PageHeaderImpl, { Actions: PageHeaderActions, Title: PageHeaderTitle, + TitleArea: PageHeaderTitleArea, }) export {PageHeader} From 544afa7d1a69460194d62f28b3e7410a1750fc51 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Mon, 22 Sep 2025 15:04:32 -0700 Subject: [PATCH 2/5] ContextArea and ContextAreaActions --- packages/react/src/index.ts | 1 + packages/styled-react/src/components/PageHeader.tsx | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 6c59459dc36..29e4c13b91f 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -212,6 +212,7 @@ export type { TitleProps as PageHeaderTitleProps, ActionsProps as PageHeaderActionsProps, TitleAreaProps as PageHeaderTitleAreaProps, + ChildrenPropTypes as PageHeaderChildrenPropTypes, } from './PageHeader' export {default as sx, merge} from './sx' diff --git a/packages/styled-react/src/components/PageHeader.tsx b/packages/styled-react/src/components/PageHeader.tsx index ff88f7c71ac..e9a6ed6fe48 100644 --- a/packages/styled-react/src/components/PageHeader.tsx +++ b/packages/styled-react/src/components/PageHeader.tsx @@ -79,6 +79,8 @@ const PageHeader = Object.assign(PageHeaderImpl, { Actions: PageHeaderActions, Title: PageHeaderTitle, TitleArea: PageHeaderTitleArea, + ContextArea: PrimerPageHeader.ContextArea, + ContextAreaActions: PrimerPageHeader.ContextAreaActions, }) export {PageHeader} From 5dee4cc51ffa8a12910e21adde00f95e5ce28653 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Mon, 22 Sep 2025 15:10:36 -0700 Subject: [PATCH 3/5] update test --- packages/react/src/__tests__/__snapshots__/exports.test.ts.snap | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index ffe05ff87bf..90bf1d0f839 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -105,7 +105,9 @@ exports[`@primer/react > should not update exports without a semver change 1`] = "type OverlayProps", "PageHeader", "type PageHeaderActionsProps", + "type PageHeaderChildrenPropTypes", "type PageHeaderProps", + "type PageHeaderTitleAreaProps", "type PageHeaderTitleProps", "PageLayout", "type PageLayoutContentProps", From 6363ead0776bf4e97e429280df79c2b9681b2448 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Mon, 22 Sep 2025 15:28:52 -0700 Subject: [PATCH 4/5] TrailingVisual and Description --- .changeset/nasty-seals-carry.md | 6 ++++++ packages/styled-react/src/components/PageHeader.tsx | 2 ++ 2 files changed, 8 insertions(+) create mode 100644 .changeset/nasty-seals-carry.md diff --git a/.changeset/nasty-seals-carry.md b/.changeset/nasty-seals-carry.md new file mode 100644 index 00000000000..96da155de94 --- /dev/null +++ b/.changeset/nasty-seals-carry.md @@ -0,0 +1,6 @@ +--- +'@primer/styled-react': patch +'@primer/react': patch +--- + +Fix typing issues in PageHeader exports. diff --git a/packages/styled-react/src/components/PageHeader.tsx b/packages/styled-react/src/components/PageHeader.tsx index e9a6ed6fe48..9b4134b4c9d 100644 --- a/packages/styled-react/src/components/PageHeader.tsx +++ b/packages/styled-react/src/components/PageHeader.tsx @@ -81,6 +81,8 @@ const PageHeader = Object.assign(PageHeaderImpl, { TitleArea: PageHeaderTitleArea, ContextArea: PrimerPageHeader.ContextArea, ContextAreaActions: PrimerPageHeader.ContextAreaActions, + TrailingVisual: PrimerPageHeader.TrailingVisual, + Description: PrimerPageHeader.Description, }) export {PageHeader} From 87a4898f798c81a965e9d5cb0c141ec50a2855c0 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Mon, 22 Sep 2025 15:31:57 -0700 Subject: [PATCH 5/5] more missing sub components --- packages/styled-react/src/components/PageHeader.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/styled-react/src/components/PageHeader.tsx b/packages/styled-react/src/components/PageHeader.tsx index 9b4134b4c9d..62b85dd7d49 100644 --- a/packages/styled-react/src/components/PageHeader.tsx +++ b/packages/styled-react/src/components/PageHeader.tsx @@ -83,6 +83,11 @@ const PageHeader = Object.assign(PageHeaderImpl, { ContextAreaActions: PrimerPageHeader.ContextAreaActions, TrailingVisual: PrimerPageHeader.TrailingVisual, Description: PrimerPageHeader.Description, + ContextBar: PrimerPageHeader.ContextBar, + LeadingAction: PrimerPageHeader.LeadingAction, + Breadcrumbs: PrimerPageHeader.Breadcrumbs, + LeadingVisual: PrimerPageHeader.LeadingVisual, + TrailingAction: PrimerPageHeader.TrailingAction, }) export {PageHeader}