Add minWidth prop to PageLayout.Pane

.changeset/late-wombats-switch.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `minWidth prop to `PageLayout.Pane` and `SplitPageLayout.Pane`

generated/components.json

@@ -2688,6 +2688,12 @@
               "defaultValue": "'medium'",
               "description": "The width of the pane."
             },
+            {
+              "name": "minWidth",
+              "type": "number",
+              "defaultValue": "256",
+              "description": "The minimum width of the pane."
+            },
             {
               "name": "resizable",
               "type": "boolean",
@@ -3685,6 +3691,12 @@
               "defaultValue": "'medium'",
               "description": "The width of the pane."
             },
+            {
+              "name": "minWidth",
+              "type": "number",
+              "defaultValue": "256",
+              "description": "The minimum width of the pane."
+            },
             {
               "name": "resizable",
               "type": "boolean",

src/PageLayout/PageLayout.docs.json

@@ -152,6 +152,12 @@
           "defaultValue": "'medium'",
           "description": "The width of the pane."
         },
+        {
+          "name": "minWidth",
+          "type": "number",
+          "defaultValue": "256",
+          "description": "The minimum width of the pane."
+        },
         {
           "name": "resizable",
           "type": "boolean",

src/PageLayout/PageLayout.stories.tsx

@@ -238,6 +238,11 @@ const meta: Meta = {
       control: {type: 'radio'},
       table: {category: 'Pane props'},
     },
+    'Pane.minWidth': {
+      type: 'number',
+      defaultValue: 256,
+      table: {category: 'Pane props'},
+    },
     'Pane.sticky': {
       type: 'boolean',
       table: {category: 'Pane props'},
@@ -383,6 +388,7 @@ const Template: Story = args => (
           wide: args['Pane.position.wide'],
         }}
         width={args['Pane.width']}
+        minWidth={args['Pane.minWidth']}
         sticky={args['Pane.sticky']}
         resizable={args['Pane.resizable']}
         padding={args['Pane.padding']}

src/PageLayout/PageLayout.tsx

@@ -482,10 +482,11 @@ export type PageLayoutPaneProps = {
    * position={{regular: 'start', narrow: 'end'}}
    * ```
    */
+  positionWhenNarrow?: 'inherit' | keyof typeof panePositions
   'aria-labelledby'?: string
   'aria-label'?: string
-  positionWhenNarrow?: 'inherit' | keyof typeof panePositions
   width?: keyof typeof paneWidths
+  minWidth?: number
   resizable?: boolean
   widthStorageKey?: string
   padding?: keyof typeof SPACING_MAP
@@ -532,6 +533,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
       position: responsivePosition = 'end',
       positionWhenNarrow = 'inherit',
       width = 'medium',
+      minWidth = 256,
       padding = 'none',
       resizable = false,
       widthStorageKey = 'paneWidth',
@@ -603,7 +605,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     const paneRef = React.useRef<HTMLDivElement>(null)
     useRefObjectAsForwardedRef(forwardRef, paneRef)
 
-    const MIN_PANE_WIDTH = 256 // 256px, related to `--pane-min-width CSS var.
     const [minPercent, setMinPercent] = React.useState(0)
     const [maxPercent, setMaxPercent] = React.useState(0)
     const hasOverflow = useOverflow(paneRef)
@@ -618,7 +619,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
         const viewportWidth = window.innerWidth
         const maxPaneWidth = viewportWidth > maxPaneWidthDiff ? viewportWidth - maxPaneWidthDiff : viewportWidth
 
-        const minPercent = Math.round((100 * MIN_PANE_WIDTH) / viewportWidth)
+        const minPercent = Math.round((100 * minWidth) / viewportWidth)
         setMinPercent(minPercent)
 
         const maxPercent = Math.round((100 * maxPaneWidth) / viewportWidth)
@@ -627,7 +628,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
         const widthPercent = Math.round((100 * paneWidth) / viewportWidth)
         setWidthPercent(widthPercent.toString())
       }
-    }, [paneRef])
+    }, [paneRef, minWidth])
 
     const [widthPercent, setWidthPercent] = React.useState('')
     const [prevPercent, setPrevPercent] = React.useState('')
@@ -742,7 +743,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
             '--pane-width': `${paneWidth}px`,
           }}
           sx={(theme: Theme) => ({
-            '--pane-min-width': `256px`,
+            '--pane-min-width': `${minWidth}px`,
             '--pane-max-width-diff': '511px',
             '--pane-max-width': `calc(100vw - var(--pane-max-width-diff))`,
             width: resizable

src/SplitPageLayout/SplitPageLayout.docs.json

@@ -80,6 +80,12 @@
           "defaultValue": "'medium'",
           "description": "The width of the pane."
         },
+        {
+          "name": "minWidth",
+          "type": "number",
+          "defaultValue": "256",
+          "description": "The minimum width of the pane."
+        },
         {
           "name": "resizable",
           "type": "boolean",
@@ -156,4 +162,4 @@
       ]
     }
   ]
-}
+}

src/SplitPageLayout/SplitPageLayout.stories.tsx

@@ -189,6 +189,11 @@ export default {
       control: {type: 'radio'},
       table: {category: 'Pane props'},
     },
+    'Pane.minWidth': {
+      type: 'number',
+      defaultValue: 256,
+      table: {category: 'Pane props'},
+    },
     'Pane.sticky': {
       type: 'boolean',
       defaultValue: true,
@@ -342,6 +347,7 @@ const Template: Story = args => (
           wide: args['Pane.position.wide'],
         }}
         width={args['Pane.width']}
+        minWidth={args['Pane.minWidth']}
         sticky={args['Pane.sticky']}
         padding={args['Pane.padding']}
         divider={{