add classname prop support to PageHeader component and its children (#…

…4667) * add classname prop to root and all child components * document className prop * add changeset
primer · Jun 13, 2024 · e2a974f · e2a974f
1 parent eb2ab13
commit e2a974f
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 11 deletions.
diff --git a/.changeset/two-snakes-brush.md b/.changeset/two-snakes-brush.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds support for `className` prop to PageHeader component and its children.
diff --git 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 }",