1885 bug splitpagelayoutpane needs to be able to consume heading 1

.changeset/lucky-gifts-rule.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Added Heading to SplitPageLayout.Pane

docs/content/SplitPageLayout.mdx

@@ -234,6 +234,21 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
 </Box>
 ```
 
+### With pane heading
+
+```jsx live drafts
+<Box sx={{height: 320, overflowY: 'auto', border: '1px solid', borderColor: 'border.default'}}>
+  <SplitPageLayout>
+    <SplitPageLayout.Pane>
+      <Placeholder label="Pane" height={120} heading="Pane Heading" />
+    </SplitPageLayout.Pane>
+    <SplitPageLayout.Content>
+      <Placeholder label="Content" height={480} />
+    </SplitPageLayout.Content>
+  </SplitPageLayout>
+</Box>
+```
+
 ### With non-sticky pane
 
 ```jsx live drafts

generated/components.json

@@ -3777,6 +3777,17 @@
             {
               "name": "sx",
               "type": "SystemStyleObject"
+            },
+            {
+              "name": "heading",
+              "type": "string",
+              "description": "Provide a heading for the SplitPageLayout Pane."
+            },
+            {
+              "name": "headingLevel",
+              "type": "|  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+              "defaultValue": "\"h2\"",
+              "description": "Which heading level is applied to SplitPageLayout Pane heading."
             }
           ]
         },

src/PageLayout/PageLayout.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {createGlobalStyle} from 'styled-components'
 import Box from '../Box'
+import Heading from '../Heading'
 import {useId} from '../hooks/useId'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
@@ -490,6 +491,8 @@ export type PageLayoutPaneProps = {
   resizable?: boolean
   widthStorageKey?: string
   padding?: keyof typeof SPACING_MAP
+  heading?: string
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   divider?: 'none' | 'line' | ResponsiveValue<'none' | 'line', 'none' | 'line' | 'filled'>
   /**
    * @deprecated Use the `divider` prop with a responsive value instead.
@@ -542,6 +545,8 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
       sticky = false,
       offsetHeader = 0,
       hidden: responsiveHidden = false,
+      heading,
+      headingLevel = 'h2',
       children,
       id,
       sx = {},
@@ -760,6 +765,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           {...labelProp}
           {...(id && {id: paneId})}
         >
+          {heading && <Heading as={headingLevel}>{heading}</Heading>}
           {resizable && (
             <VisuallyHidden>
               <form onSubmit={handleWidthFormSubmit}>

src/SplitPageLayout/SplitPageLayout.docs.json

@@ -131,6 +131,17 @@
         {
           "name": "sx",
           "type": "SystemStyleObject"
+        },
+        {
+          "name": "heading",
+          "type": "string",
+          "description": "Provide a heading for the SplitPageLayout Pane."
+        },
+        {
+          "name": "headingLevel",
+          "type": "|  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "defaultValue": "\"h2\"",
+          "description": "Which heading level is applied to SplitPageLayout Pane heading."
         }
       ]
     },

src/SplitPageLayout/SplitPageLayout.stories.tsx

@@ -162,6 +162,11 @@ export default {
       defaultValue: 'customId',
       table: {category: 'Pane props'},
     },
+    'Pane.heading': {
+      type: 'string',
+      defaultValue: '',
+      table: {category: 'Pane props'},
+    },
     'Pane.position.narrow': {
       type: {
         name: 'enum',
@@ -340,6 +345,7 @@ const Template: Story = args => (
     </SplitPageLayout.Content>
     {args['Render pane?'] ? (
       <SplitPageLayout.Pane
+        heading={args['Pane.heading']}
         resizable={args['Pane.resizable']}
         position={{
           narrow: args['Pane.position.narrow'],

src/SplitPageLayout/SplitPageLayout.test.tsx

@@ -44,4 +44,30 @@ describe('SplitPageLayout', () => {
 
     expect(pane.getAttribute('id')).toBe('customId')
   })
+
+  it('renders Pane with a heading', () => {
+    const {getByText} = render(
+      <ThemeProvider>
+        <SplitPageLayout>
+          <SplitPageLayout.Pane heading="Custom heading" />
+        </SplitPageLayout>
+      </ThemeProvider>,
+    )
+    const heading = getByText('Custom heading')
+
+    expect(heading.tagName).toBe('H2')
+  })
+
+  it('renders Pane with a custom level heading', () => {
+    const {getByText} = render(
+      <ThemeProvider>
+        <SplitPageLayout>
+          <SplitPageLayout.Pane heading="Custom heading" headingLevel="h3" />
+        </SplitPageLayout>
+      </ThemeProvider>,
+    )
+    const heading = getByText('Custom heading')
+
+    expect(heading.tagName).toBe('H3')
+  })
 })

src/SplitPageLayout/SplitPageLayout.tsx

@@ -74,7 +74,15 @@ export const Pane: React.FC<React.PropsWithChildren<SplitPageLayoutPaneProps>> =
   divider = 'line',
   ...props
 }) => {
-  return <PageLayout.Pane position={position} sticky={sticky} padding={padding} divider={divider} {...props} />
+  return (
+    <PageLayout.Pane
+      position={position}
+      sticky={sticky}
+      padding={padding}
+      divider={divider}
+      {...props}
+    ></PageLayout.Pane>
+  )
 }
 Pane.displayName = 'SplitPageLayout.Pane'