Add prop to PageHeader to allow a bottom border

.changeset/pink-windows-add.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Adds `hasBorder` prop to PageHeader to allow a bottom border

e2e/components/PageHeader.test.ts

@@ -185,6 +185,24 @@ test.describe('PageHeader', () => {
     }
   })
 
+  test.describe('Has Border', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-pageheader-features--has-bottom-border',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`PageHeader.Has Border.${theme}.png`)
+        })
+      })
+    }
+  })
+
   test.describe('Has Large Title', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

packages/react/src/PageHeader/PageHeader.docs.json

@@ -77,6 +77,11 @@
       "name": "as",
       "type": "React.ElementType",
       "defaultValue": "\"div\""
+    },
+    {
+      "name": "hasBorder",
+      "type": "boolean",
+      "description": "Whether to render a border below the PageHeader. This border will NOT be rendered if the PageHeader has a `PageHeader.Navigation` child that is not hidden at the current breakpoint."
     }
   ],
   "subcomponents": [

packages/react/src/PageHeader/PageHeader.features.stories.tsx

@@ -266,4 +266,14 @@ export const WithActionsThatHaveResponsiveContent = () => (
   </Box>
 )
 
+export const HasBottomBorder = () => (
+  <Box sx={{padding: 3}}>
+    <PageHeader role="banner" aria-label="Title" hasBorder>
+      <PageHeader.TitleArea>
+        <PageHeader.Title>Title</PageHeader.Title>
+      </PageHeader.TitleArea>
+    </PageHeader>
+  </Box>
+)
+
 export default meta

packages/react/src/PageHeader/PageHeader.module.css

@@ -58,6 +58,33 @@
     --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
   }
 
+  &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-all]),
+  &[data-has-border='true']:not(:has([data-component='PH_Navigation'])) {
+    border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
+    padding-block-end: var(--base-size-8);
+  }
+
+  @media screen and (max-width: 768px) {
+    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-narrow]) {
+      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
+      padding-block-end: var(--base-size-8);
+    }
+  }
+
+  @media screen and (min-width: 768px) {
+    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-regular]) {
+      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
+      padding-block-end: var(--base-size-8);
+    }
+  }
+
+  @media screen and (min-width: 1440px) {
+    &[data-has-border='true']:has([data-component='PH_Navigation'][data-hidden-wide]) {
+      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
+      padding-block-end: var(--base-size-8);
+    }
+  }
+
   & [data-component='PH_LeadingAction'],
   & [data-component='PH_TrailingAction'],
   & [data-component='PH_Actions'],

packages/react/src/PageHeader/PageHeader.stories.tsx

@@ -59,6 +59,9 @@ const meta: Meta<typeof PageHeader> = {
       description:
         'ContextArea is only visible on narrow viewports by default to provide user context of where they are at their journey.',
     },
+    hasBorder: {
+      type: 'boolean',
+    },
     ParentLink: {
       type: 'string',
       if: {arg: 'hasContextArea'},
@@ -189,7 +192,7 @@ export default meta
 
 export const Playground: StoryFn = args => (
   <Box sx={{padding: 3}}>
-    <PageHeader aria-label={args.Title} role="banner">
+    <PageHeader aria-label={args.Title} role="banner" hasBorder={args.hasBorder}>
       <PageHeader.TitleArea
         variant={{
           narrow: args['Title.variant'],

packages/react/src/PageHeader/PageHeader.tsx

@@ -75,10 +75,11 @@ export type PageHeaderProps = {
   as?: React.ElementType | 'header' | 'div'
   className?: string
   role?: AriaRole
+  hasBorder?: boolean
 } & SxProp
 
 const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeaderProps>>(
-  ({children, className, sx = {}, as = 'div', 'aria-label': ariaLabel, role}, forwardedRef) => {
+  ({children, className, sx = {}, as = 'div', 'aria-label': ariaLabel, role, hasBorder}, forwardedRef) => {
     const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
     const rootStyles = {
@@ -116,6 +117,29 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
         {
           height: 'calc(var(--title-line-height) * 1em)',
         },
+      '&[data-has-border="true"]:has([data-component="PH_Navigation"][data-hidden-all]), &[data-has-border="true"]:not(:has([data-component="PH_Navigation"]))':
+        {
+          borderBlockEnd: 'var(--borderWidth-thin) solid var(--borderColor-default)',
+          paddingBlockEnd: 'var(--base-size-8)',
+        },
+      '@media screen and (max-width: 768px)': {
+        '&[data-has-border="true"]:has([data-component="PH_Navigation"][data-hidden-narrow])': {
+          borderBlockEnd: 'var(--borderWidth-thin) solid var(--borderColor-default)',
+          paddingBlockEnd: 'var(--base-size-8)',
+        },
+      },
+      '@media screen and (min-width: 768px)': {
+        '&[data-has-border="true"]:has([data-component="PH_Navigation"][data-hidden-regular])': {
+          borderBlockEnd: 'var(--borderWidth-thin) solid var(--borderColor-default)',
+          paddingBlockEnd: 'var(--base-size-8)',
+        },
+      },
+      '@media screen and (min-width: 1440px)': {
+        '&[data-has-border="true"]:has([data-component="PH_Navigation"][data-hidden-wide])': {
+          borderBlockEnd: 'var(--borderWidth-thin) solid var(--borderColor-default)',
+          paddingBlockEnd: 'var(--base-size-8)',
+        },
+      },
     }
 
     const rootRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
@@ -176,6 +200,7 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
         ref={rootRef}
         as={as}
         className={clsx(enabled && classes.PageHeader, className)}
+        data-has-border={hasBorder ? 'true' : undefined}
         sx={enabled ? sx : merge<BetterSystemStyleObject>(rootStyles, sx)}
         aria-label={ariaLabel}
         role={role}
@@ -754,6 +779,7 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
       aria-label={as === 'nav' ? ariaLabel : undefined}
       aria-labelledby={as === 'nav' ? ariaLabelledBy : undefined}
       className={clsx(enabled && classes.Navigation, className)}
+      data-component="PH_Navigation"
       sx={
         enabled
           ? sx
@@ -773,7 +799,9 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
               sx,
             )
       }
-      {...getHiddenDataAttributes(enabled, hidden)}
+      // passing `true` always get the data attributes for the hidden prop,
+      // not just for CSS modules
+      {...getHiddenDataAttributes(true, hidden)}
     >
       {children}
     </Box>