Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(PageLayout): update sticky layout #2326

Merged
merged 14 commits into from
Oct 12, 2022
Merged

refactor(PageLayout): update sticky layout #2326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c6d05c7
refactor(PageLayout): update sticky layout
joshblack Sep 12, 2022
2bdbf60
chore: add changeset
joshblack Sep 12, 2022
a3067cd
Merge branch 'main' of github.com:primer/react into update-sticky-pag…
joshblack Sep 14, 2022
3b81336
chore: update zIndex for Custom Sticky Header example
joshblack Sep 14, 2022
47ce757
Merge branch 'main' into update-sticky-page-layout
joshblack Sep 26, 2022
3637b87
Merge branch 'main' of github.com:primer/react into update-sticky-pag…
joshblack Oct 12, 2022
2c50412
chore: remove contentBottomEntry from useCallback
joshblack Oct 12, 2022
a351a66
chore: update lint warnings
joshblack Oct 12, 2022
cecb514
Update .changeset/six-bears-reply.md
joshblack Oct 12, 2022
08515f7
chore: update snapshots
joshblack Oct 12, 2022
44c487a
refactor: remove unnecessary order style
joshblack Oct 12, 2022
3665c1d
Merge branch 'main' into update-sticky-page-layout
joshblack Oct 12, 2022
b43a6fb
chore: update snapshots
joshblack Oct 12, 2022
96313cd
Merge branch 'update-sticky-page-layout' of github.com:primer/react i…
joshblack Oct 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/six-bears-reply.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

Update the sticky layout algorithm for PageLayout and PageLayout.Pane
3 changes: 2 additions & 1 deletion src/PageLayout/PageLayout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -621,7 +621,8 @@ export const CustomStickyHeader: Story = args => (
placeItems: 'center',
backgroundColor: 'canvas.subtle',
borderBottom: '1px solid',
borderColor: 'border.default'
borderColor: 'border.default',
zIndex: 100
}}
>
Custom sticky header
Expand Down
86 changes: 51 additions & 35 deletions src/PageLayout/PageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import {useStickyPaneHeight} from './useStickyPaneHeight'
import Box from '../Box'
import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
import {BetterSystemStyleObject, merge, SxProp} from '../sx'
import createSlots from '../utils/create-slots'

const {Slots, Slot} = createSlots(['Header', 'Footer'])

const REGION_ORDER = {
header: 0,
Expand Down Expand Up @@ -90,7 +93,17 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
flexWrap: 'wrap'
}}
>
{children}
<Slots>
{slots => {
return (
<>
{slots.Header}
<Box sx={{display: 'flex', flex: '1 1 100%', flexWrap: 'wrap'}}>{children}</Box>
{slots.Footer}
</>
)
}}
</Slots>
</Box>
</Box>
</PageLayoutContext.Provider>
Expand Down Expand Up @@ -245,23 +258,24 @@ const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
const isHidden = useResponsiveValue(hidden, false)
const {rowGap} = React.useContext(PageLayoutContext)
return (
<Box
as="header"
aria-label={label}
aria-labelledby={labelledBy}
hidden={isHidden}
sx={merge<BetterSystemStyleObject>(
{
order: REGION_ORDER.header,
width: '100%',
marginBottom: SPACING_MAP[rowGap]
},
sx
)}
>
<Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
<HorizontalDivider variant={dividerVariant} sx={{marginTop: SPACING_MAP[rowGap]}} />
</Box>
<Slot name="Header">
<Box
as="header"
aria-label={label}
aria-labelledby={labelledBy}
hidden={isHidden}
sx={merge<BetterSystemStyleObject>(
{
width: '100%',
marginBottom: SPACING_MAP[rowGap]
},
sx
)}
>
<Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
<HorizontalDivider variant={dividerVariant} sx={{marginTop: SPACING_MAP[rowGap]}} />
</Box>
</Slot>
)
}

Expand Down Expand Up @@ -558,23 +572,25 @@ const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
const isHidden = useResponsiveValue(hidden, false)
const {rowGap} = React.useContext(PageLayoutContext)
return (
<Box
as="footer"
aria-label={label}
aria-labelledby={labelledBy}
hidden={isHidden}
sx={merge<BetterSystemStyleObject>(
{
order: REGION_ORDER.footer,
width: '100%',
marginTop: SPACING_MAP[rowGap]
},
sx
)}
>
<HorizontalDivider variant={dividerVariant} sx={{marginBottom: SPACING_MAP[rowGap]}} />
<Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
</Box>
<Slot name="Footer">
<Box
as="footer"
aria-label={label}
aria-labelledby={labelledBy}
hidden={isHidden}
sx={merge<BetterSystemStyleObject>(
{
order: REGION_ORDER.footer,
width: '100%',
marginTop: SPACING_MAP[rowGap]
},
sx
)}
>
<HorizontalDivider variant={dividerVariant} sx={{marginBottom: SPACING_MAP[rowGap]}} />
<Box sx={{padding: SPACING_MAP[padding]}}>{children}</Box>
</Box>
</Slot>
)
}

Expand Down
Loading