refactor(PageLayout): update sticky layout

.changeset/six-bears-reply.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update the sticky layout algorithm for PageLayout and PageLayout.Pane

src/PageLayout/PageLayout.stories.tsx

@@ -621,7 +621,8 @@ export const CustomStickyHeader: Story = args => (
         placeItems: 'center',
         backgroundColor: 'canvas.subtle',
         borderBottom: '1px solid',
-        borderColor: 'border.default'
+        borderColor: 'border.default',
+        zIndex: 100
       }}
     >
       Custom sticky header

src/PageLayout/PageLayout.tsx

@@ -3,6 +3,9 @@ import {useStickyPaneHeight} from './useStickyPaneHeight'
 import Box from '../Box'
 import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
 import {BetterSystemStyleObject, merge, SxProp} from '../sx'
+import createSlots from '../utils/create-slots'
+
+const {Slots, Slot} = createSlots(['Header', 'Footer'])
 
 const REGION_ORDER = {
   header: 0,
@@ -90,7 +93,17 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
             flexWrap: 'wrap'
           }}
         >
-          {children}
+          <Slots>
+            {slots => {
+              return (
+                <>
+                  {slots.Header}
+                  <Box sx={{display: 'flex', flex: '1 1 100%', flexWrap: 'wrap'}}>{children}</Box>
+                  {slots.Footer}
+                </>
+              )
+            }}
+          </Slots>
         </Box>
       </Box>
     </PageLayoutContext.Provider>
@@ -245,23 +258,24 @@ const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
   const isHidden = useResponsiveValue(hidden, false)
   const {rowGap} = React.useContext(PageLayoutContext)
   return (
-    <Box
-      as="header"
-      aria-label={label}
-      aria-labelledby={labelledBy}
-      hidden={isHidden}
-      sx={merge<BetterSystemStyleObject>(
-        {
-          order: REGION_ORDER.header,
-          width: '100%',
-          marginBottom: SPACING_MAP[rowGap]
-        },
-        sx
-      )}
-    >
-      <Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
-      <HorizontalDivider variant={dividerVariant} sx={{marginTop: SPACING_MAP[rowGap]}} />
-    </Box>
+    <Slot name="Header">
+      <Box
+        as="header"
+        aria-label={label}
+        aria-labelledby={labelledBy}
+        hidden={isHidden}
+        sx={merge<BetterSystemStyleObject>(
+          {
+            width: '100%',
+            marginBottom: SPACING_MAP[rowGap]
+          },
+          sx
+        )}
+      >
+        <Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
+        <HorizontalDivider variant={dividerVariant} sx={{marginTop: SPACING_MAP[rowGap]}} />
+      </Box>
+    </Slot>
   )
 }
 
@@ -558,23 +572,25 @@ const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
   const isHidden = useResponsiveValue(hidden, false)
   const {rowGap} = React.useContext(PageLayoutContext)
   return (
-    <Box
-      as="footer"
-      aria-label={label}
-      aria-labelledby={labelledBy}
-      hidden={isHidden}
-      sx={merge<BetterSystemStyleObject>(
-        {
-          order: REGION_ORDER.footer,
-          width: '100%',
-          marginTop: SPACING_MAP[rowGap]
-        },
-        sx
-      )}
-    >
-      <HorizontalDivider variant={dividerVariant} sx={{marginBottom: SPACING_MAP[rowGap]}} />
-      <Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
-    </Box>
+    <Slot name="Footer">
+      <Box
+        as="footer"
+        aria-label={label}
+        aria-labelledby={labelledBy}
+        hidden={isHidden}
+        sx={merge<BetterSystemStyleObject>(
+          {
+            order: REGION_ORDER.footer,
+            width: '100%',
+            marginTop: SPACING_MAP[rowGap]
+          },
+          sx
+        )}
+      >
+        <HorizontalDivider variant={dividerVariant} sx={{marginBottom: SPACING_MAP[rowGap]}} />
+        <Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
+      </Box>
+    </Slot>
   )
 }