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

Revert #3389 (PageLayout.Pane: Undo deprecation for position prop) #3589

Merged
merged 9 commits into from
Aug 4, 2023
Merged

Revert #3389 (PageLayout.Pane: Undo deprecation for position prop) #3589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
96a0537
Revert 57c4bdf
siddharthkp Aug 4, 2023
33371ea
Create nervous-dolls-dream.md
siddharthkp Aug 4, 2023
6b57ec1
Update nervous-dolls-dream.md
siddharthkp Aug 4, 2023
5790b5d
Revert "fix(PageLayout): Remove `warning` for the deprecated `positio…
siddharthkp Aug 4, 2023
adee9ec
linter caught a bad merge!
siddharthkp Aug 4, 2023
021b73b
Remove reverted changeset
siddharthkp Aug 4, 2023
1c6cf2f
copy old test
siddharthkp Aug 4, 2023
b12ddce
Merge branch 'revert-3389' of github.com:primer/react into revert-3389
siddharthkp Aug 4, 2023
3c49ffd
Update nervous-dolls-dream.md
siddharthkp Aug 4, 2023
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
8 changes: 8 additions & 0 deletions .changeset/nervous-dolls-dream.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@primer/react": patch
---

- PageLayout: Undo deprecation of `position` prop for PageLayout.Pane (Revert primer/react#3389)
- SplitPageLayout: Undo deprecation of `position` prop for SplitPageLayout.Pane (Revert primer/react#3389)

<!-- Changed components: PageLayout, SplitPageLayout -->
20 changes: 10 additions & 10 deletions docs/content/PageLayout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
<PageLayout.Header>
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Pane>
<Placeholder label="Pane" height={120} />
</PageLayout.Pane>
<PageLayout.Content>
<Placeholder label="Content" height={240} />
</PageLayout.Content>
<PageLayout.Pane position="start">
<Placeholder label="Pane" height={120} />
</PageLayout.Pane>
<PageLayout.Footer>
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
Expand All @@ -106,12 +106,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
<PageLayout.Header>
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Pane hidden={{narrow: true}}>
<Placeholder label="Pane" height={120} />
</PageLayout.Pane>
<PageLayout.Content>
<Placeholder label="Content" height={240} />
</PageLayout.Content>
<PageLayout.Pane position="start" hidden={{narrow: true}}>
<Placeholder label="Pane" height={120} />
</PageLayout.Pane>
<PageLayout.Footer>
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
Expand Down Expand Up @@ -193,12 +193,12 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along
Custom sticky header
</Box>
<PageLayout>
<PageLayout.Pane sticky offsetHeader={64}>
<Placeholder label="Pane" height={120} />
</PageLayout.Pane>
<PageLayout.Content>
<Placeholder label="Content" height={320} />
</PageLayout.Content>
<PageLayout.Pane position="start" sticky offsetHeader={64}>
<Placeholder label="Pane" height={120} />
</PageLayout.Pane>
<PageLayout.Footer>
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
Expand All @@ -221,7 +221,7 @@ navigation container is used for.
<PageLayout.Header>
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Pane aria-label="Secondary navigation">
<PageLayout.Pane position="start" aria-label="Secondary navigation">
<NavList>
<NavList.Item href="/" aria-current="page">
Home
Expand Down
2 changes: 1 addition & 1 deletion docs/content/SplitPageLayout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
<SplitPageLayout.Content>
<Placeholder label="Content" height={420} />
</SplitPageLayout.Content>
<SplitPageLayout.Pane>
<SplitPageLayout.Pane position="end">
<Placeholder label="Pane" height={120} />
</SplitPageLayout.Pane>
<SplitPageLayout.Footer>
Expand Down
3 changes: 1 addition & 2 deletions src/PageLayout/PageLayout.docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,7 @@
"name": "position",
"type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
"defaultValue": "'end'",
"description": "Use source order instead of relying on the `position` prop",
"deprecated": true
"description": ""
},
{
"name": "positionWhenNarrow",
Expand Down
96 changes: 55 additions & 41 deletions src/PageLayout/PageLayout.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,42 +83,49 @@ export const StickyPane: Story = args => (
<PageLayout.Header padding="normal" divider="line">
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Pane resizable padding="normal" divider="line" sticky={args.sticky} aria-label="Side pane">
<PageLayout.Content padding="normal" width="large">
<Box sx={{display: 'grid', gap: 3}}>
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
const testId = `paragraph${i}`
{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.
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.Pane>
<PageLayout.Content padding="normal" width="large">
</PageLayout.Content>
<PageLayout.Pane
position="start"
resizable
padding="normal"
divider="line"
sticky={args.sticky}
aria-label="Side pane"
>
<Box sx={{display: 'grid', gap: 3}}>
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
const testId = `content${i}`
{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. 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.
massa purus.
</span>
</Box>
)
})}
</Box>
</PageLayout.Content>
</PageLayout.Pane>
<PageLayout.Footer padding="normal" divider="line">
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
Expand Down Expand Up @@ -151,32 +158,32 @@ export const NestedScrollContainer: Story = args => (
<PageLayout.Header padding="normal" divider="line">
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Pane padding="normal" divider="line" sticky aria-label="Side pane">
<PageLayout.Content padding="normal" width="large">
<Box sx={{display: 'grid', gap: 3}}>
{Array.from({length: args.numParagraphsInPane}).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 felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
massa purus.
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.Pane>
<PageLayout.Content padding="normal" width="large">
</PageLayout.Content>
<PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Side pane">
<Box sx={{display: 'grid', gap: 3}}>
{Array.from({length: args.numParagraphsInContent}).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 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.
massa purus.
</Box>
))}
</Box>
</PageLayout.Content>
</PageLayout.Pane>
<PageLayout.Footer padding="normal" divider="line">
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
Expand Down Expand Up @@ -221,23 +228,6 @@ export const CustomStickyHeader: Story = args => (
Custom sticky header
</Box>
<PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
<PageLayout.Pane padding="normal" divider="line" aria-label="Aside pane" sticky offsetHeader={args.offsetHeader}>
<Box sx={{display: 'grid', gap: 3}}>
{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.Content padding="normal" width="large">
<Box sx={{display: 'grid', gap: 3}} data-testid="scrollContainer">
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
Expand All @@ -258,6 +248,30 @@ export const CustomStickyHeader: Story = args => (
})}
</Box>
</PageLayout.Content>
<PageLayout.Pane
position="start"
padding="normal"
divider="line"
aria-label="Aside pane"
sticky
offsetHeader={args.offsetHeader}
>
<Box sx={{display: 'grid', gap: 3}}>
{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">
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
Expand Down Expand Up @@ -292,7 +306,7 @@ export const ResizablePane: Story = () => (
<PageLayout.Header>
<Placeholder height={64} label="Header" />
</PageLayout.Header>
<PageLayout.Pane resizable>
<PageLayout.Pane resizable position="start">
<Placeholder height={320} label="Pane" />
</PageLayout.Pane>
<PageLayout.Content>
Expand All @@ -309,7 +323,7 @@ export const ScrollContainerWithinPageLayoutPane: Story = () => (
<Box sx={{overflow: 'auto'}}>
<Placeholder label="Above inner scroll container" height={120} />
<PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
<PageLayout.Pane padding="normal" divider="line" sticky aria-label="Sticky pane">
<PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Sticky pane">
<Box sx={{overflow: 'auto'}}>
<PageLayout.Pane padding="normal">
<Placeholder label="Inner scroll container" height={800} />
Expand Down
33 changes: 33 additions & 0 deletions src/PageLayout/PageLayout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ const meta: Meta = {
'Content.hidden.regular': false,
'Content.hidden.narrow': false,
'Content.hidden.wide': false,
'Pane.position.regular': 'end',
'Pane.position.narrow': 'end',
'Pane.position.wide': 'end',
'Pane.width': 'medium',
'Pane.sticky': false,
'Pane.resizable': false,
Expand Down Expand Up @@ -202,6 +205,31 @@ const meta: Meta = {
table: {category: 'Content props'},
},

// Pane prop controls
'Pane.position.regular': {
type: {
name: 'enum',
value: ['start', 'end'],
},
control: {type: 'radio'},
table: {category: 'Pane props'},
},
'Pane.position.narrow': {
type: {
name: 'enum',
value: ['start', 'end'],
},
control: {type: 'radio'},
table: {category: 'Pane props'},
},
'Pane.position.wide': {
type: {
name: 'enum',
value: ['start', 'end'],
},
control: {type: 'radio'},
table: {category: 'Pane props'},
},
'Pane.width': {
type: {
name: 'enum',
Expand Down Expand Up @@ -354,6 +382,11 @@ const Template: Story = args => (
</PageLayout.Content>
{args['Render pane?'] ? (
<PageLayout.Pane
position={{
narrow: args['Pane.position.narrow'],
regular: args['Pane.position.regular'],
wide: args['Pane.position.wide'],
}}
width={args['Pane.width']}
minWidth={args['Pane.minWidth']}
sticky={args['Pane.sticky']}
Expand Down
4 changes: 2 additions & 2 deletions src/PageLayout/PageLayout.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ describe('PageLayout', () => {
<PageLayout.Header divider="line" dividerWhenNarrow="filled">
Header
</PageLayout.Header>
<PageLayout.Pane divider="line" dividerWhenNarrow="filled">
<PageLayout.Content>Content</PageLayout.Content>
<PageLayout.Pane position="start" divider="line" dividerWhenNarrow="filled">
Pane
</PageLayout.Pane>
<PageLayout.Content>Content</PageLayout.Content>
<PageLayout.Footer dividerWhenNarrow="line">Footer</PageLayout.Footer>
</PageLayout>
</ThemeProvider>,
Expand Down
Loading