Skip to content

Commit 53ef8ea

Browse files
hectahertzhectahertz
authored
Switch to a CSS based solution for the PageLayout sticky pane (#6050)
1 parent cf97cb5 commit 53ef8ea

File tree

6 files changed

+13
-184
lines changed

6 files changed

+13
-184
lines changed

‎.changeset/warm-seals-obey.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": minor
3+
---
4+
5+
Switch to a CSS based solution for the PageLayout sticky pane

‎packages/react/src/PageLayout/PageLayout.module.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ body[data-page-layout-dragging='true'] * {
5555
--spacing-column: 0;
5656
--spacing-divider: 0;
5757
--offset-header: 0;
58-
--sticky-pane-height: 0;
5958
--pane-width: 0;
6059
--pane-min-width: 0;
6160
--pane-max-width: 0;
@@ -250,7 +249,7 @@ body[data-page-layout-dragging='true'] * {
250249
position: sticky;
251250
/* stylelint-disable-next-line primer/spacing */
252251
top: var(--offset-header);
253-
max-height: var(--sticky-pane-height);
252+
max-height: 100vh;
254253
}
255254

256255
&:where([data-position='end']) {

‎packages/react/src/PageLayout/PageLayout.tsx

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import type {SxProp} from '../sx'
1010
import {canUseDOM} from '../utils/environment'
1111
import {useOverflow} from '../hooks/useOverflow'
1212
import {warning} from '../utils/warning'
13-
import {useStickyPaneHeight} from './useStickyPaneHeight'
1413

1514
import classes from './PageLayout.module.css'
1615
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
@@ -34,10 +33,6 @@ const PageLayoutContext = React.createContext<{
3433
rowGap: keyof typeof SPACING_MAP
3534
columnGap: keyof typeof SPACING_MAP
3635
paneRef: React.RefObject<HTMLDivElement>
37-
enableStickyPane?: (top: number | string) => void
38-
disableStickyPane?: () => void
39-
contentTopRef?: (node?: Element | null | undefined) => void
40-
contentBottomRef?: (node?: Element | null | undefined) => void
4136
}>({
4237
padding: 'normal',
4338
rowGap: 'normal',
@@ -81,9 +76,6 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
8176
style,
8277
_slotsConfig: slotsConfig,
8378
}) => {
84-
const {rootRef, enableStickyPane, disableStickyPane, contentTopRef, contentBottomRef, stickyPaneHeight} =
85-
useStickyPaneHeight()
86-
8779
const paneRef = useRef<HTMLDivElement>(null)
8880

8981
const [slots, rest] = useSlots(children, slotsConfig ?? {header: Header, footer: Footer})
@@ -93,21 +85,15 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
9385
padding,
9486
rowGap,
9587
columnGap,
96-
enableStickyPane,
97-
disableStickyPane,
98-
contentTopRef,
99-
contentBottomRef,
10088
paneRef,
10189
}
102-
}, [padding, rowGap, columnGap, enableStickyPane, disableStickyPane, contentTopRef, contentBottomRef, paneRef])
90+
}, [padding, rowGap, columnGap, paneRef])
10391

10492
return (
10593
<PageLayoutContext.Provider value={memoizedContextValue}>
10694
<BoxWithFallback
107-
ref={rootRef}
10895
style={
10996
{
110-
'--sticky-pane-height': stickyPaneHeight,
11197
'--spacing': `var(--spacing-${padding})`,
11298
...style,
11399
} as React.CSSProperties
@@ -478,7 +464,6 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
478464
style,
479465
}) => {
480466
const isHidden = useResponsiveValue(hidden, false)
481-
const {contentTopRef, contentBottomRef} = React.useContext(PageLayoutContext)
482467

483468
return (
484469
<BoxWithFallback
@@ -490,9 +475,6 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
490475
className={clsx(classes.ContentWrapper, className)}
491476
data-is-hidden={isHidden}
492477
>
493-
{/* Track the top of the content region so we can calculate the height of the pane region */}
494-
<div ref={contentTopRef} />
495-
496478
<div
497479
className={classes.Content}
498480
data-width={width}
@@ -504,9 +486,6 @@ const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
504486
>
505487
{children}
506488
</div>
507-
508-
{/* Track the bottom of the content region so we can calculate the height of the pane region */}
509-
<div ref={contentBottomRef} />
510489
</BoxWithFallback>
511490
)
512491
}
@@ -641,15 +620,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
641620

642621
const isHidden = useResponsiveValue(responsiveHidden, false)
643622

