Skip to content

Commit 9299d23

Browse files
colebemisvdepizzol
colebemis
and
vdepizzol
authored
SplitPageLayout API (#2144)
* Draft SplitPageLayout API docs * Update docs/content/SplitPageLayout.mdx Co-authored-by: Vinicius Depizzol <[email protected]> * Update docs/content/SplitPageLayout.mdx * visible -> hidden prop Co-authored-by: Vinicius Depizzol <[email protected]>
1 parent 2a7c254 commit 9299d23

File tree

1 file changed

+313
-0
lines changed

1 file changed

+313
-0
lines changed

‎docs/content/SplitPageLayout.mdx‎

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
1+
---
2+
title: SplitPageLayout
3+
componentId: split_page_layout
4+
status: Draft
5+
description: Provides structure for a split page layout, including independent scrolling for the pane and content regions. Useful for responsive list/detail patterns, when an item in the pane updates the page content on selection.
6+
---
7+
8+
<Note variant="warning">Not implemented yet</Note>
9+
10+
## Examples
11+
12+
### Default
13+
14+
```jsx
15+
<SplitPageLayout>
16+
<SplitPageLayout.Header>
17+
<Placeholder label="Header" height={64} />
18+
</SplitPageLayout.Header>
19+
<SplitPageLayout.Pane>
20+
<Placeholder label="Pane" height={120} />
21+
</SplitPageLayout.Pane>
22+
<SplitPageLayout.Content>
23+
<Placeholder label="Content" height={240} />
24+
</SplitPageLayout.Content>
25+
<SplitPageLayout.Footer>
26+
<Placeholder label="Footer" height={64} />
27+
</SplitPageLayout.Footer>
28+
</SplitPageLayout>
29+
```
30+
31+
### With pane hidden on narrow viewports
32+
33+
```jsx
34+
<SplitPageLayout>
35+
<SplitPageLayout.Header>
36+
<Placeholder label="Header" height={64} />
37+
</SplitPageLayout.Header>
38+
<SplitPageLayout.Pane hidden={{narrow: true}}>
39+
<Placeholder label="Pane" height={120} />
40+
</SplitPageLayout.Pane>
41+
<SplitPageLayout.Content>
42+
<Placeholder label="Content" height={240} />
43+
</SplitPageLayout.Content>
44+
<SplitPageLayout.Footer>
45+
<Placeholder label="Footer" height={64} />
46+
</SplitPageLayout.Footer>
47+
</SplitPageLayout>
48+
```
49+
50+
### With content hidden on narrow viewports
51+
52+
```jsx
53+
<SplitPageLayout>
54+
<SplitPageLayout.Header>
55+
<Placeholder label="Header" height={64} />
56+
</SplitPageLayout.Header>
57+
<SplitPageLayout.Pane>
58+
<Placeholder label="Pane" height={120} />
59+
</SplitPageLayout.Pane>
60+
<SplitPageLayout.Content hidden={{narrow: true}}>
61+
<Placeholder label="Content" height={240} />
62+
</SplitPageLayout.Content>
63+
<SplitPageLayout.Footer>
64+
<Placeholder label="Footer" height={64} />
65+
</SplitPageLayout.Footer>
66+
</SplitPageLayout>
67+
```
68+
69+
### Without dividers
70+
71+
```jsx
72+
<SplitPageLayout>
73+
<SplitPageLayout.Header divider="none">
74+
<Placeholder label="Header" height={64} />
75+
</SplitPageLayout.Header>
76+
<SplitPageLayout.Pane divider="none">
77+
<Placeholder label="Pane" height={120} />
78+
</SplitPageLayout.Pane>
79+
<SplitPageLayout.Content>
80+
<Placeholder label="Content" height={240} />
81+
</SplitPageLayout.Content>
82+
<SplitPageLayout.Footer divider="none">
83+
<Placeholder label="Footer" height={64} />
84+
</SplitPageLayout.Footer>
85+
</SplitPageLayout>
86+
```
87+
88+
### With pane on right
89+
90+
```jsx
91+
<SplitPageLayout>
92+
<SplitPageLayout.Header>
93+
<Placeholder label="Header" height={64} />
94+
</SplitPageLayout.Header>
95+
<SplitPageLayout.Content>
96+
<Placeholder label="Content" height={240} />
97+
</SplitPageLayout.Content>
98+
<SplitPageLayout.Pane position="end">
99+
<Placeholder label="Pane" height={120} />
100+
</SplitPageLayout.Pane>
101+
<SplitPageLayout.Footer>
102+
<Placeholder label="Footer" height={64} />
103+
</SplitPageLayout.Footer>
104+
</SplitPageLayout>
105+
```
106+
107+
### Without padding
108+
109+
```jsx
110+
<SplitPageLayout>
111+
<SplitPageLayout.Header padding="none">
112+
<Placeholder label="Header" height={64} />
113+
</SplitPageLayout.Header>
114+
<SplitPageLayout.Pane padding="none">
115+
<Placeholder label="Pane" height={120} />
116+
</SplitPageLayout.Pane>
117+
<SplitPageLayout.Content padding="none">
118+
<Placeholder label="Content" height={240} />
119+
</SplitPageLayout.Content>
120+
<SplitPageLayout.Footer padding="none">
121+
<Placeholder label="Footer" height={64} />
122+
</SplitPageLayout.Footer>
123+
</SplitPageLayout>
124+
```
125+
126+
### Without header or footer
127+
128+
```jsx
129+
<SplitPageLayout>
130+
<SplitPageLayout.Pane>
131+
<Placeholder label="Pane" height={120} />
132+
</SplitPageLayout.Pane>
133+
<SplitPageLayout.Content>
134+
<Placeholder label="Content" height={240} />
135+
</SplitPageLayout.Content>
136+
</SplitPageLayout>
137+
```
138+
139+
### With non-sticky pane
140+
141+
```jsx
142+
<SplitPageLayout>
143+
<SplitPageLayout.Header>
144+
<Placeholder label="Header" height={64} />
145+
</SplitPageLayout.Header>
146+
<SplitPageLayout.Pane sticky={false}>
147+
<Placeholder label="Pane" height={120} />
148+
</SplitPageLayout.Pane>
149+
<SplitPageLayout.Content>
150+
<Placeholder label="Content" height={240} />
151+
</SplitPageLayout.Content>
152+
<SplitPageLayout.Footer>
153+
<Placeholder label="Footer" height={64} />
154+
</SplitPageLayout.Footer>
155+
</SplitPageLayout>
156+
```
157+
158+
## Props
159+
160+
### SplitPageLayout
161+
162+
<PropsTable>
163+
<PropsTableSxRow />
164+
</PropsTable>
165+
166+
### SplitPageLayout.Header
167+
168+
<PropsTable>
169+
<PropsTableRow
170+
name="divider"
171+
// TODO: Document ResponsiveValue
172+
// This prop accepts a viewport range map (i.e. {regular: ..., narrow: ...}) in addition to a single value.
173+
// The `regular` and `wide` keys of the viewport range map can be 'none' or 'line'.
174+
// The `narrow` key of the viewport range map can be 'none' or 'line' or 'filled'.
175+
type={`ResponsiveValue<
176+
'none' | 'line',
177+
'none' | 'line' | 'filled'
178+
>`}
179+
defaultValue="'line'"
180+
/>
181+
<PropsTableRow
182+
name="hidden"
183+
type={`ResponsiveValue<boolean>`}
184+
defaultValue="false"
185+
description="Whether the header is hidden."
186+
/>
187+
<PropsTableRow
188+
name="padding"
189+
type={`| 'none'
190+
| 'normal'
191+
| 'condensed'`}
192+
defaultValue="'normal'"
193+
/>
194+
<PropsTableSxRow />
195+
</PropsTable>
196+
197+
### SplitPageLayout.Content
198+
199+
<PropsTable>
200+
<PropsTableRow
201+
name="width"
202+
type={`| 'full'
203+
| 'medium'
204+
| 'large'
205+
| 'xlarge'`}
206+
defaultValue="'xlarge'"
207+
description="The maximum width of the content region."
208+
/>
209+
<PropsTableRow
210+
name="hidden"
211+
type={`ResponsiveValue<boolean>`}
212+
defaultValue="false"
213+
description="Whether the content is hidden."
214+
/>
215+
<PropsTableRow
216+
name="padding"
217+
type={`| 'none'
218+
| 'normal'
219+
| 'condensed'`}
220+
defaultValue="'normal'"
221+
/>
222+
<PropsTableSxRow />
223+
</PropsTable>
224+
225+
### SplitPageLayout.Pane
226+
227+
<PropsTable>
228+
<PropsTableRow
229+
name="position"
230+
type={`ResponsiveValue<
231+
'start' | 'end'
232+
>`}
233+
defaultValue="'start'"
234+
/>
235+
<PropsTableRow
236+
name="width"
237+
type={`| 'small'
238+
| 'medium'
239+
| 'large'`}
240+
defaultValue="'medium'"
241+
description="The width of the pane."
242+
/>
243+
<PropsTableRow
244+
name="divider"
245+
type={`ResponsiveValue<
246+
'none' | 'line',
247+
'none' | 'line' | 'filled'
248+
>`}
249+
defaultValue="'line'"
250+
/>
251+
<PropsTableRow
252+
name="hidden"
253+
type={`ResponsiveValue<boolean>`}
254+
defaultValue="false"
255+
description="Whether the pane is hidden."
256+
/>
257+
<PropsTableRow
258+
name="padding"
259+
type={`| 'none'
260+
| 'normal'
261+
| 'condensed'`}
262+
defaultValue="'normal'"
263+
/>
264+
<PropsTableSxRow />
265+
</PropsTable>
266+
267+
### SplitPageLayout.Footer
268+
269+
<PropsTable>
270+
<PropsTableRow
271+
name="divider"
272+
type={`ResponsiveValue<
273+
'none' | 'line',
274+
'none' | 'line' | 'filled'
275+
>`}
276+
defaultValue="'line'"
277+
/>
278+
<PropsTableRow
279+
name="hidden"
280+
type={`ResponsiveValue<boolean>`}
281+
defaultValue="false"
282+
description="Whether the footer is hidden."
283+
/>
284+
<PropsTableRow
285+
name="padding"
286+
type={`| 'none'
287+
| 'normal'
288+
| 'condensed'`}
289+
defaultValue="'normal'"
290+
/>
291+
<PropsTableSxRow />
292+
</PropsTable>
293+
294+
## Status
295+
296+
<ComponentChecklist
297+
items={{
298+
propsDocumented: true,
299+
noUnnecessaryDeps: false,
300+
adaptsToThemes: false,
301+
adaptsToScreenSizes: false,
302+
fullTestCoverage: false,
303+
usedInProduction: false,
304+
usageExamplesDocumented: false,
305+
hasStorybookStories: false,
306+
designReviewed: false,
307+
a11yReviewed: false,
308+
stableApi: false,
309+
addressedApiFeedback: false,
310+
hasDesignGuidelines: false,
311+
hasFigmaComponent: false
312+
}}
313+
/>

0 commit comments

Comments
 (0)