1885 bug splitpagelayoutpane needs to be able to consume heading 1 (#…

…3143)

* fix(PageLayoutPane): heading is consumable

* doce(SplitPageLayout): updated to reflect Pane heading

* docs(SplitPageLayout.Pane): demo Heading

* chore: added changeset

* fix(SplitPageLayout): ability to consume custom level header

* docs(SplitPageLayout.Pane): updated with heading and headingLevel

* Update generated/components.json

* moved heading to around PageLayout.Pane

* Utilize `useSlots` to render heading

* Update `SplitPageLayout`

* Update name

* Adjust `SplitPageLayout` further

* Add snapshot test

* Adjust paneheading usage

* Clean up further

* Remove unused heading import

---------

Co-authored-by: green6erry <green6erry@users.noreply.github.com>
Co-authored-by: Tyler Jones <tylerjdev@github.com>

.changeset/lucky-gifts-rule.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adjusts position of children within `PageLayout.Pane` to live above adjustable resize form.

docs/content/SplitPageLayout.mdx

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

src/PageLayout/PageLayout.features.stories.tsx

@@ -357,3 +357,23 @@ export const CustomPaneWidths: Story = () => (
     </PageLayout.Footer>
   </PageLayout>
 )
+
+export const WithCustomPaneHeading: Story = () => (
+  <PageLayout containerWidth="full">
+    <PageLayout.Header>
+      <Placeholder height={64} label="Header" />
+    </PageLayout.Header>
+    <PageLayout.Pane resizable position="start">
+      <Heading as="h2" sx={{fontSize: 3}} id="pane-heading">
+        Pane Heading
+      </Heading>
+      <Placeholder height={320} label="Pane" />
+    </PageLayout.Pane>
+    <PageLayout.Content>
+      <Placeholder height={640} label="Content" />
+    </PageLayout.Content>
+    <PageLayout.Footer>
+      <Placeholder height={64} label="Footer" />
+    </PageLayout.Footer>
+  </PageLayout>
+)

src/PageLayout/PageLayout.tsx

@@ -797,6 +797,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           {...labelProp}
           {...(id && {id: paneId})}
         >
+          {children}
           {resizable && (
             // eslint-disable-next-line github/a11y-no-visually-hidden-interactive-element
             <VisuallyHidden>
@@ -823,7 +824,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
               </form>
             </VisuallyHidden>
           )}
-          {children}
         </Box>
       </Box>
     )

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'