From 96a0537e2bbead4ca7f7d3768af15ed6dc9ffaa7 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Aug 2023 16:23:40 +0200
Subject: [PATCH 1/8] Revert 57c4bdf

---
 src/PageLayout/PageLayout.docs.json           |   3 +-
 .../PageLayout.features.stories.tsx           |  96 ++--
 src/PageLayout/PageLayout.stories.tsx         |  33 ++
 src/PageLayout/PageLayout.test.tsx            |   4 +-
 src/PageLayout/PageLayout.tsx                 |  30 +-
 .../__snapshots__/PageLayout.test.tsx.snap    | 473 +++++++++---------
 src/SplitPageLayout/SplitPageLayout.docs.json |   5 +-
 .../SplitPageLayout.stories.tsx               |  32 ++
 .../SplitPageLayout.test.tsx.snap             |  21 +-
 9 files changed, 383 insertions(+), 314 deletions(-)

diff --git a/src/PageLayout/PageLayout.docs.json b/src/PageLayout/PageLayout.docs.json
index 199f7f27edb..dfa273638c5 100644
--- 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
index 2713af247f4..9a168985c56 100644
--- 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
index d3cc95afd72..2ec2aaa0f56 100644
--- 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
index 8ccabb98ff1..03abd241912 100644
--- 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>,
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 76c7c9eb59d..effd9a9f929 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -107,23 +107,7 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
           }}
         >
           {slots.header}
-          <Box
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            sx={(theme: any) => ({
-              display: 'flex',
-              flex: '1 1 100%',
-              flexWrap: 'wrap',
-              maxWidth: '100%',
-              [`@media screen and (max-width: ${theme.breakpoints[2]})`]: {
-                rowGap: SPACING_MAP[rowGap],
-              },
-              [`@media screen and (min-width: ${theme.breakpoints[1]})`]: {
-                columnGap: SPACING_MAP[columnGap],
-              },
-            })}
-          >
-            {rest}
-          </Box>
+          <Box sx={{display: 'flex', flex: '1 1 100%', flexWrap: 'wrap', maxWidth: '100%'}}>{rest}</Box>
           {slots.footer}
         </Box>
       </Box>
@@ -444,6 +428,7 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
         {
           display: isHidden ? 'none' : 'flex',
           flexDirection: 'column',
+          order: REGION_ORDER.content,
           // Set flex-basis to 0% to allow flex-grow to control the width of the content region.
           // Without this, the content region could wrap onto a different line
           // than the pane region on wide viewports if its contents are too wide.
@@ -564,7 +549,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     {
       'aria-label': label,
       'aria-labelledby': labelledBy,
-      position: responsivePosition = undefined,
+      position: responsivePosition = 'end',
       positionWhenNarrow = 'inherit',
       width = 'medium',
       minWidth = 256,
@@ -712,9 +697,12 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
             {
               // Narrow viewports
               display: isHidden ? 'none' : 'flex',
-              order: position !== undefined ? panePositions[position] : undefined,
+              order: panePositions[position],
               width: '100%',
               marginX: 0,
+              ...(position === 'end'
+                ? {flexDirection: 'column', marginTop: SPACING_MAP[rowGap]}
+                : {flexDirection: 'column-reverse', marginBottom: SPACING_MAP[rowGap]}),
 
               // Regular and wide viewports
               [`@media screen and (min-width: ${theme.breakpoints[1]})`]: {
@@ -729,7 +717,9 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
                       maxHeight: 'var(--sticky-pane-height)',
                     }
                   : {}),
-                ...(position === 'end' ? {flexDirection: 'row'} : {flexDirection: 'row-reverse'}),
+                ...(position === 'end'
+                  ? {flexDirection: 'row', marginLeft: SPACING_MAP[columnGap]}
+                  : {flexDirection: 'row-reverse', marginRight: SPACING_MAP[columnGap]}),
               },
             },
             sx,
diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
index c8a88864402..97b5bfbea64 100644
--- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
+++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -18,6 +18,20 @@ exports[`PageLayout renders condensed layout 1`] = `
   padding: 0;
 }
 
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 100%;
+  -ms-flex: 1 1 100%;
+  flex: 1 1 100%;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  max-width: 100%;
+}
+
 .c6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -26,6 +40,9 @@ exports[`PageLayout renders condensed layout 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-order: 2;
+  -ms-flex-order: 2;
+  order: 2;
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
@@ -51,17 +68,7 @@ exports[`PageLayout renders condensed layout 1`] = `
   padding: 0;
 }
 
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c10 {
+.c11 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
   --pane-max-width: calc(100vw - var(--pane-max-width-diff));
@@ -85,28 +92,38 @@ exports[`PageLayout renders condensed layout 1`] = `
   margin-top: 16px;
 }
 
-.c5 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex: 1 1 100%;
-  -ms-flex: 1 1 100%;
-  flex: 1 1 100%;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  max-width: 100%;
+  -webkit-order: 3;
+  -ms-flex-order: 3;
+  order: 3;
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 16px;
 }
 
 .c9 {
+  margin-left: -16px;
+  margin-right: -16px;
+  display: none;
+  margin-bottom: 16px;
+}
+
+.c10 {
   height: 100%;
   position: relative;
   display: none;
-  margin-left: 16px;
+  margin-right: 16px;
 }
 
-.c11 {
+.c12 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -114,39 +131,21 @@ exports[`PageLayout renders condensed layout 1`] = `
   margin-top: 16px;
 }
 
-.c12 {
-  margin-left: -16px;
-  margin-right: -16px;
-  display: none;
-  margin-bottom: 16px;
-}
-
 @media screen and (min-width:768px) {
-  .c8 {
-    width: auto;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    -webkit-flex-direction: row-reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c10 {
+  .c11 {
     width: 256px;
     overflow: auto;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
+  .c11 {
     width: 296px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c10 {
+  .c11 {
     --pane-max-width-diff: 959px;
   }
 }
@@ -158,21 +157,20 @@ exports[`PageLayout renders condensed layout 1`] = `
   }
 }
 
