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

Commit c95e287

Browse files
nicolasfontnicolasfont
committed
Use Text component and update size aliases docs
1 parent 5cb9f14 commit c95e287

1 file changed

Lines changed: 141 additions & 92 deletions

File tree

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

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

Lines changed: 141 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -40,108 +40,185 @@ export default () => {
4040
<Table>
4141
<THead>
4242
<Tr>
43-
<Th>Name</Th>
44-
<Th>Description</Th>
45-
<Th>Type</Th>
46-
<Th>Default Value</Th>
43+
<Th>
44+
<Text type="bold">Name</Text>
45+
</Th>
46+
<Th>
47+
<Text type="bold">Description</Text>
48+
</Th>
49+
<Th>
50+
<Text type="bold">Type</Text>
51+
</Th>
52+
<Th>
53+
<Text type="bold">Default Value</Text>
54+
</Th>
4755
</Tr>
4856
</THead>
4957
<TBody>
5058
<Tr>
51-
<Td>direction</Td>
5259
<Td>
53-
Sets the direction in which the children are laid out.
60+
<Text>direction</Text>
61+
</Td>
62+
<Td>
63+
<Text>
64+
Sets the direction in which the children are laid out.
65+
</Text>
66+
</Td>
67+
<Td>
68+
<Text>"column" | "row"</Text>
69+
</Td>
70+
<Td>
71+
<Text>"column"</Text>
5472
</Td>
55-
<Td>"column" | "row"</Td>
56-
<Td>"column"</Td>
5773
</Tr>
5874
<Tr>
59-
<Td>gap</Td>
60-
<Td>Adds spacing between the children.</Td>
6175
<Td>
62-
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
63-
"4xl"
76+
<Text>gap</Text>
77+
</Td>
78+
<Td>
79+
<Text>Adds spacing between the children.</Text>
80+
</Td>
81+
<Td>
82+
<Text>
83+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
84+
"4xl"
85+
</Text>
6486
</Td>
6587
<Td></Td>
6688
</Tr>
6789
<Tr>
68-
<Td>align</Td>
6990
<Td>
70-
Aligns children along the cross axis (perpendicular to
71-
the direction).
91+
<Text>align</Text>
92+
</Td>
93+
<Td>
94+
<Text>
95+
Aligns children along the cross axis (perpendicular to
96+
the direction).
97+
</Text>
98+
</Td>
99+
<Td>
100+
<Text>"start" | "center" | "end"</Text>
72101
</Td>
73-
<Td>"start" | "center" | "end"</Td>
74102
<Td></Td>
75103
</Tr>
76104
<Tr>
77-
<Td>justify</Td>
78105
<Td>
79-
Justifies children along the main axis (direction axis).
106+
<Text>justify</Text>
107+
</Td>
108+
<Td>
109+
<Text>
110+
Justifies children along the main axis (direction
111+
axis).
112+
</Text>
80113
</Td>
81114
<Td>
82-
"start" | "center" | "end" | "space-around" |
83-
"space-between" | "space-evenly"
115+
<Text>
116+
"start" | "center" | "end" | "space-around" |
117+
"space-between" | "space-evenly"
118+
</Text>
84119
</Td>
85120
<Td></Td>
86121
</Tr>
87122
<Tr>
88-
<Td>padding</Td>
89-
<Td>Adds padding inside the box.</Td>
90123
<Td>
91-
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
92-
"4xl"
124+
<Text>padding</Text>
125+
</Td>
126+
<Td>
127+
<Text>Adds padding inside the box.</Text>
128+
</Td>
129+
<Td>
130+
<Text>
131+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
132+
"4xl"
133+
</Text>
93134
</Td>
94135
<Td></Td>
95136
</Tr>
96137
<Tr>
97-
<Td>paddingTop</Td>
98-
<Td>Adds padding-top inside the box.</Td>
99138
<Td>
100-
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
101-
"4xl"
139+
<Text>paddingTop</Text>
140+
</Td>
141+
<Td>
142+
<Text>Adds padding-top inside the box.</Text>
143+
</Td>
144+
<Td>
145+
<Text>
146+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
147+
"4xl"
148+
</Text>
102149
</Td>
103150
<Td></Td>
104151
</Tr>
105152
<Tr>
106-
<Td>paddingBottom</Td>
107-
<Td>Adds padding-bottom inside the box.</Td>
108153
<Td>
109-
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
110-
"4xl"
154+
<Text>paddingBottom</Text>
155+
</Td>
156+
<Td>
157+
<Text>Adds padding-bottom inside the box.</Text>
158+
</Td>
159+
<Td>
160+
<Text>
161+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
162+
"4xl"
163+
</Text>
111164
</Td>
112165
<Td></Td>
113166
</Tr>
114167
<Tr>
115-
<Td>paddingLeft</Td>
116-
<Td>Adds padding-left inside the box.</Td>
117168
<Td>
118-
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
119-
"4xl"
169+
<Text>paddingLeft</Text>
170+
</Td>
171+
<Td>
172+
<Text>Adds padding-left inside the box.</Text>
173+
</Td>
174+
<Td>
175+
<Text>
176+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
177+
"4xl"
178+
</Text>
120179
</Td>
121180
<Td></Td>
122181
</Tr>
123182
<Tr>
124-
<Td>paddingRight</Td>
125-
<Td>Adds padding-right inside the box.</Td>
126183
<Td>
127-
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
128-
"4xl"
184+
<Text>paddingRight</Text>
185+
</Td>
186+
<Td>
187+
<Text>Adds padding-right inside the box.</Text>
188+
</Td>
189+
<Td>
190+
<Text>
191+
"small" | "medium" | "large" | "xl" | "2xl" | "3xl" |
192+
"4xl"
193+
</Text>
129194
</Td>
130195
<Td></Td>
131196
</Tr>
132197
<Tr>
133-
<Td>border</Td>
134-
<Td>Adds a border around the box.</Td>
135-
<Td>Boolean</Td>
198+
<Td>
199+
<Text>border</Text>
200+
</Td>
201+
<Td>
202+
<Text>Adds a border around the box.</Text>
203+
</Td>
204+
<Td>
205+
<Text>Boolean</Text>
206+
</Td>
136207
<Td></Td>
137208
</Tr>
138209
<Tr>
139-
<Td>expand</Td>
140210
<Td>
141-
Expands the box along the main axis (direction axis) to
142-
fill available space. (Sets flex to 1.)
211+
<Text>expand</Text>
212+
</Td>
213+
<Td>
214+
<Text>
215+
Expands the box along the main axis (direction axis)
216+
to fill available space. (Sets flex to 1.)
217+
</Text>
218+
</Td>
219+
<Td>
220+
<Text>Boolean</Text>
143221
</Td>
144-
<Td>Boolean</Td>
145222
<Td></Td>
146223
</Tr>
147224
</TBody>
@@ -165,52 +242,24 @@ export default () => {
165242
values:
166243
</Text>
167244

168-
<Box direction="row">
169-
<Box>
170-
<Box padding="small">
171-
<Text type="light">"small"</Text>
172-
</Box>
173-
<Box padding="small">
174-
<Text type="light">"medium"</Text>
175-
</Box>
176-
<Box padding="small">
177-
<Text type="light">"large"</Text>
178-
</Box>
179-
<Box padding="small">
180-
<Text type="light">"xl"</Text>
181-
</Box>
182-
<Box padding="small">
183-
<Text type="light">"2xl"</Text>
184-
</Box>
185-
<Box padding="small">
186-
<Text type="light">"3xl"</Text>
187-
</Box>
188-
<Box padding="small">
189-
<Text type="light">"4xl"</Text>
190-
</Box>
245+
<Box direction="row" gap="xl">
246+
<Box gap="small">
247+
<Text>"small"</Text>
248+
<Text>"medium"</Text>
249+
<Text>"large"</Text>
250+
<Text>"xl"</Text>
251+
<Text>"2xl"</Text>
252+
<Text>"3xl"</Text>
253+
<Text>"4xl"</Text>
191254
</Box>
192-
<Box>
193-
<Box padding="small">
194-
<Text type="light">4px</Text>
195-
</Box>
196-
<Box padding="small">
197-
<Text type="light">8px</Text>
198-
</Box>
199-
<Box padding="small">
200-
<Text type="light">16px</Text>
201-
</Box>
202-
<Box padding="small">
203-
<Text type="light">24px</Text>
204-
</Box>
205-
<Box padding="small">
206-
<Text type="light">32px</Text>
207-
</Box>
208-
<Box padding="small">
209-
<Text type="light">40px</Text>
210-
</Box>
211-
<Box padding="small">
212-
<Text type="light">48px</Text>
213-
</Box>
255+
<Box gap="small">
256+
<Text>4px</Text>
257+
<Text>8px</Text>
258+
<Text>16px</Text>
259+
<Text>24px</Text>
260+
<Text>32px</Text>
261+
<Text>40px</Text>
262+
<Text>48px</Text>
214263
</Box>
215264
</Box>
216265
</Box>

0 commit comments

Comments
 (0)