From cc0c16e9bb05f16d5aaec7d35431649a9652f056 Mon Sep 17 00:00:00 2001
From: Amanda Brown <amanda.brown@testdouble.com>
Date: Mon, 13 Nov 2023 18:00:38 -0500
Subject: [PATCH] 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                |  5 +++++
 docs/content/SplitPageLayout.mdx              | 16 +++++++++++++++
 .../PageLayout.features.stories.tsx           | 20 +++++++++++++++++++
 src/PageLayout/PageLayout.tsx                 |  2 +-
 src/SplitPageLayout/SplitPageLayout.tsx       | 10 +++++++++-
 5 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/lucky-gifts-rule.md

diff --git a/.changeset/lucky-gifts-rule.md b/.changeset/lucky-gifts-rule.md
new file mode 100644
index 00000000000..35852362cac
--- /dev/null
+++ b/.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.
diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx
index 54c3922cf6f..d9b500ae643 100644
--- a/docs/content/SplitPageLayout.mdx
+++ b/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
diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx
index 9f2ceebed5f..25c704eb2d8 100644
--- a/src/PageLayout/PageLayout.features.stories.tsx
+++ b/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>
+)
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 8b5ce1a1f27..e516be2189f 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/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>
     )
diff --git a/src/SplitPageLayout/SplitPageLayout.tsx b/src/SplitPageLayout/SplitPageLayout.tsx
index a5ce5f6dbd0..9be57f08acb 100644
--- a/src/SplitPageLayout/SplitPageLayout.tsx
+++ b/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'