Skip to content

Commit 7a68dd2

Browse files
mperrottimperrotti
committed
stubs out MDX docs, fixes responsive prop issues
1 parent 43f5742 commit 7a68dd2

File tree

3 files changed

+365
-23
lines changed

3 files changed

+365
-23
lines changed

‎docs/content/Stack.mdx‎

Lines changed: 335 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,335 @@
1+
---
2+
title: Stack
3+
status: Draft
4+
description: A Stack evenly spaces it's children vertically or horizontally.
5+
---
6+
7+
## Examples
8+
9+
### Simple
10+
11+
```jsx live drafts
12+
<Stack>
13+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
14+
One
15+
</Box>
16+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
17+
Two
18+
</Box>
19+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
20+
Three
21+
</Box>
22+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
23+
Four
24+
</Box>
25+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
26+
Five
27+
</Box>
28+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
29+
Six
30+
</Box>
31+
</Stack>
32+
```
33+
34+
### Inline flow
35+
36+
```jsx live drafts
37+
<Stack direction="inline">
38+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
39+
One
40+
</Box>
41+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
42+
Two
43+
</Box>
44+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
45+
Three
46+
</Box>
47+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
48+
Four
49+
</Box>
50+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
51+
Five
52+
</Box>
53+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
54+
Six
55+
</Box>
56+
</Stack>
57+
```
58+
59+
### Center aligned children
60+
61+
<Stack align="center">
62+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
63+
One
64+
</Box>
65+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
66+
Two
67+
</Box>
68+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
69+
Three
70+
</Box>
71+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
72+
Four
73+
</Box>
74+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
75+
Five
76+
</Box>
77+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
78+
Six
79+
</Box>
80+
</Stack>
81+
82+
### With dividers
83+
84+
<Stack showDivider>
85+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
86+
One
87+
</Box>
88+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
89+
Two
90+
</Box>
91+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
92+
Three
93+
</Box>
94+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
95+
Four
96+
</Box>
97+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
98+
Five
99+
</Box>
100+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
101+
Six
102+
</Box>
103+
</Stack>
104+
105+
### Inline flow with wrapping
106+
107+
<Stack direction="inline" wrap="wrap">
108+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
109+
One
110+
</Box>
111+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
112+
Two
113+
</Box>
114+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
115+
Three
116+
</Box>
117+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
118+
Four
119+
</Box>
120+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
121+
Five
122+
</Box>
123+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
124+
Six
125+
</Box>
126+
</Stack>
127+
128+
### Center alignment for wrapped items
129+
130+
<Stack align="start" alignWrap="center" direction="inline" wrap="wrap">
131+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
132+
One
133+
</Box>
134+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
135+
Two
136+
</Box>
137+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
138+
Three
139+
</Box>
140+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
141+
Four
142+
</Box>
143+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
144+
Five
145+
</Box>
146+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
147+
Six
148+
</Box>
149+
</Stack>
150+
151+
### Center-justified items
152+
153+
<Stack spread="center" direction="inline" wrap="wrap">
154+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
155+
One
156+
</Box>
157+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
158+
Two
159+
</Box>
160+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
161+
Three
162+
</Box>
163+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
164+
Four
165+
</Box>
166+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
167+
Five
168+
</Box>
169+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
170+
Six
171+
</Box>
172+
</Stack>
173+
174+
### Responsive prop values
175+
176+
Stack at `narrow`, inline at `regular`
177+
178+
<Stack direction={{narrow: 'inline'}}>
179+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
180+
One
181+
</Box>
182+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
183+
Two
184+
</Box>
185+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
186+
Three
187+
</Box>
188+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
189+
Four
190+
</Box>
191+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
192+
Five
193+
</Box>
194+
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
195+
Six
196+
</Box>
197+
</Stack>
198+
199+
## Props
200+
201+
### SegmentedControl
202+
203+
<PropsTable>
204+
<PropsTableRow
205+
name="align"
206+
type="'stretch' | 'start' | 'center' | 'end' | 'baseline' |
207+
{
208+
narrow: 'stretch' | 'start' | 'center' | 'end' | 'baseline',
209+
regular: 'stretch' | 'start' | 'center' | 'end' | 'baseline'
210+
}"
211+
defaultValue="'stretch'"
212+
description={
213+
<>
214+
<span>Sets the alignment between items in the cross-axis of the specified direction. For example:</span>
215+
<ul>
216+
<li>
217+
If `direction` is set to `block` (stacks vertically), it controls the horizontal alignment (left, center,
218+
right).
219+
</li>
220+
<li>
221+
If `direction` is set to `inline` (stacks horizontally), it controls the vertical alignment (top, center,
222+
bottom).
223+
</li>
224+
</ul>
225+
<div>This property behavior is equivalent to the `align-items` Flexbox property.</div>
226+
</>
227+
}
228+
/>
229+
<PropsTableRow
230+
name="alignWrap"
231+
type="'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly' |
232+
{
233+
narrow: 'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly',
234+
regular: 'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly'
235+
}"
236+
defaultValue="'start'"
237+
description="Sets how stack lines are distributed, if they `wrap` into multiple lines. This has equivalent behavior to the `align-content` Flexbox property."
238+
/>
239+
<PropsTableRow
240+
name="direction"
241+
type="'inline' | 'block' |
242+
{
243+
narrow: 'inline' | 'block',
244+
regular: 'inline' | 'block'
245+
}"
246+
defaultValue="'block'"
247+
description="Sets how elements inside `Stack` are placed, either horizontally (`inline`) or vertically (`block`). This property follows the writing mode."
248+
/>
249+
<PropsTableRow
250+
name="gap"
251+
type="'none' | 'condensed' | 'normal' | 'spacious' |
252+
{
253+
narrow: 'none' | 'condensed' | 'normal' | 'spacious',
254+
regular: 'none' | 'condensed' | 'normal' | 'spacious'
255+
}"
256+
defaultValue="'normal'"
257+
description={
258+
<div>
259+
<span>Sets the spacing gap between items. All sizes are rendered in `rem` units.</span>
260+
<ul>
261+
<li>'none': 0</li>
262+
<li>'condensed': 'var(--primer-stack-gap-condensed, 8px)',</li>
263+
<li>'normal': 'var(--primer-stack-gap-normal, 16px)' (default)</li>
264+
<li>
265+
'spacious': 'var(--primer-stack-gap-spacious, 24px)' (on regular viewports, otherwise it appears as 'normal'
266+
on narrow viewports)
267+
</li>
268+
<li>
269+
'custom': set a custom size. When using with a framework such as ViewComponent or React, a custom value can
270+
be passed directly to the property.
271+
</li>
272+
</ul>
273+
</div>
274+
}
275+
/>
276+
<PropsTableRow
277+
name="spread"
278+
type="'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly' |
279+
{
280+
narrow: 'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly',
281+
regular: 'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly'
282+
}"
283+
defaultValue="'start'"
284+
description="Sets how stack lines are distributed, if they `wrap` into multiple lines. This has equivalent behavior to the `align-content` Flexbox property."
285+
/>
286+
<PropsTableRow
287+
name="wrap"
288+
type="'wrap' | 'nowrap' |
289+
{
290+
narrow: 'wrap' | 'nowrap',
291+
regular: 'wrap' | 'nowrap'
292+
}"
293+
defaultValue="'nowrap'"
294+
description="Sets whether items are forced onto one line or can wrap onto multiple lines."
295+
/>
296+
<PropsTableRow
297+
name="showDivider"
298+
type="boolean |
299+
{
300+
narrow: boolean,
301+
regular: boolean
302+
}"
303+
defaultValue="'nowrap'"
304+
description={
305+
<>
306+
<div>Whether a divider between items is shown or not.</div>
307+
308+
<div>_Note: the presence of a divider duplicates the \`gap\` between items._</div>
309+
</>
310+
}
311+
312+
/>
313+
314+
</PropsTable>
315+
316+
## Status
317+
318+
<ComponentChecklist
319+
items={{
320+
propsDocumented: true,
321+
noUnnecessaryDeps: false,
322+
adaptsToThemes: false,
323+
adaptsToScreenSizes: false,
324+
fullTestCoverage: false,
325+
usedInProduction: false,
326+
usageExamplesDocumented: false,
327+
hasStorybookStories: false,
328+
designReviewed: false,
329+
a11yReviewed: false,
330+
stableApi: false,
331+
addressedApiFeedback: false,
332+
hasDesignGuidelines: false,
333+
hasFigmaComponent: false
334+
}}
335+
/>

‎src/Stack/Stack.stories.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ type Args = StackProps & {
1414
narrowSpread: StackProps['spread']
1515
narrowWrap: StackProps['wrap']
1616
gapCustom: string
17+
_height: string
18+
_width: string
1719
}
1820

1921
const StackChild: React.FC<{bgColor?: string; textColor?: string}> = ({bgColor, textColor, children}) => (
@@ -121,6 +123,8 @@ export default {
121123
}
122124
},
123125

126+
// Align
127+
124128
align: {
125129
options: ['stretch', 'start', 'center', 'end', 'baseline'],
126130
control: {
@@ -317,11 +321,12 @@ export const Default = ({
317321
? {narrow: narrowAlignWrap, regular: alignWrap}
318322
: alignWrap
319323
}
320-
direction={
321-
typeof narrowDirection === 'string' && typeof direction === 'string'
322-
? {narrow: narrowDirection, regular: direction}
323-
: direction
324-
}
324+
direction={{regular: 'inline'}}
325+
// direction={
326+
// typeof narrowDirection === 'string' && typeof direction === 'string'
327+
// ? {narrow: narrowDirection, regular: direction}
328+
// : direction
329+
// }
325330
// TODO: get rid of this type assertion
326331
gap={getGapProp() as ComponentProps<typeof Stack>['gap']}
327332
showDivider={

0 commit comments

Comments
 (0)