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/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/__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", diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 9800c792fd1..29e4c13b91f 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -211,6 +211,8 @@ export type { PageHeaderProps, 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 739c677c3e1..62b85dd7d49 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,29 @@ 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, + ContextArea: PrimerPageHeader.ContextArea, + 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}