fix(PageLayout): Remove unused width value in PageLayout.Pane (#5484)

* fix(PageLayout): Remove unused width pabe value

* remove unused value

* css

Author: hussam-i-am

.changeset/forty-doors-visit.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Fix responsive width of PageLayout

packages/react/src/PageLayout/PageLayout.examples.stories.tsx

@@ -61,6 +61,7 @@ export const ParentDetail: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
@@ -175,6 +176,7 @@ export const ParentDetailBreadcrumb: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
@@ -275,6 +277,7 @@ export const FilterBottomSheet: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
@@ -364,6 +367,7 @@ export const FilterActionMenu: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
@@ -627,6 +631,7 @@ export const FiltersBottomSheetTwoLevels: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item
@@ -1118,6 +1123,7 @@ export const ParentDetailPlusFilters: StoryFn = () => {
             regular: false,
             wide: false,
           }}
+          aria-label="Side pane"
         >
           <NavList>
             <NavList.Item

packages/react/src/PageLayout/PageLayout.features.stories.tsx

@@ -58,7 +58,7 @@ export const PullRequestPage = () => (
         this overflows, it should not break to overall page layout!
       </Box>
     </PageLayout.Content>
-    <PageLayout.Pane>
+    <PageLayout.Pane aria-label="Side pane">
       <Box sx={{display: 'flex', flexDirection: 'column', gap: 3}}>
         <Box>
           <Text sx={{fontSize: 0, fontWeight: 'bold', display: 'block', color: 'fg.muted'}}>Assignees</Text>
@@ -310,7 +310,7 @@ export const ResizablePane: StoryFn = () => (
     <PageLayout.Header>
       <Placeholder height={64} label="Header" />
     </PageLayout.Header>
-    <PageLayout.Pane resizable position="start">
+    <PageLayout.Pane resizable position="start" aria-label="Side pane">
       <Placeholder height={320} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Content>
@@ -329,7 +329,7 @@ export const ScrollContainerWithinPageLayoutPane: StoryFn = () => (
       <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
         <PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Sticky pane">
           <Box sx={{overflow: 'auto'}}>
-            <PageLayout.Pane padding="normal">
+            <PageLayout.Pane padding="normal" aria-label="Side pane">
               <Placeholder label="Inner scroll container" height={800} />
             </PageLayout.Pane>
           </Box>
@@ -350,7 +350,7 @@ export const CustomPaneWidths: StoryFn = () => (
     <PageLayout.Header>
       <Placeholder height={64} label="Header" />
     </PageLayout.Header>
-    <PageLayout.Pane resizable width={{min: '200px', default: '300px', max: '400px'}}>
+    <PageLayout.Pane resizable width={{min: '200px', default: '300px', max: '400px'}} aria-label="Side pane">
       <Placeholder height={320} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Content>
@@ -367,7 +367,7 @@ export const WithCustomPaneHeading: StoryFn = () => (
     <PageLayout.Header>
       <Placeholder height={64} label="Header" />
     </PageLayout.Header>
-    <PageLayout.Pane resizable position="start">
+    <PageLayout.Pane resizable position="start" aria-label="Side pane">
       <Heading as="h2" sx={{fontSize: 3}} id="pane-heading">
         Pane Heading
       </Heading>

packages/react/src/PageLayout/PageLayout.module.css

@@ -46,7 +46,6 @@ body[data-page-layout-dragging='true'] * {
   }
 
   @media screen and (min-width: 1280px) {
-    --pane-width-large: 336px;
     --pane-max-width-diff: 959px;
   }
 

packages/react/src/PageLayout/PageLayout.tsx

@@ -759,11 +759,13 @@ const panePositions = {
 const paneWidths = {
   small: ['100%', null, '240px', '256px'],
   medium: ['100%', null, '256px', '296px'],
-  large: ['100%', null, '256px', '320px', '336px'],
+  large: ['100%', null, '256px', '320px'],
 }
 
 const defaultPaneWidth = {small: 256, medium: 296, large: 320}
 
+const overflowProps = {tabIndex: 0, role: 'region'}
+
 const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayoutPaneProps>>(
   (
     {
@@ -998,7 +1000,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
         />
         <Box
           ref={paneRef}
-          {...(hasOverflow && {tabIndex: 0, role: 'region'})}
+          {...(hasOverflow ? overflowProps : {})}
           {...labelProp}
           {...(id && {id: paneId})}
           {...paneStylingProps}