644-
const {rowGap, columnGap, enableStickyPane, disableStickyPane, paneRef} = React.useContext(PageLayoutContext)
645-
646-
React.useEffect(() => {
647-
if (sticky) {
648-
enableStickyPane?.(offsetHeader)
649-
} else {
650-
disableStickyPane?.()
651-
}
652-
}, [sticky, enableStickyPane, disableStickyPane, offsetHeader])
623+
const {rowGap, columnGap, paneRef} = React.useContext(PageLayoutContext)
653624

654625
const getDefaultPaneWidth = (width: PaneWidth | CustomWidthOptions): number => {
655626
if (isPaneWidth(width)) {

‎packages/react/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`PageLayout renders condensed layout 1`] = `
44
<div>
55
<div
66
class="PageLayoutRoot"
7-
style="--sticky-pane-height: 100vh; --spacing: var(--spacing-condensed);"
7+
style="--spacing: var(--spacing-condensed);"
88
>
99
<div
1010
class="PageLayoutWrapper"
@@ -33,15 +33,13 @@ exports[`PageLayout renders condensed layout 1`] = `
3333
class="ContentWrapper"
3434
data-is-hidden="false"
3535
>
36-
<div />
3736
<div
3837
class="Content"
3938
data-width="full"
4039
style="--spacing: var(--spacing-none);"
4140
>
4241
Content
4342
</div>
44-
<div />
4543
</main>
4644
<div
4745
class="PaneWrapper"
@@ -94,7 +92,7 @@ exports[`PageLayout renders default layout 1`] = `
9492
<div>
9593
<div
9694
class="PageLayoutRoot"
97-
style="--sticky-pane-height: 100vh; --spacing: var(--spacing-normal);"
95+
style="--spacing: var(--spacing-normal);"
9896
>
9997
<div
10098
class="PageLayoutWrapper"
@@ -123,15 +121,13 @@ exports[`PageLayout renders default layout 1`] = `
123121
class="ContentWrapper"
124122
data-is-hidden="false"
125123
>
126-
<div />
127124
<div
128125
class="Content"
129126
data-width="full"
130127
style="--spacing: var(--spacing-none);"
131128
>
132129
Content
133130
</div>
134-
<div />
135131
</main>
136132
<div
137133
class="PaneWrapper"
@@ -184,7 +180,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
184180
<div>
185181
<div
186182
class="PageLayoutRoot"
187-
style="--sticky-pane-height: 100vh; --spacing: var(--spacing-normal);"
183+
style="--spacing: var(--spacing-normal);"
188184
>
189185
<div
190186
class="PageLayoutWrapper"
@@ -213,15 +209,13 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
213209
class="ContentWrapper"
214210
data-is-hidden="false"
215211
>
216-
<div />
217212
<div
218213
class="Content"
219214
data-width="full"
220215
style="--spacing: var(--spacing-none);"
221216
>
222217
Content
223218
</div>
224-
<div />
225219
</main>
226220
<div
227221
class="PaneWrapper"
@@ -274,7 +268,7 @@ exports[`PageLayout renders with dividers 1`] = `
274268
<div>
275269
<div
276270
class="PageLayoutRoot"
277-
style="--sticky-pane-height: 100vh; --spacing: var(--spacing-normal);"
271+
style="--spacing: var(--spacing-normal);"
278272
>
279273
<div
280274
class="PageLayoutWrapper"
@@ -303,15 +297,13 @@ exports[`PageLayout renders with dividers 1`] = `
303297
class="ContentWrapper"
304298
data-is-hidden="false"
305299
>
306-
<div />
307300
<div
308301
class="Content"
309302
data-width="full"
310303
style="--spacing: var(--spacing-none);"
311304
>
312305
Content
313306
</div>
314-
<div />
315307
</main>
316308
<div
317309
class="PaneWrapper"

‎packages/react/src/PageLayout/useStickyPaneHeight.ts

Lines changed: 0 additions & 136 deletions
This file was deleted.

‎packages/react/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
44
<div>
55
<div
66
class="PageLayoutRoot"
7-
style="--sticky-pane-height: 100vh; --spacing: var(--spacing-none);"
7+
style="--spacing: var(--spacing-none);"
88
>
99
<div
1010
class="PageLayoutWrapper"
@@ -33,15 +33,13 @@ exports[`SplitPageLayout renders default layout 1`] = `
3333
class="ContentWrapper"
3434
data-is-hidden="false"
3535
>
36-
<div />
3736
<div
3837
class="Content"
3938
data-width="large"
4039
style="--spacing: var(--spacing-normal);"
4140
>
4241
Content
4342
</div>
44-
<div />
4543
</main>
4644
<div
4745
class="PaneWrapper"

0 commit comments

Comments
 (0)