Rename stickyTop->offsetHeader and improve docs (#2262)

* rename stickyTop->offsetTop and improve docs

* add live to jsx

* add changeset

* Some formatting

* stickyTop prop name update goes as minor as no usage

* rename offsetTop->offsetHeader

* update stickyTop arg name to offsetHeader

* add to content to trigger new scnapshot generate from chromatic

Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

Author: 3 people

.changeset/rich-singers-double.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Rename `stickyTop` prop name for the PageLayout to `offsetHeader` and improve docs

docs/content/PageLayout.mdx

@@ -170,6 +170,8 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
 
 ### With a custom sticky header
 
+Add `offsetHeader` prop to specify the height of the custom sticky header along with `sticky` prop
+
 ```jsx live
 <Box sx={{height: 320, overflowY: 'auto', border: '1px solid', borderColor: 'border.default'}}>
   <Box
@@ -190,7 +192,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
     <PageLayout.Content>
       <Placeholder label="Content" height={320} />
     </PageLayout.Content>
-    <PageLayout.Pane position="start" stickyTop={64} sticky>
+    <PageLayout.Pane position="start" sticky offsetHeader={64}>
       <Placeholder label="Pane" height={120} />
     </PageLayout.Pane>
     <PageLayout.Footer>
@@ -469,10 +471,10 @@ On macOS, you can open the VoiceOver rotor by pressing `VO-U`. You can navigate
     description="Whether the pane should stick to the top of the screen while the content scrolls."
   />
   <PropsTableRow
-    name="stickyTop"
+    name="offsetHeader"
     type="number | string"
     defaultValue="0"
-    description="Use stickyTop to push the sticky pane down to make room for a sticky header if necessary. Use the type `string` to specify the height with a unit i.e. 5rem; otherwise the type `number` will be taken as px."
+    description="Use offsetHeader along with the sticky prop to push the sticky pane down to make room for a sticky header if necessary. Use the type `string` to specify the height with a unit i.e. 5rem; otherwise the type `number` will be taken as px."
   />
   <PropsTableRow
     name="padding"

docs/content/SplitPageLayout.mdx

@@ -253,7 +253,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
     <SplitPageLayout.Content>
       <Placeholder label="Content" height={320} />
     </SplitPageLayout.Content>
-    <SplitPageLayout.Pane stickyTop={64}>
+    <SplitPageLayout.Pane sticky offsetHeader={64}>
       <Placeholder label="Pane" height={120} />
     </SplitPageLayout.Pane>
     <SplitPageLayout.Footer>
@@ -383,10 +383,10 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
     description="Whether the pane should stick to the top of the screen while the content scrolls."
   />
   <PropsTableRow
-    name="stickyTop"
+    name="offsetHeader"
     type="number | string"
     defaultValue="0"
-    description="Use stickyTop to push the sticky pane down to make room for a sticky header if necessary. Use the type `string` to specify the height with a unit i.e. 5rem; otherwise the type `number` will be taken as px."
+    description="Use offsetHeader along with the sticky prop to push the sticky pane down to make room for a sticky header if necessary. Use the type `string` to specify the height with a unit i.e. 5rem; otherwise the type `number` will be taken as px."
   />
   <PropsTableRow
     name="padding"

src/PageLayout/PageLayout.stories.tsx

@@ -606,7 +606,7 @@ export const CustomStickyHeader: Story = args => (
       sx={{
         position: 'sticky',
         top: 0,
-        height: args.stickyTop,
+        height: args.offsetHeader,
         display: 'grid',
         placeItems: 'center',
         backgroundColor: 'canvas.subtle',
@@ -624,20 +624,20 @@ export const CustomStickyHeader: Story = args => (
             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.
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae orci et magna consectetur
+                  ullamcorper eget ac purus. 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 stickyTop={args.stickyTop}>
+      <PageLayout.Pane position="start" padding="normal" divider="line" sticky offsetHeader={args.offsetHeader}>
         <Box sx={{display: 'grid', gap: 3}}>
           {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
             const testId = `paragraph${i}`
@@ -666,7 +666,7 @@ CustomStickyHeader.argTypes = {
     type: 'boolean',
     defaultValue: true
   },
-  stickyTop: {
+  offsetHeader: {
     type: 'string',
     defaultValue: '8rem'
   },

src/PageLayout/PageLayout.tsx

@@ -388,7 +388,7 @@ export type PageLayoutPaneProps = {
    */
   dividerWhenNarrow?: 'inherit' | 'none' | 'line' | 'filled'
   sticky?: boolean
-  stickyTop?: string | number
+  offsetHeader?: string | number
   hidden?: boolean | ResponsiveValue<boolean>
 } & SxProp
 
@@ -411,7 +411,7 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
   divider: responsiveDivider = 'none',
   dividerWhenNarrow = 'inherit',
   sticky = false,
-  stickyTop = 0,
+  offsetHeader = 0,
   hidden: responsiveHidden = false,
   children,
   sx = {}
@@ -438,11 +438,11 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
 
   React.useEffect(() => {
     if (sticky) {
-      enableStickyPane?.(stickyTop)
+      enableStickyPane?.(offsetHeader)
     } else {
       disableStickyPane?.()
     }
-  }, [sticky, enableStickyPane, disableStickyPane, stickyTop])
+  }, [sticky, enableStickyPane, disableStickyPane, offsetHeader])
 
   return (
     <Box
@@ -466,9 +466,9 @@ const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
               ...(sticky
                 ? {
                     position: 'sticky',
-                    // If stickyTop has value, it will stick the pane to the position where the sticky top ends
-                    // else top will be 0 as the default value of stickyTop
-                    top: typeof stickyTop === 'number' ? `${stickyTop}px` : stickyTop,
+                    // If offsetHeader has value, it will stick the pane to the position where the sticky top ends
+                    // else top will be 0 as the default value of offsetHeader
+                    top: typeof offsetHeader === 'number' ? `${offsetHeader}px` : offsetHeader,
                     overflow: 'hidden',
                     maxHeight: 'var(--sticky-pane-height)'
                   }

src/PageLayout/interaction.stories.tsx

@@ -395,7 +395,7 @@ CustomStickyHeader.argTypes = {
     type: 'boolean',
     defaultValue: true
   },
-  stickyTop: {
+  offsetHeader: {
     type: 'string',
     defaultValue: '8rem'
   },

src/PageLayout/useStickyPaneHeight.ts

@@ -10,7 +10,7 @@ export function useStickyPaneHeight() {
 
   // Default the height to the viewport height
   const [height, setHeight] = React.useState('100vh')
-  const [stickyTop, setStickyTop] = React.useState<number | string>(0)
+  const [offsetHeader, setOffsetHeader] = React.useState<number | string>(0)
 
   // Create intersection observers to track the top and bottom of the content region
   const [contentTopRef, contentTopInView, contentTopEntry] = useInView()
@@ -29,15 +29,16 @@ export function useStickyPaneHeight() {
     const topRect = contentTopEntry?.target.getBoundingClientRect()
     const bottomRect = contentBottomEntry?.target.getBoundingClientRect()
 
-    const stickyTopWithUnits = typeof stickyTop === 'number' ? `${stickyTop}px` : stickyTop
+    // Custom sticky header's height with units
+    const offsetHeaderWithUnits = typeof offsetHeader === 'number' ? `${offsetHeader}px` : offsetHeader
 
     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 = `calc(${scrollRect.height}px - (max(${topOffset}px, ${stickyTopWithUnits}) + ${bottomOffset}px))`
+      calculatedHeight = `calc(${scrollRect.height}px - (max(${topOffset}px, ${offsetHeaderWithUnits}) + ${bottomOffset}px))`
     } else {
       const topOffset = topRect ? Math.max(topRect.top, 0) : 0
       const bottomOffset = bottomRect ? Math.max(window.innerHeight - bottomRect.bottom, 0) : 0
@@ -46,11 +47,11 @@ export function useStickyPaneHeight() {
       // 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 - (max(${topOffset}px, ${stickyTopWithUnits}) + ${bottomOffset}px - ${overflowScroll}px))`
+      calculatedHeight = `calc(100vh - (max(${topOffset}px, ${offsetHeaderWithUnits}) + ${bottomOffset}px - ${overflowScroll}px))`
     }
 
     setHeight(calculatedHeight)
-  }, [contentTopEntry, contentBottomEntry, stickyTop])
+  }, [contentTopEntry, contentBottomEntry, offsetHeader])
 
   // 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
@@ -92,7 +93,7 @@ export function useStickyPaneHeight() {
 
   function enableStickyPane(top: string | number) {
     setIsEnabled(true)
-    setStickyTop(top)
+    setOffsetHeader(top)
   }
 
   function disableStickyPane() {