PageLayout.Pane: Add sticky prop (#2212)

* Add storybook story to test sticky behavior

* First draft of sticky implementation

* Update stories

* Fix overflow

* wip

* Create useStickyPaneHeight hook

* Update comments

* Add TODO comments

* Avoid recalculating sticky pane height when sticky is disabled

* Calculate intital height

* Handle elastic scroll in safari

* Clean up max() functions

* Add docs

* Create serious-pots-confess.md

* Update serious-pots-confess.md

* Update tests

* Import React in tests

* Remove position: relative from content region

* Update snapshots

* Handle nested scroll containers

Co-authored-by: Josh Black <[email protected]>

* Update sticky prop docs

* Update sticky pane docs example

* Update src/PageLayout/PageLayout.stories.tsx

Co-authored-by: Josh Black <[email protected]>

Author: colebemis

.changeset/serious-pots-confess.md

@@ -0,0 +1,13 @@
+---
+"@primer/react": minor
+---
+
+Add a `sticky` prop to the `PageLayout.Pane` component that provides a convenient way for you to make side panes sticky:
+
+```diff
+<PageLayout>
+- <PageLayout.Pane>...</PageLayout.Pane>
++ <PageLayout.Pane sticky>...</PageLayout.Pane>
+  <PageLayout.Content>...</PageLayout.Content>
+</PageLayout>
+```

docs/content/PageLayout.mdx

@@ -147,6 +147,27 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 </PageLayout>
 ```
 
+### With a sticky pane
+
+```jsx live
+<Box sx={{height: 320, overflowY: 'auto', border: '1px solid', borderColor: 'border.default'}}>
+  <PageLayout>
+    <PageLayout.Header>
+      <Placeholder label="Header" height={64} />
+    </PageLayout.Header>
+    <PageLayout.Content>
+      <Placeholder label="Content" height={320} />
+    </PageLayout.Content>
+    <PageLayout.Pane sticky>
+      <Placeholder label="Pane" height={120} />
+    </PageLayout.Pane>
+    <PageLayout.Footer>
+      <Placeholder label="Footer" height={64} />
+    </PageLayout.Footer>
+  </PageLayout>
+</Box>
+```
+
 ## Props
 
 ### PageLayout
@@ -310,6 +331,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
     defaultValue="'medium'"
     description="The width of the pane."
   />
+  <PropsTableRow
+    name="sticky"
+    type="boolean"
+    defaultValue="false"
+    description="Whether the pane should stick to the top of the screen while the content scrolls."
+  />
   <PropsTableRow
     name="padding"
     type={`| 'none'

docs/content/SplitPageLayout.mdx

@@ -240,6 +240,7 @@ description: Provides structure for a split page layout, including independent s
     defaultValue="'medium'"
     description="The width of the pane."
   />
+  <PropsTableRow name="sticky" type="boolean" defaultValue="true" description="Whether the pane is sticky." />
   <PropsTableRow
     name="divider"
     type={`ResponsiveValue<

package-lock.json

@@ -102,6 +102,7 @@
     "focus-visible": "^5.2.0",
     "fzy.js": "0.4.1",
     "history": "^5.0.0",
+    "react-intersection-observer": "9.4.0",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {