Adjust order of PageLayout.Pane contents (#3983)

* Adjust order of PageLayout.Pane contents * Add button to ResizeablePane story * Add changeset * test(vrt): update snapshots * Update snapshots * Add back prop * Add link to example * test(vrt): update snapshots --------- Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com>
primer · Nov 29, 2023 · 43d1dce · 43d1dce
1 parent c4216ef
commit 43d1dce
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 141 deletions.
diff --git a/.changeset/serious-sloths-hide.md b/.changeset/serious-sloths-hide.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Readjust order of `PageLayout.Pane` contents
diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx
@@ -124,6 +124,9 @@ export const StickyPane: Story = args => (
             </Box>
           )
         })}
+        <Box as="p">
+          Donec sit amet massa purus. <a href="#foo">Plura de lorem Ispum.</a>
+        </Box>
       </Box>
     </PageLayout.Pane>
     <PageLayout.Footer padding="normal" divider="line">

diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
@@ -758,8 +758,8 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
                     }
                   : {}),
                 ...(position === 'end'
-                  ? {flexDirection: 'row', marginLeft: SPACING_MAP[columnGap]}
-                  : {flexDirection: 'row-reverse', marginRight: SPACING_MAP[columnGap]}),
+                  ? {flexDirection: 'row-reverse', marginLeft: SPACING_MAP[columnGap]}
+                  : {flexDirection: 'row', marginRight: SPACING_MAP[columnGap]}),
               },
             },
             sx,
@@ -771,35 +771,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           variant={{narrow: dividerVariant, regular: 'none'}}
           sx={{[position === 'end' ? 'marginBottom' : 'marginTop']: SPACING_MAP[rowGap]}}
         />
-        <VerticalDivider
-          variant={{
-            narrow: 'none',
-            // If pane is resizable, always show a vertical divider on regular viewports
-            regular: resizable ? 'line' : dividerVariant,
-          }}
-          // If pane is resizable, the divider should be draggable
-          draggable={resizable}
-          sx={{[position === 'end' ? 'marginRight' : 'marginLeft']: SPACING_MAP[columnGap]}}
-          onDrag={(delta, isKeyboard = false) => {
-            // Get the number of pixels the divider was dragged
-            let deltaWithDirection
-            if (isKeyboard) {
-              deltaWithDirection = delta
-            } else {
-              deltaWithDirection = position === 'end' ? -delta : delta
-            }
-            updatePaneWidth(paneWidth + deltaWithDirection)
-          }}
-          // Ensure `paneWidth` state and actual pane width are in sync when the drag ends
-          onDragEnd={() => {
-            const paneRect = paneRef.current?.getBoundingClientRect()
-            if (!paneRect) return
-            updatePaneWidth(paneRect.width)
-          }}
-          // Reset pane width on double click
-          onDoubleClick={() => updatePaneWidth(getDefaultPaneWidth(width))}
-        />
-
         <Box
           ref={paneRef}
           style={{
@@ -828,6 +799,35 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
         >
           {children}
         </Box>
+
+        <VerticalDivider
+          variant={{
+            narrow: 'none',
+            // If pane is resizable, always show a vertical divider on regular viewports
+            regular: resizable ? 'line' : dividerVariant,
+          }}
+          // If pane is resizable, the divider should be draggable
+          draggable={resizable}
+          sx={{[position === 'end' ? 'marginRight' : 'marginLeft']: SPACING_MAP[columnGap]}}
+          onDrag={(delta, isKeyboard = false) => {
+            // Get the number of pixels the divider was dragged
+            let deltaWithDirection
+            if (isKeyboard) {
+              deltaWithDirection = delta
+            } else {
+              deltaWithDirection = position === 'end' ? -delta : delta
+            }
+            updatePaneWidth(paneWidth + deltaWithDirection)
+          }}
+          // Ensure `paneWidth` state and actual pane width are in sync when the drag ends
+          onDragEnd={() => {
+            const paneRect = paneRef.current?.getBoundingClientRect()
+            if (!paneRect) return
+            updatePaneWidth(paneRect.width)
+          }}
+          // Reset pane width on double click
+          onDoubleClick={() => updatePaneWidth(getDefaultPaneWidth(width))}
+        />
       </Box>
     )
   },