Skip to content

Commit 222fb7d

Browse files
siddharthkpsiddharthkp
authored
Revert "Revert #3389 (PageLayout.Pane: Undo deprecation for position prop) (#3589)"
This reverts commit d598a53.
1 parent e87c723 commit 222fb7d

11 files changed

+344
-394
lines changed

‎docs/content/PageLayout.mdx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
8787
<PageLayout.Header>
8888
<Placeholder label="Header" height={64} />
8989
</PageLayout.Header>
90+
<PageLayout.Pane>
91+
<Placeholder label="Pane" height={120} />
92+
</PageLayout.Pane>
9093
<PageLayout.Content>
9194
<Placeholder label="Content" height={240} />
9295
</PageLayout.Content>
93-
<PageLayout.Pane position="start">
94-
<Placeholder label="Pane" height={120} />
95-
</PageLayout.Pane>
9696
<PageLayout.Footer>
9797
<Placeholder label="Footer" height={64} />
9898
</PageLayout.Footer>
@@ -106,12 +106,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
106106
<PageLayout.Header>
107107
<Placeholder label="Header" height={64} />
108108
</PageLayout.Header>
109+
<PageLayout.Pane hidden={{narrow: true}}>
110+
<Placeholder label="Pane" height={120} />
111+
</PageLayout.Pane>
109112
<PageLayout.Content>
110113
<Placeholder label="Content" height={240} />
111114
</PageLayout.Content>
112-
<PageLayout.Pane position="start" hidden={{narrow: true}}>
113-
<Placeholder label="Pane" height={120} />
114-
</PageLayout.Pane>
115115
<PageLayout.Footer>
116116
<Placeholder label="Footer" height={64} />
117117
</PageLayout.Footer>
@@ -193,12 +193,12 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along
193193
Custom sticky header
194194
</Box>
195195
<PageLayout>
196+
<PageLayout.Pane sticky offsetHeader={64}>
197+
<Placeholder label="Pane" height={120} />
198+
</PageLayout.Pane>
196199
<PageLayout.Content>
197200
<Placeholder label="Content" height={320} />
198201
</PageLayout.Content>
199-
<PageLayout.Pane position="start" sticky offsetHeader={64}>
200-
<Placeholder label="Pane" height={120} />
201-
</PageLayout.Pane>
202202
<PageLayout.Footer>
203203
<Placeholder label="Footer" height={64} />
204204
</PageLayout.Footer>
@@ -221,7 +221,7 @@ navigation container is used for.
221221
<PageLayout.Header>
222222
<Placeholder label="Header" height={64} />
223223
</PageLayout.Header>
224-
<PageLayout.Pane position="start" aria-label="Secondary navigation">
224+
<PageLayout.Pane aria-label="Secondary navigation">
225225
<NavList>
226226
<NavList.Item href="/" aria-current="page">
227227
Home

‎docs/content/SplitPageLayout.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
167167
<SplitPageLayout.Content>
168168
<Placeholder label="Content" height={420} />
169169
</SplitPageLayout.Content>
170-
<SplitPageLayout.Pane position="end">
170+
<SplitPageLayout.Pane>
171171
<Placeholder label="Pane" height={120} />
172172
</SplitPageLayout.Pane>
173173
<SplitPageLayout.Footer>

