@@ -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 } />
0 commit comments