From bc9d89f092230e64eb53c9331ba1cd4ed8ed3ac9 Mon Sep 17 00:00:00 2001
From: Kate Travers <8152930+ktravers@users.noreply.github.com>
Date: Wed, 12 Jun 2024 02:12:33 +0000
Subject: [PATCH 1/3] add classname prop to root and all child components

---
 packages/react/src/PageHeader/PageHeader.tsx | 84 +++++++++++++++++---
 1 file changed, 73 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index 85a9220eb9a..604182572bf 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -42,6 +42,7 @@ const LARGE_TITLE_HEIGHT = '3rem'
 
 // Types that are shared between PageHeader children components
 export type ChildrenPropTypes = {
+  className?: string
   hidden?: boolean | ResponsiveValue<boolean>
 } & SxProp
 
@@ -64,10 +65,11 @@ const hiddenOnNarrow = {
 export type PageHeaderProps = {
   'aria-label'?: React.AriaAttributes['aria-label']
   as?: React.ElementType | 'header' | 'div'
+  className?: string
 } & SxProp
 
 const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeaderProps>>(
-  ({children, sx = {}, as = 'div'}, forwardedRef) => {
+  ({children, className, sx = {}, as = 'div'}, forwardedRef) => {
     const rootStyles = {
       display: 'grid',
       // We have max 5 columns.
@@ -156,7 +158,13 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
       }
     }, [children, rootRef, hasContextArea, hasLeadingAction])
     return (
-      <Box ref={rootRef} as={as} sx={merge<BetterSystemStyleObject>(rootStyles, sx)} data-size-variant={titleVariant}>
+      <Box
+        ref={rootRef}
+        as={as}
+        className={className}
+        sx={merge<BetterSystemStyleObject>(rootStyles, sx)}
+        data-size-variant={titleVariant}
+      >
         {children}
       </Box>
     )
@@ -169,6 +177,7 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
 // ---------------------------------------------------------------------
 const ContextArea: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
+  className,
   hidden = hiddenOnRegularAndWide,
   sx = {},
 }) => {
@@ -186,7 +195,11 @@ const ContextArea: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
     }),
   }
 
-  return <Box sx={merge<BetterSystemStyleObject>(contentNavStyles, sx)}>{children}</Box>
+  return (
+    <Box className={className} sx={merge<BetterSystemStyleObject>(contentNavStyles, sx)}>
+      {children}
+    </Box>
+  )
 }
 type LinkProps = Pick<
   React.AnchorHTMLAttributes<HTMLAnchorElement> & BaseLinkProps,
@@ -198,7 +211,7 @@ export type ParentLinkProps = React.PropsWithChildren<ChildrenPropTypes & LinkPr
 
 // PageHeader.ParentLink : Only visible on narrow viewports by default to let users navigate up in the hierarchy.
 const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