‎src/PageLayout/PageLayout.docs.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,8 @@
137137
"name": "position",
138138
"type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
139139
"defaultValue": "'end'",
140-
"description": ""
140+
"description": "Use source order instead of relying on the `position` prop",
141+
"deprecated": true
141142
},
142143
{
143144
"name": "positionWhenNarrow",

‎src/PageLayout/PageLayout.features.stories.tsx

Lines changed: 41 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -83,49 +83,42 @@ export const StickyPane: Story = args => (
8383
<PageLayout.Header padding="normal" divider="line">
8484
<Placeholder label="Header" height={64} />
8585
</PageLayout.Header>
86-
<PageLayout.Content padding="normal" width="large">
86+
<PageLayout.Pane resizable padding="normal" divider="line" sticky={args.sticky} aria-label="Side pane">
8787
<Box sx={{display: 'grid', gap: 3}}>
88-
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
89-
const testId = `content${i}`
88+
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
89+
const testId = `paragraph${i}`
9090
return (
9191
<Box key={i} as="p" sx={{margin: 0}}>
9292
<span data-testid={testId}>
9393
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
9494
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
9595
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
96-
massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
97-
in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
98-
nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
96+
massa purus.
9997
</span>
10098
</Box>
10199
)
102100
})}
103101
</Box>
104-
</PageLayout.Content>
105-
<PageLayout.Pane
106-
position="start"
107-
resizable
108-
padding="normal"
109-
divider="line"
110-
sticky={args.sticky}
111-
aria-label="Side pane"
112-
>
102+
</PageLayout.Pane>
103+
<PageLayout.Content padding="normal" width="large">
113104
<Box sx={{display: 'grid', gap: 3}}>
114-
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
115-
const testId = `paragraph${i}`
105+
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
106+
const testId = `content${i}`
116107
return (
117108
<Box key={i} as="p" sx={{margin: 0}}>
118109
<span data-testid={testId}>
119110
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
120111
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
121112
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
122-
massa purus.
113+
massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
114+
in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
115+
nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
123116
</span>
124117
</Box>
125118
)
126119
})}
127120
</Box>
128-
</PageLayout.Pane>
121+
</PageLayout.Content>
129122
<PageLayout.Footer padding="normal" divider="line">
130123
<Placeholder label="Footer" height={64} />
131124
</PageLayout.Footer>
@@ -158,32 +151,32 @@ export const NestedScrollContainer: Story = args => (
158151
<PageLayout.Header padding="normal" divider="line">
159152
<Placeholder label="Header" height={64} />
160153
</PageLayout.Header>
161-
<PageLayout.Content padding="normal" width="large">
154+
<PageLayout.Pane padding="normal" divider="line" sticky aria-label="Side pane">
162155
<Box sx={{display: 'grid', gap: 3}}>
163-
{Array.from({length: args.numParagraphsInContent}).map((_, i) => (
156+
{Array.from({length: args.numParagraphsInPane}).map((_, i) => (
164157
<Box key={i} as="p" sx={{margin: 0}}>
165158
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
166159
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
167160
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
168-
massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
169-
in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
170-
nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
161+
massa purus.
171162
</Box>
172163
))}
173164
</Box>
174-
</PageLayout.Content>
175-
<PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Side pane">
165+
</PageLayout.Pane>
166+
<PageLayout.Content padding="normal" width="large">
176167
<Box sx={{display: 'grid', gap: 3}}>
177-
{Array.from({length: args.numParagraphsInPane}).map((_, i) => (
168+
{Array.from({length: args.numParagraphsInContent}).map((_, i) => (
178169
<Box key={i} as="p" sx={{margin: 0}}>
179170
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
180171
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
181172
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
182-
massa purus.
173+
massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
174+
in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
175+
nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
183176
</Box>
184177
))}
185178
</Box>
186-
</PageLayout.Pane>
179+
</PageLayout.Content>
187180
<PageLayout.Footer padding="normal" divider="line">
188181
<Placeholder label="Footer" height={64} />
189182
</PageLayout.Footer>
@@ -228,6 +221,23 @@ export const CustomStickyHeader: Story = args => (
228221
Custom sticky header
229222
</Box>
230223
<PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
224+
<PageLayout.Pane padding="normal" divider="line" aria-label="Aside pane" sticky offsetHeader={args.offsetHeader}>
225+
<Box sx={{display: 'grid', gap: 3}}>
226+
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
227+
const testId = `paragraph${i}`
228+
return (
229+
<Box key={i} as="p" sx={{margin: 0}}>
230+
<span data-testid={testId}>
231+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
232+
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
233+
tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
234+
sit amet massa purus.
235+
</span>
236+
</Box>
237+
)
238+
})}
239+
</Box>
240+
</PageLayout.Pane>
231241
<PageLayout.Content padding="normal" width="large">
232242
<Box sx={{display: 'grid', gap: 3}} data-testid="scrollContainer">
233243
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
@@ -248,30 +258,6 @@ export const CustomStickyHeader: Story = args => (
248258
})}
249259
</Box>
250260
</PageLayout.Content>
251-
<PageLayout.Pane
252-
position="start"
253-
padding="normal"
254-
divider="line"
255-
aria-label="Aside pane"
256-
sticky
257-
offsetHeader={args.offsetHeader}
258-
>
259-
<Box sx={{display: 'grid', gap: 3}}>
260-
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
261-
const testId = `paragraph${i}`
262-
return (
263-
<Box key={i} as="p" sx={{margin: 0}}>
264-
<span data-testid={testId}>
265-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
266-
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
267-
tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
268-
sit amet massa purus.
269-
</span>
270-
</Box>
271-
)
272-
})}
273-
</Box>
274-
</PageLayout.Pane>
275261
<PageLayout.Footer padding="normal" divider="line">
276262
<Placeholder label="Footer" height={64} />
277263
</PageLayout.Footer>
@@ -306,7 +292,7 @@ export const ResizablePane: Story = () => (
306292
<PageLayout.Header>
307293
<Placeholder height={64} label="Header" />
308294
</PageLayout.Header>
309-
<PageLayout.Pane resizable position="start">
295+
<PageLayout.Pane resizable>
310296
<Placeholder height={320} label="Pane" />
311297
</PageLayout.Pane>
312298
<PageLayout.Content>
@@ -323,7 +309,7 @@ export const ScrollContainerWithinPageLayoutPane: Story = () => (
323309
<Box sx={{overflow: 'auto'}}>
324310
<Placeholder label="Above inner scroll container" height={120} />
325311
<PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
326-
<PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Sticky pane">
312+
<PageLayout.Pane padding="normal" divider="line" sticky aria-label="Sticky pane">
327313
<Box sx={{overflow: 'auto'}}>
328314
<PageLayout.Pane padding="normal">
329315
<Placeholder label="Inner scroll container" height={800} />

‎src/PageLayout/PageLayout.stories.tsx

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,6 @@ const meta: Meta = {
3434
'Content.hidden.regular': false,
3535
'Content.hidden.narrow': false,
3636
'Content.hidden.wide': false,
37-
'Pane.position.regular': 'end',
38-
'Pane.position.narrow': 'end',
39-
'Pane.position.wide': 'end',
4037
'Pane.width': 'medium',
4138
'Pane.sticky': false,
4239
'Pane.resizable': false,
@@ -205,31 +202,6 @@ const meta: Meta = {
205202
table: {category: 'Content props'},
206203
},
207204

208-
// Pane prop controls
209-
'Pane.position.regular': {
210-
type: {
211-
name: 'enum',
212-
value: ['start', 'end'],
213-
},
214-
control: {type: 'radio'},
215-
table: {category: 'Pane props'},
216-
},
217-
'Pane.position.narrow': {
218-
type: {
219-
name: 'enum',
220-
value: ['start', 'end'],
221-
},
222-
control: {type: 'radio'},
223-
table: {category: 'Pane props'},
224-
},
225-
'Pane.position.wide': {
226-
type: {
227-
name: 'enum',
228-
value: ['start', 'end'],
229-
},
230-
control: {type: 'radio'},
231-
table: {category: 'Pane props'},
232-
},
233205
'Pane.width': {
234206
type: {
235207
name: 'enum',
@@ -382,11 +354,6 @@ const Template: Story = args => (
382354
</PageLayout.Content>
383355
{args['Render pane?'] ? (
384356
<PageLayout.Pane
385-
position={{
386-
narrow: args['Pane.position.narrow'],
387-
regular: args['Pane.position.regular'],
388-
wide: args['Pane.position.wide'],
389-
}}
390357
width={args['Pane.width']}
391358
minWidth={args['Pane.minWidth']}
392359
sticky={args['Pane.sticky']}

‎src/PageLayout/PageLayout.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,10 @@ describe('PageLayout', () => {
5353
<PageLayout.Header divider="line" dividerWhenNarrow="filled">
5454
Header
5555
</PageLayout.Header>
56-
<PageLayout.Content>Content</PageLayout.Content>
57-
<PageLayout.Pane position="start" divider="line" dividerWhenNarrow="filled">
56+
<PageLayout.Pane divider="line" dividerWhenNarrow="filled">
5857
Pane
5958
</PageLayout.Pane>
59+
<PageLayout.Content>Content</PageLayout.Content>
6060
<PageLayout.Footer dividerWhenNarrow="line">Footer</PageLayout.Footer>
6161
</PageLayout>
6262
</ThemeProvider>,

0 commit comments

Comments
 (0)