Skip to content

Commit 96870e7

Browse files
forestreamforestream
committed
Fix mdx texts
1 parent 00fbf1e commit 96870e7

File tree

2 files changed

+57
-45
lines changed

2 files changed

+57
-45
lines changed

‎apps/landing/src/app/(detail)/components/button/Button.mdx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
import IconDelete from './IconDelete'
2-
import { Button } from '@devup-ui/components'
3-
import { Td, Th, Tr, Table } from '../Table'
4-
import MdxCard from '../MdxCard'
5-
import MdxCardFooter from '../MdxCardFooter'
6-
71
**Button**
82

93
#### Button
104

11-
`Button` component is used to handle user interactions.
5+
`Button` component is used to handle user interactions.

‎apps/landing/src/app/(detail)/components/button/Examples.mdx‎

Lines changed: 56 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -28,28 +28,36 @@ import MdxCardFooter from '../MdxCardFooter'
2828
</div>
2929
<MdxCardFooter>
3030
```ts
31-
<div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
32-
<Button size="sm" style={{ height: 'min-content' }} variant="primary">
31+
<Box
32+
display="flex"
33+
gap="12px"
34+
marginBottom="16px"
35+
>
36+
<Button size="sm" className={css({ height: 'min-content' })} variant="primary">
3337
Primary sm
3438
</Button>
35-
<Button size="md" style={{ height: 'min-content' }} variant="primary">
39+
<Button size="md" className={css({ height: 'min-content' })} variant="primary">
3640
Primary md
3741
</Button>
38-
<Button size="lg" style={{ height: 'min-content' }} variant="primary">
42+
<Button size="lg" className={css({ height: 'min-content' })} variant="primary">
3943
Primary lg
4044
</Button>
41-
</div>
42-
<div style={{ display: 'flex', gap: '12px' }}>
43-
<Button size="sm" style={{ height: 'min-content' }}>
45+
</Box>
46+
<Box
47+
display="flex"
48+
gap="12px"
49+
marginBottom="16px"
50+
>
51+
<Button size="sm" className={css({ height: 'min-content' })}>
4452
Default sm
4553
</Button>
46-
<Button size="md" style={{ height: 'min-content' }}>
54+
<Button size="md" className={css({ height: 'min-content' })}>
4755
Default md
4856
</Button>
49-
<Button size="lg" style={{ height: 'min-content' }}>
57+
<Button size="lg" className={css({ height: 'min-content' })}>
5058
Default lg
5159
</Button>
52-
</div>
60+
</Box>
5361
```
5462
</MdxCardFooter>
5563
</MdxCard>
@@ -72,13 +80,13 @@ import MdxCardFooter from '../MdxCardFooter'
7280
</div>
7381
<MdxCardFooter>
7482
```ts
75-
<Button danger size="sm" style={{ height: 'min-content' }}>
83+
<Button danger size="sm" className={css({ height: 'min-content' })}>
7684
Danger sm
7785
</Button>
78-
<Button danger size="md" style={{ height: 'min-content' }}>
86+
<Button danger size="md" className={css({ height: 'min-content' })}>
7987
Danger md
8088
</Button>
81-
<Button danger size="lg" style={{ height: 'min-content' }}>
89+
<Button danger size="lg" className={css({ height: 'min-content' })}>
8290
Danger lg
8391
</Button>
8492
```
@@ -102,8 +110,12 @@ import MdxCardFooter from '../MdxCardFooter'
102110
</div>
103111
<MdxCardFooter>
104112
```ts
105-
<Button disabled variant="primary" style={{ height: 'min-content' }}>Primary disabled</Button>
106-
<Button disabled style={{ height: 'min-content' }}>Default disabled</Button>
113+
<Button disabled variant="primary" className={css({ height: 'min-content' })}>
114+
Primary disabled
115+
</Button>
116+
<Button disabled className={css({ height: 'min-content' })}>
117+
Default disabled
118+
</Button>
107119
```
108120
</MdxCardFooter>
109121
</MdxCard>
@@ -193,7 +205,7 @@ import MdxCardFooter from '../MdxCardFooter'
193205
/>
194206
</svg>
195207
}
196-
style={{ height: 'min-content' }}
208+
className={css({ height: 'min-content' })}
197209
>
198210
With icon
199211
</Button>
@@ -213,13 +225,13 @@ import MdxCardFooter from '../MdxCardFooter'
213225
</svg>
214226
}
215227
variant="primary"
216-
style={{ height: 'min-content' }}
228+
className={css({ height: 'min-content' })}
217229
>
218230
Add
219231
</Button>
220232
<Button
221233
icon={<IconDelete />}
222-
style={{ height: 'min-content' }}
234+
className={css({ height: 'min-content' })}
223235
danger
224236
>
225237
Delete
@@ -329,22 +341,24 @@ import MdxCardFooter from '../MdxCardFooter'
329341
</div>
330342
</div>
331343
<br />
332-
**Icon**
344+
**Colors**
333345

