Resizable pane refactor

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,12 +384,7 @@ On macOS, you can open the VoiceOver rotor by pressing `VO-U`. You can navigate
 | 'normal'`}
     defaultValue="'normal'"
   />
-  <PropsTableRow name="resizable" type="boolean" description="When true, the pane and content areas may be resized" />
-  <PropsTableRow
-    name="widthStorageKey"
-    type="string"
-    description="Provide a key used with `localStorage` to persist resized layout settings on the client"
-  />
+
   <PropsTableSxRow />
 </PropsTable>
 
@@ -518,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,101 +700,21 @@ CustomStickyHeader.argTypes = {
   }
 }
 
-export const ResizablePane: Story = args => (
-  <PageLayout containerWidth="full" padding={args.padding} rowGap={args.rowGap} columnGap={args.columnGap}>
-    {args['Render header?'] ? (
-      <PageLayout.Header
-        padding={args['Header.padding']}
-        divider={{
-          narrow: args['Header.divider.narrow'],
-          regular: args['Header.divider.regular'],
-          wide: args['Header.divider.wide']
-        }}
-        hidden={{
-          narrow: args['Header.hidden.narrow'],
-          regular: args['Header.hidden.regular'],
-          wide: args['Header.hidden.wide']
-        }}
-      >
-        <Placeholder height={args['Header placeholder height']} label="Header" />
-      </PageLayout.Header>
-    ) : null}
-    <PageLayout.Content
-      width={args['Content.width']}
-      padding={args['Content.padding']}
-      hidden={{
-        narrow: args['Content.hidden.narrow'],
-        regular: args['Content.hidden.regular'],
-        wide: args['Content.hidden.wide']
-      }}
-    >
-      <Placeholder height={args['Content placeholder height']} label="Content" />
+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>
-    {args['Render pane?'] ? (
-      <PageLayout.Pane
-        width={args['Content.width']}
-        padding={args['Content.padding']}
-        position={{
-          narrow: args['Pane.position.narrow'],
-          regular: args['Pane.position.regular'],
-          wide: args['Pane.position.wide']
-        }}
-        divider={{
-          narrow: args['Pane.divider.narrow'],
-          regular: args['Pane.divider.regular'],
-          wide: args['Pane.divider.wide']
-        }}
-        resizable={true}
-        widthStorageKey="primer-react.pane-width"
-      >
-        <Placeholder height={args['Pane placeholder height']} label="Pane" />
-      </PageLayout.Pane>
-    ) : null}
-    {args['Render footer?'] ? (
-      <PageLayout.Footer
-        padding={args['Footer.padding']}
-        divider={{
-          narrow: args['Footer.divider.narrow'],
-          regular: args['Footer.divider.regular'],
-          wide: args['Footer.divider.wide']
-        }}
-        hidden={{
-          narrow: args['Footer.hidden.narrow'],
-          regular: args['Footer.hidden.regular'],
-          wide: args['Footer.hidden.wide']
-        }}
-      >
-        <Placeholder height={args['Footer placeholder height']} label="Footer" />
-      </PageLayout.Footer>
-    ) : null}
+    <PageLayout.Footer>
+      <Placeholder height={64} label="Footer" />
+    </PageLayout.Footer>
   </PageLayout>
 )
 
-ResizablePane.args = {
-  padding: 1,
-  rowGap: 1,
-  columnGap: 1
-}
-
-ResizablePane.argTypes = {
-  padding: {
-    type: {
-      name: 'enum',
-      value: ['none', 'condensed', 'normal']
-    }
-  },
-  rowGap: {
-    type: {
-      name: 'enum',
-      value: ['none', 'condensed', 'normal']
-    }
-  },
-  columnGap: {
-    type: {
-      name: 'enum',
-      value: ['none', 'condensed', 'normal']
-    }
-  }
-}
-
 export default meta