feat(v5): Drop toggle prop from ButtonGroup

Author: kyletsang

src/ButtonGroup.tsx

@@ -11,7 +11,6 @@ import {
 export interface ButtonGroupProps extends BsPrefixPropsWithChildren {
   role?: string;
   size?: 'sm' | 'lg';
-  toggle?: boolean;
   vertical?: boolean;
 }
 
@@ -33,13 +32,6 @@ const propTypes = {
   /** Make the set of Buttons appear vertically stacked. */
   vertical: PropTypes.bool,
 
-  /**
-   * Display as a button toggle group.
-   *
-   * (Generally it's better to use `ToggleButtonGroup` directly)
-   */
-  toggle: PropTypes.bool,
-
   /**
    * An ARIA role describing the button group. Usually the default
    * "group" role is fine. An `aria-label` or `aria-labelledby`
@@ -52,7 +44,6 @@ const propTypes = {
 
 const defaultProps = {
   vertical: false,
-  toggle: false,
   role: 'group',
 };
 
@@ -61,7 +52,6 @@ const ButtonGroup: ButtonGroup = React.forwardRef(
     {
       bsPrefix,
       size,
-      toggle,
       vertical,
       className,
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
@@ -83,7 +73,6 @@ const ButtonGroup: ButtonGroup = React.forwardRef(
           className,
           baseClass,
           size && `${prefix}-${size}`,
-          toggle && `${prefix}-toggle`,
         )}
       />
     );

src/ToggleButtonGroup.tsx

@@ -120,7 +120,7 @@ const ToggleButtonGroup: ToggleButtonGroup<any> = (React.forwardRef(
     );
 
     return (
-      <ButtonGroup {...controlledProps} ref={ref as any} toggle>
+      <ButtonGroup {...controlledProps} ref={ref as any}>
         {map(children, (child) => {
           const values = getValues();
           const { value: childVal, onChange: childOnChange } = child.props;

test/ButtonGroupSpec.js

@@ -30,14 +30,6 @@ describe('ButtonGroup', () => {
       .assertNone('.btn-group');
   });
 
-  it('Should add toggle variation', () => {
-    mount(
-      <ButtonGroup toggle>
-        <Button>Title</Button>
-      </ButtonGroup>,
-    ).assertSingle('.btn-group.btn-group-toggle');
-  });
-
   it('Should have div as default component', () => {
     mount(<ButtonGroup />).assertSingle('div');
   });

tests/simple-types-test.tsx

@@ -136,7 +136,6 @@ const MegaComponent = () => (
         as="div"
         role="group"
         size="lg"
-        toggle
         vertical
         bsPrefix="btn-group"
         style={style}

www/src/pages/components/buttons.mdx

@@ -105,7 +105,7 @@ The above handles styling, But requires manually controlling the
 
 
 For a nicer experience with checked state management use the
-`<ToggleButtonGroup>` instead of a `<ButtonGroup toggle>` component.
+`<ToggleButtonGroup>` instead of a `<ButtonGroup>` component.
 The group behaves as a form component, where the `value` is an array of the selected
 `value`s for a named checkbox group or the single toggled
 `value` in a similarly named radio group.

www/src/pages/migrating.mdx

@@ -28,6 +28,10 @@ there may be a React-Bootstrap v3 targeting Bootstrap 6 depending on what's best
 
 Below is a _rough_ account of the breaking API changes as well as the minimal change to migrate
 
+### ButtonGroup
+
+- removed `toggle`.
+
 ### Form
 
 - removed `inline`.