Skip to content
This repository was archived by the owner on Apr 5, 2022. It is now read-only.

Commit 3a8c198

Browse files
nicolasfontnicolasfont
committed
Add size aliases docs
1 parent e71b5b6 commit 3a8c198

1 file changed

Lines changed: 91 additions & 30 deletions

File tree

  • packages/visual-stack-docs/src/containers/Components/Docs

‎packages/visual-stack-docs/src/containers/Components/Docs/box.js‎

Lines changed: 91 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ export default () => {
4040
<Tr>
4141
<Th>Name</Th>
4242
<Th>Description</Th>
43-
<Th>Values</Th>
44-
<Th>Default</Th>
43+
<Th>Type</Th>
44+
<Th>Default Value</Th>
4545
</Tr>
4646
</THead>
4747
<TBody>
@@ -53,20 +53,14 @@ export default () => {
5353
<Td>"column" | "row"</Td>
5454
<Td>"column"</Td>
5555
</Tr>
56-
<Tr>
57-
<Td>border</Td>
58-
<Td>Adds a border around the box.</Td>
59-
<Td>true | false</Td>
60-
<Td>false</Td>
61-
</Tr>
6256
<Tr>
6357
<Td>gap</Td>
6458
<Td>Adds spacing between the children.</Td>
6559
<Td>
66-
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
67-
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
60+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
61+
"4xl"
6862
</Td>
69-
<Td>unset</Td>
63+
<Td></Td>
7064
</Tr>
7165
<Tr>
7266
<Td>align</Td>
@@ -75,7 +69,7 @@ export default () => {
7569
the direction).
7670
</Td>
7771
<Td>"start" | "center" | "end"</Td>
78-
<Td>unset</Td>
72+
<Td></Td>
7973
</Tr>
8074
<Tr>
8175
<Td>justify</Td>
@@ -86,61 +80,67 @@ export default () => {
8680
"start" | "center" | "end" | "space-around" |
8781
"space-between" | "space-evenly"
8882
</Td>
89-
<Td>unset</Td>
83+
<Td></Td>
9084
</Tr>
9185
<Tr>
9286
<Td>padding</Td>
9387
<Td>Adds padding inside the box.</Td>
9488
<Td>
95-
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
96-
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
89+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
90+
"4xl"
9791
</Td>
98-
<Td>unset</Td>
92+
<Td></Td>
9993
</Tr>
10094
<Tr>
10195
<Td>paddingTop</Td>
10296
<Td>Adds padding-top inside the box.</Td>
10397
<Td>
104-
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
105-
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
98+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
99+
"4xl"
106100
</Td>
107-
<Td>unset</Td>
101+
<Td></Td>
108102
</Tr>
109103
<Tr>
110104
<Td>paddingBottom</Td>
111105
<Td>Adds padding-bottom inside the box.</Td>
112106
<Td>
113-
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
114-
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
107+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
108+
"4xl"
115109
</Td>
116-
<Td>unset</Td>
110+
<Td></Td>
117111
</Tr>
118112
<Tr>
119113
<Td>paddingLeft</Td>
120114
<Td>Adds padding-left inside the box.</Td>
121115
<Td>
122-
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
123-
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
116+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
117+
"4xl"
124118
</Td>
125-
<Td>unset</Td>
119+
<Td></Td>
126120
</Tr>
127121
<Tr>
128122
<Td>paddingRight</Td>
129123
<Td>Adds padding-right inside the box.</Td>
130124
<Td>
131-
"small" (4px) | "medium" (8px) | "large" (16px) | "xl"
132-
(24px) | "2xl" (32px) | "3xl" (40px) | "4xl" (48px)
125+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
126+
"4xl"
133127
</Td>
134-
<Td>unset</Td>
128+
<Td></Td>
129+
</Tr>
130+
<Tr>
131+
<Td>border</Td>
132+
<Td>Adds a border around the box.</Td>
133+
<Td>Boolean</Td>
134+
<Td></Td>
135135
</Tr>
136136
<Tr>
137137
<Td>expand</Td>
138138
<Td>
139139
Expands the box along the main axis (direction axis) to
140140
fill available space. (Sets flex to 1.)
141141
</Td>
142-
<Td>true | false</Td>
143-
<Td>false</Td>
142+
<Td>Boolean</Td>
143+
<Td></Td>
144144
</Tr>
145145
</TBody>
146146
</Table>
@@ -152,6 +152,67 @@ export default () => {
152152
</Text>
153153
</Box>
154154

155+
<Box gap="large">
156+
<Text type="h4">Size Aliases</Text>
157+
<Text>
158+
Props with size values like padding and gap use a set of
159+
standardized string aliases instead of number values. This is
160+
so that we have a predefined standard scaling system. They
161+
work in increments of 8px, e.g. "medium" is 8px, "large" is
162+
16px, and so on. Here's the full set and the equivalent px
163+
values:
164+
</Text>
165+
166+
<Box direction="row">
167+
<Box>
168+
<Box padding="small">
169+
<Text type="light">"small"</Text>
170+
</Box>
171+
<Box padding="small">
172+
<Text type="light">"medium"</Text>
173+
</Box>
174+
<Box padding="small">
175+
<Text type="light">"large"</Text>
176+
</Box>
177+
<Box padding="small">
178+
<Text type="light">"xl"</Text>
179+
</Box>
180+
<Box padding="small">
181+
<Text type="light">"2xl"</Text>
182+
</Box>
183+
<Box padding="small">
184+
<Text type="light">"3xl"</Text>
185+
</Box>
186+
<Box padding="small">
187+
<Text type="light">"4xl"</Text>
188+
</Box>
189+
</Box>
190+
<Box>
191+
<Box padding="small">
192+
<Text type="light">4px</Text>
193+
</Box>
194+
<Box padding="small">
195+
<Text type="light">8px</Text>
196+
</Box>
197+
<Box padding="small">
198+
<Text type="light">16px</Text>
199+
</Box>
200+
<Box padding="small">
201+
<Text type="light">24px</Text>
202+
</Box>
203+
<Box padding="small">
204+
<Text type="light">32px</Text>
205+
</Box>
206+
<Box padding="small">
207+
<Text type="light">40px</Text>
208+
</Box>
209+
<Box padding="small">
210+
<Text type="light">48px</Text>
211+
</Box>
212+
</Box>
213+
</Box>
214+
</Box>
215+
155216
<Box gap="large">
156217
<Text type="h4">A confirmation dialog</Text>
157218
{/* s2:start */}

0 commit comments

Comments
 (0)