From 2bd4a0fb4d485c87bd6c5daea7afb8e3cf64262c Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 2 Aug 2022 10:55:01 -0700
Subject: [PATCH 01/25] Add storybook story to test sticky behavior

---
 src/PageLayout/PageLayout.stories.tsx | 36 ++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx
index 0e815fb7987..a9ee637af2c 100644
--- a/src/PageLayout/PageLayout.stories.tsx
+++ b/src/PageLayout/PageLayout.stories.tsx
@@ -349,6 +349,40 @@ export const SettingsPage = () => (
   </PageLayout>
 )
 
-// TODO: discussions page example
+export const StickyPane = () => (
+  <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
+    <PageLayout.Header padding="normal" divider="line">
+      <Placeholder label="Header" height={64} />
+    </PageLayout.Header>
+    <PageLayout.Content padding="normal" width="large">
+      <Box sx={{display: 'grid', gap: 3}}>
+        {Array.from({length: 30}).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.
+          </Box>
+        ))}
+      </Box>
+    </PageLayout.Content>
+    <PageLayout.Pane position="start" padding="normal" divider="line">
+      <Box sx={{display: 'grid', gap: 3}}>
+        {Array.from({length: 10}).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.
+          </Box>
+        ))}
+      </Box>
+    </PageLayout.Pane>
+    <PageLayout.Footer padding="normal" divider="line">
+      <Placeholder label="Footer" height={64} />
+    </PageLayout.Footer>
+  </PageLayout>
+)
 
 export default meta

From 68a8934e97179606ab310795ae2a10d09a6d6afc Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 2 Aug 2022 13:48:10 -0700
Subject: [PATCH 02/25] First draft of sticky implementation

---
 src/PageLayout/PageLayout.stories.tsx |  2 +-
 src/PageLayout/PageLayout.tsx         | 93 ++++++++++++++++++++-------
 2 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx
index a9ee637af2c..8356770da44 100644
--- a/src/PageLayout/PageLayout.stories.tsx
+++ b/src/PageLayout/PageLayout.stories.tsx
@@ -368,7 +368,7 @@ export const StickyPane = () => (
         ))}
       </Box>
     </PageLayout.Content>
-    <PageLayout.Pane position="start" padding="normal" divider="line">
+    <PageLayout.Pane position="start" padding="normal" divider="line" sticky>
       <Box sx={{display: 'grid', gap: 3}}>
         {Array.from({length: 10}).map((_, i) => (
           <Box key={i} as="p" sx={{margin: 0}}>
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 5825f0a0510..ff02f02687d 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -21,10 +21,12 @@ const PageLayoutContext = React.createContext<{
   padding: keyof typeof SPACING_MAP
   rowGap: keyof typeof SPACING_MAP
   columnGap: keyof typeof SPACING_MAP
+  contentRef: React.RefObject<HTMLDivElement> | null
 }>({
   padding: 'normal',
   rowGap: 'normal',
-  columnGap: 'normal'
+  columnGap: 'normal',
+  contentRef: null
 })
 
 // ----------------------------------------------------------------------------
@@ -55,8 +57,9 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
   children,
   sx = {}
 }) => {
+  const contentRef = React.useRef<HTMLDivElement>(null)
   return (
-    <PageLayoutContext.Provider value={{padding, rowGap, columnGap}}>
+    <PageLayoutContext.Provider value={{padding, rowGap, columnGap, contentRef}}>
       <Box sx={merge<BetterSystemStyleObject>({padding: SPACING_MAP[padding]}, sx)}>
         <Box
           sx={{
@@ -254,8 +257,10 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
   sx = {}
 }) => {
   const isHidden = useResponsiveValue(hidden, false)
+  const {contentRef} = React.useContext(PageLayoutContext)
   return (
     <Box
+      ref={contentRef}
       as="main"
       hidden={isHidden}
       sx={merge<BetterSystemStyleObject>(
@@ -319,6 +324,7 @@ export type PageLayoutPaneProps = {
    * ```
    */
   dividerWhenNarrow?: 'inherit' | 'none' | 'line' | 'filled'
+  sticky?: boolean
   hidden?: boolean | ResponsiveValue<boolean>
 } & SxProp
 
@@ -334,52 +340,91 @@ const paneWidths = {
 }
 
 const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
-  position = 'end',
+  position: responsivePosition = 'end',
   positionWhenNarrow = 'inherit',
   width = 'medium',
   padding = 'none',
-  divider = 'none',
+  divider: responsiveDivider = 'none',
   dividerWhenNarrow = 'inherit',
-  hidden = false,
+  sticky = false,
+  hidden: responsiveHidden = false,
   children,
   sx = {}
 }) => {
   // Combine position and positionWhenNarrow for backwards compatibility
   const positionProp =
-    !isResponsiveValue(position) && positionWhenNarrow !== 'inherit'
-      ? {regular: position, narrow: positionWhenNarrow}
-      : position
+    !isResponsiveValue(responsivePosition) && positionWhenNarrow !== 'inherit'
+      ? {regular: responsivePosition, narrow: positionWhenNarrow}
+      : responsivePosition
 
-  const responsivePosition = useResponsiveValue(positionProp, 'end')
+  const position = useResponsiveValue(positionProp, 'end')
 
   // Combine divider and dividerWhenNarrow for backwards compatibility
   const dividerProp =
-    !isResponsiveValue(divider) && dividerWhenNarrow !== 'inherit'
-      ? {regular: divider, narrow: dividerWhenNarrow}
-      : divider
+    !isResponsiveValue(responsiveDivider) && dividerWhenNarrow !== 'inherit'
+      ? {regular: responsiveDivider, narrow: dividerWhenNarrow}
+      : responsiveDivider
 
   const dividerVariant = useResponsiveValue(dividerProp, 'none')
-  const isHidden = useResponsiveValue(hidden, false)
-  const {rowGap, columnGap} = React.useContext(PageLayoutContext)
+
+  const isHidden = useResponsiveValue(responsiveHidden, false)
+
+  const {rowGap, columnGap, contentRef} = React.useContext(PageLayoutContext)
+
+  const [offset, setOffset] = React.useState(0)
+
+  const paneRef = React.useRef<HTMLDivElement>(null)
+
+  const handleScroll = React.useCallback(() => {
+    if (paneRef.current && contentRef?.current) {
+      const paneRect = paneRef.current.getBoundingClientRect()
+      const contentRect = contentRef.current.getBoundingClientRect()
+      // console.log(contentRect.bottom)
+
+      const topOffset = paneRect.top
+      const bottomOffset = contentRect.bottom < window.innerHeight ? window.innerHeight - contentRect.bottom : 0
+      setOffset(topOffset + bottomOffset)
+    }
+  }, [contentRef])
+
+  React.useEffect(() => {
+    handleScroll()
+    // eslint-disable-next-line github/prefer-observers
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
+
   return (
     <Box
+      ref={paneRef}
       as="aside"
+      style={{'--offset': `${offset}px`}}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       sx={(theme: any) =>
         merge<BetterSystemStyleObject>(
           {
-            order: panePositions[responsivePosition],
+            // Narrow viewports
             display: isHidden ? 'none' : 'flex',
-            flexDirection: responsivePosition === 'end' ? 'column' : 'column-reverse',
+            order: panePositions[position],
             width: '100%',
+
             marginX: 0,
-            [responsivePosition === 'end' ? 'marginTop' : 'marginBottom']: SPACING_MAP[rowGap],
+            ...(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]})`]: {
               width: 'auto',
-              [responsivePosition === 'end' ? 'marginLeft' : 'marginRight']: SPACING_MAP[columnGap],
-              marginY: `0 !important`,
-              flexDirection: responsivePosition === 'end' ? 'row' : 'row-reverse',
-              order: panePositions[responsivePosition]
+              marginY: '0 !important',
+              position: 'sticky',
+              maxHeight: 'calc(100vh - var(--offset))',
+              top: 0,
+              ...(position === 'end'
+                ? {flexDirection: 'row', marginLeft: SPACING_MAP[columnGap]}
+                : {flexDirection: 'row-reverse', marginRight: SPACING_MAP[columnGap]})
             }
           },
           sx
@@ -389,14 +434,14 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
       {/* Show a horizontal divider when viewport is narrow. Otherwise, show a vertical divider. */}
       <HorizontalDivider
         variant={{narrow: dividerVariant, regular: 'none'}}
-        sx={{[responsivePosition === 'end' ? 'marginBottom' : 'marginTop']: SPACING_MAP[rowGap]}}
+        sx={{[position === 'end' ? 'marginBottom' : 'marginTop']: SPACING_MAP[rowGap]}}
       />
       <VerticalDivider
         variant={{narrow: 'none', regular: dividerVariant}}
-        sx={{[responsivePosition === 'end' ? 'marginRight' : 'marginLeft']: SPACING_MAP[columnGap]}}
+        sx={{[position === 'end' ? 'marginRight' : 'marginLeft']: SPACING_MAP[columnGap]}}
       />
 
-      <Box sx={{width: paneWidths[width], padding: SPACING_MAP[padding]}}>{children}</Box>
+      <Box sx={{width: paneWidths[width], padding: SPACING_MAP[padding], overflow: 'auto'}}>{children}</Box>
     </Box>
   )
 }

From e1f1db0920268c180ee3e4533b2eb28af42e207c Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Wed, 3 Aug 2022 18:00:30 -0700
Subject: [PATCH 03/25] Update stories

---
 src/PageLayout/PageLayout.stories.tsx | 645 +++++++++++++++++---------
 src/Placeholder.tsx                   |   4 +-
 2 files changed, 440 insertions(+), 209 deletions(-)

diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx
index 8356770da44..4a7ca427479 100644
--- a/src/PageLayout/PageLayout.stories.tsx
+++ b/src/PageLayout/PageLayout.stories.tsx
@@ -7,14 +7,334 @@ import {PageLayout} from './PageLayout'
 
 const meta: Meta = {
   title: 'Layout/PageLayout',
-  component: PageLayout,
+  // component: PageLayout,
   parameters: {
     layout: 'fullscreen',
     controls: {expanded: true}
+  },
+  argTypes: {
+    // Debug controls
+    'Render header?': {
+      type: 'boolean',
+      defaultValue: true,
+      table: {category: 'Debug'}
+    },
+    'Render pane?': {
+      type: 'boolean',
+      defaultValue: true,
+      table: {category: 'Debug'}
+    },
+    'Render footer?': {
+      type: 'boolean',
+      defaultValue: true,
+      table: {category: 'Debug'}
+    },
+    'Header placeholder height': {
+      type: 'number',
+      defaultValue: 64,
+      table: {category: 'Debug'}
+    },
+    'Pane placeholder height': {
+      type: 'number',
+      defaultValue: 200,
+      table: {category: 'Debug'}
+    },
+    'Content placeholder height': {
+      type: 'number',
+      defaultValue: 400,
+      table: {category: 'Debug'}
+    },
+    'Footer placeholder height': {
+      type: 'number',
+      defaultValue: 64,
+      table: {category: 'Debug'}
+    },
+
+    // PageLayout prop controls
+    containerWidth: {
+      type: {
+        name: 'enum',
+        value: ['full', 'medium', 'large', 'xlarge']
+      },
+      defaultValue: 'xlarge',
+      control: {type: 'radio'},
+      table: {category: 'PageLayout props'}
+    },
+    padding: {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'normal',
+      control: {type: 'radio'},
+      table: {category: 'PageLayout props'}
+    },
+    rowGap: {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'normal',
+      control: {type: 'radio'},
+      table: {category: 'PageLayout props'}
+    },
+    columnGap: {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'normal',
+      control: {type: 'radio'},
+      table: {category: 'PageLayout props'}
+    },
+
+    // Header prop controls
+    'Header.divider.regular': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Header props'
+      }
+    },
+    'Header.divider.narrow': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line', 'filled']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Header props'
+      }
+    },
+    'Header.divider.wide': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Header props'
+      }
+    },
+    'Header.padding': {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Header props'}
+    },
+    'Header.hidden.regular': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Header props'}
+    },
+    'Header.hidden.narrow': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Header props'}
+    },
+    'Header.hidden.wide': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Header props'}
+    },
+
+    // Content prop controls
+    'Content.width': {
+      type: {
+        name: 'enum',
+        value: ['full', 'medium', 'large', 'xlarge']
+      },
+      defaultValue: 'full',
+      control: {type: 'radio'},
+      table: {category: 'Content props'}
+    },
+    'Content.padding': {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Content props'}
+    },
+    'Content.hidden.regular': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Content props'}
+    },
+    'Content.hidden.narrow': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Content props'}
+    },
+    'Content.hidden.wide': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Content props'}
+    },
+
+    // Pane prop controls
+    'Pane.position.regular': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end']
+      },
+      defaultValue: 'end',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.position.narrow': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end']
+      },
+      defaultValue: 'end',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.position.wide': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end']
+      },
+      defaultValue: 'end',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.width': {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large']
+      },
+      defaultValue: 'medium',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.sticky': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Pane props'}
+    },
+    'Pane.padding': {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.divider.regular': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.divider.narrow': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line', 'filled']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.divider.wide': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+
+    // Footer prop controls
+    'Footer.divider.regular': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Footer props'
+      }
+    },
+    'Footer.divider.narrow': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line', 'filled']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Footer props'
+      }
+    },
+    'Footer.divider.wide': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Footer props'
+      }
+    },
+    'Footer.padding': {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Footer props'}
+    },
+    'Footer.hidden.regular': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Footer props'}
+    },
+    'Footer.hidden.narrow': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Footer props'}
+    },
+    'Footer.hidden.wide': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Footer props'}
+    }
   }
 }
 
