Skip to content

Commit b4fb552

Browse files
TechQueryTechQuery
committed
[refactor] add Code Copy & Article Navigator helpers
[optimize] upgrade Upstream packages
1 parent 45096ff commit b4fb552

27 files changed

+499
-257
lines changed

‎document/source/components/Badge.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ render([1, 2, 3, 4, 5, 6].map(level => {
4343
Badges can be used as part of links or buttons to provide a counter.
4444

4545
<Example>
46-
<Button>
46+
<Button color="primary">
4747
Notifications <Badge color="light">4</Badge>
4848
</Button>
4949
</Example>
@@ -54,7 +54,7 @@ import { Badge } from 'boot-cell/source/Reminder/Badge';
5454
import { Button } from 'boot-cell/source/Form/Button';
5555

5656
render(
57-
<Button>
57+
<Button color="primary">
5858
Notifications <Badge color="light">4</Badge>
5959
</Button>
6060
);
@@ -70,7 +70,7 @@ Unless the context is clear (as with the “Notifications” example, where it i
7070
the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.
7171

7272
<Example>
73-
<Button>
73+
<Button color="primary">
7474
Profile <Badge color="light">9</badge>
7575
<span className="sr-only">unread messages</span>
7676
</Button>
@@ -82,7 +82,7 @@ import { Badge } from 'boot-cell/source/Reminder/Badge';
8282
import { Button } from 'boot-cell/source/Form/Button';
8383

8484
render(
85-
<Button>
85+
<Button color="primary">
8686
Profile <Badge color="light">9</badge>
8787
<span className="sr-only">unread messages</span>
8888
</Button>

‎document/source/components/Button.mdx‎

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,19 @@ When using `<Button href="" />` that are used to trigger in-page functionality (
7373
rather than linking to new pages or sections within the current page.
7474

7575
<Example>
76-
<Button href="https://web-cell.dev/">Link</Button>
77-
<Button type="submit">Button</Button>
78-
<Button>Input</Button>
79-
<Button type="submit">Submit</Button>
80-
<Button type="reset">Reset</Button>
76+
<Button color="primary" href="https://web-cell.dev/">
77+
Link
78+
</Button>
79+
<Button color="primary" type="submit">
80+
Button
81+
</Button>
82+
<Button color="primary">Input</Button>
83+
<Button color="primary" type="submit">
84+
Submit
85+
</Button>
86+
<Button color="primary" type="reset">
87+
Reset
88+
</Button>
8189
</Example>
8290

8391
```TSX
@@ -86,11 +94,19 @@ import { Button } from 'boot-cell/source/Form/Button';
8694

8795
render(
8896
<>
89-
<Button href="https://web-cell.dev/">Link</Button>
90-
<Button type="submit">Button</Button>
91-
<Button>Input</Button>
92-
<Button type="submit">Submit</Button>
93-
<Button type="reset">Reset</Button>
97+
<Button color="primary" href="https://web-cell.dev/">
98+
Link
99+
</Button>
100+
<Button color="primary" type="submit">
101+
Button
102+
</Button>
103+
<Button color="primary">Input</Button>
104+
<Button color="primary" type="submit">
105+
Submit
106+
</Button>
107+
<Button color="primary" type="reset">
108+
Reset
109+
</Button>
94110
</>
95111
);
96112
```
@@ -144,7 +160,9 @@ render([
144160
Fancy larger or smaller buttons? Add `size="lg"` or `size="sm"` for additional sizes.
145161

146162
<Example>
147-
<Button size="lg">Large button</Button>
163+
<Button color="primary" size="lg">
164+
Large button
165+
</Button>
148166
<Button color="secondary" size="lg">
149167
Large button
150168
</Button>
@@ -156,7 +174,9 @@ import { Button } from 'boot-cell/source/Form/Button';
156174

157175
render(
158176
<>
159-
<Button size="lg">Large button</Button>
177+
<Button color="primary" size="lg">
178+
Large button
179+
</Button>
160180
<Button color="secondary" size="lg">
161181
Large button
162182
</Button>
@@ -165,7 +185,9 @@ render(
165185
```
166186

167187
<Example>
168-
<Button size="sm">Small button</Button>
188+
<Button color="primary" size="sm">
189+
Small button
190+
</Button>
169191
<Button color="secondary" size="sm">
170192
Small button
171193
</Button>
@@ -177,7 +199,9 @@ import { Button } from 'boot-cell/source/Form/Button';
177199

178200
render(
179201
<>
180-
<Button size="sm">Small button</Button>
202+
<Button color="primary" size="sm">
203+
Small button
204+
</Button>
181205
<Button color="secondary" size="sm">
182206
Small button
183207
</Button>
@@ -188,7 +212,7 @@ render(
188212
Create block level buttons — those that span the full width of a parent—by adding `block` property.
189213

190214
<Example>
191-
<Button size="lg" block>
215+
<Button color="primary" size="lg" block>
192216
Block level button
193217
</Button>
194218
<Button color="secondary" size="lg" block>
@@ -202,7 +226,7 @@ import { Button } from 'boot-cell/source/Form/Button';
202226

203227
render(
204228
<>
205-
<Button size="lg" block>
229+
<Button color="primary" size="lg" block>
206230
Block level button
207231
</Button>
208232
<Button color="secondary" size="lg" block>
@@ -220,7 +244,13 @@ However, you can still force the same active appearance with `.active` (and incl
220244
should you need to replicate the state programmatically.
221245

222246
<Example>
223-
<Button size="lg" className="active" aria-pressed="true" href="#">
247+
<Button
248+
color="primary"
249+
size="lg"
250+
className="active"
251+
aria-pressed="true"
252+
href="#"
253+
>
224254
Primary link
225255
</Button>
226256
<Button
@@ -240,7 +270,13 @@ import { Button } from 'boot-cell/source/Form/Button';
240270

241271
render(
242272
<>
243-
<Button size="lg" className="active" aria-pressed="true" href="#">
273+
<Button
274+
color="primary"
275+
size="lg"
276+
className="active"
277+
aria-pressed="true"
278+
href="#"
279+
>
244280
Primary link
245281
</Button>
246282
<Button
@@ -261,7 +297,7 @@ render(
261297
Make buttons look inactive by adding the `disabled` boolean property to any `<Button />` component.
262298

263299
<Example>
264-
<Button size="lg" disabled>
300+
<Button color="primary" size="lg" disabled>
265301
Primary button
266302
</Button>
267303
<Button color="secondary" size="lg" disabled>
@@ -275,7 +311,7 @@ import { Button } from 'boot-cell/source/Form/Button';
275311

276312
render(
277313
<>
278-
<Button size="lg" disabled>
314+
<Button color="primary" size="lg" disabled>
279315
Primary button
280316
</Button>
281317
<Button color="secondary" size="lg" disabled>
@@ -286,7 +322,7 @@ render(
286322
```
287323

288324
<Example>
289-
<Button size="lg" href="https://web-cell.dev/" disabled>
325+
<Button color="primary" size="lg" href="https://web-cell.dev/" disabled>
290326
Primary button
291327
</Button>
292328
<Button color="secondary" size="lg" href="https://web-cell.dev/" disabled>
@@ -300,7 +336,7 @@ import { Button } from 'boot-cell/source/Form/Button';
300336

301337
render(
302338
<>
303-
<Button size="lg" href="https://web-cell.dev/" disabled>
339+
<Button color="primary" size="lg" href="https://web-cell.dev/" disabled>
304340
Primary button
305341
</Button>
306342
<Button color="secondary" size="lg" href="https://web-cell.dev/" disabled>
@@ -372,15 +408,15 @@ render(
372408
`<IconButton />` component is built on [`<Icon />`][1].
373409

374410
<Example>
375-
<IconButton name="bootstrap" />
411+
<IconButton name="bootstrap" color="primary" />
376412
</Example>
377413

378414
```TSX
379415
import { render, createCell } from 'web-cell';
380416
import { IconButton } from 'boot-cell/source/Form/Button';
381417

382418
render(
383-
<IconButton name="bootstrap" />
419+
<IconButton name="bootstrap" color="primary" />
384420
);
385421
```
386422

‎document/source/components/Card.mdx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ This is easily customized with our various [sizing options](#sizing).
3434
title="Card title"
3535
text="Some quick example text to build on the card title and make up the bulk of the card's content."
3636
>
37-
<Button>Go somewhere</Button>
37+
<Button color="primary">Go somewhere</Button>
3838
</Card>
3939
</Example>
4040

@@ -50,7 +50,7 @@ render(
5050
title="Card title"
5151
text="Some quick example text to build on the card title and make up the bulk of the card's content."
5252
>
53-
<Button>Go somewhere</Button>
53+
<Button color="primary">Go somewhere</Button>
5454
</Card>
5555
);
5656
```
@@ -154,7 +154,7 @@ Add an optional header and/or footer within a card.
154154
text="With supporting text below as a natural lead-in to additional content."
155155
>
156156
<CardHeader>Featured</CardHeader>
157-
<Button>Go somewhere</Button>
157+
<Button color="primary">Go somewhere</Button>
158158
</Card>
159159
</Example>
160160

@@ -169,7 +169,7 @@ render(
169169
text="With supporting text below as a natural lead-in to additional content."
170170
>
171171
<CardHeader>Featured</CardHeader>
172-
<Button>Go somewhere</Button>
172+
<Button color="primary">Go somewhere</Button>
173173
</Card>
174174
);
175175
```
@@ -216,7 +216,7 @@ render(
216216
text="With supporting text below as a natural lead-in to additional content."
217217
>
218218
<CardHeader>Featured</CardHeader>
219-
<Button>Go somewhere</Button>
219+
<Button color="primary">Go somewhere</Button>
220220
<CardFooter>2 days ago</CardFooter>
221221
</Card>
222222
</Example>
@@ -233,7 +233,7 @@ render(
233233
text="With supporting text below as a natural lead-in to additional content."
234234
>
235235
<CardHeader>Featured</CardHeader>
236-
<Button>Go somewhere</Button>
236+
<Button color="primary">Go somewhere</Button>
237237
<CardFooter>2 days ago</CardFooter>
238238
</Card>
239239
);
@@ -254,7 +254,7 @@ Add some navigation to a card’s header (or block) with BootCell’s [`<NavLink
254254
<NavLink>Link</NavLink>
255255
<NavLink disabled>Disabled</NavLink>
256256
</CardHeader>
257-
<Button>Go somewhere</Button>
257+
<Button color="primary">Go somewhere</Button>
258258
</Card>
259259
</Example>
260260

@@ -275,7 +275,7 @@ render(
275275
<NavLink>Link</NavLink>
276276
<NavLink disabled>Disabled</NavLink>
277277
</CardHeader>
278-
<Button>Go somewhere</Button>
278+
<Button color="primary">Go somewhere</Button>
279279
</Card>
280280
);
281281
```
@@ -291,7 +291,7 @@ render(
291291
<NavLink>Link</NavLink>
292292
<NavLink disabled>Disabled</NavLink>
293293
</CardHeader>
294-
<Button>Go somewhere</Button>
294+
<Button color="primary">Go somewhere</Button>
295295
</Card>
296296
</Example>
297297

@@ -312,7 +312,7 @@ render(
312312
<NavLink>Link</NavLink>
313313
<NavLink disabled>Disabled</NavLink>
314314
</CardHeader>
315-
<Button>Go somewhere</Button>
315+
<Button color="primary">Go somewhere</Button>
316316
</Card>
317317
);
318318
```

‎document/source/components/Collapse.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ In addition, `<collapse-box />` uses [`ResizeObserver`][1] to detect **Content r
2727

2828
<Example>
2929
<Button
30+
color="primary"
3031
onClick={({ currentTarget }) => {
3132
const box = currentTarget.nextElementSibling;
3233
box.open = !box.open;
@@ -51,6 +52,7 @@ import { Button } from 'boot-cell/source/Form/Button';
5152
render(
5253
<>
5354
<Button
55+
color="primary"
5456
onClick={({ currentTarget }) => {
5557
const box = currentTarget.nextElementSibling;
5658
box.open = !box.open;

0 commit comments

Comments
 (0)