Revert #3389 (PageLayout.Pane: Undo deprecation for position prop) (#…

…3589) * Revert 57c4bdf * Create nervous-dolls-dream.md * Update nervous-dolls-dream.md * Revert "fix(PageLayout): Remove `warning` for the deprecated `position` prop (#3545)" This reverts commit 430a203. * linter caught a bad merge! * Remove reverted changeset * copy old test * Update nervous-dolls-dream.md
primer · Aug 4, 2023 · d598a53 · d598a53
1 parent eaf6dc9
commit d598a53
Show file tree

Hide file tree

Showing 12 changed files with 402 additions and 344 deletions.
diff --git a/.changeset/nervous-dolls-dream.md b/.changeset/nervous-dolls-dream.md
@@ -0,0 +1,8 @@
+---
+"@primer/react": patch
+---
+
+- PageLayout: Undo deprecation of `position` prop for PageLayout.Pane (Revert primer/react#3389)
+- SplitPageLayout: Undo deprecation of `position` prop for SplitPageLayout.Pane (Revert primer/react#3389)
+
+<!-- Changed components: PageLayout, SplitPageLayout -->
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
@@ -87,12 +87,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Pane>
-    <Placeholder label="Pane" height={120} />
-  </PageLayout.Pane>
   <PageLayout.Content>
     <Placeholder label="Content" height={240} />
   </PageLayout.Content>
+  <PageLayout.Pane position="start">
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
   <PageLayout.Footer>
     <Placeholder label="Footer" height={64} />
   </PageLayout.Footer>
@@ -106,12 +106,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Pane hidden={{narrow: true}}>
-    <Placeholder label="Pane" height={120} />
-  </PageLayout.Pane>
   <PageLayout.Content>
     <Placeholder label="Content" height={240} />
   </PageLayout.Content>
+  <PageLayout.Pane position="start" hidden={{narrow: true}}>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
   <PageLayout.Footer>
     <Placeholder label="Footer" height={64} />
   </PageLayout.Footer>
@@ -193,12 +193,12 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along
     Custom sticky header
   </Box>
   <PageLayout>
-    <PageLayout.Pane sticky offsetHeader={64}>
-      <Placeholder label="Pane" height={120} />
-    </PageLayout.Pane>
     <PageLayout.Content>
       <Placeholder label="Content" height={320} />
     </PageLayout.Content>
+    <PageLayout.Pane position="start" sticky offsetHeader={64}>
+      <Placeholder label="Pane" height={120} />
+    </PageLayout.Pane>
     <PageLayout.Footer>
       <Placeholder label="Footer" height={64} />
     </PageLayout.Footer>
@@ -221,7 +221,7 @@ navigation container is used for.
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Pane aria-label="Secondary navigation">
+  <PageLayout.Pane position="start" aria-label="Secondary navigation">
     <NavList>
       <NavList.Item href="/" aria-current="page">
         Home

diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx
@@ -167,7 +167,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
     <SplitPageLayout.Content>
       <Placeholder label="Content" height={420} />
     </SplitPageLayout.Content>
-    <SplitPageLayout.Pane>
+    <SplitPageLayout.Pane position="end">
       <Placeholder label="Pane" height={120} />
     </SplitPageLayout.Pane>
     <SplitPageLayout.Footer>

diff --git a/src/PageLayout/PageLayout.docs.json b/src/PageLayout/PageLayout.docs.json
@@ -137,8 +137,7 @@
           "name": "position",
           "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
           "defaultValue": "'end'",
-          "description": "Use source order instead of relying on the `position` prop",
-          "deprecated": true
+          "description": ""
         },
         {
           "name": "positionWhenNarrow",

diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx
@@ -83,42 +83,49 @@ export const StickyPane: Story = args => (
     <PageLayout.Header padding="normal" divider="line">
       <Placeholder label="Header" height={64} />
     </PageLayout.Header>
-    <PageLayout.Pane resizable padding="normal" divider="line" sticky={args.sticky} aria-label="Side pane">
+    <PageLayout.Content padding="normal" width="large">
       <Box sx={{display: 'grid', gap: 3}}>
-        {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
-          const testId = `paragraph${i}`
+        {Array.from({length: args.numParagraphsInContent}).map((_, i) => {
+          const testId = `content${i}`
           return (
             <Box key={i} as="p" sx={{margin: 0}}>
               <span data-testid={testId}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                 ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
                 et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
-                massa purus.
+                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
+                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
+                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
               </span>
             </Box>
           )
         })}
       </Box>
-    </PageLayout.Pane>
-    <PageLayout.Content padding="normal" width="large">
+    </PageLayout.Content>
+    <PageLayout.Pane
+      position="start"
+      resizable
+      padding="normal"
+      divider="line"
+      sticky={args.sticky}
+      aria-label="Side pane"
+    >
       <Box sx={{display: 'grid', gap: 3}}>
-        {Array.from({length: args.numParagraphsInContent}).map((_, i) => {
-          const testId = `content${i}`
+        {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
+          const testId = `paragraph${i}`
           return (
             <Box key={i} as="p" sx={{margin: 0}}>
               <span data-testid={testId}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                 ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
                 et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
-                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
-                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
-                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
+                massa purus.
               </span>
             </Box>
           )
         })}
       </Box>
-    </PageLayout.Content>
+    </PageLayout.Pane>
     <PageLayout.Footer padding="normal" divider="line">
       <Placeholder label="Footer" height={64} />
     </PageLayout.Footer>
@@ -151,32 +158,32 @@ export const NestedScrollContainer: Story = args => (
         <PageLayout.Header padding="normal" divider="line">
           <Placeholder label="Header" height={64} />
         </PageLayout.Header>
-        <PageLayout.Pane padding="normal" divider="line" sticky aria-label="Side pane">
+        <PageLayout.Content padding="normal" width="large">
           <Box sx={{display: 'grid', gap: 3}}>
-            {Array.from({length: args.numParagraphsInPane}).map((_, i) => (
+            {Array.from({length: args.numParagraphsInContent}).map((_, i) => (
               <Box key={i} as="p" sx={{margin: 0}}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                 ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
                 et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
-                massa purus.
+                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
+                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
+                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
               </Box>
             ))}
           </Box>
-        </PageLayout.Pane>
-        <PageLayout.Content padding="normal" width="large">
+        </PageLayout.Content>
+        <PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Side pane">
           <Box sx={{display: 'grid', gap: 3}}>
-            {Array.from({length: args.numParagraphsInContent}).map((_, i) => (
+            {Array.from({length: args.numParagraphsInPane}).map((_, i) => (
               <Box key={i} as="p" sx={{margin: 0}}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                 ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
                 et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
-                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
-                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
-                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
+                massa purus.
               </Box>
             ))}
           </Box>
-        </PageLayout.Content>
+        </PageLayout.Pane>
         <PageLayout.Footer padding="normal" divider="line">
           <Placeholder label="Footer" height={64} />
         </PageLayout.Footer>
@@ -221,23 +228,6 @@ export const CustomStickyHeader: Story = args => (
       Custom sticky header
     </Box>
     <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
-      <PageLayout.Pane padding="normal" divider="line" aria-label="Aside pane" sticky offsetHeader={args.offsetHeader}>
-        <Box sx={{display: 'grid', gap: 3}}>
-          {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
-            const testId = `paragraph${i}`
-            return (
-              <Box key={i} as="p" sx={{margin: 0}}>
-                <span data-testid={testId}>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
-                  ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
-                  tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
-                  sit amet massa purus.
-                </span>
-              </Box>
-            )
-          })}
-        </Box>
-      </PageLayout.Pane>
       <PageLayout.Content padding="normal" width="large">
         <Box sx={{display: 'grid', gap: 3}} data-testid="scrollContainer">
           {Array.from({length: args.numParagraphsInContent}).map((_, i) => {
@@ -258,6 +248,30 @@ export const CustomStickyHeader: Story = args => (
           })}
         </Box>
       </PageLayout.Content>
+      <PageLayout.Pane
+        position="start"
+        padding="normal"
+        divider="line"
+        aria-label="Aside pane"
+        sticky
+        offsetHeader={args.offsetHeader}
+      >
+        <Box sx={{display: 'grid', gap: 3}}>
+          {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
+            const testId = `paragraph${i}`
+            return (
+              <Box key={i} as="p" sx={{margin: 0}}>
+                <span data-testid={testId}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
+                  ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
+                  tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
+                  sit amet massa purus.
+                </span>
+              </Box>
+            )
+          })}
+        </Box>
+      </PageLayout.Pane>
       <PageLayout.Footer padding="normal" divider="line">
         <Placeholder label="Footer" height={64} />
       </PageLayout.Footer>
@@ -292,7 +306,7 @@ export const ResizablePane: Story = () => (
     <PageLayout.Header>
       <Placeholder height={64} label="Header" />
     </PageLayout.Header>
-    <PageLayout.Pane resizable>
+    <PageLayout.Pane resizable position="start">
       <Placeholder height={320} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Content>
@@ -309,7 +323,7 @@ export const ScrollContainerWithinPageLayoutPane: Story = () => (
     <Box sx={{overflow: 'auto'}}>
       <Placeholder label="Above inner scroll container" height={120} />
       <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
-        <PageLayout.Pane padding="normal" divider="line" sticky aria-label="Sticky pane">
+        <PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Sticky pane">
           <Box sx={{overflow: 'auto'}}>
             <PageLayout.Pane padding="normal">
               <Placeholder label="Inner scroll container" height={800} />

diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx
@@ -34,6 +34,9 @@ const meta: Meta = {
     'Content.hidden.regular': false,
     'Content.hidden.narrow': false,
     'Content.hidden.wide': false,
+    'Pane.position.regular': 'end',
+    'Pane.position.narrow': 'end',
+    'Pane.position.wide': 'end',
     'Pane.width': 'medium',
     'Pane.sticky': false,
     'Pane.resizable': false,
@@ -202,6 +205,31 @@ const meta: Meta = {
       table: {category: 'Content props'},
     },
 
+    // Pane prop controls
+    'Pane.position.regular': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end'],
+      },
+      control: {type: 'radio'},
+      table: {category: 'Pane props'},
+    },
+    'Pane.position.narrow': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end'],
+      },
+      control: {type: 'radio'},
+      table: {category: 'Pane props'},
+    },
+    'Pane.position.wide': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end'],
+      },
+      control: {type: 'radio'},
+      table: {category: 'Pane props'},
+    },
     'Pane.width': {
       type: {
         name: 'enum',
@@ -354,6 +382,11 @@ const Template: Story = args => (
     </PageLayout.Content>
     {args['Render pane?'] ? (
       <PageLayout.Pane
+        position={{
+          narrow: args['Pane.position.narrow'],
+          regular: args['Pane.position.regular'],
+          wide: args['Pane.position.wide'],
+        }}
         width={args['Pane.width']}
         minWidth={args['Pane.minWidth']}
         sticky={args['Pane.sticky']}

diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx
@@ -53,10 +53,10 @@ describe('PageLayout', () => {
           <PageLayout.Header divider="line" dividerWhenNarrow="filled">
             Header
           </PageLayout.Header>
-          <PageLayout.Pane divider="line" dividerWhenNarrow="filled">
+          <PageLayout.Content>Content</PageLayout.Content>
+          <PageLayout.Pane position="start" divider="line" dividerWhenNarrow="filled">
             Pane
           </PageLayout.Pane>
-          <PageLayout.Content>Content</PageLayout.Content>
           <PageLayout.Footer dividerWhenNarrow="line">Footer</PageLayout.Footer>
         </PageLayout>
       </ThemeProvider>,