-export const Playground: Story = args => (
+const Template: Story = args => (
   <PageLayout
     containerWidth={args.containerWidth}
     padding={args.padding}
@@ -22,222 +342,107 @@ export const Playground: Story = args => (
     columnGap={args.columnGap}
     sx={args.sx}
   >
-    {args['Show header?'] ? (
-      <PageLayout.Header divider={args['Header.divider']} dividerWhenNarrow={args['Header.dividerWhenNarrow']}>
-        <Placeholder height={64} label="Header" />
+    {args['Render header?'] ? (
+      <PageLayout.Header
+        padding={args['Header.padding']}
+        divider={{
+          narrow: args['Header.divider.narrow'],
+          regular: args['Header.divider.regular'],
+          wide: args['Header.divider.wide']
+        }}
+        hidden={{
+          narrow: args['Header.hidden.narrow'],
+          regular: args['Header.hidden.regular'],
+          wide: args['Header.hidden.wide']
+        }}
+      >
+        <Placeholder height={args['Header placeholder height']} label="Header" />
       </PageLayout.Header>
     ) : null}
-    <PageLayout.Content width={args['Content.width']}>
-      <Placeholder height={400} label="Content" />
+    <PageLayout.Content
+      width={args['Content.width']}
+      padding={args['Content.padding']}
+      hidden={{
+        narrow: args['Content.hidden.narrow'],
+        regular: args['Content.hidden.regular'],
+        wide: args['Content.hidden.wide']
+      }}
+    >
+      <Placeholder height={args['Content placeholder height']} label="Content" />
     </PageLayout.Content>
-    {args['Show pane?'] ? (
+    {args['Render pane?'] ? (
       <PageLayout.Pane
-        position={args['Pane.position']}
-        positionWhenNarrow={args['Pane.positionWhenNarrow']}
+        position={{
+          narrow: args['Pane.position.narrow'],
+          regular: args['Pane.position.regular'],
+          wide: args['Pane.position.wide']
+        }}
         width={args['Pane.width']}
-        divider={args['Pane.divider']}
-        dividerWhenNarrow={args['Pane.dividerWhenNarrow']}
+        sticky={args['Pane.sticky']}
+        padding={args['Pane.padding']}
+        divider={{
+          narrow: args['Pane.divider.narrow'],
+          regular: args['Pane.divider.regular'],
+          wide: args['Pane.divider.wide']
+        }}
+        hidden={{
+          narrow: args['Pane.hidden.narrow'],
+          regular: args['Pane.hidden.regular'],
+          wide: args['Pane.hidden.wide']
+        }}
       >
-        <Placeholder height={200} label="Pane" />
+        <Placeholder height={args['Pane placeholder height']} label="Pane" />
       </PageLayout.Pane>
     ) : null}
-    {args['Show footer?'] ? (
-      <PageLayout.Footer divider={args['Footer.divider']} dividerWhenNarrow={args['Footer.dividerWhenNarrow']}>
-        <Placeholder height={64} label="Footer" />
+    {args['Render footer?'] ? (
+      <PageLayout.Footer
+        padding={args['Footer.padding']}
+        divider={{
+          narrow: args['Footer.divider.narrow'],
+          regular: args['Footer.divider.regular'],
+          wide: args['Footer.divider.wide']
+        }}
+        hidden={{
+          narrow: args['Footer.hidden.narrow'],
+          regular: args['Footer.hidden.regular'],
+          wide: args['Footer.hidden.wide']
+        }}
+      >
+        <Placeholder height={args['Footer placeholder height']} label="Footer" />
       </PageLayout.Footer>
     ) : null}
   </PageLayout>
 )
 
-Playground.argTypes = {
-  'Show header?': {
-    type: 'boolean',
-    defaultValue: true,
-    table: {
-      category: 'Header'
-    }
-  },
-  'Header.divider': {
-    type: {
-      name: 'enum',
-      value: ['none', 'line']
-    },
-    defaultValue: 'none',
-    control: {
-      type: 'radio'
-    },
-    table: {
-      category: 'Header',
-      defaultValue: {
-        summary: '"none"'
-      }
-    }
-  },
-  'Header.dividerWhenNarrow': {
-    type: {
-      name: 'enum',
-      value: ['inherit', 'none', 'line', 'filled']
-    },
-    defaultValue: 'inherit',
-    control: {
-      type: 'radio'
-    },
-    table: {
-      category: 'Header',
-      defaultValue: {
-        summary: '"inherit"'
-      }
-    }
-  },
-  'Content.width': {
-    type: {
-      name: 'enum',
-      value: ['full', 'medium', 'large', 'xlarge']
-    },
-    defaultValue: 'full',
-    control: {
-      type: 'radio'
-    },
-    table: {
-      category: 'Content',
-      defaultValue: {
-        summary: '"full"'
-      }
-    }
-  },
-  'Show pane?': {
-    type: 'boolean',
-    defaultValue: true,
-    table: {
-      category: 'Pane'
-    }
-  },
-  'Pane.position': {
-    type: {
-      name: 'enum',
-      value: ['start', 'end']
-    },
-    defaultValue: 'end',
-    control: {
-      type: 'radio'
-    },
-    table: {
-      category: 'Pane',
-      defaultValue: {
-        summary: '"end"'
-      }
-    }
-  },
-  'Pane.positionWhenNarrow': {
-    type: {
-      name: 'enum',
-      value: ['inherit', 'start', 'end']
-    },
-    defaultValue: 'inherit',
-    control: {
-      type: 'radio'
-    },
-    table: {
-      category: 'Pane',
-      defaultValue: {
-        summary: '"inherit"'
-      }
-    }
-  },
-  'Pane.width': {
-    type: {
-      name: 'enum',
-      value: ['small', 'medium', 'large']
-    },
-    defaultValue: 'medium',
-    control: {
-      type: 'radio'
-    },
-    table: {
-      category: 'Pane',
-      defaultValue: {
-        summary: '"medium"'
-      }
-    }
-  },
-  'Pane.divider': {
-    type: {
-      name: 'enum',
-      value: ['none', 'line']
-    },
-    defaultValue: 'none',
-    control: {
-      type: 'radio'
-    },
-    table: {
-      category: 'Pane',
-      defaultValue: {
-        summary: '"none"'
-      }
-    }
-  },
-  'Pane.dividerWhenNarrow': {
-    type: {
-      name: 'enum',
-      value: ['inherit', 'none', 'line', 'filled']
-    },
-    defaultValue: 'inherit',
-    control: {
-      type: 'radio'
-    },
-    table: {
-      category: 'Pane',
-      defaultValue: {
-        summary: '"inherit"'
-      }
-    }
-  },
-  'Show footer?': {
-    type: 'boolean',
-    defaultValue: true,
-    table: {
-      category: 'Footer'
-    }
-  },
-  'Footer.divider': {
-    type: {
-      name: 'enum',
-      value: ['none', 'line']
-    },
-    defaultValue: 'none',
-    control: {
-      type: 'radio'
-    },
-    table: {
-      category: 'Footer',
-      defaultValue: {
-        summary: '"none"'
-      }
-    }
-  },
-  'Footer.dividerWhenNarrow': {
-    type: {
-      name: 'enum',
-      value: ['inherit', 'none', 'line', 'filled']
-    },
-    defaultValue: 'inherit',
-    control: {
-      type: 'radio'
-    },
-    table: {
-      category: 'Footer',
-      defaultValue: {
-        summary: '"inherit"'
-      }
-    }
-  }
-}
+export const Default = Template.bind({})
+
+export const SplitPage = Template.bind({})
 
-Playground.args = {
-  containerWidth: 'xlarge',
-  padding: 'normal',
-  rowGap: 'normal',
-  columnGap: 'normal'
+SplitPage.args = {
+  containerWidth: 'full',
+  padding: 'none',
+  rowGap: 'none',
+  columnGap: 'none',
+  'Header.padding': 'normal',
+  'Header.divider.regular': 'line',
+  'Header.divider.narrow': 'line',
+  'Header.divider.wide': 'line',
+  'Content.padding': 'normal',
+  'Content.width': 'xlarge',
+  'Pane.sticky': true,
+  'Pane.position.narrow': 'start',
+  'Pane.position.regular': 'start',
+  'Pane.position.wide': 'start',
+  'Pane.padding': 'normal',
+  'Pane.divider.narrow': 'line',
+  'Pane.divider.regular': 'line',
+  'Pane.divider.wide': 'line',
+  'Footer.padding': 'normal',
+  'Footer.divider.regular': 'line',
+  'Footer.divider.narrow': 'line',
+  'Footer.divider.wide': 'line',
+
+  'Pane placeholder height': 1200
 }
 
 export const PullRequestPage = () => (
@@ -349,14 +554,14 @@ export const SettingsPage = () => (
   </PageLayout>
 )
 
-export const StickyPane = () => (
+export const StickyPane: Story = args => (
   <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
     <PageLayout.Header padding="normal" divider="line">
       <Placeholder label="Header" height={64} />
     </PageLayout.Header>
     <PageLayout.Content padding="normal" width="large">
       <Box sx={{display: 'grid', gap: 3}}>
-        {Array.from({length: 30}).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
@@ -368,9 +573,9 @@ export const StickyPane = () => (
         ))}
       </Box>
     </PageLayout.Content>
-    <PageLayout.Pane position="start" padding="normal" divider="line" sticky>
+    <PageLayout.Pane position="start" padding="normal" divider="line" sticky={args.sticky}>
       <Box sx={{display: 'grid', gap: 3}}>
-        {Array.from({length: 10}).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
@@ -385,4 +590,28 @@ export const StickyPane = () => (
   </PageLayout>
 )
 
+StickyPane.argTypes = {
+  sticky: {
+    type: 'boolean',
+    defaultValue: true
+  },
+  numParagraphsInPane: {
+    type: 'number',
+    defaultValue: 10
+  },
+  numParagraphsInContent: {
+    type: 'number',
+    defaultValue: 30
+  }
+}
+
 export default meta
+
+// test cases
+
+// pane is long, content is short
+// pane is short, content is long
+// pane is long, content is long
+// pane is short, content is short
+// narrow viewport
+// sticky disabled
diff --git a/src/Placeholder.tsx b/src/Placeholder.tsx
index 861ae840f59..e8b867b9b59 100644
--- a/src/Placeholder.tsx
+++ b/src/Placeholder.tsx
@@ -17,7 +17,9 @@ export const Placeholder: React.FC<
         display: 'grid',
         placeItems: 'center',
         bg: 'canvas.inset',
-        borderRadius: 2
+        borderRadius: 2,
+        border: '1px solid',
+        borderColor: 'border.subtle'
       }}
     >
       {label}

From ab32ec4e864677d2ebf009d7427d4c1ad471483c Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Wed, 3 Aug 2022 18:00:39 -0700
Subject: [PATCH 04/25] Fix overflow

---
 src/PageLayout/PageLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index ff02f02687d..0199afe6dd7 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -409,7 +409,6 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
             display: isHidden ? 'none' : 'flex',
             order: panePositions[position],
             width: '100%',
-
             marginX: 0,
             ...(position === 'end'
               ? {flexDirection: 'column', marginTop: SPACING_MAP[rowGap]}
@@ -421,6 +420,7 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
               marginY: '0 !important',
               position: 'sticky',
               maxHeight: 'calc(100vh - var(--offset))',
+              overflow: 'hidden',
               top: 0,
               ...(position === 'end'
                 ? {flexDirection: 'row', marginLeft: SPACING_MAP[columnGap]}

From 0bab5423702f0171b2319a04df06ce06f15bb10c Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Thu, 4 Aug 2022 15:59:43 -0700
Subject: [PATCH 05/25] wip

---
 src/PageLayout/PageLayout.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 0199afe6dd7..26000be3b5c 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -375,26 +375,30 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
 
   const paneRef = React.useRef<HTMLDivElement>(null)
 
-  const handleScroll = React.useCallback(() => {
+  // TODO: respect sticky headers
+  const updateOffset = React.useCallback(() => {
     if (paneRef.current && contentRef?.current) {
       const paneRect = paneRef.current.getBoundingClientRect()
       const contentRect = contentRef.current.getBoundingClientRect()
-      // console.log(contentRect.bottom)
+      console.log(paneRect.top)
 
       const topOffset = paneRect.top
-      const bottomOffset = contentRect.bottom < window.innerHeight ? window.innerHeight - contentRect.bottom : 0
+      const bottomOffset = Math.max(0, window.innerHeight - contentRect.bottom)
       setOffset(topOffset + bottomOffset)
     }
   }, [contentRef])
 
   React.useEffect(() => {
-    handleScroll()
+    updateOffset()
     // eslint-disable-next-line github/prefer-observers
-    window.addEventListener('scroll', handleScroll)
+    window.addEventListener('scroll', updateOffset)
+    // eslint-disable-next-line github/prefer-observers
+    window.addEventListener('resize', updateOffset)
     return () => {
-      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('scroll', updateOffset)
+      window.removeEventListener('resize', updateOffset)
     }
-  }, [handleScroll])
+  }, [updateOffset])
 
   return (
     <Box

From 7220176842f18f753dc849acf799be98be1f7447 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 5 Aug 2022 14:37:34 -0700
Subject: [PATCH 06/25] Create useStickyPaneHeight hook

---
 package-lock.json                     | 15 +++++
 package.json                          |  4 +-
 src/PageLayout/PageLayout.stories.tsx |  3 +-
 src/PageLayout/PageLayout.tsx         | 84 +++++++++++++--------------
 src/PageLayout/useStickyPaneHeight.ts | 42 ++++++++++++++
 5 files changed, 101 insertions(+), 47 deletions(-)
 create mode 100644 src/PageLayout/useStickyPaneHeight.ts

diff --git a/package-lock.json b/package-lock.json
index bf45cc50173..a091effb89d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "deepmerge": "^4.2.2",
         "focus-visible": "^5.2.0",
         "history": "^5.0.0",
+        "react-intersection-observer": "9.4.0",
         "styled-system": "^5.1.5"
       },
       "devDependencies": {
@@ -31563,6 +31564,14 @@
         "react": "^16.8.4 || ^17.0.0"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.0.tgz",
+      "integrity": "sha512-v0403CmomOVlzhqFXlzOxg0ziLcVq8mfbP0AwAcEQWgZmR2OulOT79Ikznw4UlB3N+jlUYqLMe4SDHUOyp0t2A==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -61094,6 +61103,12 @@
         "prop-types": "^15.0.0"
       }
     },
+    "react-intersection-observer": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.0.tgz",
+      "integrity": "sha512-v0403CmomOVlzhqFXlzOxg0ziLcVq8mfbP0AwAcEQWgZmR2OulOT79Ikznw4UlB3N+jlUYqLMe4SDHUOyp0t2A==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 9c448abf8a6..6e816acb201 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
-    "test:storybook":"test-storybook",
+    "test:storybook": "test-storybook",
     "test:update": "npm run test -- --updateSnapshot",
     "test:type-check": "tsc --noEmit",
     "release": "npm run build && changeset publish",
@@ -99,6 +99,7 @@
     "deepmerge": "^4.2.2",
     "focus-visible": "^5.2.0",
     "history": "^5.0.0",
+    "react-intersection-observer": "9.4.0",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
@@ -172,7 +173,6 @@
     "jest-axe": "5.0.1",
     "jest-matchmedia-mock": "1.1.0",
     "jest-styled-components": "6.3.4",
-    "jest-matchmedia-mock": "1.1.0",
     "jscodeshift": "0.13.0",
     "lint-staged": "12.1.2",
     "lodash.isempty": "4.4.0",
diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx
index 4a7ca427479..f41ed129945 100644
--- a/src/PageLayout/PageLayout.stories.tsx
+++ b/src/PageLayout/PageLayout.stories.tsx
@@ -442,7 +442,8 @@ SplitPage.args = {
   'Footer.divider.narrow': 'line',
   'Footer.divider.wide': 'line',
 
-  'Pane placeholder height': 1200
+  'Pane placeholder height': 1200,
+  'Content placeholder height': 2400
 }
 
 export const PullRequestPage = () => (
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 26000be3b5c..dd42b30b917 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import {useStickyPaneHeight} from './useStickyPaneHeight'
 import {Box} from '..'
 import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
 import {BetterSystemStyleObject, merge, SxProp} from '../sx'
@@ -21,12 +22,12 @@ const PageLayoutContext = React.createContext<{
   padding: keyof typeof SPACING_MAP
   rowGap: keyof typeof SPACING_MAP
   columnGap: keyof typeof SPACING_MAP
-  contentRef: React.RefObject<HTMLDivElement> | null
+  contentTopRef?: (node?: Element | null | undefined) => void
+  contentBottomRef?: (node?: Element | null | undefined) => void
 }>({
   padding: 'normal',
   rowGap: 'normal',
-  columnGap: 'normal',
-  contentRef: null
+  columnGap: 'normal'
 })
 
 // ----------------------------------------------------------------------------
@@ -57,10 +58,26 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
   children,
   sx = {}
 }) => {
-  const contentRef = React.useRef<HTMLDivElement>(null)
+  // TODO: Avoid recalculating sticky pane height when sticky is disabled
+  const {contentTopRef, contentBottomRef, height: stickyPaneHeight} = useStickyPaneHeight()
   return (
-    <PageLayoutContext.Provider value={{padding, rowGap, columnGap, contentRef}}>
-      <Box sx={merge<BetterSystemStyleObject>({padding: SPACING_MAP[padding]}, sx)}>
+    <PageLayoutContext.Provider
+      value={{
+        padding,
+        rowGap,
+        columnGap,
+        contentTopRef,
+        contentBottomRef
+      }}
+    >
+      <Box
+        style={{
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore TypeScript doesn't know about CSS custom properties
+          '--sticky-pane-height': stickyPaneHeight
+        }}
+        sx={merge<BetterSystemStyleObject>({padding: SPACING_MAP[padding]}, sx)}
+      >
         <Box
           sx={{
             maxWidth: containerWidths[containerWidth],
@@ -257,14 +274,14 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
   sx = {}
 }) => {
   const isHidden = useResponsiveValue(hidden, false)
-  const {contentRef} = React.useContext(PageLayoutContext)
+  const {contentTopRef, contentBottomRef} = React.useContext(PageLayoutContext)
   return (
     <Box
-      ref={contentRef}
       as="main"
       hidden={isHidden}
       sx={merge<BetterSystemStyleObject>(
         {
+          position: 'relative',
           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
@@ -277,9 +294,15 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
         sx
       )}
     >
+      {/* Track the top of the content region so we can calculate the height of the pane region */}
+      <Box ref={contentTopRef} sx={{position: 'absolute', top: 0}} />
+
       <Box sx={{width: '100%', maxWidth: contentWidths[width], marginX: 'auto', padding: SPACING_MAP[padding]}}>
         {children}
       </Box>
+
+      {/* Track the bottom of the content region so we can calculate the height of the pane region */}
+      <Box ref={contentBottomRef} sx={{position: 'absolute', bottom: 0}} />
     </Box>
   )
 }
@@ -369,42 +392,11 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
 
   const isHidden = useResponsiveValue(responsiveHidden, false)
 
-  const {rowGap, columnGap, contentRef} = React.useContext(PageLayoutContext)
-
-  const [offset, setOffset] = React.useState(0)
-
-  const paneRef = React.useRef<HTMLDivElement>(null)
-
-  // TODO: respect sticky headers
-  const updateOffset = React.useCallback(() => {
-    if (paneRef.current && contentRef?.current) {
-      const paneRect = paneRef.current.getBoundingClientRect()
-      const contentRect = contentRef.current.getBoundingClientRect()
-      console.log(paneRect.top)
-
-      const topOffset = paneRect.top
-      const bottomOffset = Math.max(0, window.innerHeight - contentRect.bottom)
-      setOffset(topOffset + bottomOffset)
-    }
-  }, [contentRef])
-
-  React.useEffect(() => {
-    updateOffset()
-    // eslint-disable-next-line github/prefer-observers
-    window.addEventListener('scroll', updateOffset)
-    // eslint-disable-next-line github/prefer-observers
-    window.addEventListener('resize', updateOffset)
-    return () => {
-      window.removeEventListener('scroll', updateOffset)
-      window.removeEventListener('resize', updateOffset)
-    }
-  }, [updateOffset])
+  const {rowGap, columnGap} = React.useContext(PageLayoutContext)
 
   return (
     <Box
-      ref={paneRef}
       as="aside"
-      style={{'--offset': `${offset}px`}}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       sx={(theme: any) =>
         merge<BetterSystemStyleObject>(
@@ -422,10 +414,14 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
             [`@media screen and (min-width: ${theme.breakpoints[1]})`]: {
               width: 'auto',
               marginY: '0 !important',
-              position: 'sticky',
-              maxHeight: 'calc(100vh - var(--offset))',
-              overflow: 'hidden',
-              top: 0,
+              ...(sticky
+                ? {
+                    position: 'sticky',
+                    top: 0,
+                    overflow: 'hidden',
+                    maxHeight: 'var(--sticky-pane-height)'
+                  }
+                : {}),
               ...(position === 'end'
                 ? {flexDirection: 'row', marginLeft: SPACING_MAP[columnGap]}
                 : {flexDirection: 'row-reverse', marginRight: SPACING_MAP[columnGap]})
diff --git a/src/PageLayout/useStickyPaneHeight.ts b/src/PageLayout/useStickyPaneHeight.ts
new file mode 100644
index 00000000000..28aba8d8d07
--- /dev/null
+++ b/src/PageLayout/useStickyPaneHeight.ts
@@ -0,0 +1,42 @@
+import React from 'react'
+import {useInView} from 'react-intersection-observer'
+
+// TODO: Respect sticky header
+export function useStickyPaneHeight() {
+  const [height, setHeight] = React.useState('100vh')
+  const [contentTopRef, contentTopInView, contentTopEntry] = useInView()
+  const [contentBottomRef, contentBottomInView, contentBottomEntry] = useInView()
+
+  const calculateHeight = React.useCallback(() => {
+    // Uncomment to debug
+    // console.log('Recalculating...')
+
+    const topRect = contentTopEntry?.target.getBoundingClientRect()
+    const bottomRect = contentBottomEntry?.target.getBoundingClientRect()
+
+    const topOffset = topRect ? Math.max(topRect.top, 0) : 0
+    const bottomOffset = bottomRect ? Math.max(0, window.innerHeight - bottomRect.bottom) : 0
+
+    setHeight(`calc(100vh - ${topOffset + bottomOffset}px)`)
+  }, [contentTopEntry, contentBottomEntry])
+
+  React.useLayoutEffect(() => {
+    if (contentTopInView || contentBottomInView) {
+      // Start listeners
+
+      // eslint-disable-next-line github/prefer-observers
+      window.addEventListener('scroll', calculateHeight)
+      // eslint-disable-next-line github/prefer-observers
+      window.addEventListener('resize', calculateHeight)
+    }
+
+    return () => {
+      // Stop listeners
+
+      window.removeEventListener('scroll', calculateHeight)
+      window.removeEventListener('resize', calculateHeight)
+    }
+  }, [contentTopInView, contentBottomInView, calculateHeight])
+
+  return {contentTopRef, contentBottomRef, height}
+}

From aa74e2607f4bd826565343c47c8d2449014d87c0 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 5 Aug 2022 14:39:23 -0700
Subject: [PATCH 07/25] Update comments

---
 src/PageLayout/useStickyPaneHeight.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/PageLayout/useStickyPaneHeight.ts b/src/PageLayout/useStickyPaneHeight.ts
index 28aba8d8d07..8d974de2b75 100644
--- a/src/PageLayout/useStickyPaneHeight.ts
+++ b/src/PageLayout/useStickyPaneHeight.ts
@@ -22,7 +22,7 @@ export function useStickyPaneHeight() {
 
   React.useLayoutEffect(() => {
     if (contentTopInView || contentBottomInView) {
-      // Start listeners
+      // Start listeners if the top or the bottom edge of the content region is visible
 
       // eslint-disable-next-line github/prefer-observers
       window.addEventListener('scroll', calculateHeight)
@@ -31,7 +31,7 @@ export function useStickyPaneHeight() {
     }
 
     return () => {
-      // Stop listeners
+      // Stop listeners if neither the top nor the bottom edge of the content region is visible
 
       window.removeEventListener('scroll', calculateHeight)
       window.removeEventListener('resize', calculateHeight)

From 62c86b56646033cba6161f2a999f9175dd414738 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Fri, 5 Aug 2022 14:42:22 -0700
Subject: [PATCH 08/25] Add TODO comments

---
 src/PageLayout/useStickyPaneHeight.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/PageLayout/useStickyPaneHeight.ts b/src/PageLayout/useStickyPaneHeight.ts
index 8d974de2b75..b2c014c08f3 100644
--- a/src/PageLayout/useStickyPaneHeight.ts
+++ b/src/PageLayout/useStickyPaneHeight.ts
@@ -1,7 +1,7 @@
 import React from 'react'
 import {useInView} from 'react-intersection-observer'
 
-// TODO: Respect sticky header
+// TODO: Handle sticky header
 export function useStickyPaneHeight() {
   const [height, setHeight] = React.useState('100vh')
   const [contentTopRef, contentTopInView, contentTopEntry] = useInView()
@@ -17,6 +17,7 @@ export function useStickyPaneHeight() {
     const topOffset = topRect ? Math.max(topRect.top, 0) : 0
     const bottomOffset = bottomRect ? Math.max(0, window.innerHeight - bottomRect.bottom) : 0
 
+    // TODO: Handle elastic scroll in Safari
     setHeight(`calc(100vh - ${topOffset + bottomOffset}px)`)
   }, [contentTopEntry, contentBottomEntry])
 

From 08f8df71c46e2a4737dc490a6cead9c850274764 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Aug 2022 14:15:07 -0700
Subject: [PATCH 09/25] Avoid recalculating sticky pane height when sticky is
 disabled

---
 src/PageLayout/PageLayout.tsx         | 17 ++++++++++++---
 src/PageLayout/useStickyPaneHeight.ts | 30 ++++++++++++++++++++++-----
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index dd42b30b917..46eaa02d589 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -22,6 +22,8 @@ const PageLayoutContext = React.createContext<{
   padding: keyof typeof SPACING_MAP
   rowGap: keyof typeof SPACING_MAP
   columnGap: keyof typeof SPACING_MAP
+  enableStickyPane?: () => void
+  disableStickyPane?: () => void
   contentTopRef?: (node?: Element | null | undefined) => void
   contentBottomRef?: (node?: Element | null | undefined) => void
 }>({
@@ -58,14 +60,15 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
   children,
   sx = {}
 }) => {
-  // TODO: Avoid recalculating sticky pane height when sticky is disabled
-  const {contentTopRef, contentBottomRef, height: stickyPaneHeight} = useStickyPaneHeight()
+  const {enableStickyPane, disableStickyPane, contentTopRef, contentBottomRef, stickyPaneHeight} = useStickyPaneHeight()
   return (
     <PageLayoutContext.Provider
       value={{
         padding,
         rowGap,
         columnGap,
+        enableStickyPane,
+        disableStickyPane,
         contentTopRef,
         contentBottomRef
       }}
@@ -392,7 +395,15 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
 
   const isHidden = useResponsiveValue(responsiveHidden, false)
 
-  const {rowGap, columnGap} = React.useContext(PageLayoutContext)
+  const {rowGap, columnGap, enableStickyPane, disableStickyPane} = React.useContext(PageLayoutContext)
+
+  React.useEffect(() => {
+    if (sticky) {
+      enableStickyPane?.()
+    } else {
+      disableStickyPane?.()
+    }
+  }, [sticky, enableStickyPane, disableStickyPane])
 
   return (
     <Box
diff --git a/src/PageLayout/useStickyPaneHeight.ts b/src/PageLayout/useStickyPaneHeight.ts
index b2c014c08f3..aa98f823027 100644
--- a/src/PageLayout/useStickyPaneHeight.ts
+++ b/src/PageLayout/useStickyPaneHeight.ts
@@ -1,15 +1,24 @@
 import React from 'react'
 import {useInView} from 'react-intersection-observer'
 
+/**
+ * Calculates the height of the sticky pane such that it always
+ * fits into the viewport even when the header or footer are visible.
+ */
 // TODO: Handle sticky header
 export function useStickyPaneHeight() {
+  // Default the height to the viewport height
   const [height, setHeight] = React.useState('100vh')
+
+  // Create intersection observers to track the top and bottom of the content region
   const [contentTopRef, contentTopInView, contentTopEntry] = useInView()
   const [contentBottomRef, contentBottomInView, contentBottomEntry] = useInView()
 
+  // Calculate the height of the sticky pane based on the position of the
+  // top and bottom of the content region
   const calculateHeight = React.useCallback(() => {
     // Uncomment to debug
-    // console.log('Recalculating...')
+    // console.log('Recalculating pane height...')
 
     const topRect = contentTopEntry?.target.getBoundingClientRect()
     const bottomRect = contentBottomEntry?.target.getBoundingClientRect()
@@ -21,8 +30,13 @@ export function useStickyPaneHeight() {
     setHeight(`calc(100vh - ${topOffset + bottomOffset}px)`)
   }, [contentTopEntry, contentBottomEntry])
 
+  // We only want to add scroll and resize listeners if the pane is sticky.
+  // Since hooks can't be called conditionally, we need to use state to track
+  // if the pane is sticky.
+  const [isEnabled, setIsEnabled] = React.useState(false)
+
   React.useLayoutEffect(() => {
-    if (contentTopInView || contentBottomInView) {
+    if (isEnabled && (contentTopInView || contentBottomInView)) {
       // Start listeners if the top or the bottom edge of the content region is visible
 
       // eslint-disable-next-line github/prefer-observers
@@ -37,7 +51,13 @@ export function useStickyPaneHeight() {
       window.removeEventListener('scroll', calculateHeight)
       window.removeEventListener('resize', calculateHeight)
     }
-  }, [contentTopInView, contentBottomInView, calculateHeight])
-
-  return {contentTopRef, contentBottomRef, height}
+  }, [isEnabled, contentTopInView, contentBottomInView, calculateHeight])
+
+  return {
+    enableStickyPane: () => setIsEnabled(true),
+    disableStickyPane: () => setIsEnabled(false),
+    contentTopRef,
+    contentBottomRef,
+    stickyPaneHeight: height
+  }
 }

From ad0519f341ec532ae3e4c69f644f61b022030658 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Aug 2022 15:34:26 -0700
Subject: [PATCH 10/25] Calculate intital height

---
 src/PageLayout/useStickyPaneHeight.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/PageLayout/useStickyPaneHeight.ts b/src/PageLayout/useStickyPaneHeight.ts
index aa98f823027..68643410b42 100644
--- a/src/PageLayout/useStickyPaneHeight.ts
+++ b/src/PageLayout/useStickyPaneHeight.ts
@@ -37,8 +37,8 @@ export function useStickyPaneHeight() {
 
   React.useLayoutEffect(() => {
     if (isEnabled && (contentTopInView || contentBottomInView)) {
+      calculateHeight()
       // Start listeners if the top or the bottom edge of the content region is visible
-
       // eslint-disable-next-line github/prefer-observers
       window.addEventListener('scroll', calculateHeight)
       // eslint-disable-next-line github/prefer-observers
@@ -47,7 +47,6 @@ export function useStickyPaneHeight() {
 
     return () => {
       // Stop listeners if neither the top nor the bottom edge of the content region is visible
-
       window.removeEventListener('scroll', calculateHeight)
       window.removeEventListener('resize', calculateHeight)
     }

From be186f9c384f6fad7f5a0d599b9f76952f49f7a7 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Aug 2022 15:51:27 -0700
Subject: [PATCH 11/25] Handle elastic scroll in safari

---
 src/PageLayout/useStickyPaneHeight.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/PageLayout/useStickyPaneHeight.ts b/src/PageLayout/useStickyPaneHeight.ts
index 68643410b42..4970a242bf3 100644
--- a/src/PageLayout/useStickyPaneHeight.ts
+++ b/src/PageLayout/useStickyPaneHeight.ts
@@ -26,8 +26,11 @@ export function useStickyPaneHeight() {
     const topOffset = topRect ? Math.max(topRect.top, 0) : 0
     const bottomOffset = bottomRect ? Math.max(0, window.innerHeight - bottomRect.bottom) : 0
 
-    // TODO: Handle elastic scroll in Safari
-    setHeight(`calc(100vh - ${topOffset + bottomOffset}px)`)
+    // Safari's elastic scroll feature allows you to scroll beyond the scroll height of the page.
+    // We need to account for this when calculating the offset.
+    const overflowScroll = Math.max(0, window.scrollY + window.innerHeight - document.body.scrollHeight)
+
+    setHeight(`calc(100vh - ${topOffset + bottomOffset - overflowScroll}px)`)
   }, [contentTopEntry, contentBottomEntry])
 
   // We only want to add scroll and resize listeners if the pane is sticky.

From a9fa86ddb0662d2732a26a20540e44b523d3660a Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Aug 2022 15:52:08 -0700
Subject: [PATCH 12/25] Clean up max() functions

---
 src/PageLayout/useStickyPaneHeight.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/PageLayout/useStickyPaneHeight.ts b/src/PageLayout/useStickyPaneHeight.ts
index 4970a242bf3..af2389ae43f 100644
--- a/src/PageLayout/useStickyPaneHeight.ts
+++ b/src/PageLayout/useStickyPaneHeight.ts
@@ -24,11 +24,11 @@ export function useStickyPaneHeight() {
     const bottomRect = contentBottomEntry?.target.getBoundingClientRect()
 
     const topOffset = topRect ? Math.max(topRect.top, 0) : 0
-    const bottomOffset = bottomRect ? Math.max(0, window.innerHeight - bottomRect.bottom) : 0
+    const bottomOffset = bottomRect ? Math.max(window.innerHeight - bottomRect.bottom, 0) : 0
 
     // Safari's elastic scroll feature allows you to scroll beyond the scroll height of the page.
     // We need to account for this when calculating the offset.
-    const overflowScroll = Math.max(0, window.scrollY + window.innerHeight - document.body.scrollHeight)
+    const overflowScroll = Math.max(window.scrollY + window.innerHeight - document.body.scrollHeight, 0)
 
     setHeight(`calc(100vh - ${topOffset + bottomOffset - overflowScroll}px)`)
   }, [contentTopEntry, contentBottomEntry])

From 3e6a769f67826b9fda4e0abde5af259bc7ba3dd4 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Aug 2022 16:48:24 -0700
Subject: [PATCH 13/25] Add docs

---
 docs/content/PageLayout.mdx      | 20 ++++++++++++++++++++
 docs/content/SplitPageLayout.mdx |  1 +
 2 files changed, 21 insertions(+)

diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index 8511c8951ec..def61e954d9 100644
--- a/docs/content/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -147,6 +147,25 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 </PageLayout>
 ```
 
+### With a sticky pane
+
+```jsx live
+<PageLayout>
+  <PageLayout.Header>
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Pane sticky>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
+  <PageLayout.Footer>
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
+</PageLayout>
+```
+
 ## Props
 
 ### PageLayout
@@ -310,6 +329,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
     defaultValue="'medium'"
     description="The width of the pane."
   />
+  <PropsTableRow name="sticky" type="boolean" defaultValue="false" description="Whether the pane is sticky." />
   <PropsTableRow
     name="padding"
     type={`| 'none'
diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx
index 739e18c3b40..f6ce11db8d8 100644
--- a/docs/content/SplitPageLayout.mdx
+++ b/docs/content/SplitPageLayout.mdx
@@ -240,6 +240,7 @@ description: Provides structure for a split page layout, including independent s
     defaultValue="'medium'"
     description="The width of the pane."
   />
+  <PropsTableRow name="sticky" type="boolean" defaultValue="true" description="Whether the pane is sticky." />
   <PropsTableRow
     name="divider"
     type={`ResponsiveValue<

From c68f1eb353d9ed47c963b5f741d7aff2ed66053f Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Aug 2022 16:53:50 -0700
Subject: [PATCH 14/25] Create serious-pots-confess.md

---
 .changeset/serious-pots-confess.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 .changeset/serious-pots-confess.md

diff --git a/.changeset/serious-pots-confess.md b/.changeset/serious-pots-confess.md
new file mode 100644
index 00000000000..ea674b72093
--- /dev/null
+++ b/.changeset/serious-pots-confess.md
@@ -0,0 +1,13 @@
+---
+"@primer/react": patch
+---
+
+Add a `sticky` prop to the `PageLayout.Pane` component that provides a convenient way for you to make side panes sticky:
+
+```diff
+<PageLayout>
+- <PageLayout.Pane>...</PageLayout.Pane>
++ <PageLayout.Pane sticky>...</PageLayout.Pane>
+  <PageLayout.Content>...</PageLayout.Content>
+</PageLayout>
+```

From d7180a80670e003d1e84a750060f24a248d4cfac Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Aug 2022 16:56:11 -0700
Subject: [PATCH 15/25] Update serious-pots-confess.md

---
 .changeset/serious-pots-confess.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/serious-pots-confess.md b/.changeset/serious-pots-confess.md
index ea674b72093..336a503595a 100644
--- a/.changeset/serious-pots-confess.md
+++ b/.changeset/serious-pots-confess.md
@@ -1,5 +1,5 @@
 ---
-"@primer/react": patch
+"@primer/react": minor
 ---
 
 Add a `sticky` prop to the `PageLayout.Pane` component that provides a convenient way for you to make side panes sticky:

From c7e71497611c8c4ab64be45939ac4eb4a93ab003 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 9 Aug 2022 16:41:52 -0700
Subject: [PATCH 16/25] Update tests

---
 src/PageLayout/PageLayout.test.tsx            |   2 +-
 .../__snapshots__/PageLayout.test.tsx.snap    | 286 +++++++++++-------
 2 files changed, 176 insertions(+), 112 deletions(-)

diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx
index 171bb6216f0..b4e0c8c8ef3 100644
--- a/src/PageLayout/PageLayout.test.tsx
+++ b/src/PageLayout/PageLayout.test.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
 import {act, render} from '@testing-library/react'
 import MatchMediaMock from 'jest-matchmedia-mock'
+import 'react-intersection-observer/test-utils'
 import {ThemeProvider} from '..'
 import {viewportRanges} from '../hooks/useResponsiveValue'
 import {PageLayout} from './PageLayout'
diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
index 5f9e4c680bb..abe06354aca 100644
--- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
+++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 .c5 {
+  position: relative;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
@@ -36,6 +37,11 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 .c6 {
+  position: absolute;
+  top: 0;
+}
+
+.c7 {
   width: 100%;
   max-width: 100%;
   margin-left: auto;
@@ -43,9 +49,15 @@ exports[`PageLayout renders condensed layout 1`] = `
   padding: 0;
 }
 
-.c10 {
+.c8 {
+  position: absolute;
+  bottom: 0;
+}
+
+.c12 {
   width: 100%;
   padding: 0;
+  overflow: auto;
 }
 
 .c0 {
@@ -67,37 +79,37 @@ exports[`PageLayout renders condensed layout 1`] = `
   margin-top: 16px;
 }
 
-.c7 {
-  -webkit-order: 3;
-  -ms-flex-order: 3;
-  order: 3;
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -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;
 }
 
-.c8 {
+.c10 {
   margin-left: -16px;
   margin-right: -16px;
   display: none;
   margin-bottom: 16px;
 }
 
-.c9 {
+.c11 {
   height: 100%;
   display: none;
   margin-right: 16px;
 }
 
-.c11 {
+.c13 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -106,13 +118,13 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c10 {
+  .c12 {
     width: 256px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
+  .c12 {
     width: 296px;
   }
 }
@@ -125,22 +137,19 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c7 {
+  .c9 {
     width: auto;
-    margin-left: 16px;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
-    -webkit-order: 3;
-    -ms-flex-order: 3;
-    order: 3;
+    margin-left: 16px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c8 {
+  .c10 {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
@@ -149,6 +158,7 @@ exports[`PageLayout renders condensed layout 1`] = `
 <div>
   <div
     class="c0"
+    style="--sticky-pane-height: 100vh;"
   >
     <div
       class="c1"
@@ -170,30 +180,36 @@ exports[`PageLayout renders condensed layout 1`] = `
       >
         <div
           class="c6"
+        />
+        <div
+          class="c7"
         >
           Content
         </div>
+        <div
+          class="c8"
+        />
       </main>
       <aside
-        class="c7"
+        class="c9"
       >
         <div
-          class="c8"
+          class="c10"
         />
         <div
-          class="c9"
+          class="c11"
         />
         <div
-          class="c10"
+          class="c12"
         >
           Pane
         </div>
       </aside>
       <footer
-        class="c11"
+        class="c13"
       >
         <div
-          class="c8"
+          class="c10"
         />
         <div
           class="c3"
@@ -244,6 +260,7 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 .c5 {
+  position: relative;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
@@ -261,6 +278,11 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 .c6 {
+  position: absolute;
+  top: 0;
+}
+
+.c7 {
   width: 100%;
   max-width: 100%;
   margin-left: auto;
@@ -268,42 +290,48 @@ exports[`PageLayout renders default layout 1`] = `
   padding: 0;
 }
 
-.c7 {
-  -webkit-order: 3;
-  -ms-flex-order: 3;
-  order: 3;
+.c8 {
+  position: absolute;
+  bottom: 0;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -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;
 }
 
-.c8 {
+.c10 {
   margin-left: -16px;
   margin-right: -16px;
   display: none;
   margin-bottom: 16px;
 }
 
-.c9 {
+.c11 {
   height: 100%;
   display: none;
   margin-right: 16px;
 }
 
-.c10 {
+.c12 {
   width: 100%;
   padding: 0;
+  overflow: auto;
 }
 
-.c11 {
+.c13 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -339,35 +367,32 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c7 {
+  .c9 {
     width: auto;
-    margin-left: 16px;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
-    -webkit-order: 3;
-    -ms-flex-order: 3;
-    order: 3;
+    margin-left: 16px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c7 {
+  .c9 {
     margin-top: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c8 {
+  .c10 {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c8 {
+  .c10 {
     margin-left: -24px;
     margin-right: -24px;
     margin-bottom: 24px;
@@ -375,25 +400,25 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 @media screen and (min-width:1012px) {
-  .c9 {
+  .c11 {
     margin-right: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c10 {
+  .c12 {
     width: 256px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
+  .c12 {
     width: 296px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c11 {
+  .c13 {
     margin-top: 24px;
   }
 }
@@ -401,6 +426,7 @@ exports[`PageLayout renders default layout 1`] = `
 <div>
   <div
     class="c0"
+    style="--sticky-pane-height: 100vh;"
   >
     <div
       class="c1"
@@ -422,30 +448,36 @@ exports[`PageLayout renders default layout 1`] = `
       >
         <div
           class="c6"
+        />
+        <div
+          class="c7"
         >
           Content
         </div>
+        <div
+          class="c8"
+        />
       </main>
       <aside
-        class="c7"
+        class="c9"
       >
         <div
-          class="c8"
+          class="c10"
         />
         <div
-          class="c9"
+          class="c11"
         />
         <div
-          class="c10"
+          class="c12"
         >
           Pane
         </div>
       </aside>
       <footer
-        class="c11"
+        class="c13"
       >
         <div
-          class="c8"
+          class="c10"
         />
         <div
           class="c3"
@@ -496,6 +528,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 .c5 {
+  position: relative;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
@@ -513,6 +546,11 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 .c6 {
+  position: absolute;
+  top: 0;
+}
+
+.c7 {
   width: 100%;
   max-width: 100%;
   margin-left: auto;
@@ -520,42 +558,48 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   padding: 0;
 }
 
-.c7 {
-  -webkit-order: 3;
-  -ms-flex-order: 3;
-  order: 3;
+.c8 {
+  position: absolute;
+  bottom: 0;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -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;
 }
 
-.c8 {
+.c10 {
   margin-left: -16px;
   margin-right: -16px;
   display: none;
   margin-bottom: 16px;
 }
 
-.c9 {
+.c11 {
   height: 100%;
   display: none;
   margin-right: 16px;
 }
 
-.c10 {
+.c12 {
   width: 100%;
   padding: 0;
+  overflow: auto;
 }
 
-.c11 {
+.c13 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -591,35 +635,32 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c7 {
+  .c9 {
     width: auto;
-    margin-left: 16px;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
-    -webkit-order: 3;
-    -ms-flex-order: 3;
-    order: 3;
+    margin-left: 16px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c7 {
+  .c9 {
     margin-top: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c8 {
+  .c10 {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c8 {
+  .c10 {
     margin-left: -24px;
     margin-right: -24px;
     margin-bottom: 24px;
@@ -627,25 +668,25 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 @media screen and (min-width:1012px) {
-  .c9 {
+  .c11 {
     margin-right: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c10 {
+  .c12 {
     width: 256px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
+  .c12 {
     width: 296px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c11 {
+  .c13 {
     margin-top: 24px;
   }
 }
@@ -653,6 +694,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 <div>
   <div
     class="c0"
+    style="--sticky-pane-height: 100vh;"
   >
     <div
       class="c1"
@@ -674,30 +716,36 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
       >
         <div
           class="c6"
+        />
+        <div
+          class="c7"
         >
           Content
         </div>
+        <div
+          class="c8"
+        />
       </main>
       <aside
-        class="c7"
+        class="c9"
       >
         <div
-          class="c8"
+          class="c10"
         />
         <div
-          class="c9"
+          class="c11"
         />
         <div
-          class="c10"
+          class="c12"
         >
           Pane
         </div>
       </aside>
       <footer
-        class="c11"
+        class="c13"
       >
         <div
-          class="c8"
+          class="c10"
         />
         <div
           class="c3"
@@ -748,6 +796,7 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 .c5 {
+  position: relative;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
@@ -765,6 +814,11 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 .c6 {
+  position: absolute;
+  top: 0;
+}
+
+.c7 {
   width: 100%;
   max-width: 100%;
   margin-left: auto;
@@ -772,19 +826,25 @@ exports[`PageLayout renders with dividers 1`] = `
   padding: 0;
 }
 
-.c11 {
+.c8 {
+  position: absolute;
+  bottom: 0;
+}
+
+.c13 {
   margin-left: -16px;
   margin-right: -16px;
   display: none;
   margin-bottom: 16px;
 }
 
-.c9 {
+.c11 {
   width: 100%;
   padding: 0;
+  overflow: auto;
 }
 
-.c10 {
+.c12 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -792,24 +852,24 @@ exports[`PageLayout renders with dividers 1`] = `
   margin-top: 16px;
 }
 
-.c7 {
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
+  -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;
 }
 
-.c8 {
+.c10 {
   height: 100%;
   display: none;
   margin-left: 16px;
@@ -843,14 +903,14 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c11 {
+  .c13 {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c11 {
+  .c13 {
     margin-left: -24px;
     margin-right: -24px;
     margin-bottom: 24px;
@@ -858,46 +918,43 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c9 {
+  .c11 {
     width: 256px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c9 {
+  .c11 {
     width: 296px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
+  .c12 {
     margin-top: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c7 {
+  .c9 {
     width: auto;
-    margin-right: 16px;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     -webkit-flex-direction: row-reverse;
     -ms-flex-direction: row-reverse;
     flex-direction: row-reverse;
-    -webkit-order: 1;
-    -ms-flex-order: 1;
-    order: 1;
+    margin-right: 16px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c7 {
+  .c9 {
     margin-bottom: 24px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c8 {
+  .c10 {
     margin-left: 24px;
   }
 }
@@ -905,6 +962,7 @@ exports[`PageLayout renders with dividers 1`] = `
 <div>
   <div
     class="c0"
+    style="--sticky-pane-height: 100vh;"
   >
     <div
       class="c1"
@@ -926,30 +984,36 @@ exports[`PageLayout renders with dividers 1`] = `
       >
         <div
           class="c6"
+        />
+        <div
+          class="c7"
         >
           Content
         </div>
+        <div
+          class="c8"
+        />
       </main>
       <aside
-        class="c7"
+        class="c9"
       >
         <div
           class="c4"
         />
         <div
-          class="c8"
+          class="c10"
         />
         <div
-          class="c9"
+          class="c11"
         >
           Pane
         </div>
       </aside>
       <footer
-        class="c10"
+        class="c12"
       >
         <div
-          class="c11"
+          class="c13"
         />
         <div
           class="c3"

From f81704f6b51f9d773bf964af268921283d4d9d05 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 9 Aug 2022 16:57:19 -0700
Subject: [PATCH 17/25] Import React in tests

---
 src/PageLayout/PageLayout.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx
index b4e0c8c8ef3..83179c325c7 100644
--- a/src/PageLayout/PageLayout.test.tsx
+++ b/src/PageLayout/PageLayout.test.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import {act, render} from '@testing-library/react'
 import MatchMediaMock from 'jest-matchmedia-mock'
 import 'react-intersection-observer/test-utils'

From 1dcea16b0318deda99463eebfed2b93e8ff99a19 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Wed, 10 Aug 2022 12:20:56 -0700
Subject: [PATCH 18/25] Remove position: relative from content region

---
 src/PageLayout/PageLayout.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 46eaa02d589..322660173ed 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -284,7 +284,8 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
       hidden={isHidden}
       sx={merge<BetterSystemStyleObject>(
         {
-          position: 'relative',
+          display: '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
@@ -298,14 +299,22 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
       )}
     >
       {/* Track the top of the content region so we can calculate the height of the pane region */}
-      <Box ref={contentTopRef} sx={{position: 'absolute', top: 0}} />
+      <Box ref={contentTopRef} />
 
-      <Box sx={{width: '100%', maxWidth: contentWidths[width], marginX: 'auto', padding: SPACING_MAP[padding]}}>
+      <Box
+        sx={{
+          width: '100%',
+          maxWidth: contentWidths[width],
+          marginX: 'auto',
+          flexGrow: 1,
+          padding: SPACING_MAP[padding]
+        }}
+      >
         {children}
       </Box>
 
       {/* Track the bottom of the content region so we can calculate the height of the pane region */}
-      <Box ref={contentBottomRef} sx={{position: 'absolute', bottom: 0}} />
+      <Box ref={contentBottomRef} />
     </Box>
   )
 }

From b07f807112c0f36e0f5385a21b56b2c5a85b923a Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Thu, 11 Aug 2022 11:45:02 -0700
Subject: [PATCH 19/25] Update snapshots

---
 .../__snapshots__/PageLayout.test.tsx.snap    | 254 +++++++++---------
 1 file changed, 127 insertions(+), 127 deletions(-)

diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
index abe06354aca..99f325b6460 100644
--- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
+++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -19,7 +19,13 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 .c5 {
-  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
@@ -37,24 +43,18 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 .c6 {
-  position: absolute;
-  top: 0;
-}
-
-.c7 {
   width: 100%;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   padding: 0;
 }
 
-.c8 {
-  position: absolute;
-  bottom: 0;
-}
-
-.c12 {
+.c10 {
   width: 100%;
   padding: 0;
   overflow: auto;
@@ -79,7 +79,7 @@ exports[`PageLayout renders condensed layout 1`] = `
   margin-top: 16px;
 }
 
-.c9 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -96,20 +96,20 @@ exports[`PageLayout renders condensed layout 1`] = `
   margin-top: 16px;
 }
 
-.c10 {
+.c8 {
   margin-left: -16px;
   margin-right: -16px;
   display: none;
   margin-bottom: 16px;
 }
 
-.c11 {
+.c9 {
   height: 100%;
   display: none;
   margin-right: 16px;
 }
 
-.c13 {
+.c11 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -118,13 +118,13 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c12 {
+  .c10 {
     width: 256px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c12 {
+  .c10 {
     width: 296px;
   }
 }
@@ -137,7 +137,7 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c9 {
+  .c7 {
     width: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
@@ -149,7 +149,7 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c10 {
+  .c8 {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
@@ -179,37 +179,37 @@ exports[`PageLayout renders condensed layout 1`] = `
         class="c5"
       >
         <div
-          class="c6"
+          class=""
         />
         <div
-          class="c7"
+          class="c6"
         >
           Content
         </div>
         <div
-          class="c8"
+          class=""
         />
       </main>
       <aside
-        class="c9"
+        class="c7"
       >
         <div
-          class="c10"
+          class="c8"
         />
         <div
-          class="c11"
+          class="c9"
         />
         <div
-          class="c12"
+          class="c10"
         >
           Pane
         </div>
       </aside>
       <footer
-        class="c13"
+        class="c11"
       >
         <div
-          class="c10"
+          class="c8"
         />
         <div
           class="c3"
@@ -260,7 +260,13 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 .c5 {
-  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
@@ -278,24 +284,18 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 .c6 {
-  position: absolute;
-  top: 0;
-}
-
-.c7 {
   width: 100%;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   padding: 0;
 }
 
-.c8 {
-  position: absolute;
-  bottom: 0;
-}
-
-.c9 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -312,26 +312,26 @@ exports[`PageLayout renders default layout 1`] = `
   margin-top: 16px;
 }
 
-.c10 {
+.c8 {
   margin-left: -16px;
   margin-right: -16px;
   display: none;
   margin-bottom: 16px;
 }
 
-.c11 {
+.c9 {
   height: 100%;
   display: none;
   margin-right: 16px;
 }
 
-.c12 {
+.c10 {
   width: 100%;
   padding: 0;
   overflow: auto;
 }
 
-.c13 {
+.c11 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -367,7 +367,7 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c9 {
+  .c7 {
     width: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
@@ -379,20 +379,20 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 @media screen and (min-width:1012px) {
-  .c9 {
+  .c7 {
     margin-top: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c10 {
+  .c8 {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
+  .c8 {
     margin-left: -24px;
     margin-right: -24px;
     margin-bottom: 24px;
@@ -400,25 +400,25 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 @media screen and (min-width:1012px) {
-  .c11 {
+  .c9 {
     margin-right: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c12 {
+  .c10 {
     width: 256px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c12 {
+  .c10 {
     width: 296px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c13 {
+  .c11 {
     margin-top: 24px;
   }
 }
@@ -447,37 +447,37 @@ exports[`PageLayout renders default layout 1`] = `
         class="c5"
       >
         <div
-          class="c6"
+          class=""
         />
         <div
-          class="c7"
+          class="c6"
         >
           Content
         </div>
         <div
-          class="c8"
+          class=""
         />
       </main>
       <aside
-        class="c9"
+        class="c7"
       >
         <div
-          class="c10"
+          class="c8"
         />
         <div
-          class="c11"
+          class="c9"
         />
         <div
-          class="c12"
+          class="c10"
         >
           Pane
         </div>
       </aside>
       <footer
-        class="c13"
+        class="c11"
       >
         <div
-          class="c10"
+          class="c8"
         />
         <div
           class="c3"
@@ -528,7 +528,13 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 .c5 {
-  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
@@ -546,24 +552,18 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 .c6 {
-  position: absolute;
-  top: 0;
-}
-
-.c7 {
   width: 100%;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   padding: 0;
 }
 
-.c8 {
-  position: absolute;
-  bottom: 0;
-}
-
-.c9 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -580,26 +580,26 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   margin-top: 16px;
 }
 
-.c10 {
+.c8 {
   margin-left: -16px;
   margin-right: -16px;
   display: none;
   margin-bottom: 16px;
 }
 
-.c11 {
+.c9 {
   height: 100%;
   display: none;
   margin-right: 16px;
 }
 
-.c12 {
+.c10 {
   width: 100%;
   padding: 0;
   overflow: auto;
 }
 
-.c13 {
+.c11 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -635,7 +635,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c9 {
+  .c7 {
     width: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
@@ -647,20 +647,20 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 @media screen and (min-width:1012px) {
-  .c9 {
+  .c7 {
     margin-top: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c10 {
+  .c8 {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
+  .c8 {
     margin-left: -24px;
     margin-right: -24px;
     margin-bottom: 24px;
@@ -668,25 +668,25 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 @media screen and (min-width:1012px) {
-  .c11 {
+  .c9 {
     margin-right: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c12 {
+  .c10 {
     width: 256px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c12 {
+  .c10 {
     width: 296px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c13 {
+  .c11 {
     margin-top: 24px;
   }
 }
@@ -715,37 +715,37 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
         class="c5"
       >
         <div
-          class="c6"
+          class=""
         />
         <div
-          class="c7"
+          class="c6"
         >
           Content
         </div>
         <div
-          class="c8"
+          class=""
         />
       </main>
       <aside
-        class="c9"
+        class="c7"
       >
         <div
-          class="c10"
+          class="c8"
         />
         <div
-          class="c11"
+          class="c9"
         />
         <div
-          class="c12"
+          class="c10"
         >
           Pane
         </div>
       </aside>
       <footer
-        class="c13"
+        class="c11"
       >
         <div
-          class="c10"
+          class="c8"
         />
         <div
           class="c3"
@@ -796,7 +796,13 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 .c5 {
-  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
@@ -814,37 +820,31 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 .c6 {
-  position: absolute;
-  top: 0;
-}
-
-.c7 {
   width: 100%;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
   padding: 0;
 }
 
-.c8 {
-  position: absolute;
-  bottom: 0;
-}
-
-.c13 {
+.c11 {
   margin-left: -16px;
   margin-right: -16px;
   display: none;
   margin-bottom: 16px;
 }
 
-.c11 {
+.c9 {
   width: 100%;
   padding: 0;
   overflow: auto;
 }
 
-.c12 {
+.c10 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -852,7 +852,7 @@ exports[`PageLayout renders with dividers 1`] = `
   margin-top: 16px;
 }
 
-.c9 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -869,7 +869,7 @@ exports[`PageLayout renders with dividers 1`] = `
   margin-bottom: 16px;
 }
 
-.c10 {
+.c8 {
   height: 100%;
   display: none;
   margin-left: 16px;
@@ -903,14 +903,14 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c13 {
+  .c11 {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c13 {
+  .c11 {
     margin-left: -24px;
     margin-right: -24px;
     margin-bottom: 24px;
@@ -918,25 +918,25 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c11 {
+  .c9 {
     width: 256px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c11 {
+  .c9 {
     width: 296px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c12 {
+  .c10 {
     margin-top: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c9 {
+  .c7 {
     width: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
@@ -948,13 +948,13 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 @media screen and (min-width:1012px) {
-  .c9 {
+  .c7 {
     margin-bottom: 24px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
+  .c8 {
     margin-left: 24px;
   }
 }
@@ -983,37 +983,37 @@ exports[`PageLayout renders with dividers 1`] = `
         class="c5"
       >
         <div
-          class="c6"
+          class=""
         />
         <div
-          class="c7"
+          class="c6"
         >
           Content
         </div>
         <div
-          class="c8"
+          class=""
         />
       </main>
       <aside
-        class="c9"
+        class="c7"
       >
         <div
           class="c4"
         />
         <div
-          class="c10"
+          class="c8"
         />
         <div
-          class="c11"
+          class="c9"
         >
           Pane
         </div>
       </aside>
       <footer
-        class="c12"
+        class="c10"
       >
         <div
-          class="c13"
+          class="c11"
         />
         <div
           class="c3"

From 52e174fd535c5e29c552e685003a3cac7c578137 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 15 Aug 2022 16:58:45 -0700
Subject: [PATCH 20/25] Handle nested scroll containers

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
---
 src/PageLayout/PageLayout.stories.tsx | 61 +++++++++++++++++++---
 src/PageLayout/PageLayout.tsx         |  4 +-
 src/PageLayout/useStickyPaneHeight.ts | 74 +++++++++++++++++++++++----
 3 files changed, 121 insertions(+), 18 deletions(-)

diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx
index f41ed129945..b9f92d5b97d 100644
--- a/src/PageLayout/PageLayout.stories.tsx
+++ b/src/PageLayout/PageLayout.stories.tsx
@@ -606,13 +606,58 @@ StickyPane.argTypes = {
   }
 }
 
-export default meta
+export const NestedScrollContainer: Story = args => (
+  <Box sx={{display: 'grid', gridTemplateRows: 'auto 1fr auto', height: '100vh'}}>
+    <Placeholder label="Above scroll container" height={120} />
+    <Box sx={{overflow: 'auto'}}>
+      <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
+        <PageLayout.Header padding="normal" divider="line">
+          <Placeholder label="Header" height={64} />
+        </PageLayout.Header>
+        <PageLayout.Content padding="normal" width="large">
+          <Box sx={{display: 'grid', gap: 3}}>
+            {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. 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.Content>
+        <PageLayout.Pane position="start" padding="normal" divider="line" sticky>
+          <Box sx={{display: 'grid', gap: 3}}>
+            {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.
+              </Box>
+            ))}
+          </Box>
+        </PageLayout.Pane>
+        <PageLayout.Footer padding="normal" divider="line">
+          <Placeholder label="Footer" height={64} />
+        </PageLayout.Footer>
+      </PageLayout>
+    </Box>
+    <Placeholder label="Below scroll container" height={120} />
+  </Box>
+)
 
-// test cases
+NestedScrollContainer.argTypes = {
+  numParagraphsInPane: {
+    type: 'number',
+    defaultValue: 10
+  },
+  numParagraphsInContent: {
+    type: 'number',
+    defaultValue: 30
+  }
+}
 
-// pane is long, content is short
-// pane is short, content is long
-// pane is long, content is long
-// pane is short, content is short
-// narrow viewport
-// sticky disabled
+export default meta
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 322660173ed..b8fc977d989 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -60,7 +60,8 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
   children,
   sx = {}
 }) => {
-  const {enableStickyPane, disableStickyPane, contentTopRef, contentBottomRef, stickyPaneHeight} = useStickyPaneHeight()
+  const {rootRef, enableStickyPane, disableStickyPane, contentTopRef, contentBottomRef, stickyPaneHeight} =
+    useStickyPaneHeight()
   return (
     <PageLayoutContext.Provider
       value={{
@@ -74,6 +75,7 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
       }}
     >
       <Box
+        ref={rootRef}
         style={{
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore TypeScript doesn't know about CSS custom properties
diff --git a/src/PageLayout/useStickyPaneHeight.ts b/src/PageLayout/useStickyPaneHeight.ts
index af2389ae43f..2b5bb7e8430 100644
--- a/src/PageLayout/useStickyPaneHeight.ts
+++ b/src/PageLayout/useStickyPaneHeight.ts
@@ -7,6 +7,8 @@ import {useInView} from 'react-intersection-observer'
  */
 // TODO: Handle sticky header
 export function useStickyPaneHeight() {
+  const rootRef = React.useRef<HTMLDivElement>(null)
+
   // Default the height to the viewport height
   const [height, setHeight] = React.useState('100vh')
 
@@ -20,17 +22,32 @@ export function useStickyPaneHeight() {
     // Uncomment to debug
     // console.log('Recalculating pane height...')
 
+    let calculatedHeight = ''
+
+    const scrollContainer = getScrollContainer(rootRef.current)
+
     const topRect = contentTopEntry?.target.getBoundingClientRect()
     const bottomRect = contentBottomEntry?.target.getBoundingClientRect()
 
-    const topOffset = topRect ? Math.max(topRect.top, 0) : 0
-    const bottomOffset = bottomRect ? Math.max(window.innerHeight - bottomRect.bottom, 0) : 0
+    if (scrollContainer) {
+      const scrollRect = scrollContainer.getBoundingClientRect()
+
+      const topOffset = topRect ? Math.max(topRect.top - scrollRect.top, 0) : 0
+      const bottomOffset = bottomRect ? Math.max(scrollRect.bottom - bottomRect.bottom, 0) : 0
+
+      calculatedHeight = `${scrollRect.height - (topOffset + bottomOffset)}px`
+    } else {
+      const topOffset = topRect ? Math.max(topRect.top, 0) : 0
+      const bottomOffset = bottomRect ? Math.max(window.innerHeight - bottomRect.bottom, 0) : 0
+
+      // Safari's elastic scroll feature allows you to scroll beyond the scroll height of the page.
+      // We need to account for this when calculating the offset.
+      const overflowScroll = Math.max(window.scrollY + window.innerHeight - document.body.scrollHeight, 0)
 
-    // Safari's elastic scroll feature allows you to scroll beyond the scroll height of the page.
-    // We need to account for this when calculating the offset.
-    const overflowScroll = Math.max(window.scrollY + window.innerHeight - document.body.scrollHeight, 0)
+      calculatedHeight = `calc(100vh - ${topOffset + bottomOffset - overflowScroll}px)`
+    }
 
-    setHeight(`calc(100vh - ${topOffset + bottomOffset - overflowScroll}px)`)
+    setHeight(calculatedHeight)
   }, [contentTopEntry, contentBottomEntry])
 
   // We only want to add scroll and resize listeners if the pane is sticky.
@@ -39,23 +56,40 @@ export function useStickyPaneHeight() {
   const [isEnabled, setIsEnabled] = React.useState(false)
 
   React.useLayoutEffect(() => {
+    const scrollContainer = getScrollContainer(rootRef.current)
+
     if (isEnabled && (contentTopInView || contentBottomInView)) {
       calculateHeight()
+
       // Start listeners if the top or the bottom edge of the content region is visible
-      // eslint-disable-next-line github/prefer-observers
-      window.addEventListener('scroll', calculateHeight)
+
+      if (scrollContainer) {
+        // eslint-disable-next-line github/prefer-observers
+        scrollContainer.addEventListener('scroll', calculateHeight)
+      } else {
+        // eslint-disable-next-line github/prefer-observers
+        window.addEventListener('scroll', calculateHeight)
+      }
+
       // eslint-disable-next-line github/prefer-observers
       window.addEventListener('resize', calculateHeight)
     }
 
     return () => {
       // Stop listeners if neither the top nor the bottom edge of the content region is visible
-      window.removeEventListener('scroll', calculateHeight)
+
+      if (scrollContainer) {
+        scrollContainer.removeEventListener('scroll', calculateHeight)
+      } else {
+        window.removeEventListener('scroll', calculateHeight)
+      }
+
       window.removeEventListener('resize', calculateHeight)
     }
   }, [isEnabled, contentTopInView, contentBottomInView, calculateHeight])
 
   return {
+    rootRef,
     enableStickyPane: () => setIsEnabled(true),
     disableStickyPane: () => setIsEnabled(false),
     contentTopRef,
@@ -63,3 +97,25 @@ export function useStickyPaneHeight() {
     stickyPaneHeight: height
   }
 }
+
+/**
+ * Returns the nearest scrollable parent of the element or `null` if the element
+ * is not contained in a scrollable element.
+ */
+function getScrollContainer(element: Element | null): Element | null {
+  if (!element || element === document.body) {
+    return null
+  }
+
+  return isScrollable(element) ? element : getScrollContainer(element.parentElement)
+}
+
+/** Returns `true` if the element is scrollable */
+function isScrollable(element: Element) {
+  const hasScrollableContent = element.scrollHeight > element.clientHeight
+
+  const overflowYStyle = window.getComputedStyle(element).overflowY
+  const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1
+
+  return hasScrollableContent && !isOverflowHidden
+}

From 55fcd744ddb660321be1bb75b300abb3ea37054d Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 15 Aug 2022 17:21:45 -0700
Subject: [PATCH 21/25] Update sticky prop docs

---
 docs/content/PageLayout.mdx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index c85285211aa..47bdb01666d 100644
--- a/docs/content/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -329,7 +329,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
     defaultValue="'medium'"
     description="The width of the pane."
   />
-  <PropsTableRow name="sticky" type="boolean" defaultValue="false" description="Whether the pane is sticky." />
+  <PropsTableRow
+    name="sticky"
+    type="boolean"
+    defaultValue="false"
+    description="Whether the pane should stick to the top of the screen while the content scrolls."
+  />
   <PropsTableRow
     name="padding"
     type={`| 'none'

From 867c9bd0a224a21d558698ebe9d2c6fedea0209a Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 15 Aug 2022 20:02:58 -0700
Subject: [PATCH 22/25] Update sticky pane docs example

---
 docs/content/PageLayout.mdx | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index 47bdb01666d..75224d6bda2 100644
--- a/docs/content/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -150,20 +150,22 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 ### With a sticky pane
 
 ```jsx live
-<PageLayout>
-  <PageLayout.Header>
-    <Placeholder label="Header" height={64} />
-  </PageLayout.Header>
-  <PageLayout.Content>
-    <Placeholder label="Content" height={240} />
-  </PageLayout.Content>
-  <PageLayout.Pane sticky>
-    <Placeholder label="Pane" height={120} />
-  </PageLayout.Pane>
-  <PageLayout.Footer>
-    <Placeholder label="Footer" height={64} />
-  </PageLayout.Footer>
-</PageLayout>
+<Box sx={{height: 320, overflowY: 'auto', border: '1px solid', borderColor: 'border.default'}}>
+  <PageLayout>
+    <PageLayout.Header>
+      <Placeholder label="Header" height={64} />
+    </PageLayout.Header>
+    <PageLayout.Content>
+      <Placeholder label="Content" height={320} />
+    </PageLayout.Content>
+    <PageLayout.Pane sticky>
+      <Placeholder label="Pane" height={120} />
+    </PageLayout.Pane>
+    <PageLayout.Footer>
+      <Placeholder label="Footer" height={64} />
+    </PageLayout.Footer>
+  </PageLayout>
+</Box>
 ```
 
 ## Props

From ba261542e2a2255daee87ac348bdd2b293dc2fe6 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 11 Aug 2022 13:17:42 +1000
Subject: [PATCH 23/25] Add interaction tests for pagelayout sticky

---
 src/PageLayout/PageLayout.stories.tsx  |  45 +--
 src/PageLayout/interaction.stories.tsx | 399 +++++++++++++++++++++++++
 2 files changed, 427 insertions(+), 17 deletions(-)
 create mode 100644 src/PageLayout/interaction.stories.tsx

diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx
index b9f92d5b97d..6a77983b0d0 100644
--- a/src/PageLayout/PageLayout.stories.tsx
+++ b/src/PageLayout/PageLayout.stories.tsx
@@ -562,27 +562,38 @@ export const StickyPane: Story = args => (
     </PageLayout.Header>
     <PageLayout.Content padding="normal" width="large">
       <Box sx={{display: 'grid', gap: 3}}>
-        {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.
-            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>
-        ))}
+        {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. 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.Content>
     <PageLayout.Pane position="start" padding="normal" divider="line" sticky={args.sticky}>
       <Box sx={{display: 'grid', gap: 3}}>
-        {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.
-          </Box>
-        ))}
+        {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">
diff --git a/src/PageLayout/interaction.stories.tsx b/src/PageLayout/interaction.stories.tsx
new file mode 100644
index 00000000000..30e89e3a2bf
--- /dev/null
+++ b/src/PageLayout/interaction.stories.tsx
@@ -0,0 +1,399 @@
+import {Meta} from '@storybook/react'
+import {StickyPane} from './PageLayout.stories'
+import {within} from '@storybook/testing-library'
+import {expect} from '@storybook/jest'
+
+const meta: Meta = {
+  title: 'Layout/PageLayout/interactions',
+  // component: PageLayout,
+  parameters: {
+    layout: 'fullscreen',
+    controls: {expanded: true}
+  },
+  argTypes: {
+    // Debug controls
+    'Render header?': {
+      type: 'boolean',
+      defaultValue: true,
+      table: {category: 'Debug'}
+    },
+    'Render pane?': {
+      type: 'boolean',
+      defaultValue: true,
+      table: {category: 'Debug'}
+    },
+    'Render footer?': {
+      type: 'boolean',
+      defaultValue: true,
+      table: {category: 'Debug'}
+    },
+    'Header placeholder height': {
+      type: 'number',
+      defaultValue: 64,
+      table: {category: 'Debug'}
+    },
+    'Pane placeholder height': {
+      type: 'number',
+      defaultValue: 200,
+      table: {category: 'Debug'}
+    },
+    'Content placeholder height': {
+      type: 'number',
+      defaultValue: 400,
+      table: {category: 'Debug'}
+    },
+    'Footer placeholder height': {
+      type: 'number',
+      defaultValue: 64,
+      table: {category: 'Debug'}
+    },
+
+    // PageLayout prop controls
+    containerWidth: {
+      type: {
+        name: 'enum',
+        value: ['full', 'medium', 'large', 'xlarge']
+      },
+      defaultValue: 'xlarge',
+      control: {type: 'radio'},
+      table: {category: 'PageLayout props'}
+    },
+    padding: {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'normal',
+      control: {type: 'radio'},
+      table: {category: 'PageLayout props'}
+    },
+    rowGap: {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'normal',
+      control: {type: 'radio'},
+      table: {category: 'PageLayout props'}
+    },
+    columnGap: {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'normal',
+      control: {type: 'radio'},
+      table: {category: 'PageLayout props'}
+    },
+
+    // Header prop controls
+    'Header.divider.regular': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Header props'
+      }
+    },
+    'Header.divider.narrow': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line', 'filled']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Header props'
+      }
+    },
+    'Header.divider.wide': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Header props'
+      }
+    },
+    'Header.padding': {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Header props'}
+    },
+    'Header.hidden.regular': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Header props'}
+    },
+    'Header.hidden.narrow': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Header props'}
+    },
+    'Header.hidden.wide': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Header props'}
+    },
+
+    // Content prop controls
+    'Content.width': {
+      type: {
+        name: 'enum',
+        value: ['full', 'medium', 'large', 'xlarge']
+      },
+      defaultValue: 'full',
+      control: {type: 'radio'},
+      table: {category: 'Content props'}
+    },
+    'Content.padding': {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Content props'}
+    },
+    'Content.hidden.regular': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Content props'}
+    },
+    'Content.hidden.narrow': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Content props'}
+    },
+    'Content.hidden.wide': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Content props'}
+    },
+
+    // Pane prop controls
+    'Pane.position.regular': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end']
+      },
+      defaultValue: 'end',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.position.narrow': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end']
+      },
+      defaultValue: 'end',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.position.wide': {
+      type: {
+        name: 'enum',
+        value: ['start', 'end']
+      },
+      defaultValue: 'end',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.width': {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large']
+      },
+      defaultValue: 'medium',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.sticky': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Pane props'}
+    },
+    'Pane.padding': {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.divider.regular': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.divider.narrow': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line', 'filled']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+    'Pane.divider.wide': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Pane props'}
+    },
+
+    // Footer prop controls
+    'Footer.divider.regular': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Footer props'
+      }
+    },
+    'Footer.divider.narrow': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line', 'filled']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Footer props'
+      }
+    },
+    'Footer.divider.wide': {
+      type: {
+        name: 'enum',
+        value: ['none', 'line']
+      },
+      defaultValue: 'none',
+      control: {
+        type: 'radio'
+      },
+      table: {
+        category: 'Footer props'
+      }
+    },
+    'Footer.padding': {
+      type: {
+        name: 'enum',
+        value: ['none', 'condensed', 'normal']
+      },
+      defaultValue: 'none',
+      control: {type: 'radio'},
+      table: {category: 'Footer props'}
+    },
+    'Footer.hidden.regular': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Footer props'}
+    },
+    'Footer.hidden.narrow': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Footer props'}
+    },
+    'Footer.hidden.wide': {
+      type: 'boolean',
+      defaultValue: false,
+      table: {category: 'Footer props'}
+    }
+  }
+}
+
+StickyPane.argTypes = {
+  sticky: {
+    type: 'boolean',
+    defaultValue: true
+  },
+  numParagraphsInPane: {
+    type: 'number',
+    defaultValue: 3
+  },
+  numParagraphsInContent: {
+    type: 'number',
+    defaultValue: 30
+  }
+}
+
+const isInViewPort = (boundingRect: {top: number; left: number; right: number; bottom: number}) => {
+  return (
+    boundingRect.top >= 0 &&
+    boundingRect.left >= 0 &&
+    boundingRect.right <= document.documentElement.clientWidth &&
+    boundingRect.bottom <= document.documentElement.clientHeight
+  )
+}
+
+StickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
+  const canvas = within(canvasElement)
+  const content3 = await canvas.getByTestId('content3')
+  content3.scrollIntoView()
+  const paragraph0 = await canvas.getByTestId('paragraph0')
+  const paragraphRect = paragraph0.getBoundingClientRect()
+  expect(isInViewPort(paragraphRect)).toBe(true)
+  const paragraph2 = await canvas.getByTestId('paragraph2')
+  const paragraphRect2 = paragraph2.getBoundingClientRect()
+  expect(isInViewPort(paragraphRect2)).toBe(false)
+}
+
+const NonStickyPane = StickyPane.bind({})
+NonStickyPane.argTypes = {
+  sticky: {
+    type: 'boolean',
+    defaultValue: false
+  },
+  numParagraphsInPane: {
+    type: 'number',
+    defaultValue: 6
+  },
+  numParagraphsInContent: {
+    type: 'number',
+    defaultValue: 30
+  }
+}
+
+NonStickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
+  const canvas = within(canvasElement)
+  const content3 = await canvas.getByTestId('content3')
+  content3.scrollIntoView()
+  const paragraph0 = await canvas.getByTestId('paragraph0')
+  const paragraphRect = paragraph0.getBoundingClientRect()
+  expect(isInViewPort(paragraphRect)).toBe(false)
+  const paragraph2 = await canvas.getByTestId('paragraph2')
+  const paragraphRect2 = paragraph2.getBoundingClientRect()
+  expect(isInViewPort(paragraphRect2)).toBe(true)
+}
+export default meta
+export {StickyPane, NonStickyPane}

From 67c5a223f4b6f12f05714ace41e336ff57671ba4 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 16 Aug 2022 14:35:25 +1000
Subject: [PATCH 24/25] Maybe add a wait

---
 src/PageLayout/interaction.stories.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/PageLayout/interaction.stories.tsx b/src/PageLayout/interaction.stories.tsx
index 30e89e3a2bf..7dd65676bae 100644
--- a/src/PageLayout/interaction.stories.tsx
+++ b/src/PageLayout/interaction.stories.tsx
@@ -359,6 +359,8 @@ const isInViewPort = (boundingRect: {top: number; left: number; right: number; b
 StickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
   const canvas = within(canvasElement)
   const content3 = await canvas.getByTestId('content3')
+  // Trying to see if waiting for a bit makes the test more obvious
+  await new Promise(r => setTimeout(r, 1000))
   content3.scrollIntoView()
   const paragraph0 = await canvas.getByTestId('paragraph0')
   const paragraphRect = paragraph0.getBoundingClientRect()
@@ -387,6 +389,7 @@ NonStickyPane.argTypes = {
 NonStickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
   const canvas = within(canvasElement)
   const content3 = await canvas.getByTestId('content3')
+  await new Promise(r => setTimeout(r, 1000))
   content3.scrollIntoView()
   const paragraph0 = await canvas.getByTestId('paragraph0')
   const paragraphRect = paragraph0.getBoundingClientRect()

From 4d75e24a6c2f2e8f4a9a85961477d87fa80566c2 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 16 Aug 2022 19:07:32 +1000
Subject: [PATCH 25/25] Remove wait times

---
 src/PageLayout/interaction.stories.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/PageLayout/interaction.stories.tsx b/src/PageLayout/interaction.stories.tsx
index 7dd65676bae..30e89e3a2bf 100644
--- a/src/PageLayout/interaction.stories.tsx
+++ b/src/PageLayout/interaction.stories.tsx
@@ -359,8 +359,6 @@ const isInViewPort = (boundingRect: {top: number; left: number; right: number; b
 StickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
   const canvas = within(canvasElement)
   const content3 = await canvas.getByTestId('content3')
-  // Trying to see if waiting for a bit makes the test more obvious
-  await new Promise(r => setTimeout(r, 1000))
   content3.scrollIntoView()
   const paragraph0 = await canvas.getByTestId('paragraph0')
   const paragraphRect = paragraph0.getBoundingClientRect()
@@ -389,7 +387,6 @@ NonStickyPane.argTypes = {
 NonStickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
   const canvas = within(canvasElement)
   const content3 = await canvas.getByTestId('content3')
-  await new Promise(r => setTimeout(r, 1000))
   content3.scrollIntoView()
   const paragraph0 = await canvas.getByTestId('paragraph0')
   const paragraphRect = paragraph0.getBoundingClientRect()