Skip to content

Commit 5c910e2

Browse files
TechQueryTechQuery
committed
[add] Input Group component
1 parent 45f7231 commit 5c910e2

11 files changed

Lines changed: 694 additions & 57 deletions

File tree

‎document/source/components/ButtonGroup.mdx‎

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
---
22
layout: docs
3-
title: ButtonGroup
3+
title: Button group
44
description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
55
group: Components
66
---
77

88
import { ButtonGroup, Toolbar } from 'boot-cell/source/Form/ButtonGroup';
99
import { Button } from 'boot-cell/source/Form/Button';
10+
import { InputGroup } from 'boot-cell/source/Form/InputGroup';
1011
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
1112

1213
import { Example } from '../../../source/component/Example';
@@ -96,6 +97,82 @@ render(
9697
);
9798
```
9899

100+
Feel free to mix input groups with button groups in your toolbars. Similar to the example above,
101+
you’ll likely need some utilities though to space things properly.
102+
103+
<Example>
104+
<Toolbar aria-label="Toolbar with button groups">
105+
<ButtonGroup className="mr-2" aria-label="First group">
106+
<Button kind="secondary">1</Button>
107+
<Button kind="secondary">2</Button>
108+
<Button kind="secondary">3</Button>
109+
<Button kind="secondary">4</Button>
110+
</ButtonGroup>
111+
<InputGroup
112+
placeholder="Input group example"
113+
aria-label="Input group example"
114+
prepend="@"
115+
/>
116+
</Toolbar>
117+
<Toolbar
118+
className="justify-content-between"
119+
aria-label="Toolbar with button groups"
120+
>
121+
<ButtonGroup className="mr-2" aria-label="First group">
122+
<Button kind="secondary">1</Button>
123+
<Button kind="secondary">2</Button>
124+
<Button kind="secondary">3</Button>
125+
<Button kind="secondary">4</Button>
126+
</ButtonGroup>
127+
<InputGroup
128+
placeholder="Input group example"
129+
aria-label="Input group example"
130+
prepend="@"
131+
/>
132+
</Toolbar>
133+
</Example>
134+
135+
```TSX
136+
import { render, createCell, Fragment } from 'web-cell';
137+
import { ButtonGroup, Toolbar } from 'boot-cell/source/Form/ButtonGroup';
138+
import { Button } from 'boot-cell/source/Form/Button';
139+
import { InputGroup } from 'boot-cell/source/Form/InputGroup';
140+
141+
render(
142+
<Fragment>
143+
<Toolbar aria-label="Toolbar with button groups">
144+
<ButtonGroup className="mr-2" aria-label="First group">
145+
<Button kind="secondary">1</Button>
146+
<Button kind="secondary">2</Button>
147+
<Button kind="secondary">3</Button>
148+
<Button kind="secondary">4</Button>
149+
</ButtonGroup>
150+
<InputGroup
151+
placeholder="Input group example"
152+
aria-label="Input group example"
153+
prepend="@"
154+
/>
155+
</Toolbar>
156+
<Toolbar
157+
className="justify-content-between"
158+
aria-label="Toolbar with button groups"
159+
>
160+
<ButtonGroup className="mr-2" aria-label="First group">
161+
<Button kind="secondary">1</Button>
162+
<Button kind="secondary">2</Button>
163+
<Button kind="secondary">3</Button>
164+
<Button kind="secondary">4</Button>
165+
</ButtonGroup>
166+
<InputGroup
167+
placeholder="Input group example"
168+
aria-label="Input group example"
169+
prepend="@"
170+
/>
171+
</Toolbar>
172+
</Fragment>
173+
);
174+
```
175+
99176
## Sizing
100177

101178
Instead of applying button sizing properties to every button in a group,

‎document/source/components/Carousel.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -213,5 +213,5 @@ render(
213213
```
214214

215215
[1]: https://www.w3.org/TR/page-visibility/
216-
[2]: https://getbootstrap.com/docs/4.4/getting-started/accessibility/#reduced-motion
217-
[3]: https://getbootstrap.com/docs/4.4/utilities/display/
216+
[2]: https://getbootstrap.com/docs/4.5/getting-started/accessibility/#reduced-motion
217+
[3]: https://getbootstrap.com/docs/4.5/utilities/display/

‎document/source/components/FormField.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -893,10 +893,10 @@ We hide the default file `<input>` via `opacity` and instead style the `<label>`
893893
The button is generated and positioned with `::after`.
894894
Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
895895

896-
[1]: https://getbootstrap.com/docs/4.4/content/reboot/#forms
897-
[2]: https://getbootstrap.com/docs/4.4/utilities/spacing/
898-
[3]: https://getbootstrap.com/docs/4.4/utilities/flex/
899-
[4]: https://getbootstrap.com/docs/4.4/components/buttons/#disabled-state
896+
[1]: https://getbootstrap.com/docs/4.5/content/reboot/#forms
897+
[2]: https://getbootstrap.com/docs/4.5/utilities/spacing/
898+
[3]: https://getbootstrap.com/docs/4.5/utilities/flex/
899+
[4]: https://getbootstrap.com/docs/4.5/components/buttons/#disabled-state
900900
[5]: https://caniuse.com/#feat=form-validation
901901
[6]: #Server-side
902902
[7]: https://www.w3.org/TR/html5/sec-forms.html#the-constraint-validation-api

0 commit comments

Comments
 (0)