feat(ToggleButtonGroup): Add vertical option (#5371)

Co-authored-by: Daniel Höflehner <d.hoeflehner@diagnosia.com>
react-bootstrap · Aug 10, 2020 · c049dac · c049dac
1 parent 4974d5b
commit c049dac
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 15 deletions.
diff --git a/src/ToggleButtonGroup.tsx b/src/ToggleButtonGroup.tsx
@@ -5,14 +5,12 @@ import { useUncontrolled } from 'uncontrollable';
 
 import chainFunction from './createChainedFunction';
 import { map } from './ElementChildren';
-import ButtonGroup from './ButtonGroup';
+import ButtonGroup, { ButtonGroupProps } from './ButtonGroup';
 import ToggleButton from './ToggleButton';
-import {
-  BsPrefixPropsWithChildren,
-  BsPrefixRefForwardingComponent,
-} from './helpers';
+import { BsPrefixRefForwardingComponent } from './helpers';
 
-export interface ToggleButtonRadioProps<T> extends BsPrefixPropsWithChildren {
+export interface ToggleButtonRadioProps<T>
+  extends Omit<ButtonGroupProps, 'toggle'> {
   type?: 'radio';
   name: string;
   value?: T;
@@ -21,7 +19,7 @@ export interface ToggleButtonRadioProps<T> extends BsPrefixPropsWithChildren {
 }
 
 export interface ToggleButtonCheckboxProps<T>
-  extends BsPrefixPropsWithChildren {
+  extends Omit<ButtonGroupProps, 'toggle'> {
   type: 'checkbox';
   name?: string;
   value?: T[];
@@ -69,10 +67,21 @@ const propTypes = {
    * of the buttons
    */
   type: PropTypes.oneOf(['checkbox', 'radio']).isRequired,
+
+  /**
+   * Sets the size for all Buttons in the group.
+   *
+   * @type ('sm'|'lg')
+   */
+  size: PropTypes.string,
+
+  /** Make the set of Buttons appear vertically stacked. */
+  vertical: PropTypes.bool,
 };
 
 const defaultProps = {
   type: 'radio',
+  vertical: false,
 };
 
 const ToggleButtonGroup: ToggleButtonGroup<any> = (React.forwardRef(

diff --git a/test/ToggleButtonGroupSpec.js b/test/ToggleButtonGroupSpec.js
@@ -48,27 +48,123 @@ describe('ToggleButton', () => {
 
 describe('ToggleButtonGroup', () => {
   it('should render checkboxes', () => {
-    mount(
+    const wrapper = mount(
       <ToggleButtonGroup type="checkbox">
         <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
       </ToggleButtonGroup>,
-    )
-      .find('input[type="checkbox"]')
-      .length.should.equal(3);
+    );
+
+    wrapper
+      .assertSingle('.btn-group.btn-group-toggle')
+      .assertNone('.btn-group-vertical');
+    wrapper.find('input[type="checkbox"]').length.should.equal(3);
+  });
+
+  it('should render checkboxes vertically', () => {
+    const wrapper = mount(
+      <ToggleButtonGroup type="checkbox" vertical>
+        <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
+      </ToggleButtonGroup>,
+    );
+
+    wrapper
+      .assertSingle('.btn-group-vertical.btn-group-toggle')
+      .assertNone('.btn-group');
+    wrapper.find('input[type="checkbox"]').length.should.equal(3);
+  });
+
+  it('should render checkboxes vertically and small', () => {
+    const wrapper = mount(
+      <ToggleButtonGroup type="checkbox" vertical size="sm">
+        <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
+      </ToggleButtonGroup>,
+    );
+
+    wrapper
+      .assertSingle('.btn-group-vertical.btn-group-sm.btn-group-toggle')
+      .assertNone('.btn-group');
+    wrapper.find('input[type="checkbox"]').length.should.equal(3);
+  });
+
+  it('should render checkboxes vertically and large', () => {
+    const wrapper = mount(
+      <ToggleButtonGroup type="checkbox" vertical size="lg">
+        <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
+      </ToggleButtonGroup>,
+    );
+
+    wrapper
+      .assertSingle('.btn-group-vertical.btn-group-lg.btn-group-toggle')
+      .assertNone('.btn-group');
+    wrapper.find('input[type="checkbox"]').length.should.equal(3);
   });
 
   it('should render radios', () => {
-    mount(
+    const wrapper = mount(
       <ToggleButtonGroup type="radio" name="items">
         <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
       </ToggleButtonGroup>,
-    )
-      .find('input[type="radio"]')
-      .length.should.equal(3);
+    );
+
+    wrapper
+      .assertSingle('.btn-group.btn-group-toggle')
+      .assertNone('btn-group-vertical');
+    wrapper.find('input[type="radio"]').length.should.equal(3);
+  });
+
+  it('should render radios vertically', () => {
+    const wrapper = mount(
+      <ToggleButtonGroup type="radio" name="items" vertical>
+        <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
+      </ToggleButtonGroup>,
+    );
+
+    wrapper
+      .assertSingle('.btn-group-vertical.btn-group-toggle')
+      .assertNone('.btn-group');
+    wrapper.find('input[type="radio"]').length.should.equal(3);
+  });
+
+  it('should render radios vertically and small', () => {
+    const wrapper = mount(
+      <ToggleButtonGroup type="radio" name="items" vertical size="sm">
+        <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
+      </ToggleButtonGroup>,
+    );
+
+    wrapper
+      .assertSingle('.btn-group-vertical.btn-group-sm.btn-group-toggle')
+      .assertNone('.btn-group');
+    wrapper.find('input[type="radio"]').length.should.equal(3);
+  });
+
+  it('should render radios vertically and large', () => {
+    const wrapper = mount(
+      <ToggleButtonGroup type="radio" name="items" vertical size="lg">
+        <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
+        <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
+      </ToggleButtonGroup>,
+    );
+
+    wrapper
+      .assertSingle('.btn-group-vertical.btn-group-lg.btn-group-toggle')
+      .assertNone('.btn-group');
+    wrapper.find('input[type="radio"]').length.should.equal(3);
   });
 
   it('should select initial values', () => {

diff --git a/tests/simple-types-test.tsx b/tests/simple-types-test.tsx
@@ -998,6 +998,8 @@ const MegaComponent = () => (
       onChange={noop}
       value={[1]}
       style={style}
+      vertical
+      size="lg"
     >
       <ToggleButton
         value={1}