diff --git a/.changeset/dry-turtles-sing.md b/.changeset/dry-turtles-sing.md
new file mode 100644
index 00000000000..de0111d376a
--- /dev/null
+++ b/.changeset/dry-turtles-sing.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+PageHeader: Make default heading level `h2`
diff --git a/docs/content/drafts/PageHeader.mdx b/docs/content/drafts/PageHeader.mdx
index 6eaef75d158..07eab16538f 100644
--- a/docs/content/drafts/PageHeader.mdx
+++ b/docs/content/drafts/PageHeader.mdx
@@ -67,6 +67,39 @@ import {PageHeader} from '@primer/react/drafts'
```
+### Component as Title
+
+```jsx live drafts
+
+
+
+ ...
+ primer
+ react
+ src
+ PageHeader
+ PageHeader.tsx
+
+
+ Visually Hidden Title
+
+
+
+```
+
### With leading and trailing actions
```jsx live drafts
diff --git a/generated/components.json b/generated/components.json
index a81c15c7097..ca7c22c4622 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -3004,7 +3004,7 @@
{
"name": "as",
"type": "React.ElementType",
- "defaultValue": "\"header\""
+ "defaultValue": "\"div\""
}
],
"subcomponents": [
@@ -3141,7 +3141,7 @@
{
"name": "as",
"type": "React.ElementType",
- "defaultValue": "\"h3\""
+ "defaultValue": "\"h2\""
}
]
},
diff --git a/src/PageHeader/PageHeader.docs.json b/src/PageHeader/PageHeader.docs.json
index cfc051f30f2..142cd996699 100644
--- a/src/PageHeader/PageHeader.docs.json
+++ b/src/PageHeader/PageHeader.docs.json
@@ -24,7 +24,7 @@
{
"name": "as",
"type": "React.ElementType",
- "defaultValue": "\"header\""
+ "defaultValue": "\"div\""
}
],
"subcomponents": [
@@ -161,7 +161,7 @@
{
"name": "as",
"type": "React.ElementType",
- "defaultValue": "\"h3\""
+ "defaultValue": "\"h2\""
}
]
},
diff --git a/src/PageHeader/PageHeader.tsx b/src/PageHeader/PageHeader.tsx
index c876dd1a646..8fd6258c72d 100644
--- a/src/PageHeader/PageHeader.tsx
+++ b/src/PageHeader/PageHeader.tsx
@@ -100,6 +100,7 @@ type LinkProps = Pick<
}
export type ParentLinkProps = React.PropsWithChildren
+// PageHeader.ParentLink : Only visible on narrow viewports by default to let users navigate up in the hierarchy.
const ParentLink = React.forwardRef(
({children, sx = {}, href, 'aria-label': ariaLabel, as = 'a', hidden = hiddenOnRegularAndWide}, ref) => {
return (
@@ -203,8 +204,8 @@ type TitleAreaProps = {
variant?: 'subtitle' | 'medium' | 'large' | ResponsiveValue<'subtitle' | 'medium' | 'large'>
} & 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
+// PageHeader.TitleArea Sub Components: PageHeader.LeadingAction, PageHeader.LeadingVisual,
+// PageHeader.Title, PageTitle.TrailingVisual, PageHeader.TrailingAction, PageHeader.Actions
// ---------------------------------------------------------------------
const TitleArea: React.FC> = ({
@@ -238,6 +239,8 @@ const TitleArea: React.FC> = ({
)
}
+// PageHeader.LeadingAction and PageHeader.TrailingAction should only be visible on regular viewports.
+// So they come as hidden on narrow viewports by default and their visibility can be managed by their `hidden` prop.
const LeadingAction: React.FC> = ({
children,
sx = {},
@@ -265,6 +268,7 @@ const LeadingAction: React.FC> = ({
)
}
+// PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
const LeadingVisual: React.FC> = ({children, sx = {}, hidden = false}) => {
const {titleAreaHeight} = React.useContext(TitleAreaContext)
return (
@@ -288,11 +292,10 @@ const LeadingVisual: React.FC> = ({ch
}
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'
} & ChildrenPropTypes
-const Title: React.FC> = ({children, sx = {}, hidden = false, as = 'h3'}) => {
+const Title: React.FC> = ({children, sx = {}, hidden = false, as = 'h2'}) => {
const {titleVariant} = React.useContext(TitleAreaContext)
return (
> = ({children, sx = {}
)
}
+
+// PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
const TrailingVisual: React.FC> = ({children, sx = {}, hidden = false}) => {
const {titleAreaHeight} = React.useContext(TitleAreaContext)
diff --git a/src/PageHeader/features.stories.tsx b/src/PageHeader/features.stories.tsx
index f64c4db5c1e..4fcc34bc3f8 100644
--- a/src/PageHeader/features.stories.tsx
+++ b/src/PageHeader/features.stories.tsx
@@ -16,6 +16,7 @@ import {
GitBranchIcon,
KebabHorizontalIcon,
} from '@primer/octicons-react'
+import VisuallyHidden from '../_VisuallyHidden'
import {PageHeader} from './PageHeader'
import Hidden from '../Hidden'
@@ -65,6 +66,24 @@ export const WithLeadingAndTrailingVisuals = () => (
)
+export const WithComponentAsATitle = () => (
+
+
+
+
+ ...
+ primer
+ react
+ src
+ PageHeader
+ PageHeader.tsx
+
+ Visually Hidden Title
+
+
+
+)
+
export const WithLeadingVisualHiddenOnRegularViewport = () => (