Skip to content

Commit 206ce7f

Browse files
joshblackjoshblack
committed
revert: restore original PageLayout behavior
1 parent eea2f26 commit 206ce7f

10 files changed

+381
-248
lines changed

‎src/NavList/NavList.stories.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const meta: Meta = {
1313

1414
export const Simple: Story = () => (
1515
<PageLayout>
16-
<PageLayout.Pane>
16+
<PageLayout.Pane position="start">
1717
<NavList>
1818
<NavList.Item href="#" aria-current="page">
1919
Item 1
@@ -28,7 +28,7 @@ export const Simple: Story = () => (
2828

2929
export const WithSubItems: Story = () => (
3030
<PageLayout>
31-
<PageLayout.Pane>
31+
<PageLayout.Pane position="start">
3232
<NavList>
3333
<NavList.Item href="#">Item 1</NavList.Item>
3434
<NavList.Item>
@@ -49,7 +49,7 @@ export const WithSubItems: Story = () => (
4949

5050
export const WithNestedSubItems: Story = () => (
5151
<PageLayout>
52-
<PageLayout.Pane>
52+
<PageLayout.Pane position="start">
5353
<NavList>
5454
<NavList.Item defaultOpen={true} href="#">
5555
Item 1
@@ -104,7 +104,7 @@ const ReactRouterLikeLink = React.forwardRef<HTMLAnchorElement, ReactRouterLikeL
104104

105105
export const WithReactRouterLink = () => (
106106
<PageLayout>
107-
<PageLayout.Pane>
107+
<PageLayout.Pane position="start">
108108
<NavList>
109109
<NavList.Item as={ReactRouterLikeLink} to="#" aria-current="page">
110110
Item 1
@@ -136,7 +136,7 @@ const NextJSLikeLink = React.forwardRef<HTMLAnchorElement, NextJSLinkProps>(
136136

137137
export const WithNextJSLink = () => (
138138
<PageLayout>
139-
<PageLayout.Pane>
139+
<PageLayout.Pane position="start">
140140
<NavList>
141141
<NextJSLikeLink href="#">
142142
<NavList.Item aria-current="page">Item 1</NavList.Item>
@@ -164,7 +164,7 @@ export const WithReloads: Story = () => {
164164
return (
165165
<>
166166
<PageLayout>
167-
<PageLayout.Pane>
167+
<PageLayout.Pane position="start">
168168
<NavList>
169169
<NavList.Item href={`${urlBase}&itemId=1`} aria-current={itemId === '1' ? 'page' : 'false'}>
170170
Item 1

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

Lines changed: 55 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -83,42 +83,49 @@ export const StickyPane: Story = args => (
8383
<PageLayout.Header padding="normal" divider="line">
8484
<Placeholder label="Header" height={64} />
8585
</PageLayout.Header>
86-
<PageLayout.Pane resizable padding="normal" divider="line" sticky={args.sticky} aria-label="Side pane">
86+
<PageLayout.Content padding="normal" width="large">
8787
<Box sx={{display: 'grid', gap: 3}}>
88-
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
89-
const testId = `paragraph${i}`
88+
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
89+
const testId = `content${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.
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.
9799
</span>
98100
</Box>
99101
)
100102
})}
101103
</Box>
102-
</PageLayout.Pane>
103-
<PageLayout.Content padding="normal" width="large">
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+
>
104113
<Box sx={{display: 'grid', gap: 3}}>
105-
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
106-
const testId = `content${i}`
114+
{Array.from({length: args.numParagraphsInPane}).map((_, i) => {
115+
const testId = `paragraph${i}`
107116
return (
108117
<Box key={i} as="p" sx={{margin: 0}}>
109118
<span data-testid={testId}>
110119
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
111120
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
112121
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
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.
122+
massa purus.
116123
</span>
117124
</Box>
118125
)
119126
})}
120127
</Box>
121-
</PageLayout.Content>
128+
</PageLayout.Pane>
122129
<PageLayout.Footer padding="normal" divider="line">
123130
<Placeholder label="Footer" height={64} />
124131
</PageLayout.Footer>
@@ -151,32 +158,32 @@ export const NestedScrollContainer: Story = args => (
151158
<PageLayout.Header padding="normal" divider="line">
152159
<Placeholder label="Header" height={64} />
153160
</PageLayout.Header>
154-
<PageLayout.Pane padding="normal" divider="line" sticky aria-label="Side pane">
161+
<PageLayout.Content padding="normal" width="large">
155162
<Box sx={{display: 'grid', gap: 3}}>
156-
{Array.from({length: args.numParagraphsInPane}).map((_, i) => (
163+
{Array.from({length: args.numParagraphsInContent}).map((_, i) => (
157164
<Box key={i} as="p" sx={{margin: 0}}>
158165
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
159166
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
160167
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
161-
massa purus.
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.
162171
</Box>
163172
))}
164173
</Box>
165-
</PageLayout.Pane>
166-
<PageLayout.Content padding="normal" width="large">
174+
</PageLayout.Content>
175+
<PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Side pane">
167176
<Box sx={{display: 'grid', gap: 3}}>
168-
{Array.from({length: args.numParagraphsInContent}).map((_, i) => (
177+
{Array.from({length: args.numParagraphsInPane}).map((_, i) => (
169178
<Box key={i} as="p" sx={{margin: 0}}>
170179
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
171180
ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
172181
et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
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.
182+
massa purus.
176183
</Box>
177184
))}
178185
</Box>
179-
</PageLayout.Content>
186+
</PageLayout.Pane>
180187
<PageLayout.Footer padding="normal" divider="line">
181188
<Placeholder label="Footer" height={64} />
182189
</PageLayout.Footer>
@@ -221,23 +228,6 @@ export const CustomStickyHeader: Story = args => (
221228
Custom sticky header
222229
</Box>
223230
<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>
241231
<PageLayout.Content padding="normal" width="large">
242232
<Box sx={{display: 'grid', gap: 3}} data-testid="scrollContainer">
243233
{Array.from({length: args.numParagraphsInContent}).map((_, i) => {
@@ -258,6 +248,30 @@ export const CustomStickyHeader: Story = args => (
258248
})}
259249
</Box>
260250
</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>
261275
<PageLayout.Footer padding="normal" divider="line">
262276
<Placeholder label="Footer" height={64} />
263277
</PageLayout.Footer>
@@ -292,7 +306,7 @@ export const ResizablePane: Story = () => (
292306
<PageLayout.Header>
293307
<Placeholder height={64} label="Header" />
294308
</PageLayout.Header>
295-
<PageLayout.Pane resizable>
309+
<PageLayout.Pane resizable position="start">
296310
<Placeholder height={320} label="Pane" />
297311
</PageLayout.Pane>
298312
<PageLayout.Content>
@@ -309,7 +323,7 @@ export const ScrollContainerWithinPageLayoutPane: Story = () => (
309323
<Box sx={{overflow: 'auto'}}>
310324
<Placeholder label="Above inner scroll container" height={120} />
311325
<PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
312-
<PageLayout.Pane padding="normal" divider="line" sticky aria-label="Sticky pane">
326+
<PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Sticky pane">
313327
<Box sx={{overflow: 'auto'}}>
314328
<PageLayout.Pane padding="normal">
315329
<Placeholder label="Inner scroll container" height={800} />

‎src/PageLayout/PageLayout.stories.tsx

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ 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',
3740
'Pane.width': 'medium',
3841
'Pane.sticky': false,
3942
'Pane.resizable': false,
@@ -203,6 +206,30 @@ const meta: Meta = {
203206
},
204207

205208
// 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+
},
206233
'Pane.width': {
207234
type: {
208235
name: 'enum',
@@ -342,8 +369,24 @@ const Template: Story = args => (
342369
<Placeholder height={args['Header placeholder height']} label="Header" />
343370
</PageLayout.Header>
344371
) : null}
372+
<PageLayout.Content
373+
width={args['Content.width']}
374+
padding={args['Content.padding']}
375+
hidden={{
376+
narrow: args['Content.hidden.narrow'],
377+
regular: args['Content.hidden.regular'],
378+
wide: args['Content.hidden.wide'],
379+
}}
380+
>
381+
<Placeholder height={args['Content placeholder height']} label="Content" />
382+
</PageLayout.Content>
345383
{args['Render pane?'] ? (
346384
<PageLayout.Pane
385+
position={{
386+
narrow: args['Pane.position.narrow'],
387+
regular: args['Pane.position.regular'],
388+
wide: args['Pane.position.wide'],
389+
}}
347390
width={args['Pane.width']}
348391
minWidth={args['Pane.minWidth']}
349392
sticky={args['Pane.sticky']}
@@ -363,17 +406,6 @@ const Template: Story = args => (
363406
<Placeholder height={args['Pane placeholder height']} label="Pane" />
364407
</PageLayout.Pane>
365408
) : null}
366-
<PageLayout.Content
367-
width={args['Content.width']}
368-
padding={args['Content.padding']}
369-
hidden={{
370-
narrow: args['Content.hidden.narrow'],
371-
regular: args['Content.hidden.regular'],
372-
wide: args['Content.hidden.wide'],
373-
}}
374-
>
375-
<Placeholder height={args['Content placeholder height']} label="Content" />
376-
</PageLayout.Content>
377409
{args['Render footer?'] ? (
378410
<PageLayout.Footer
379411
padding={args['Footer.padding']}

‎src/PageLayout/PageLayout.test.tsx

Lines changed: 3 additions & 3 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.Pane divider="line" dividerWhenNarrow="filled">
56+
<PageLayout.Content>Content</PageLayout.Content>
57+
<PageLayout.Pane position="start" divider="line" dividerWhenNarrow="filled">
5758
Pane
5859
</PageLayout.Pane>
59-
<PageLayout.Content>Content</PageLayout.Content>
6060
<PageLayout.Footer dividerWhenNarrow="line">Footer</PageLayout.Footer>
6161
</PageLayout>
6262
</ThemeProvider>,
@@ -70,7 +70,7 @@ describe('PageLayout', () => {
7070
<PageLayout>
7171
<PageLayout.Header>Header</PageLayout.Header>
7272
<PageLayout.Content>Content</PageLayout.Content>
73-
<PageLayout.Pane>Pane</PageLayout.Pane>
73+
<PageLayout.Pane positionWhenNarrow="start">Pane</PageLayout.Pane>
7474
<PageLayout.Footer>Footer</PageLayout.Footer>
7575
</PageLayout>
7676
</ThemeProvider>,

0 commit comments

Comments
 (0)