Skip to content

Commit 45f7231

Browse files
TechQueryTechQuery
committed
[add] Button Group & Toolbar components
1 parent 055382e commit 45f7231

6 files changed

Lines changed: 448 additions & 144 deletions

File tree

‎document/source/components/ButtonGroup.mdx‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
---
2+
layout: docs
3+
title: ButtonGroup
4+
description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
5+
group: Components
6+
---
7+
8+
import { ButtonGroup, Toolbar } from 'boot-cell/source/Form/ButtonGroup';
9+
import { Button } from 'boot-cell/source/Form/Button';
10+
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
11+
12+
import { Example } from '../../../source/component/Example';
13+
14+
## Basic example
15+
16+
Wrap a series of buttons with `<Button />` in `<ButtonGroup />`.
17+
18+
<Example>
19+
<ButtonGroup>
20+
<Button kind="secondary">Left</Button>
21+
<Button kind="secondary">Middle</Button>
22+
<Button kind="secondary">Right</Button>
23+
</ButtonGroup>
24+
</Example>
25+
26+
```TSX
27+
import { render, createCell } from 'web-cell';
28+
import { ButtonGroup } from 'boot-cell/source/Form/ButtonGroup';
29+
import { Button } from 'boot-cell/source/Form/Button';
30+
31+
render(
32+
<ButtonGroup>
33+
<Button kind="secondary">Left</Button>
34+
<Button kind="secondary">Middle</Button>
35+
<Button kind="secondary">Right</Button>
36+
</ButtonGroup>
37+
);
38+
```
39+
40+
> ##### Ensure correct `role` and provide a label
41+
>
42+
> In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped,
43+
> an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`,
44+
> while toolbars should have a `role="toolbar"`.
45+
>
46+
> In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them,
47+
> despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`,
48+
> but alternatives such as `aria-labelledby` can also be used.
49+
50+
## Button toolbar
51+
52+
Combine sets of button groups into button toolbars for more complex components.
53+
Use utility classes as needed to space out groups, buttons, and more.
54+
55+
<Example>
56+
<Toolbar aria-label="Toolbar with button groups">
57+
<ButtonGroup className="mr-2" aria-label="First group">
58+
<Button kind="secondary">1</Button>
59+
<Button kind="secondary">2</Button>
60+
<Button kind="secondary">3</Button>
61+
<Button kind="secondary">4</Button>
62+
</ButtonGroup>
63+
<ButtonGroup className="mr-2" aria-label="Second group">
64+
<Button kind="secondary">5</Button>
65+
<Button kind="secondary">6</Button>
66+
<Button kind="secondary">7</Button>
67+
</ButtonGroup>
68+
<ButtonGroup aria-label="Third group">
69+
<Button kind="secondary">8</Button>
70+
</ButtonGroup>
71+
</Toolbar>
72+
</Example>
73+
74+
```TSX
75+
import { render, createCell } from 'web-cell';
76+
import { ButtonGroup, Toolbar } from 'boot-cell/source/Form/ButtonGroup';
77+
import { Button } from 'boot-cell/source/Form/Button';
78+
79+
render(
80+
<Toolbar aria-label="Toolbar with button groups">
81+
<ButtonGroup className="mr-2" aria-label="First group">
82+
<Button kind="secondary">1</Button>
83+
<Button kind="secondary">2</Button>
84+
<Button kind="secondary">3</Button>
85+
<Button kind="secondary">4</Button>
86+
</ButtonGroup>
87+
<ButtonGroup className="mr-2" aria-label="Second group">
88+
<Button kind="secondary">5</Button>
89+
<Button kind="secondary">6</Button>
90+
<Button kind="secondary">7</Button>
91+
</ButtonGroup>
92+
<ButtonGroup aria-label="Third group">
93+
<Button kind="secondary">8</Button>
94+
</ButtonGroup>
95+
</Toolbar>
96+
);
97+
```
98+
99+
## Sizing
100+
101+
Instead of applying button sizing properties to every button in a group,
102+
just add `size` property to each `<ButtonGroup />`, including each one when nesting multiple groups.
103+
104+
<Example>
105+
<ButtonGroup size="lg">
106+
<Button kind="secondary">Left</Button>
107+
<Button kind="secondary">Middle</Button>
108+
<Button kind="secondary">Right</Button>
109+
</ButtonGroup>
110+
<ButtonGroup>
111+
<Button kind="secondary">Left</Button>
112+
<Button kind="secondary">Middle</Button>
113+
<Button kind="secondary">Right</Button>
114+
</ButtonGroup>
115+
<ButtonGroup size="sm">
116+
<Button kind="secondary">Left</Button>
117+
<Button kind="secondary">Middle</Button>
118+
<Button kind="secondary">Right</Button>
119+
</ButtonGroup>
120+
</Example>
121+
122+
```TSX
123+
import { render, createCell, Fragment } from 'web-cell';
124+
import { ButtonGroup } from 'boot-cell/source/Form/ButtonGroup';
125+
import { Button } from 'boot-cell/source/Form/Button';
126+
127+
render(
128+
<Fragment>
129+
<ButtonGroup size="lg">
130+
<Button kind="secondary">Left</Button>
131+
<Button kind="secondary">Middle</Button>
132+
<Button kind="secondary">Right</Button>
133+
</ButtonGroup>
134+
<ButtonGroup>
135+
<Button kind="secondary">Left</Button>
136+
<Button kind="secondary">Middle</Button>
137+
<Button kind="secondary">Right</Button>
138+
</ButtonGroup>
139+
<ButtonGroup size="sm">
140+
<Button kind="secondary">Left</Button>
141+
<Button kind="secondary">Middle</Button>
142+
<Button kind="secondary">Right</Button>
143+
</ButtonGroup>
144+
</Fragment>
145+
);
146+
```
147+
148+
## Nesting
149+
150+
Place a `<ButtonGroup />` within another `<ButtonGroup />`
151+
when you want `<DropMenu />`s mixed with a series of buttons.
152+
153+
<Example>
154+
<ButtonGroup>
155+
<Button kind="secondary">1</Button>
156+
<Button kind="secondary">2</Button>
157+
<DropMenu
158+
buttonKind="secondary"
159+
title="Dropdown"
160+
href="https://web-cell.dev/"
161+
list={[
162+
{ href: '#', title: 'Dropdown link' },
163+
{ href: '#', title: 'Dropdown link' }
164+
]}
165+
/>
166+
</ButtonGroup>
167+
</Example>
168+
169+
```TSX
170+
import { render, createCell } from 'web-cell';
171+
import { ButtonGroup } from 'boot-cell/source/Form/ButtonGroup';
172+
import { Button } from 'boot-cell/source/Form/Button';
173+
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
174+
175+
render(
176+
<ButtonGroup>
177+
<Button kind="secondary">1</Button>
178+
<Button kind="secondary">2</Button>
179+
<DropMenu
180+
buttonKind="secondary"
181+
title="Dropdown"
182+
href="https://web-cell.dev/"
183+
list={[
184+
{ href: '#', title: 'Dropdown link' },
185+
{ href: '#', title: 'Dropdown link' }
186+
]}
187+
/>
188+
</ButtonGroup>
189+
);
190+
```
191+
192+
## Vertical variation
193+
194+
Make a set of buttons appear vertically stacked rather than horizontally.
195+
196+
<Example>
197+
<ButtonGroup vertical>
198+
<Button kind="secondary">Button</Button>
199+
<Button kind="secondary">Button</Button>
200+
<Button kind="secondary">Button</Button>
201+
<Button kind="secondary">Button</Button>
202+
<Button kind="secondary">Button</Button>
203+
<Button kind="secondary">Button</Button>
204+
</ButtonGroup>
205+
</Example>
206+
207+
<Example>
208+
<ButtonGroup vertical>
209+
<Button kind="secondary">Button</Button>
210+
<Button kind="secondary">Button</Button>
211+
<DropMenu
212+
buttonKind="secondary"
213+
title="Dropdown"
214+
href="https://web-cell.dev/"
215+
list={[
216+
{ href: '#', title: 'Dropdown link' },
217+
{ href: '#', title: 'Dropdown link' }
218+
]}
219+
/>
220+
<Button kind="secondary">Button</Button>
221+
<Button kind="secondary">Button</Button>
222+
<DropMenu
223+
buttonKind="secondary"
224+
title="Dropdown"
225+
href="https://web-cell.dev/"
226+
list={[
227+
{ href: '#', title: 'Dropdown link' },
228+
{ href: '#', title: 'Dropdown link' }
229+
]}
230+
/>
231+
<DropMenu
232+
buttonKind="secondary"
233+
title="Dropdown"
234+
href="https://web-cell.dev/"
235+
list={[
236+
{ href: '#', title: 'Dropdown link' },
237+
{ href: '#', title: 'Dropdown link' }
238+
]}
239+
/>
240+
<DropMenu
241+
buttonKind="secondary"
242+
title="Dropdown"
243+
href="https://web-cell.dev/"
244+
list={[
245+
{ href: '#', title: 'Dropdown link' },
246+
{ href: '#', title: 'Dropdown link' }
247+
]}
248+
/>
249+
</ButtonGroup>
250+
</Example>
251+
252+
```TSX
253+
import { render, createCell } from 'web-cell';
254+
import { ButtonGroup } from 'boot-cell/source/Form/ButtonGroup';
255+
import { Button } from 'boot-cell/source/Form/Button';
256+
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
257+
258+
render(
259+
<ButtonGroup vertical>
260+
<Button kind="secondary">Button</Button>
261+
<Button kind="secondary">Button</Button>
262+
<DropMenu
263+
buttonKind="secondary"
264+
title="Dropdown"
265+
href="https://web-cell.dev/"
266+
list={[
267+
{ href: '#', title: 'Dropdown link' },
268+
{ href: '#', title: 'Dropdown link' }
269+
]}
270+
/>
271+
<Button kind="secondary">Button</Button>
272+
<Button kind="secondary">Button</Button>
273+
<DropMenu
274+
buttonKind="secondary"
275+
title="Dropdown"
276+
href="https://web-cell.dev/"
277+
list={[
278+
{ href: '#', title: 'Dropdown link' },
279+
{ href: '#', title: 'Dropdown link' }
280+
]}
281+
/>
282+
<DropMenu
283+
buttonKind="secondary"
284+
title="Dropdown"
285+
href="https://web-cell.dev/"
286+
list={[
287+
{ href: '#', title: 'Dropdown link' },
288+
{ href: '#', title: 'Dropdown link' }
289+
]}
290+
/>
291+
<DropMenu
292+
buttonKind="secondary"
293+
title="Dropdown"
294+
href="https://web-cell.dev/"
295+
list={[
296+
{ href: '#', title: 'Dropdown link' },
297+
{ href: '#', title: 'Dropdown link' }
298+
]}
299+
/>
300+
</ButtonGroup>
301+
);
302+
```

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
{
22
"name": "bootcell-document",
3-
"version": "0.20.0",
3+
"version": "0.22.0",
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
6-
"boot-cell": "^1.0.0-rc.19",
6+
"boot-cell": "^1.0.0-rc.22",
77
"cell-router": "^2.0.0-rc.8",
88
"classnames": "^2.2.6",
99
"github-web-widget": "^3.0.0-beta.4",
1010
"lodash.groupby": "^4.6.0",
1111
"mobx": "^5.15.4",
1212
"mobx-web-cell": "^0.3.0",
13-
"web-cell": "^2.0.0",
13+
"web-cell": "^2.0.1",
1414
"web-utility": "^1.5.2"
1515
},
1616
"devDependencies": {
1717
"@types/classnames": "^2.2.10",
1818
"@types/lodash.groupby": "^4.6.6",
1919
"husky": "^4.2.5",
20-
"less": "^3.11.1",
21-
"lint-staged": "^10.2.2",
20+
"less": "^3.11.2",
21+
"lint-staged": "^10.2.9",
2222
"mark-cell": "^0.4.1",
2323
"parcel": "^1.12.4",
2424
"prettier": "^2.0.5",
25-
"typescript": "^3.8.3"
25+
"typescript": "^3.9.5"
2626
},
2727
"prettier": {
2828
"singleQuote": true,

‎source/component/Example.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1-
import { WebCellProps, createCell } from 'web-cell';
2-
import { HTMLProps } from 'web-utility/source/DOM-type';
3-
import classNames from 'classnames';
4-
5-
export function Example({ className, defaultSlot }: HTMLProps & WebCellProps) {
6-
return (
7-
<div
8-
className={classNames(
9-
'border',
10-
'border-light',
11-
'p-4',
12-
'bd-example',
13-
className
14-
)}
15-
>
16-
{defaultSlot}
17-
</div>
18-
);
19-
}
1+
import { WebCellProps, createCell } from 'web-cell';
2+
import classNames from 'classnames';
3+
4+
export function Example({ className, defaultSlot }: WebCellProps) {
5+
return (
6+
<div
7+
className={classNames(
8+
'border',
9+
'border-light',
10+
'p-4',
11+
'bd-example',
12+
className
13+
)}
14+
>
15+
{defaultSlot}
16+
</div>
17+
);
18+
}

0 commit comments

Comments
 (0)