Add resizable support to the <PageLayout> component (#2352)

* add resizable support to the PageLayout component

* Add changeset file

* update snapshot

* take client left position into account when pane is not left aligned

* fix resize behavior when pane is not at start position

* fix resize when there are column gaps

* use story debug values

* decouple the resize handle from the vertical divider

* update snap file

* update snap file

* rename canResizePane to resizable

* update snap files

* update resizable PageLayout story

* rename paneWidthStorageKey to widthStorageKey

* refactor(PageLayout): set pane with in CSS Custom Property

* docs: add documentation for resizable nad widthStorageKey

* Resizable pane refactor (#2481)

* Update stories

* Refactor resizable pane implementation

* Clamp pane width resizing

* Delay drag hover effect

* Reset pane width on double click

* Handle styles while dragging

* Add resizable example to SplitPageLayout docs

* Remove comment

* Add comment about touch events

* Update docs

* Update resizable pane story

* Update snapshots

* Wrap localStorage in try/catch

* Store pane width in px

* Update snapshot

* Update pagelayout snapshots

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

Author: 3 people

.changeset/polite-ligers-repair.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add resizable support to the PageLayout component.

docs/content/PageLayout.mdx

@@ -279,6 +279,25 @@ Using `aria-labelledby` along with `PageLayout.Header`, `PageLayout.Content`, or
 </PageLayout>
 ```
 
+### With resizable pane
+
+```jsx live
+<PageLayout>
+  <PageLayout.Header>
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Pane resizable>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
+  <PageLayout.Footer>
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
+</PageLayout>
+```
+
 ## Accessibility
 
 The `PageLayout` component uses [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) for `PageLayout.Header`, `PageLayout.Content`, and `PageLayout.Footer` in order to make it easier for screen reader users to navigate between sections of the page.
@@ -365,6 +384,7 @@ On macOS, you can open the VoiceOver rotor by pressing `VO-U`. You can navigate
 | 'normal'`}
     defaultValue="'normal'"
   />
+
   <PropsTableSxRow />
 </PropsTable>
 
@@ -512,6 +532,18 @@ On macOS, you can open the VoiceOver rotor by pressing `VO-U`. You can navigate
     defaultValue="'medium'"
     description="The width of the pane."
   />
+  <PropsTableRow
+    name="resizable"
+    type="boolean"
+    defaultValue="false"
+    description="When true, the pane may be resized by the user."
+  />
+  <PropsTableRow
+    name="widthStorageKey"
+    type="string"
+    defaultValue="'paneWidth'"
+    description="Provide a key used by localStorage to persist the size of the pane on the client."
+  />
   <PropsTableRow
     name="sticky"
     type="boolean"

docs/content/SplitPageLayout.mdx

@@ -112,6 +112,27 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
 </Box>
 ```
 
+### With resizable pane
+
+```jsx live drafts
+<Box sx={{height: 320, overflowY: 'auto', border: '1px solid', borderColor: 'border.default'}}>
+  <SplitPageLayout>
+    <SplitPageLayout.Header>
+      <Placeholder label="Header" height={64} />
+    </SplitPageLayout.Header>
+    <SplitPageLayout.Pane resizable>
+      <Placeholder label="Pane" height={120} />
+    </SplitPageLayout.Pane>
+    <SplitPageLayout.Content>
+      <Placeholder label="Content" height={420} />
+    </SplitPageLayout.Content>
+    <SplitPageLayout.Footer>
+      <Placeholder label="Footer" height={64} />
+    </SplitPageLayout.Footer>
+  </SplitPageLayout>
+</Box>
+```
+
 ### Without dividers
 
 ```jsx live drafts
@@ -378,6 +399,18 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
     defaultValue="'medium'"
     description="The width of the pane."
   />
+  <PropsTableRow
+    name="resizable"
+    type="boolean"
+    defaultValue="false"
+    description="When true, the pane may be resized by the user."
+  />
+  <PropsTableRow
+    name="widthStorageKey"
+    type="string"
+    defaultValue="'paneWidth'"
+    description="Provide a key used by localStorage to persist the size of the pane on the client."
+  />
   <PropsTableRow
     name="sticky"
     type="boolean"

src/PageLayout/PageLayout.stories.tsx

@@ -40,6 +40,7 @@ const meta: Meta = {
     'Pane.position.wide': 'end',
     'Pane.width': 'medium',
     'Pane.sticky': false,
+    'Pane.resizable': false,
     'Pane.padding': 'none',
     'Pane.divider.regular': 'none',
     'Pane.divider.narrow': 'none',
@@ -242,6 +243,10 @@ const meta: Meta = {
       type: 'boolean',
       table: {category: 'Pane props'}
     },
+    'Pane.resizable': {
+      type: 'boolean',
+      table: {category: 'Pane props'}
+    },
     'Pane.padding': {
       type: {
         name: 'enum',
@@ -380,6 +385,7 @@ const Template: Story = args => (
         }}
         width={args['Pane.width']}
         sticky={args['Pane.sticky']}
+        resizable={args['Pane.resizable']}
         padding={args['Pane.padding']}
         divider={{
           narrow: args['Pane.divider.narrow'],
@@ -509,7 +515,7 @@ export const StickyPane: Story = args => (
         })}
       </Box>
     </PageLayout.Content>
-    <PageLayout.Pane position="start" padding="normal" divider="line" sticky={args.sticky}>
+    <PageLayout.Pane position="start" resizable padding="normal" divider="line" sticky={args.sticky}>
       <Box sx={{display: 'grid', gap: 3}}>
         {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
           const testId = `paragraph${i}`
@@ -694,4 +700,21 @@ CustomStickyHeader.argTypes = {
   }
 }
 
+export const ResizablePane: Story = () => (
+  <PageLayout containerWidth="full">
+    <PageLayout.Header>
+      <Placeholder height={64} label="Header" />
+    </PageLayout.Header>
+    <PageLayout.Pane resizable position="start">
+      <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>
+)
+
 export default meta