feat(v5): drop form row support

bpas247 · kyletsang · commit e156483c069b · 2020-07-31T11:01:53.000-07:00
Drops support for the Form Row component, and removes any doc
references associated with it.
diff --git a/src/Form.tsx b/src/Form.tsx
@@ -11,11 +11,8 @@ import FormSelect from './FormSelect';
 import FormText from './FormText';
 import Switch from './Switch';
 import { useBootstrapPrefix } from './ThemeProvider';
-import createWithBsPrefix from './createWithBsPrefix';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 
-const FormRow = createWithBsPrefix('form-row');
-
 export interface FormProps
   extends React.HTMLAttributes<HTMLElement>,
     BsPrefixProps {
@@ -24,7 +21,6 @@ export interface FormProps
 }
 
 type Form = BsPrefixRefForwardingComponent<'form', FormProps> & {
-  Row: typeof FormRow;
   Group: typeof FormGroup;
   Control: typeof FormControl;
   Check: typeof FormCheck;
@@ -102,7 +98,6 @@ FormImpl.displayName = 'Form';
 FormImpl.propTypes = propTypes;
 FormImpl.defaultProps = defaultProps;
 
-FormImpl.Row = FormRow;
 FormImpl.Group = FormGroup;
 FormImpl.Control = FormControl;
 FormImpl.Check = FormCheck;
diff --git a/tests/simple-types-test.tsx b/tests/simple-types-test.tsx
@@ -365,7 +365,6 @@ const MegaComponent = () => (
       validated
       bsPrefix="form"
     >
-      <Form.Row as="div" bsPrefix="formrow" style={style} />
       <Form.Group
         ref={React.createRef<HTMLDivElement>()}
         as="div"
diff --git a/www/src/examples/Form/FormLabelSizing.js b/www/src/examples/Form/FormLabelSizing.js
@@ -1,28 +1,28 @@
 <Form.Group>
-  <Form.Row>
+  <Row>
     <Form.Label column="lg" lg={2}>
       Large Text
     </Form.Label>
     <Col>
       <Form.Control size="lg" type="text" placeholder="Large text" />
     </Col>
-  </Form.Row>
+  </Row>
   <br />
-  <Form.Row>
+  <Row>
     <Form.Label column lg={2}>
       Normal Text
     </Form.Label>
     <Col>
       <Form.Control type="text" placeholder="Normal text" />
     </Col>
-  </Form.Row>
+  </Row>
   <br />
-  <Form.Row>
+  <Row>
     <Form.Label column="sm" lg={2}>
       Small Text
     </Form.Label>
     <Col>
       <Form.Control size="sm" type="text" placeholder="Small text" />
     </Col>
-  </Form.Row>
+  </Row>
 </Form.Group>;
diff --git a/www/src/examples/Form/FormRow.js b/www/src/examples/Form/FormRow.js
diff --git a/www/src/examples/Form/GridAutoSizing.js b/www/src/examples/Form/GridAutoSizing.js
@@ -1,5 +1,5 @@
 <Form>
-  <Form.Row className="align-items-center">
+  <Row className="align-items-center">
     <Col xs="auto">
       <Form.Label htmlFor="inlineFormInput" srOnly>
         Name
@@ -34,5 +34,5 @@
         Submit
       </Button>
     </Col>
-  </Form.Row>
+  </Row>
 </Form>;
diff --git a/www/src/examples/Form/GridAutoSizingColMix.js b/www/src/examples/Form/GridAutoSizingColMix.js
@@ -1,5 +1,5 @@
 <Form>
-  <Form.Row className="align-items-center">
+  <Row className="align-items-center">
     <Col sm={3} className="my-1">
       <Form.Label htmlFor="inlineFormInputName" srOnly>
         Name
@@ -23,5 +23,5 @@
     <Col xs="auto" className="my-1">
       <Button type="submit">Submit</Button>
     </Col>
-  </Form.Row>
+  </Row>
 </Form>;
diff --git a/www/src/examples/Form/GridAutoSizingCustom.js b/www/src/examples/Form/GridAutoSizingCustom.js
@@ -1,5 +1,5 @@
 <Form>
-  <Form.Row className="align-items-center">
+  <Row className="align-items-center">
     <Col xs="auto" className="my-1">
       <Form.Label className="mr-sm-2" htmlFor="inlineFormCustomSelect" srOnly>
         Preference
@@ -22,5 +22,5 @@
     <Col xs="auto" className="my-1">
       <Button type="submit">Submit</Button>
     </Col>
-  </Form.Row>
+  </Row>
 </Form>;
diff --git a/www/src/examples/Form/GridColSizes.js b/www/src/examples/Form/GridColSizes.js
@@ -1,5 +1,5 @@
 <Form>
-  <Form.Row>
+  <Row>
     <Col xs={7}>
       <Form.Control placeholder="City" />
     </Col>
@@ -9,5 +9,5 @@
     <Col>
       <Form.Control placeholder="Zip" />
     </Col>
-  </Form.Row>
+  </Row>
 </Form>;
diff --git a/www/src/examples/Form/GridComplex.js b/www/src/examples/Form/GridComplex.js
@@ -1,5 +1,5 @@
 <Form>
-  <Form.Row>
+  <Row>
     <Form.Group as={Col} controlId="formGridEmail">
       <Form.Label>Email</Form.Label>
       <Form.Control type="email" placeholder="Enter email" />
@@ -9,7 +9,7 @@
       <Form.Label>Password</Form.Label>
       <Form.Control type="password" placeholder="Password" />
     </Form.Group>
-  </Form.Row>
+  </Row>
 
   <Form.Group controlId="formGridAddress1">
     <Form.Label>Address</Form.Label>
@@ -21,7 +21,7 @@
     <Form.Control placeholder="Apartment, studio, or floor" />
   </Form.Group>
 
-  <Form.Row>
+  <Row>
     <Form.Group as={Col} controlId="formGridCity">
       <Form.Label>City</Form.Label>
       <Form.Control />
@@ -39,7 +39,7 @@
       <Form.Label>Zip</Form.Label>
       <Form.Control />
     </Form.Group>
-  </Form.Row>
+  </Row>
 
   <Form.Group id="formGridCheckbox">
     <Form.Check type="checkbox" label="Check me out" />
diff --git a/www/src/examples/Form/ValidationFormik.js b/www/src/examples/Form/ValidationFormik.js
@@ -30,7 +30,7 @@ function FormExample() {
         errors,
       }) => (
         <Form noValidate onSubmit={handleSubmit}>
-          <Form.Row>
+          <Row>
             <Form.Group as={Col} md="4" controlId="validationFormik01">
               <Form.Label>First name</Form.Label>
               <Form.Control
@@ -74,8 +74,8 @@ function FormExample() {
                 </Form.Control.Feedback>
               </InputGroup>
             </Form.Group>
-          </Form.Row>
-          <Form.Row>
+          </Row>
+          <Row>
             <Form.Group as={Col} md="6" controlId="validationFormik03">
               <Form.Label>City</Form.Label>
               <Form.Control
@@ -120,7 +120,7 @@ function FormExample() {
                 {errors.zip}
               </Form.Control.Feedback>
             </Form.Group>
-          </Form.Row>
+          </Row>
           <Form.Group>
             <Form.Check
               required
diff --git a/www/src/examples/Form/ValidationNative.js b/www/src/examples/Form/ValidationNative.js
@@ -13,7 +13,7 @@ function FormExample() {
 
   return (
     <Form noValidate validated={validated} onSubmit={handleSubmit}>
-      <Form.Row>
+      <Row>
         <Form.Group as={Col} md="4" controlId="validationCustom01">
           <Form.Label>First name</Form.Label>
           <Form.Control
@@ -51,8 +51,8 @@ function FormExample() {
             </Form.Control.Feedback>
           </InputGroup>
         </Form.Group>
-      </Form.Row>
-      <Form.Row>
+      </Row>
+      <Row>
         <Form.Group as={Col} md="6" controlId="validationCustom03">
           <Form.Label>City</Form.Label>
           <Form.Control type="text" placeholder="City" required />
@@ -74,7 +74,7 @@ function FormExample() {
             Please provide a valid zip.
           </Form.Control.Feedback>
         </Form.Group>
-      </Form.Row>
+      </Row>
       <Form.Group>
         <Form.Check
           required
diff --git a/www/src/examples/Form/ValidationTooltips.js b/www/src/examples/Form/ValidationTooltips.js
@@ -31,7 +31,7 @@ function FormExample() {
         errors,
       }) => (
         <Form noValidate onSubmit={handleSubmit}>
-          <Form.Row>
+          <Row>
             <Form.Group as={Col} md="4" controlId="validationFormik101">
               <Form.Label>First name</Form.Label>
               <Form.Control
@@ -75,8 +75,8 @@ function FormExample() {
                 </Form.Control.Feedback>
               </InputGroup>
             </Form.Group>
-          </Form.Row>
-          <Form.Row>
+          </Row>
+          <Row>
             <Form.Group as={Col} md="6" controlId="validationFormik103">
               <Form.Label>City</Form.Label>
               <Form.Control
@@ -121,7 +121,7 @@ function FormExample() {
                 {errors.zip}
               </Form.Control.Feedback>
             </Form.Group>
-          </Form.Row>
+          </Row>
           <Form.Group>
             <Form.File
               className="position-relative"
diff --git a/www/src/pages/components/forms.js b/www/src/pages/components/forms.js
@@ -12,7 +12,6 @@ import FormFile from '../../examples/Form/FormFile';
 import FormDisabled from '../../examples/Form/FormDisabled';
 import FormDisabledInputs from '../../examples/Form/FormDisabledInputs';
 import FormGroup from '../../examples/Form/FormGroup';
-import FormRow from '../../examples/Form/FormRow';
 import FormText from '../../examples/Form/FormText';
 import FormTextInline from '../../examples/Form/FormTextInline';
 import FormLabelSizing from '../../examples/Form/FormLabelSizing';
@@ -221,25 +220,11 @@ export default withLayout(function FormControlsSection({ data }) {
         additional alignment options.
       </p>
       <ReactPlayground codeText={GridBasic} />
-      <LinkedHeading h="4" id="forms-layout-form-row">
-        Form row
-      </LinkedHeading>
-      <p>
-        You may also swap <code>{'<Row>'}</code> for <code>{'<Form.Row>'}</code>
-        , a variation of the standard grid row that overrides the default column
-        gutters for tighter and more compact layouts.
-      </p>
-      <ReactPlayground codeText={FormRow} />
       <p>More complex layouts can also be created with the grid system.</p>
       <ReactPlayground codeText={GridComplex} />
       <LinkedHeading h="4" id="horizontal-forms">
         Horizontal form
       </LinkedHeading>
-      <p>
-        You may also swap <code>{'<Row>'}</code> for <code>{'<Form.Row>'}</code>
-        , a variation of the standard grid row that overrides the default column
-        gutters for tighter and more compact layouts.
-      </p>
       <ReactPlayground codeText={Horizontal} />
       <LinkedHeading h="4" id="horizontal-forms-label-sizing">
         Horizontal form label sizing
@@ -254,12 +239,11 @@ export default withLayout(function FormControlsSection({ data }) {
       </LinkedHeading>
       <p>
         As shown in the previous examples, our grid system allows you to place
-        any number of <code>{'<Col>'}</code>s within a <code>{'<Row>'}</code> or{' '}
-        <code>{'<Form.Row>'}</code>. They'll split the available width equally
-        between them. You may also pick a subset of your columns to take up more
-        or less space, while the remaining <code>{'<Col>'}</code>s equally split
-        the rest, with specific column classes like{' '}
-        <code>{'<Col xs={7}>'}</code>.
+        any number of <code>{'<Col>'}</code>s within a <code>{'<Row>'}</code>.
+        They'll split the available width equally between them. You may also
+        pick a subset of your columns to take up more or less space, while the
+        remaining <code>{'<Col>'}</code>s equally split the rest, with specific
+        column classes like <code>{'<Col xs={7}>'}</code>.
       </p>
       <ReactPlayground codeText={GridColSizes} />
       <LinkedHeading h="4" id="forms-auto-sizing">
@@ -544,7 +528,6 @@ export default withLayout(function FormControlsSection({ data }) {
         API
       </LinkedHeading>
       <ComponentApi metadata={data.Form} />
-      <ComponentApi metadata={data.FormRow} exportedBy={data.Form} />
       <ComponentApi metadata={data.FormGroup} exportedBy={data.Form} />
       <ComponentApi metadata={data.FormLabel} exportedBy={data.Form} />
       <ComponentApi metadata={data.FormText} exportedBy={data.Form} />
@@ -573,9 +556,6 @@ export const query = graphql`
     Form: componentMetadata(displayName: { eq: "Form" }) {
       ...ComponentApi_metadata
     }
-    FormRow: componentMetadata(displayName: { eq: "FormRow" }) {
-      ...ComponentApi_metadata
-    }
     FormGroup: componentMetadata(displayName: { eq: "FormGroup" }) {
       ...ComponentApi_metadata
     }
diff --git a/www/src/pages/migrating.mdx b/www/src/pages/migrating.mdx
@@ -48,3 +48,7 @@ Below is a _rough_ account of the breaking API changes as well as the minimal ch
 - removed `custom`.
 - removed `bsCustomPrefix`.
 - dropped support for `type` supporting the `range` value in favor of FormRange.
+
+### FormRow
+
+- removed. Use `Row` instead.

Original file line number	Diff line number	Diff line change
`@@ -365,7 +365,6 @@ const MegaComponent = () => (`
`365`	`365`	`validated`
`366`	`366`	`bsPrefix="form"`
`367`	`367`	`>`
`368`		`- <Form.Row as="div" bsPrefix="formrow" style={style} />`
`369`	`368`	`<Form.Group`
`370`	`369`	`ref={React.createRef<HTMLDivElement>()}`
`371`	`370`	`as="div"`