-  ({children, sx = {}, href, 'aria-label': ariaLabel, as = 'a', hidden = hiddenOnRegularAndWide}, ref) => {
+  ({children, className, sx = {}, href, 'aria-label': ariaLabel, as = 'a', hidden = hiddenOnRegularAndWide}, ref) => {
     return (
       <>
         <Link
@@ -206,6 +219,7 @@ const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
           as={as}
           aria-label={ariaLabel}
           muted
+          className={className}
           sx={merge<BetterSystemStyleObject>(
             {
               display: 'flex',
@@ -234,11 +248,13 @@ const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
 
 const ContextBar: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
+  className,
   sx = {},
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
     <Box
+      className={className}
       sx={merge<BetterSystemStyleObject>(
         {
           display: 'flex',
@@ -259,11 +275,13 @@ const ContextBar: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 // ---------------------------------------------------------------------
 const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
+  className,
   sx = {},
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
     <Box
+      className={className}
       sx={merge<BetterSystemStyleObject>(
         {
           display: 'flex',
@@ -293,7 +311,7 @@ type TitleAreaProps = {
 // ---------------------------------------------------------------------
 
 const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<TitleAreaProps>>(
-  ({children, sx = {}, hidden = false, variant = 'medium'}, forwardedRef) => {
+  ({children, className, sx = {}, hidden = false, variant = 'medium'}, forwardedRef) => {
     const titleAreaRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
     const currentVariant = useResponsiveValue(variant, 'medium')
     const [fontSize, setFontSize] = useState<string | null | number | string[]>(null)
@@ -317,6 +335,7 @@ const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Title
     }, [titleAreaRef])
     return (
       <Box
+        className={className}
         ref={titleAreaRef}
         data-component="TitleArea"
         data-size-variant={currentVariant}
@@ -363,6 +382,7 @@ const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Title
 // So they come as hidden on narrow viewports by default and their visibility can be managed by their `hidden` prop.
 const LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
+  className,
   sx = {},
   hidden = hiddenOnNarrow,
 }) => {
@@ -372,6 +392,7 @@ const LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   if (height) style['--custom-height'] = height
   return (
     <Box
+      className={className}
       data-component="PH_LeadingAction"
       sx={merge<BetterSystemStyleObject>(
         {
@@ -394,9 +415,15 @@ const LeadingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 }
 
 // This is reserved for only breadcrumbs.
-const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
+const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
+  children,
+  className,
+  sx = {},
+  hidden = false,
+}) => {
   return (
     <Box
+      className={className}
       data-component="PH_Breadcrumbs"
       sx={merge<BetterSystemStyleObject>(
         {
@@ -418,13 +445,19 @@ const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({chil
 }
 
 // PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
-const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
+const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
+  children,
+  className,
+  sx = {},
+  hidden = false,
+}) => {
   const style: CSSCustomProperties = {}
   // @ts-ignore sx has height attribute
   const {height} = sx
   if (height) style['--custom-height'] = height
   return (
     <Box
+      className={className}
       data-component="PH_LeadingVisual"
       sx={merge<BetterSystemStyleObject>(
         {
@@ -449,7 +482,13 @@ export type TitleProps = {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 } & ChildrenPropTypes
 
-const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, sx = {}, hidden = false, as = 'h2'}) => {
+const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({
+  children,
+  className,
+  sx = {},
+  hidden = false,
+  as = 'h2',
+}) => {
   const style: CSSCustomProperties = {}
   // @ts-ignore sxProp can have color attribute
   const {fontSize, lineHeight, fontWeight} = sx
@@ -459,6 +498,7 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, sx = {}
 
   return (
     <Heading
+      className={className}
       data-component="PH_Title"
       as={as}
       style={style}
@@ -480,13 +520,19 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, sx = {}
 }
 
 // PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
-const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
+const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
+  children,
+  className,
+  sx = {},
+  hidden = false,
+}) => {
   const style: CSSCustomProperties = {}
   // @ts-ignore sx has height attribute
   const {height} = sx
   if (height) style['--custom-height'] = height
   return (
     <Box
+      className={className}
       data-component="PH_TrailingVisual"
       sx={merge<BetterSystemStyleObject>(
         {
@@ -509,6 +555,7 @@ const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({c
 
 const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   children,
+  className,
   sx = {},
   hidden = hiddenOnNarrow,
 }) => {
@@ -518,6 +565,7 @@ const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   if (height) style['--custom-height'] = height
   return (
     <Box
+      className={className}
       data-component="PH_TrailingAction"
       sx={merge<BetterSystemStyleObject>(
         {
@@ -539,13 +587,19 @@ const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   )
 }
 
-const Actions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
+const Actions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
+  children,
+  className,
+  sx = {},
+  hidden = false,
+}) => {
   const style: CSSCustomProperties = {}
   // @ts-ignore sx has height attribute
   const {height} = sx
   if (height) style['--custom-height'] = height
   return (
     <Box
+      className={className}
       data-component="PH_Actions"
       sx={merge<BetterSystemStyleObject>(
         {
@@ -572,9 +626,15 @@ const Actions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children
 }
 
 // PageHeader.Description: The description area of the header. Visible on all viewports
-const Description: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, sx = {}, hidden = false}) => {
+const Description: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
+  children,
+  className,
+  sx = {},
+  hidden = false,
+}) => {
   return (
     <Box
+      className={className}
       sx={merge<BetterSystemStyleObject>(
         {
           gridRow: GRID_ROW_ORDER.Description,
@@ -605,6 +665,7 @@ export type NavigationProps = {
 // PageHeader.Navigation: The local navigation area of the header. Visible on all viewports
 const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
   children,
+  className,
   sx = {},
   hidden = false,
   as,
@@ -622,6 +683,7 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
       // Render `aria-label` and `aria-labelledby` only on `nav` elements
       aria-label={as === 'nav' ? ariaLabel : undefined}
       aria-labelledby={as === 'nav' ? ariaLabelledBy : undefined}
+      className={className}
       sx={merge<BetterSystemStyleObject>(
         {
           gridRow: GRID_ROW_ORDER.Navigation,

From ea66559d7b525b5ae728a5c8694accffacec18e8 Mon Sep 17 00:00:00 2001
From: Kate Travers <8152930+ktravers@users.noreply.github.com>
Date: Wed, 12 Jun 2024 02:12:48 +0000
Subject: [PATCH 2/3] document className prop

---
 .../react/src/PageHeader/PageHeader.docs.json | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/packages/react/src/PageHeader/PageHeader.docs.json b/packages/react/src/PageHeader/PageHeader.docs.json
index 824678e8c0e..9f3c743e30b 100644
--- a/packages/react/src/PageHeader/PageHeader.docs.json
+++ b/packages/react/src/PageHeader/PageHeader.docs.json
@@ -12,6 +12,12 @@
       "defaultValue": "",
       "description": "A unique label for the rendered main landmark"
     },
+    {
+      "name": "className",
+      "type": "string | undefined",
+      "defaultValue": "",
+      "description": "CSS string"
+    },
     {
       "name": "hidden",
       "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -32,6 +38,12 @@
     {
       "name": "PageHeader.ContextArea",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -47,6 +59,12 @@
     {
       "name": "PageHeader.ParentLink",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "href",
           "type": "string",
@@ -68,6 +86,12 @@
     {
       "name": "PageHeader.ContextBar",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -83,6 +107,12 @@
     {
       "name": "PageHeader.ContextAreaActions",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -98,6 +128,12 @@
     {
       "name": "PageHeader.TitleArea",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -119,6 +155,12 @@
     {
       "name": "PageHeader.LeadingAction",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -134,6 +176,12 @@
     {
       "name": "PageHeader.LeadingVisual",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -149,6 +197,12 @@
     {
       "name": "PageHeader.Title",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -169,6 +223,12 @@
     {
       "name": "PageHeader.TrailingVisual",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -184,6 +244,12 @@
     {
       "name": "PageHeader.TrailingAction",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -199,6 +265,12 @@
     {
       "name": "PageHeader.Actions",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -214,6 +286,12 @@
     {
       "name": "PageHeader.Description",
       "props": [
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
@@ -245,6 +323,12 @@
           "defaultValue": "\"div\"",
           "description": "The HTML element used to render the navigation."
         },
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
+        },
         {
           "name": "hidden",
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",

From a44d6a04c80c364f5613e7f62866bf6d42e4f851 Mon Sep 17 00:00:00 2001
From: Kate Travers <8152930+ktravers@users.noreply.github.com>
Date: Wed, 12 Jun 2024 02:27:54 +0000
Subject: [PATCH 3/3] add changeset

---
 .changeset/two-snakes-brush.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/two-snakes-brush.md

diff --git a/.changeset/two-snakes-brush.md b/.changeset/two-snakes-brush.md
new file mode 100644
index 00000000000..ec45c697bec
--- /dev/null
+++ b/.changeset/two-snakes-brush.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds support for `className` prop to PageHeader component and its children.