fix up types

Author: broccolinisoup

src/PageHeader/PageHeader.tsx

@@ -30,8 +30,8 @@ const TITLE_AREA_REGION_ORDER = {
   Actions: 5,
 }
 
-// Types that are shared between sub components
-export type sharedPropTypes = {
+// Types that are shared between PageHeader children components
+export type ChildrenPropTypes = {
   hidden?: boolean | ResponsiveValue<boolean>
 } & SxProp
 
@@ -54,7 +54,7 @@ const hiddenOnNarrow = {
 export type PageHeaderProps = {
   'aria-label'?: React.AriaAttributes['aria-label']
   as?: React.ElementType | 'header' | 'div'
-} & sharedPropTypes
+} & SxProp
 
 const Root: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}, as = 'div'}) => {
   const rootStyles = {
@@ -74,7 +74,7 @@ const Root: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx
 // to manage their custom visibility but consumers should be careful if they choose to hide this on narrow viewports.
 // PageHeader.ContextArea Sub Components: PageHeader.ParentLink, PageHeader.ContextBar, PageHeader.ContextAreaActions
 // ---------------------------------------------------------------------
-const ContextArea: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
+const ContextArea: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
   hidden = hiddenOnRegularAndWide,
   sx = {},
@@ -95,8 +95,10 @@ const ContextArea: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
 type LinkProps = Pick<
   React.AnchorHTMLAttributes<HTMLAnchorElement> & BaseLinkProps,
   'download' | 'href' | 'hrefLang' | 'media' | 'ping' | 'rel' | 'target' | 'type' | 'referrerPolicy' | 'as'
->
-export type ParentLinkProps = React.PropsWithChildren<PageHeaderProps & LinkProps>
+> & {
+  'aria-label'?: React.AriaAttributes['aria-label']
+}
+export type ParentLinkProps = React.PropsWithChildren<ChildrenPropTypes & LinkProps>
 
 const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
   ({children, sx = {}, href, 'aria-label': ariaLabel, as = 'a', hidden = hiddenOnRegularAndWide}, ref) => {
@@ -133,7 +135,7 @@ const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
 // Generic slot for any component above the title region. Use it for custom breadcrumbs and other navigation elements instead of ParentLink.
 // ---------------------------------------------------------------------
 
-const ContextBar: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
+const ContextBar: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
   sx = {},
   hidden = hiddenOnRegularAndWide,
@@ -158,7 +160,7 @@ const ContextBar: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
 
 // ContextAreaActions
 // ---------------------------------------------------------------------
-const ContextAreaActions: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
+const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
   sx = {},
   hidden = hiddenOnRegularAndWide,
@@ -199,7 +201,7 @@ const TitleAreaContext = React.createContext<{
 
 type TitleAreaProps = {
   variant?: 'subtitle' | 'medium' | 'large' | ResponsiveValue<'subtitle' | 'medium' | 'large'>
-} & PageHeaderProps
+} & ChildrenPropTypes
 // PageHeader.TitleArea: The main title area of the page. Visible on all viewports.
 // PageHeader.TitleArea Sub Components: PageHeader.LeadingAction, PageHeader.LeadingVisual, PageHeader.Title, PageTitle.TrailingVisual, PageHeader.TrailingAction, PageHeader.Actions
 // PageHeader.LeadingAction and PageHeader.TrailingAction are only visible on regular viewports therefore they come as visible on narrow viewports and their visibility can be managed by their exposed `visible` prop
@@ -236,7 +238,7 @@ const TitleArea: React.FC<React.PropsWithChildren<TitleAreaProps>> = ({
   )
 }
 
-const LeadingAction: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
+const LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
   sx = {},
   hidden = hiddenOnNarrow,
@@ -263,7 +265,7 @@ const LeadingAction: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
   )
 }
 
-const LeadingVisual: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}, hidden = false}) => {
+const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
   const {titleAreaHeight} = React.useContext(TitleAreaContext)
   return (
     <Box
@@ -288,7 +290,7 @@ const LeadingVisual: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({chil
 export type TitleProps = {
   // Check if we need responsive values for heading is so should we update as prop's type for Heading component?
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-} & PageHeaderProps
+} & ChildrenPropTypes
 
 const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, sx = {}, hidden = false, as = 'h3'}) => {
   const {titleVariant} = React.useContext(TitleAreaContext)
@@ -326,7 +328,7 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, sx = {}
     </Heading>
   )
 }
-const TrailingVisual: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}, hidden = false}) => {
+const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
   const {titleAreaHeight} = React.useContext(TitleAreaContext)
 
   return (
@@ -349,7 +351,7 @@ const TrailingVisual: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({chi
   )
 }
 
-const TrailingAction: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
+const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
   sx = {},
   hidden = hiddenOnNarrow,
@@ -376,7 +378,7 @@ const TrailingAction: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
   )
 }
 
-const Actions: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}, hidden = false}) => {
+const Actions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
   const {titleAreaHeight} = React.useContext(TitleAreaContext)
   return (
     <Box
@@ -403,7 +405,7 @@ const Actions: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children,
 }
 
 // PageHeader.Description: The description area of the header. Visible on all viewports
-const Description: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children, sx = {}, hidden = false}) => {
+const Description: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
   return (
     <Box
       sx={merge<BetterSystemStyleObject>(
@@ -429,7 +431,7 @@ export type NavigationProps = {
   as?: 'nav' | 'div'
   'aria-label'?: React.AriaAttributes['aria-label']
   'aria-labelledby'?: React.AriaAttributes['aria-labelledby']
-} & PageHeaderProps
+} & ChildrenPropTypes
 
 // PageHeader.Navigation: The local navigation area of the header. Visible on all viewports
 const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({