334346
<br/>
335-
Pass in an svg icon component into `icon` prop. If props like `stroke` and `fill` have `"currentColor"` value, the svg icon will follow the text color of the button.
347+
Pass in an object containing color tokens into `colors` prop. You can change color of border, background, danger color and more using `primary`, `error`, `text`, and so on.
336348
</div>
337349
<MdxCardFooter>
338350
```ts
339-
<div
340-
style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}
351+
<Box
352+
display="flex"
353+
gap="12px"
354+
marginBottom="16px"
341355
>
342356
<Button
343357
colors={{
344358
primary: 'orange',
345359
text: 'chocolate',
346360
}}
347-
style={{ height: 'min-content' }}
361+
className={css({ height: 'min-content' })}
348362
>
349363
Default
350364
</Button>
@@ -354,7 +368,7 @@ import MdxCardFooter from '../MdxCardFooter'
354368
text: 'chocolate',
355369
}}
356370
variant="primary"
357-
style={{ height: 'min-content' }}
371+
className={css({ height: 'min-content' })}
358372
>
359373
Primary
360374
</Button>
@@ -364,20 +378,22 @@ import MdxCardFooter from '../MdxCardFooter'
364378
text: 'chocolate',
365379
}}
366380
danger
367-
style={{ height: 'min-content' }}
381+
className={css({ height: 'min-content' })}
368382
>
369383
Danger
370384
</Button>
371-
</div>
372-
<div
373-
style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}
385+
</Box>
386+
<Box
387+
display="flex"
388+
gap="12px"
389+
marginBottom="16px"
374390
>
375391
<Button
376392
colors={{
377393
primary: 'darkgreen',
378394
text: 'darkseagreen',
379395
}}
380-
style={{ height: 'min-content' }}
396+
className={css({ height: 'min-content' })}
381397
>
382398
Default
383399
</Button>
@@ -387,7 +403,7 @@ import MdxCardFooter from '../MdxCardFooter'
387403
text: 'darkseagreen',
388404
}}
389405
variant="primary"
390-
style={{ height: 'min-content' }}
406+
className={css({ height: 'min-content' })}
391407
>
392408
Primary
393409
</Button>
@@ -397,19 +413,21 @@ import MdxCardFooter from '../MdxCardFooter'
397413
text: 'darkseagreen',
398414
}}
399415
danger
400-
style={{ height: 'min-content' }}
416+
className={css({ height: 'min-content' })}
401417
>
402418
Danger
403419
</Button>
404-
</div>
405-
<div
406-
style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}
420+
</Box>
421+
<Box
422+
display="flex"
423+
gap="12px"
424+
marginBottom="16px"
407425
>
408426
<Button
409427
colors={{
410428
primary: 'steelblue',
411429
}}
412-
style={{ height: 'min-content' }}
430+
className={css({ height: 'min-content' })}
413431
>
414432
Default
415433
</Button>
@@ -418,7 +436,7 @@ import MdxCardFooter from '../MdxCardFooter'
418436
primary: 'steelblue',
419437
}}
420438
variant="primary"
421-
style={{ height: 'min-content' }}
439+
className={css({ height: 'min-content' })}
422440
>
423441
Primary
424442
</Button>
@@ -427,11 +445,11 @@ import MdxCardFooter from '../MdxCardFooter'
427445
error: 'steelblue',
428446
}}
429447
danger
430-
style={{ height: 'min-content' }}
448+
className={css({ height: 'min-content' })}
431449
>
432450
Danger
433451
</Button>
434-
</div>
452+
</Box>
435453
```
436454
</MdxCardFooter>
437455
</MdxCard>

0 commit comments

Comments
 (0)