-@media screen and (max-width:1012px) {
-  .c5 {
-    row-gap: 16px;
-  }
-}
-
 @media screen and (min-width:768px) {
-  .c5 {
-    -webkit-column-gap: 16px;
-    column-gap: 16px;
+  .c8 {
+    width: auto;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    margin-left: 16px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c12 {
+  .c9 {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
@@ -219,14 +217,14 @@ exports[`PageLayout renders condensed layout 1`] = `
         <div
           class="c8"
         >
-          <div
-            class="c4"
-          />
           <div
             class="c9"
           />
           <div
             class="c10"
+          />
+          <div
+            class="c11"
             style="--pane-width: 296px;"
           >
             Pane
@@ -234,10 +232,10 @@ exports[`PageLayout renders condensed layout 1`] = `
         </div>
       </div>
       <footer
-        class="c11"
+        class="c12"
       >
         <div
-          class="c12"
+          class="c9"
         />
         <div
           class="c3"
@@ -306,6 +304,9 @@ exports[`PageLayout renders default layout 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-order: 2;
+  -ms-flex-order: 2;
+  order: 2;
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
@@ -336,19 +337,33 @@ exports[`PageLayout renders default layout 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-order: 3;
+  -ms-flex-order: 3;
+  order: 3;
   width: 100%;
   margin-left: 0;
   margin-right: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 16px;
 }
 
 .c9 {
+  margin-left: -16px;
+  margin-right: -16px;
+  display: none;
+  margin-bottom: 16px;
+}
+
+.c10 {
   height: 100%;
   position: relative;
   display: none;
-  margin-left: 16px;
+  margin-right: 16px;
 }
 
-.c10 {
+.c11 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
   --pane-max-width: calc(100vw - var(--pane-max-width-diff));
@@ -356,7 +371,7 @@ exports[`PageLayout renders default layout 1`] = `
   padding: 0;
 }
 
-.c11 {
+.c12 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -364,13 +379,6 @@ exports[`PageLayout renders default layout 1`] = `
   margin-top: 16px;
 }
 
-.c12 {
-  margin-left: -16px;
-  margin-right: -16px;
-  display: none;
-  margin-bottom: 16px;
-}
-
 @media screen and (min-width:1012px) {
   .c0 {
     padding: 24px;
@@ -398,73 +406,67 @@ exports[`PageLayout renders default layout 1`] = `
   }
 }
 
-@media screen and (max-width:1012px) {
-  .c5 {
-    row-gap: 16px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c5 {
-    -webkit-column-gap: 16px;
-    column-gap: 16px;
-  }
-}
-
 @media screen and (min-width:768px) {
   .c8 {
     width: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
-    -webkit-flex-direction: row-reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    margin-left: 16px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c9 {
-    margin-left: 24px;
+  .c8 {
+    margin-top: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c10 {
-    width: 256px;
-    overflow: auto;
+  .c9 {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
-    width: 296px;
+  .c9 {
+    margin-left: -24px;
+    margin-right: -24px;
+    margin-bottom: 24px;
   }
 }
 
-@media screen and (min-width:1280px) {
+@media screen and (min-width:1012px) {
   .c10 {
-    --pane-max-width-diff: 959px;
+    margin-right: 24px;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c11 {
+    width: 256px;
+    overflow: auto;
   }
 }
 
 @media screen and (min-width:1012px) {
   .c11 {
-    margin-top: 24px;
+    width: 296px;
   }
 }
 
-@media screen and (min-width:768px) {
-  .c12 {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+@media screen and (min-width:1280px) {
+  .c11 {
+    --pane-max-width-diff: 959px;
   }
 }
 
 @media screen and (min-width:1012px) {
   .c12 {
-    margin-left: -24px;
-    margin-right: -24px;
-    margin-bottom: 24px;
+    margin-top: 24px;
   }
 }
 
@@ -509,14 +511,14 @@ exports[`PageLayout renders default layout 1`] = `
         <div
           class="c8"
         >
-          <div
-            class="c4"
-          />
           <div
             class="c9"
           />
           <div
             class="c10"
+          />
+          <div
+            class="c11"
             style="--pane-width: 296px;"
           >
             Pane
@@ -524,10 +526,10 @@ exports[`PageLayout renders default layout 1`] = `
         </div>
       </div>
       <footer
-        class="c11"
+        class="c12"
       >
         <div
-          class="c12"
+          class="c9"
         />
         <div
           class="c3"
@@ -596,6 +598,9 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-order: 2;
+  -ms-flex-order: 2;
+  order: 2;
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
@@ -621,29 +626,6 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   padding: 0;
 }
 
-.c11 {
-  --pane-min-width: 256px;
-  --pane-max-width-diff: 511px;
-  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
-  width: 100%;
-  padding: 0;
-}
-
-.c12 {
-  -webkit-order: 4;
-  -ms-flex-order: 4;
-  order: 4;
-  width: 100%;
-  margin-top: 16px;
-}
-
-.c9 {
-  margin-left: -16px;
-  margin-right: -16px;
-  display: none;
-  margin-bottom: 16px;
-}
-
 .c8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -655,6 +637,17 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   width: 100%;
   margin-left: 0;
   margin-right: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 16px;
+}
+
+.c9 {
+  margin-left: -16px;
+  margin-right: -16px;
+  display: none;
+  margin-bottom: 16px;
 }
 
 .c10 {
@@ -664,6 +657,22 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   margin-right: 16px;
 }
 
+.c11 {
+  --pane-min-width: 256px;
+  --pane-max-width-diff: 511px;
+  --pane-max-width: calc(100vw - var(--pane-max-width-diff));
+  width: 100%;
+  padding: 0;
+}
+
+.c12 {
+  -webkit-order: 4;
+  -ms-flex-order: 4;
+  order: 4;
+  width: 100%;
+  margin-top: 16px;
+}
+
 @media screen and (min-width:1012px) {
   .c0 {
     padding: 24px;
@@ -691,73 +700,67 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   }
 }
 
-@media screen and (max-width:1012px) {
-  .c5 {
-    row-gap: 16px;
+@media screen and (min-width:768px) {
+  .c8 {
+    width: auto;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    margin-left: 16px;
   }
 }
 
-@media screen and (min-width:768px) {
-  .c5 {
-    -webkit-column-gap: 16px;
-    column-gap: 16px;
+@media screen and (min-width:1012px) {
+  .c8 {
+    margin-top: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c11 {
-    width: 256px;
-    overflow: auto;
+  .c9 {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c11 {
-    width: 296px;
-  }
-}
-
-@media screen and (min-width:1280px) {
-  .c11 {
-    --pane-max-width-diff: 959px;
+  .c9 {
+    margin-left: -24px;
+    margin-right: -24px;
+    margin-bottom: 24px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c12 {
-    margin-top: 24px;
+  .c10 {
+    margin-right: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c9 {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+  .c11 {
+    width: 256px;
+    overflow: auto;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c9 {
-    margin-left: -24px;
-    margin-right: -24px;
-    margin-bottom: 24px;
+  .c11 {
+    width: 296px;
   }
 }
 
-@media screen and (min-width:768px) {
-  .c8 {
-    width: auto;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
+@media screen and (min-width:1280px) {
+  .c11 {
+    --pane-max-width-diff: 959px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
-    margin-right: 24px;
+  .c12 {
+    margin-top: 24px;
   }
 }
 
@@ -881,7 +884,7 @@ exports[`PageLayout renders with dividers 1`] = `
   max-width: 100%;
 }
 
-.c9 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -889,6 +892,9 @@ exports[`PageLayout renders with dividers 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-order: 2;
+  -ms-flex-order: 2;
+  order: 2;
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
@@ -902,7 +908,7 @@ exports[`PageLayout renders with dividers 1`] = `
   min-width: 1px;
 }
 
-.c10 {
+.c7 {
   width: 100%;
   max-width: 100%;
   margin-left: auto;
@@ -914,24 +920,14 @@ exports[`PageLayout renders with dividers 1`] = `
   padding: 0;
 }
 
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c7 {
-  height: 100%;
-  position: relative;
+.c12 {
+  margin-left: -16px;
+  margin-right: -16px;
   display: none;
-  margin-left: 16px;
+  margin-bottom: 16px;
 }
 
-.c8 {
+.c10 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
   --pane-max-width: calc(100vw - var(--pane-max-width-diff));
@@ -947,13 +943,30 @@ exports[`PageLayout renders with dividers 1`] = `
   margin-top: 16px;
 }
 
-.c12 {
-  margin-left: -16px;
-  margin-right: -16px;
-  display: none;
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+  -webkit-flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
+  flex-direction: column-reverse;
   margin-bottom: 16px;
 }
 
+.c9 {
+  height: 100%;
+  position: relative;
+  display: none;
+  margin-left: 16px;
+}
+
 @media screen and (min-width:1012px) {
   .c0 {
     padding: 24px;
@@ -981,51 +994,36 @@ exports[`PageLayout renders with dividers 1`] = `
   }
 }
 
-@media screen and (max-width:1012px) {
-  .c5 {
-    row-gap: 16px;
-  }
-}
-
 @media screen and (min-width:768px) {
-  .c5 {
-    -webkit-column-gap: 16px;
-    column-gap: 16px;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c6 {
-    width: auto;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    -webkit-flex-direction: row-reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
+  .c12 {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c7 {
-    margin-left: 24px;
+  .c12 {
+    margin-left: -24px;
+    margin-right: -24px;
+    margin-bottom: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c8 {
+  .c10 {
     width: 256px;
     overflow: auto;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c8 {
+  .c10 {
     width: 296px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c8 {
+  .c10 {
     --pane-max-width-diff: 959px;
   }
 }
@@ -1037,20 +1035,29 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c12 {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+  .c8 {
+    width: auto;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    -webkit-flex-direction: row-reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+    margin-right: 16px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c12 {
-    margin-left: -24px;
-    margin-right: -24px;
+  .c8 {
     margin-bottom: 24px;
   }
 }
 
+@media screen and (min-width:1012px) {
+  .c9 {
+    margin-left: 24px;
+  }
+}
+
 <div>
   <div
     class="c0"
@@ -1074,37 +1081,37 @@ exports[`PageLayout renders with dividers 1`] = `
       <div
         class="c5"
       >
-        <div
+        <main
           class="c6"
         >
           <div
-            class="c4"
+            class=""
           />
           <div
             class="c7"
-          />
-          <div
-            class="c8"
-            style="--pane-width: 296px;"
           >
-            Pane
+            Content
           </div>
-        </div>
-        <main
-          class="c9"
-        >
           <div
             class=""
           />
+        </main>
+        <div
+          class="c8"
+        >
+          <div
+            class="c4"
+          />
+          <div
+            class="c9"
+          />
           <div
             class="c10"
+            style="--pane-width: 296px;"
           >
-            Content
+            Pane
           </div>
-          <div
-            class=""
-          />
-        </main>
+        </div>
       </div>
       <footer
         class="c11"
diff --git a/src/SplitPageLayout/SplitPageLayout.docs.json b/src/SplitPageLayout/SplitPageLayout.docs.json
index fdd133c71f9..9fb036a25d3 100644
--- a/src/SplitPageLayout/SplitPageLayout.docs.json
+++ b/src/SplitPageLayout/SplitPageLayout.docs.json
@@ -71,9 +71,8 @@
         {
           "name": "position",
           "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
-          "defaultValue": "start'",
-          "description": "Use source order instead of relying on the `position` prop",
-          "deprecated": true
+          "defaultValue": "'start'",
+          "description": ""
         },
         {
           "name": "width",
diff --git a/src/SplitPageLayout/SplitPageLayout.stories.tsx b/src/SplitPageLayout/SplitPageLayout.stories.tsx
index a7c943b9b9f..39f09809d15 100644
--- a/src/SplitPageLayout/SplitPageLayout.stories.tsx
+++ b/src/SplitPageLayout/SplitPageLayout.stories.tsx
@@ -148,11 +148,38 @@ export default {
     },
 
     // Pane prop controls
+    'Pane.position.regular': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end'],
+      },
+      defaultValue: 'start',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'},
+    },
     'Pane.id': {
       type: 'string',
       defaultValue: 'customId',
       table: {category: 'Pane props'},
     },
+    'Pane.position.narrow': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end'],
+      },
+      defaultValue: 'start',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'},
+    },
+    'Pane.position.wide': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end'],
+      },
+      defaultValue: 'start',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'},
+    },
     'Pane.width': {
       type: {
         name: 'enum',
@@ -314,6 +341,11 @@ const Template: Story = args => (
     {args['Render pane?'] ? (
       <SplitPageLayout.Pane
         resizable={args['Pane.resizable']}
+        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/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
index 0a0d264d3f2..c35d5dc97cd 100644
--- a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
+++ b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
@@ -58,6 +58,9 @@ exports[`SplitPageLayout renders default layout 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  -webkit-order: 2;
+  -ms-flex-order: 2;
+  order: 2;
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
@@ -94,6 +97,10 @@ exports[`SplitPageLayout renders default layout 1`] = `
   width: 100%;
   margin-left: 0;
   margin-right: 0;
+  -webkit-flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
+  flex-direction: column-reverse;
+  margin-bottom: 0;
 }
 
 .c9 {
@@ -148,19 +155,6 @@ exports[`SplitPageLayout renders default layout 1`] = `
   }
 }
 
-@media screen and (max-width:1012px) {
-  .c5 {
-    row-gap: 0;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c5 {
-    -webkit-column-gap: 0;
-    column-gap: 0;
-  }
-}
-
 @media screen and (min-width:1012px) {
   .c7 {
     padding: 24px;
@@ -179,6 +173,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
     -webkit-flex-direction: row-reverse;
     -ms-flex-direction: row-reverse;
     flex-direction: row-reverse;
+    margin-right: 0;
   }
 }
 

From 33371eaa6f28d28c184ae9b8f25a7a5668e3de4e Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Aug 2023 16:29:09 +0200
Subject: [PATCH 2/8] Create nervous-dolls-dream.md

---
 .changeset/nervous-dolls-dream.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/nervous-dolls-dream.md

diff --git a/.changeset/nervous-dolls-dream.md b/.changeset/nervous-dolls-dream.md
new file mode 100644
index 00000000000..78c7b5d0f72
--- /dev/null
+++ b/.changeset/nervous-dolls-dream.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+- Undo deprecation position prop for PageLayout.Pane (Revert primer/react#3389)
+
+<!-- Changed components: PageLayout -->

From 6b57ec13a713c08afe3d2fb10dc0c100640bd1d0 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Aug 2023 16:29:58 +0200
Subject: [PATCH 3/8] Update nervous-dolls-dream.md

---
 .changeset/nervous-dolls-dream.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/nervous-dolls-dream.md b/.changeset/nervous-dolls-dream.md
index 78c7b5d0f72..e12f3c8a97c 100644
--- a/.changeset/nervous-dolls-dream.md
+++ b/.changeset/nervous-dolls-dream.md
@@ -2,6 +2,6 @@
 "@primer/react": patch
 ---
 
-- Undo deprecation position prop for PageLayout.Pane (Revert primer/react#3389)
+- PageLayout: Undo deprecation of `position` prop for PageLayout.Pane (Revert primer/react#3389)
 
 <!-- Changed components: PageLayout -->

From 5790b5d0baaf88edcf7b512ad88ef10c39ef4df6 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Aug 2023 16:37:56 +0200
Subject: [PATCH 4/8] Revert "fix(PageLayout): Remove `warning` for the
 deprecated `position` prop (#3545)"

This reverts commit 430a203abbe04c273395af67537f4ba59f9950cf.
---
 .changeset/hungry-spies-remember.md          |  7 ++++++
 docs/content/PageLayout.mdx                  | 20 +++++++--------
 docs/content/SplitPageLayout.mdx             |  2 +-
 src/PageLayout/PageLayout.tsx                | 26 ++++++--------------
 src/SplitPageLayout/SplitPageLayout.test.tsx |  4 +++
 5 files changed, 29 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/hungry-spies-remember.md

diff --git a/.changeset/hungry-spies-remember.md b/.changeset/hungry-spies-remember.md
new file mode 100644
index 00000000000..5ccf73c543f
--- /dev/null
+++ b/.changeset/hungry-spies-remember.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+Deprecates position prop for PageLayout.Pane. Users will receive a console warning when it is used.
+
+<!-- Changed components: PageLayout -->
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index 127d72423cb..b3a7be5f539 100644
--- 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
index 3dc7bb4f343..b6f82f4f7fc 100644
--- 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.tsx b/src/PageLayout/PageLayout.tsx
index effd9a9f929..99e5b1f4043 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -467,25 +467,6 @@ Content.displayName = 'PageLayout.Content'
 // PageLayout.Pane
 
 export type PageLayoutPaneProps = {
-  /**
-   * @deprecated Use source order instead of relying on the `position` prop
-   *
-   * Before:
-   * ```
-   * <PageLayout>
-   *   <PageLayout.Content />
-   *   <PageLayout.Pane position="start" />
-   * </PageLayout>
-   * ```
-   *
-   * After:
-   * ```
-   * <PageLayout>
-   *   <PageLayout.Pane />
-   *   <PageLayout.Content />
-   * </PageLayout>
-   * ```
-   */
   position?: keyof typeof panePositions | ResponsiveValue<keyof typeof panePositions>
   /**
    * @deprecated Use the `position` prop with a responsive value instead.
@@ -567,6 +548,13 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     },
     forwardRef,
   ) => {
+    if (responsivePosition !== undefined) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'The `position` prop will be removed on the next major version. You should order your markup as you want it to render instead.',
+      )
+    }
+
     // Combine position and positionWhenNarrow for backwards compatibility
     const positionProp =
       !isResponsiveValue(responsivePosition) && positionWhenNarrow !== 'inherit'
diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx
index 3a711dfce86..27d7cc182fa 100644
--- a/src/SplitPageLayout/SplitPageLayout.test.tsx
+++ b/src/SplitPageLayout/SplitPageLayout.test.tsx
@@ -17,6 +17,7 @@ describe('SplitPageLayout', () => {
   })
 
   it('renders default layout', () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const {container} = render(
       <ThemeProvider>
         <SplitPageLayout>
@@ -27,11 +28,13 @@ describe('SplitPageLayout', () => {
         </SplitPageLayout>
       </ThemeProvider>,
     )
+    expect(spy).toHaveBeenCalled()
 
     expect(container).toMatchSnapshot()
   })
 
   it('renders Pane with a custom ID', () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const {getByText} = render(
       <ThemeProvider>
         <SplitPageLayout>
@@ -39,6 +42,7 @@ describe('SplitPageLayout', () => {
         </SplitPageLayout>
       </ThemeProvider>,
     )
+    expect(spy).toHaveBeenCalled()
 
     const pane = getByText('Pane Content')
 

From adee9ec79a31ba5043f6a79a1cdc6061b0c1c85b Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Aug 2023 16:59:09 +0200
Subject: [PATCH 5/8] linter caught a bad merge!

---
 src/PageLayout/PageLayout.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 99e5b1f4043..48533afc22e 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -548,13 +548,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     },
     forwardRef,
   ) => {
-    if (responsivePosition !== undefined) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'The `position` prop will be removed on the next major version. You should order your markup as you want it to render instead.',
-      )
-    }
-
     // Combine position and positionWhenNarrow for backwards compatibility
     const positionProp =
       !isResponsiveValue(responsivePosition) && positionWhenNarrow !== 'inherit'

From 021b73be57b12493470df0e83ce0b4eb3465e759 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Aug 2023 17:03:46 +0200
Subject: [PATCH 6/8] Remove reverted changeset

---
 .changeset/hungry-spies-remember.md | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 .changeset/hungry-spies-remember.md

diff --git a/.changeset/hungry-spies-remember.md b/.changeset/hungry-spies-remember.md
deleted file mode 100644
index 5ccf73c543f..00000000000
--- a/.changeset/hungry-spies-remember.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-"@primer/react": patch
----
-
-Deprecates position prop for PageLayout.Pane. Users will receive a console warning when it is used.
-
-<!-- Changed components: PageLayout -->

From 1c6cf2f1d607c41eebd6d62d92854e0f7df38f01 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Aug 2023 17:23:46 +0200
Subject: [PATCH 7/8] copy old test

---
 src/SplitPageLayout/SplitPageLayout.test.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx
index 27d7cc182fa..3a711dfce86 100644
--- a/src/SplitPageLayout/SplitPageLayout.test.tsx
+++ b/src/SplitPageLayout/SplitPageLayout.test.tsx
@@ -17,7 +17,6 @@ describe('SplitPageLayout', () => {
   })
 
   it('renders default layout', () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const {container} = render(
       <ThemeProvider>
         <SplitPageLayout>
@@ -28,13 +27,11 @@ describe('SplitPageLayout', () => {
         </SplitPageLayout>
       </ThemeProvider>,
     )
-    expect(spy).toHaveBeenCalled()
 
     expect(container).toMatchSnapshot()
   })
 
   it('renders Pane with a custom ID', () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const {getByText} = render(
       <ThemeProvider>
         <SplitPageLayout>
@@ -42,7 +39,6 @@ describe('SplitPageLayout', () => {
         </SplitPageLayout>
       </ThemeProvider>,
     )
-    expect(spy).toHaveBeenCalled()
 
     const pane = getByText('Pane Content')
 

From 3c49ffd89dbcb4a87d36f25f321a91281eadd7e2 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Aug 2023 17:25:52 +0200
Subject: [PATCH 8/8] Update nervous-dolls-dream.md

---
 .changeset/nervous-dolls-dream.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.changeset/nervous-dolls-dream.md b/.changeset/nervous-dolls-dream.md
index e12f3c8a97c..dc705ff7376 100644
--- a/.changeset/nervous-dolls-dream.md
+++ b/.changeset/nervous-dolls-dream.md
@@ -3,5 +3,6 @@
 ---
 
 - 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 -->
+<!-- Changed components: PageLayout, SplitPageLayout -->