Skip to content

Commit c049dac

Browse files
eisnsteinDaniel Höflehner
eisnstein
and
Daniel Höflehner
authored
feat(ToggleButtonGroup): Add vertical option (react-bootstrap#5371)
Co-authored-by: Daniel Höflehner <d.hoeflehner@diagnosia.com>
1 parent 4974d5b commit c049dac

File tree

3 files changed

+122
-15
lines changed

3 files changed

+122
-15
lines changed

‎src/ToggleButtonGroup.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,12 @@ import { useUncontrolled } from 'uncontrollable';
55

66
import chainFunction from './createChainedFunction';
77
import { map } from './ElementChildren';
8-
import ButtonGroup from './ButtonGroup';
8+
import ButtonGroup, { ButtonGroupProps } from './ButtonGroup';
99
import ToggleButton from './ToggleButton';
10-
import {
11-
BsPrefixPropsWithChildren,
12-
BsPrefixRefForwardingComponent,
13-
} from './helpers';
10+
import { BsPrefixRefForwardingComponent } from './helpers';
1411

15-
export interface ToggleButtonRadioProps<T> extends BsPrefixPropsWithChildren {
12+
export interface ToggleButtonRadioProps<T>
13+
extends Omit<ButtonGroupProps, 'toggle'> {
1614
type?: 'radio';
1715
name: string;
1816
value?: T;
@@ -21,7 +19,7 @@ export interface ToggleButtonRadioProps<T> extends BsPrefixPropsWithChildren {
2119
}
2220

2321
export interface ToggleButtonCheckboxProps<T>
24-
extends BsPrefixPropsWithChildren {
22+
extends Omit<ButtonGroupProps, 'toggle'> {
2523
type: 'checkbox';
2624
name?: string;
2725
value?: T[];
@@ -69,10 +67,21 @@ const propTypes = {
6967
* of the buttons
7068
*/
7169
type: PropTypes.oneOf(['checkbox', 'radio']).isRequired,
70+
71+
/**
72+
* Sets the size for all Buttons in the group.
73+
*
74+
* @type ('sm'|'lg')
75+
*/
76+
size: PropTypes.string,
77+
78+
/** Make the set of Buttons appear vertically stacked. */
79+
vertical: PropTypes.bool,
7280
};
7381

7482
const defaultProps = {
7583
type: 'radio',
84+
vertical: false,
7685
};
7786

7887
const ToggleButtonGroup: ToggleButtonGroup<any> = (React.forwardRef(

‎test/ToggleButtonGroupSpec.js‎

Lines changed: 104 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,27 +48,123 @@ describe('ToggleButton', () => {
4848

4949
describe('ToggleButtonGroup', () => {
5050
it('should render checkboxes', () => {
51-
mount(
51+
const wrapper = mount(
5252
<ToggleButtonGroup type="checkbox">
5353
<ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
5454
<ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
5555
<ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
5656
</ToggleButtonGroup>,
57-
)
58-
.find('input[type="checkbox"]')
59-
.length.should.equal(3);
57+
);
58+
59+
wrapper
60+
.assertSingle('.btn-group.btn-group-toggle')
61+
.assertNone('.btn-group-vertical');
62+
wrapper.find('input[type="checkbox"]').length.should.equal(3);
63+
});
64+
65+
it('should render checkboxes vertically', () => {
66+
const wrapper = mount(
67+
<ToggleButtonGroup type="checkbox" vertical>
68+
<ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
69+
<ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
70+
<ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
71+
</ToggleButtonGroup>,
72+
);
73+
74+
wrapper
75+
.assertSingle('.btn-group-vertical.btn-group-toggle')
76+
.assertNone('.btn-group');
77+
wrapper.find('input[type="checkbox"]').length.should.equal(3);
78+
});
79+
80+
it('should render checkboxes vertically and small', () => {
81+
const wrapper = mount(
82+
<ToggleButtonGroup type="checkbox" vertical size="sm">
83+
<ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
84+
<ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
85+
<ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
86+
</ToggleButtonGroup>,
87+
);
88+
89+
wrapper
90+
.assertSingle('.btn-group-vertical.btn-group-sm.btn-group-toggle')
91+
.assertNone('.btn-group');
92+
wrapper.find('input[type="checkbox"]').length.should.equal(3);
93+
});
94+
95+
it('should render checkboxes vertically and large', () => {
96+
const wrapper = mount(
97+
<ToggleButtonGroup type="checkbox" vertical size="lg">
98+
<ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
99+
<ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
100+
<ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
101+
</ToggleButtonGroup>,
102+
);
103+
104+
wrapper
105+
.assertSingle('.btn-group-vertical.btn-group-lg.btn-group-toggle')
106+
.assertNone('.btn-group');
107+
wrapper.find('input[type="checkbox"]').length.should.equal(3);
60108
});
61109

62110
it('should render radios', () => {
63-
mount(
111+
const wrapper = mount(
64112
<ToggleButtonGroup type="radio" name="items">
65113
<ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
66114
<ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
67115
<ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
68116
</ToggleButtonGroup>,
69-
)
70-
.find('input[type="radio"]')
71-
.length.should.equal(3);
117+
);
118+
119+
wrapper
120+
.assertSingle('.btn-group.btn-group-toggle')
121+
.assertNone('btn-group-vertical');
122+
wrapper.find('input[type="radio"]').length.should.equal(3);
123+
});
124+
125+
it('should render radios vertically', () => {
126+
const wrapper = mount(
127+
<ToggleButtonGroup type="radio" name="items" vertical>
128+
<ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
129+
<ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
130+
<ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
131+
</ToggleButtonGroup>,
132+
);
133+
134+
wrapper
135+
.assertSingle('.btn-group-vertical.btn-group-toggle')
136+
.assertNone('.btn-group');
137+
wrapper.find('input[type="radio"]').length.should.equal(3);
138+
});
139+
140+
it('should render radios vertically and small', () => {
141+
const wrapper = mount(
142+
<ToggleButtonGroup type="radio" name="items" vertical size="sm">
143+
<ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
144+
<ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
145+
<ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
146+
</ToggleButtonGroup>,
147+
);
148+
149+
wrapper
150+
.assertSingle('.btn-group-vertical.btn-group-sm.btn-group-toggle')
151+
.assertNone('.btn-group');
152+
wrapper.find('input[type="radio"]').length.should.equal(3);
153+
});
154+
155+
it('should render radios vertically and large', () => {
156+
const wrapper = mount(
157+
<ToggleButtonGroup type="radio" name="items" vertical size="lg">
158+
<ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
159+
<ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
160+
<ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
161+
</ToggleButtonGroup>,
162+
);
163+
164+
wrapper
165+
.assertSingle('.btn-group-vertical.btn-group-lg.btn-group-toggle')
166+
.assertNone('.btn-group');
167+
wrapper.find('input[type="radio"]').length.should.equal(3);
72168
});
73169

74170
it('should select initial values', () => {

‎tests/simple-types-test.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -998,6 +998,8 @@ const MegaComponent = () => (
998998
onChange={noop}
999999
value={[1]}
10001000
style={style}
1001+
vertical
1002+
size="lg"
10011003
>
10021004
<ToggleButton
10031005
value={1}

0 commit comments

Comments
 (0)