feat(v5): Drop bsPrefix from FormGroup (#5362)

react-bootstrap · Aug 5, 2020 · 091b51e · 091b51e
1 parent 77ba459
commit 091b51e
Show file tree

Hide file tree

Showing 20 changed files with 52 additions and 260 deletions.
diff --git a/src/FormGroup.tsx b/src/FormGroup.tsx
@@ -1,26 +1,18 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 
 import FormContext from './FormContext';
-import { useBootstrapPrefix } from './ThemeProvider';
-import {
-  BsPrefixPropsWithChildren,
-  BsPrefixRefForwardingComponent,
-} from './helpers';
+import { AsProp, BsPrefixRefForwardingComponent } from './helpers';
 
-export interface FormGroupProps extends BsPrefixPropsWithChildren {
+export interface FormGroupProps
+  extends React.HTMLAttributes<HTMLElement>,
+    AsProp {
   controlId?: string;
 }
 
 type FormGroup = BsPrefixRefForwardingComponent<'div', FormGroupProps>;
 
 const propTypes = {
-  /**
-   * @default 'form-group'
-   */
-  bsPrefix: PropTypes.string,
-
   as: PropTypes.elementType,
 
   /**
@@ -42,8 +34,6 @@ const propTypes = {
 const FormGroup: FormGroup = React.forwardRef(
   (
     {
-      bsPrefix,
-      className,
       children,
       controlId,
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
@@ -52,16 +42,11 @@ const FormGroup: FormGroup = React.forwardRef(
     },
     ref,
   ) => {
-    bsPrefix = useBootstrapPrefix(bsPrefix, 'form-group');
     const context = useMemo(() => ({ controlId }), [controlId]);
 
     return (
       <FormContext.Provider value={context}>
-        <Component
-          {...props}
-          ref={ref}
-          className={classNames(className, bsPrefix)}
-        >
+        <Component {...props} ref={ref}>
           {children}
         </Component>
       </FormContext.Provider>

diff --git a/test/FormGroupSpec.js b/test/FormGroupSpec.js
@@ -15,14 +15,6 @@ describe('<FormGroup>', () => {
     ).assertSingle('.child1');
   });
 
-  it('renders with form-group class', () => {
-    mount(
-      <FormGroup>
-        <span />
-      </FormGroup>,
-    );
-  });
-
   it('provided controlId to label and control', () => {
     let wrapper = mount(
       <FormGroup controlId="my-control">

diff --git a/tests/simple-types-test.tsx b/tests/simple-types-test.tsx
@@ -363,7 +363,6 @@ const MegaComponent = () => (
         ref={React.createRef<HTMLDivElement>()}
         as="div"
         controlId="exampleForm.ControlInput1"
-        bsPrefix="formgroup"
         style={style}
       >
         <Form.Label

diff --git a/www/src/examples/Form/Basic.js b/www/src/examples/Form/Basic.js
@@ -1,17 +1,17 @@
 <Form>
-  <Form.Group controlId="formBasicEmail">
+  <Form.Group className="mb-3" controlId="formBasicEmail">
     <Form.Label>Email address</Form.Label>
     <Form.Control type="email" placeholder="Enter email" />
     <Form.Text className="text-muted">
       We'll never share your email with anyone else.
     </Form.Text>
   </Form.Group>
 
-  <Form.Group controlId="formBasicPassword">
+  <Form.Group className="mb-3" controlId="formBasicPassword">
     <Form.Label>Password</Form.Label>
     <Form.Control type="password" placeholder="Password" />
   </Form.Group>
-  <Form.Group controlId="formBasicCheckbox">
+  <Form.Group className="mb-3" controlId="formBasicCheckbox">
     <Form.Check type="checkbox" label="Check me out" />
   </Form.Group>
   <Button variant="primary" type="submit">

diff --git a/www/src/examples/Form/Controls.js b/www/src/examples/Form/Controls.js
diff --git a/www/src/examples/Form/FormDisabled.js b/www/src/examples/Form/FormDisabled.js
@@ -1,16 +1,16 @@
 <Form>
   <fieldset disabled>
-    <Form.Group>
+    <Form.Group className="mb-3">
       <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label>
       <Form.Control id="disabledTextInput" placeholder="Disabled input" />
     </Form.Group>
-    <Form.Group>
+    <Form.Group className="mb-3">
       <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label>
       <Form.Select id="disabledSelect">
         <option>Disabled select</option>
       </Form.Select>
     </Form.Group>
-    <Form.Group>
+    <Form.Group className="mb-3">
       <Form.Check
         type="checkbox"
         id="disabledFieldsetCheck"

diff --git a/www/src/examples/Form/FormDisabledInputs.js b/www/src/examples/Form/FormDisabledInputs.js
@@ -1,15 +1,15 @@
 <>
-  <Form.Group>
+  <Form.Group className="mb-3">
     <Form.Label>Disabled input</Form.Label>
     <Form.Control placeholder="Disabled input" disabled />
   </Form.Group>
-  <Form.Group>
+  <Form.Group className="mb-3">
     <Form.Label>Disabled select menu</Form.Label>
     <Form.Select disabled>
       <option>Disabled select</option>
     </Form.Select>
   </Form.Group>
-  <Form.Group>
+  <Form.Group className="mb-3">
     <Form.Check type="checkbox" label="Can't check this" disabled />
   </Form.Group>
 </>;
diff --git a/www/src/examples/Form/FormGroup.js b/www/src/examples/Form/FormGroup.js
@@ -1,9 +1,9 @@
 <Form>
-  <Form.Group controlId="formGroupEmail">
+  <Form.Group className="mb-3" controlId="formGroupEmail">
     <Form.Label>Email address</Form.Label>
     <Form.Control type="email" placeholder="Enter email" />
   </Form.Group>
-  <Form.Group controlId="formGroupPassword">
+  <Form.Group className="mb-3" controlId="formGroupPassword">
     <Form.Label>Password</Form.Label>
     <Form.Control type="password" placeholder="Password" />
   </Form.Group>

diff --git a/www/src/examples/Form/FormLabelSizing.js b/www/src/examples/Form/FormLabelSizing.js
@@ -1,4 +1,4 @@
-<Form.Group>
+<>
   <Row>
     <Form.Label column="lg" lg={2}>
       Large Text
@@ -25,4 +25,4 @@
       <Form.Control size="sm" type="text" placeholder="Small text" />
     </Col>
   </Row>
-</Form.Group>;
+</>;
diff --git a/www/src/examples/Form/GridComplex.js b/www/src/examples/Form/GridComplex.js
@@ -1,5 +1,5 @@
 <Form>
-  <Row>
+  <Row className="mb-3">
     <Form.Group as={Col} controlId="formGridEmail">
       <Form.Label>Email</Form.Label>
       <Form.Control type="email" placeholder="Enter email" />
@@ -11,17 +11,17 @@
     </Form.Group>
   </Row>
 
-  <Form.Group controlId="formGridAddress1">
+  <Form.Group className="mb-3" controlId="formGridAddress1">
     <Form.Label>Address</Form.Label>
     <Form.Control placeholder="1234 Main St" />
   </Form.Group>
 
-  <Form.Group controlId="formGridAddress2">
+  <Form.Group className="mb-3" controlId="formGridAddress2">
     <Form.Label>Address 2</Form.Label>
     <Form.Control placeholder="Apartment, studio, or floor" />
   </Form.Group>
 
-  <Row>
+  <Row className="mb-3">
     <Form.Group as={Col} controlId="formGridCity">
       <Form.Label>City</Form.Label>
       <Form.Control />
@@ -41,7 +41,7 @@
     </Form.Group>
   </Row>
 
-  <Form.Group id="formGridCheckbox">
+  <Form.Group className="mb-3" id="formGridCheckbox">
     <Form.Check type="checkbox" label="Check me out" />
   </Form.Group>
 

diff --git a/www/src/examples/Form/Horizontal.js b/www/src/examples/Form/Horizontal.js
@@ -1,5 +1,5 @@
 <Form>
-  <Form.Group as={Row} controlId="formHorizontalEmail">
+  <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">
     <Form.Label column sm={2}>
       Email
     </Form.Label>
@@ -8,7 +8,7 @@
     </Col>
   </Form.Group>
 
-  <Form.Group as={Row} controlId="formHorizontalPassword">
+  <Form.Group as={Row} className="mb-3" controlId="formHorizontalPassword">
     <Form.Label column sm={2}>
       Password
     </Form.Label>
@@ -17,7 +17,7 @@
     </Col>
   </Form.Group>
   <fieldset>
-    <Form.Group as={Row}>
+    <Form.Group as={Row} className="mb-3">
       <Form.Label as="legend" column sm={2}>
         Radios
       </Form.Label>
@@ -43,13 +43,13 @@
       </Col>
     </Form.Group>
   </fieldset>
-  <Form.Group as={Row} controlId="formHorizontalCheck">
+  <Form.Group as={Row} className="mb-3" controlId="formHorizontalCheck">
     <Col sm={{ span: 10, offset: 2 }}>
       <Form.Check label="Remember me" />
     </Col>
   </Form.Group>
 
-  <Form.Group as={Row}>
+  <Form.Group as={Row} className="mb-3">
     <Col sm={{ span: 10, offset: 2 }}>
       <Button type="submit">Sign in</Button>
     </Col>

diff --git a/www/src/examples/Form/InputSizes.js b/www/src/examples/Form/InputSizes.js
@@ -1,7 +1,7 @@
-<Form.Group>
+<>
   <Form.Control size="lg" type="text" placeholder="Large text" />
   <br />
   <Form.Control type="text" placeholder="Normal text" />
   <br />
   <Form.Control size="sm" type="text" placeholder="Small text" />
-</Form.Group>;
+</>;
diff --git a/www/src/examples/Form/Plaintext.js b/www/src/examples/Form/Plaintext.js
@@ -1,5 +1,5 @@
 <Form>
-  <Form.Group as={Row} controlId="formPlaintextEmail">
+  <Form.Group as={Row} className="mb-3" controlId="formPlaintextEmail">
     <Form.Label column sm="2">
       Email
     </Form.Label>
@@ -8,7 +8,7 @@
     </Col>
   </Form.Group>
 
-  <Form.Group as={Row} controlId="formPlaintextPassword">
+  <Form.Group as={Row} className="mb-3" controlId="formPlaintextPassword">
     <Form.Label column sm="2">
       Password
     </Form.Label>

diff --git a/www/src/examples/Form/SelectSizes.js b/www/src/examples/Form/SelectSizes.js
@@ -1,4 +1,4 @@
-<Form.Group>
+<>
   <Form.Select size="lg">
     <option>Large select</option>
   </Form.Select>
@@ -10,4 +10,4 @@
   <Form.Select size="sm">
     <option>Small select</option>
   </Form.Select>
-</Form.Group>;
+</>;
diff --git a/www/src/examples/Form/TextControls.js b/www/src/examples/Form/TextControls.js
@@ -1,9 +1,9 @@
 <Form>
-  <Form.Group controlId="exampleForm.ControlInput1">
+  <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
     <Form.Label>Email address</Form.Label>
     <Form.Control type="email" placeholder="name@example.com" />
   </Form.Group>
-  <Form.Group controlId="exampleForm.ControlTextarea1">
+  <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
     <Form.Label>Example textarea</Form.Label>
     <Form.Control as="textarea" rows="3" />
   </Form.Group>