Skip to content

Commit 8e73b63

Browse files
kyletsangkyletsang
authored
feat(v5): Drop InputGroupPrepend and InputGroupAppend (react-bootstrap#5351)
Replace input in InputGroupCheckbox with FormCheckInput
1 parent 517edc3 commit 8e73b63

File tree

12 files changed

+103
-131
lines changed

12 files changed

+103
-131
lines changed

‎src/InputGroup.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,25 @@ import React from 'react';
55

66
import createWithBsPrefix from './createWithBsPrefix';
77
import { useBootstrapPrefix } from './ThemeProvider';
8+
import FormCheckInput from './FormCheckInput';
89
import {
910
BsPrefixPropsWithChildren,
1011
BsPrefixRefForwardingComponent,
1112
} from './helpers';
1213

13-
const InputGroupAppend = createWithBsPrefix('input-group-append');
14-
15-
const InputGroupPrepend = createWithBsPrefix('input-group-prepend');
16-
1714
const InputGroupText = createWithBsPrefix('input-group-text', {
1815
Component: 'span',
1916
});
2017

2118
const InputGroupCheckbox = (props) => (
2219
<InputGroupText>
23-
<input type="checkbox" {...props} />
20+
<FormCheckInput type="checkbox" {...props} />
2421
</InputGroupText>
2522
);
2623

2724
const InputGroupRadio = (props) => (
2825
<InputGroupText>
29-
<input type="radio" {...props} />
26+
<FormCheckInput type="radio" {...props} />
3027
</InputGroupText>
3128
);
3229

@@ -35,8 +32,6 @@ export interface InputGroupProps extends BsPrefixPropsWithChildren {
3532
}
3633

3734
type InputGroupExtras = {
38-
Append: typeof InputGroupAppend;
39-
Prepend: typeof InputGroupPrepend;
4035
Text: typeof InputGroupText;
4136
Checkbox: typeof InputGroupCheckbox;
4237
Radio: typeof InputGroupRadio;
@@ -60,8 +55,6 @@ const propTypes = {
6055

6156
/**
6257
*
63-
* @property {InputGroupAppend} Append
64-
* @property {InputGroupPrepend} Prepend
6558
* @property {InputGroupText} Text
6659
* @property {InputGroupRadio} Radio
6760
* @property {InputGroupCheckbox} Checkbox
@@ -102,8 +95,6 @@ const InputGroupWithExtras: InputGroup & InputGroupExtras = {
10295
Text: InputGroupText,
10396
Radio: InputGroupRadio,
10497
Checkbox: InputGroupCheckbox,
105-
Append: InputGroupAppend,
106-
Prepend: InputGroupPrepend,
10798
} as any;
10899

109100
export default InputGroupWithExtras;

‎test/InputGroupSpec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('<InputGroup>', () => {
1717
it('Should forward props to underlying input element', () => {
1818
const name = 'foobar';
1919
const wrapper = mount(<InputGroup.Checkbox name={name} />);
20-
const input = wrapper.find(`span>input[type="checkbox"]`);
20+
const input = wrapper.find('FormCheckInput');
2121
expect(input.length).to.equal(1);
2222
expect(input.prop('name')).to.equal(name);
2323
});
@@ -27,7 +27,7 @@ describe('<InputGroup>', () => {
2727
it('Should forward props to underlying input element', () => {
2828
const name = 'foobar';
2929
const wrapper = mount(<InputGroup.Radio name={name} />);
30-
const input = wrapper.find(`span>input[type="radio"]`);
30+
const input = wrapper.find('FormCheckInput');
3131
expect(input.length).to.equal(1);
3232
expect(input.prop('name')).to.equal(name);
3333
});

‎tests/simple-types-test.tsx‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -532,9 +532,7 @@ const MegaComponent = () => (
532532
className="mb-3"
533533
style={style}
534534
>
535-
<InputGroup.Prepend bsPrefix="inputgroupprepend" style={style}>
536-
<InputGroup.Text id="basic-addon1">@</InputGroup.Text>
537-
</InputGroup.Prepend>
535+
<InputGroup.Text id="basic-addon1">@</InputGroup.Text>
538536
<FormControl
539537
placeholder="Username"
540538
aria-label="Username"
@@ -548,35 +546,25 @@ const MegaComponent = () => (
548546
aria-label="Recipient's username"
549547
aria-describedby="basic-addon2"
550548
/>
551-
<InputGroup.Append bsPrefix="inputgroupappend" style={style}>
552-
<InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
553-
</InputGroup.Append>
549+
<InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
554550
</InputGroup>
555551

556552
<label htmlFor="basic-url">Your vanity URL</label>
557553
<InputGroup className="mb-3">
558-
<InputGroup.Prepend>
559-
<InputGroup.Text id="basic-addon3">
560-
https://example.com/users/
561-
</InputGroup.Text>
562-
</InputGroup.Prepend>
554+
<InputGroup.Text id="basic-addon3">
555+
https://example.com/users/
556+
</InputGroup.Text>
563557
<FormControl id="basic-url" aria-describedby="basic-addon3" />
564558
</InputGroup>
565559

566560
<InputGroup className="mb-3">
567-
<InputGroup.Prepend>
568-
<InputGroup.Text>$</InputGroup.Text>
569-
</InputGroup.Prepend>
561+
<InputGroup.Text>$</InputGroup.Text>
570562
<FormControl aria-label="Amount (to the nearest dollar)" />
571-
<InputGroup.Append>
572-
<InputGroup.Text>.00</InputGroup.Text>
573-
</InputGroup.Append>
563+
<InputGroup.Text>.00</InputGroup.Text>
574564
</InputGroup>
575565

576566
<InputGroup>
577-
<InputGroup.Prepend>
578-
<InputGroup.Text>With textarea</InputGroup.Text>
579-
</InputGroup.Prepend>
567+
<InputGroup.Text>With textarea</InputGroup.Text>
580568
<FormControl as="textarea" aria-label="With textarea" />
581569
</InputGroup>
582570
</div>

‎www/src/examples/InputGroup/Basic.js‎

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
<div>
1+
<>
22
<InputGroup className="mb-3">
3-
<InputGroup.Prepend>
4-
<InputGroup.Text id="basic-addon1">@</InputGroup.Text>
5-
</InputGroup.Prepend>
3+
<InputGroup.Text id="basic-addon1">@</InputGroup.Text>
64
<FormControl
75
placeholder="Username"
86
aria-label="Username"
@@ -16,35 +14,25 @@
1614
aria-label="Recipient's username"
1715
aria-describedby="basic-addon2"
1816
/>
19-
<InputGroup.Append>
20-
<InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
21-
</InputGroup.Append>
17+
<InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
2218
</InputGroup>
2319

24-
<label htmlFor="basic-url">Your vanity URL</label>
20+
<Form.Label htmlFor="basic-url">Your vanity URL</Form.Label>
2521
<InputGroup className="mb-3">
26-
<InputGroup.Prepend>
27-
<InputGroup.Text id="basic-addon3">
28-
https://example.com/users/
29-
</InputGroup.Text>
30-
</InputGroup.Prepend>
22+
<InputGroup.Text id="basic-addon3">
23+
https://example.com/users/
24+
</InputGroup.Text>
3125
<FormControl id="basic-url" aria-describedby="basic-addon3" />
3226
</InputGroup>
3327

3428
<InputGroup className="mb-3">
35-
<InputGroup.Prepend>
36-
<InputGroup.Text>$</InputGroup.Text>
37-
</InputGroup.Prepend>
29+
<InputGroup.Text>$</InputGroup.Text>
3830
<FormControl aria-label="Amount (to the nearest dollar)" />
39-
<InputGroup.Append>
40-
<InputGroup.Text>.00</InputGroup.Text>
41-
</InputGroup.Append>
31+
<InputGroup.Text>.00</InputGroup.Text>
4232
</InputGroup>
4333

4434
<InputGroup>
45-
<InputGroup.Prepend>
46-
<InputGroup.Text>With textarea</InputGroup.Text>
47-
</InputGroup.Prepend>
35+
<InputGroup.Text>With textarea</InputGroup.Text>
4836
<FormControl as="textarea" aria-label="With textarea" />
4937
</InputGroup>
50-
</div>;
38+
</>;

‎www/src/examples/InputGroup/ButtonDropdowns.js‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<>
22
<InputGroup className="mb-3">
33
<DropdownButton
4-
as={InputGroup.Prepend}
54
variant="outline-secondary"
65
title="Dropdown"
76
id="input-group-dropdown-1"
@@ -12,21 +11,44 @@
1211
<Dropdown.Divider />
1312
<Dropdown.Item href="#">Separated link</Dropdown.Item>
1413
</DropdownButton>
15-
<FormControl aria-describedby="basic-addon1" />
14+
<FormControl aria-label="Text input with dropdown button" />
1615
</InputGroup>
1716

18-
<InputGroup>
19-
<FormControl
20-
placeholder="Recipient's username"
21-
aria-label="Recipient's username"
22-
aria-describedby="basic-addon2"
23-
/>
17+
<InputGroup className="mb-3">
18+
<FormControl aria-label="Text input with dropdown button" />
2419

2520
<DropdownButton
26-
as={InputGroup.Append}
2721
variant="outline-secondary"
2822
title="Dropdown"
2923
id="input-group-dropdown-2"
24+
alignRight
25+
>
26+
<Dropdown.Item href="#">Action</Dropdown.Item>
27+
<Dropdown.Item href="#">Another action</Dropdown.Item>
28+
<Dropdown.Item href="#">Something else here</Dropdown.Item>
29+
<Dropdown.Divider />
30+
<Dropdown.Item href="#">Separated link</Dropdown.Item>
31+
</DropdownButton>
32+
</InputGroup>
33+
34+
<InputGroup>
35+
<DropdownButton
36+
variant="outline-secondary"
37+
title="Dropdown"
38+
id="input-group-dropdown-3"
39+
>
40+
<Dropdown.Item href="#">Action</Dropdown.Item>
41+
<Dropdown.Item href="#">Another action</Dropdown.Item>
42+
<Dropdown.Item href="#">Something else here</Dropdown.Item>
43+
<Dropdown.Divider />
44+
<Dropdown.Item href="#">Separated link</Dropdown.Item>
45+
</DropdownButton>
46+
<FormControl aria-label="Text input with 2 dropdown buttons" />
47+
<DropdownButton
48+
variant="outline-secondary"
49+
title="Dropdown"
50+
id="input-group-dropdown-4"
51+
alignRight
3052
>
3153
<Dropdown.Item href="#">Action</Dropdown.Item>
3254
<Dropdown.Item href="#">Another action</Dropdown.Item>

‎www/src/examples/InputGroup/Buttons.js‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
<div>
1+
<>
22
<InputGroup className="mb-3">
3-
<InputGroup.Prepend>
4-
<Button variant="outline-secondary">Button</Button>
5-
</InputGroup.Prepend>
6-
<FormControl aria-describedby="basic-addon1" />
3+
<Button variant="outline-secondary" id="button-addon1">
4+
Button
5+
</Button>
6+
<FormControl
7+
aria-label="Example text with button addon"
8+
aria-describedby="basic-addon1"
9+
/>
710
</InputGroup>
811

912
<InputGroup className="mb-3">
@@ -12,28 +15,23 @@
1215
aria-label="Recipient's username"
1316
aria-describedby="basic-addon2"
1417
/>
15-
<InputGroup.Append>
16-
<Button variant="outline-secondary">Button</Button>
17-
</InputGroup.Append>
18+
<Button variant="outline-secondary" id="button-addon2">
19+
Button
20+
</Button>
1821
</InputGroup>
1922

2023
<InputGroup className="mb-3">
21-
<InputGroup.Prepend>
22-
<Button variant="outline-secondary">Button</Button>
23-
<Button variant="outline-secondary">Button</Button>
24-
</InputGroup.Prepend>
25-
<FormControl aria-describedby="basic-addon1" />
24+
<Button variant="outline-secondary">Button</Button>
25+
<Button variant="outline-secondary">Button</Button>
26+
<FormControl aria-label="Example text with two button addons" />
2627
</InputGroup>
2728

2829
<InputGroup>
2930
<FormControl
3031
placeholder="Recipient's username"
31-
aria-label="Recipient's username"
32-
aria-describedby="basic-addon2"
32+
aria-label="Recipient's username with two button addons"
3333
/>
34-
<InputGroup.Append>
35-
<Button variant="outline-secondary">Button</Button>
36-
<Button variant="outline-secondary">Button</Button>
37-
</InputGroup.Append>
34+
<Button variant="outline-secondary">Button</Button>
35+
<Button variant="outline-secondary">Button</Button>
3836
</InputGroup>
39-
</div>;
37+
</>;

‎www/src/examples/InputGroup/Checkboxes.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
<div>
1+
<>
22
<InputGroup className="mb-3">
3-
<InputGroup.Prepend>
4-
<InputGroup.Checkbox aria-label="Checkbox for following text input" />
5-
</InputGroup.Prepend>
3+
<InputGroup.Checkbox aria-label="Checkbox for following text input" />
64
<FormControl aria-label="Text input with checkbox" />
75
</InputGroup>
86
<InputGroup>
9-
<InputGroup.Prepend>
10-
<InputGroup.Radio aria-label="Radio button for following text input" />
11-
</InputGroup.Prepend>
7+
<InputGroup.Radio aria-label="Radio button for following text input" />
128
<FormControl aria-label="Text input with radio button" />
139
</InputGroup>
14-
</div>;
10+
</>;

‎www/src/examples/InputGroup/MultipleAddons.js‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,12 @@
1-
<div>
1+
<>
22
<InputGroup className="mb-3">
3-
<InputGroup.Prepend>
4-
<InputGroup.Text>$</InputGroup.Text>
5-
<InputGroup.Text>0.00</InputGroup.Text>
6-
</InputGroup.Prepend>
7-
<FormControl
8-
placeholder="Recipient's username"
9-
aria-label="Amount (to the nearest dollar)"
10-
/>
3+
<InputGroup.Text>$</InputGroup.Text>
4+
<InputGroup.Text>0.00</InputGroup.Text>
5+
<FormControl aria-label="Dollar amount (with dot and two decimal places)" />
116
</InputGroup>
12-
<InputGroup className="mb-3">
13-
<FormControl
14-
placeholder="Recipient's username"
15-
aria-label="Amount (to the nearest dollar)"
16-
/>
17-
<InputGroup.Append>
18-
<InputGroup.Text>$</InputGroup.Text>
19-
<InputGroup.Text>0.00</InputGroup.Text>
20-
</InputGroup.Append>
7+
<InputGroup>
8+
<FormControl aria-label="Dollar amount (with dot and two decimal places)" />
9+
<InputGroup.Text>$</InputGroup.Text>
10+
<InputGroup.Text>0.00</InputGroup.Text>
2111
</InputGroup>
22-
</div>;
12+
</>;

‎www/src/examples/InputGroup/MultipleInputs.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<InputGroup className="mb-3">
2-
<InputGroup.Prepend>
3-
<InputGroup.Text>First and last name</InputGroup.Text>
4-
</InputGroup.Prepend>
5-
<FormControl />
6-
<FormControl />
2+
<InputGroup.Text>First and last name</InputGroup.Text>
3+
<FormControl aria-label="First name" />
4+
<FormControl aria-label="Last name" />
75
</InputGroup>;

‎www/src/examples/InputGroup/Sizes.js‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
1-
<div>
1+
<>
22
<InputGroup size="sm" className="mb-3">
3-
<InputGroup.Prepend>
4-
<InputGroup.Text id="inputGroup-sizing-sm">Small</InputGroup.Text>
5-
</InputGroup.Prepend>
3+
<InputGroup.Text id="inputGroup-sizing-sm">Small</InputGroup.Text>
64
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
75
</InputGroup>
86
<br />
97
<InputGroup className="mb-3">
10-
<InputGroup.Prepend>
11-
<InputGroup.Text id="inputGroup-sizing-default">Default</InputGroup.Text>
12-
</InputGroup.Prepend>
8+
<InputGroup.Text id="inputGroup-sizing-default">Default</InputGroup.Text>
139
<FormControl
1410
aria-label="Default"
1511
aria-describedby="inputGroup-sizing-default"
1612
/>
1713
</InputGroup>
1814
<br />
1915
<InputGroup size="lg">
20-
<InputGroup.Prepend>
21-
<InputGroup.Text id="inputGroup-sizing-lg">Large</InputGroup.Text>
22-
</InputGroup.Prepend>
16+
<InputGroup.Text id="inputGroup-sizing-lg">Large</InputGroup.Text>
2317
<FormControl aria-label="Large" aria-describedby="inputGroup-sizing-sm" />
2418
</InputGroup>
25-
</div>;
19+
</>;

0 commit comments

Comments
 (0)