feat(v5): drop form inline support

Drops support for the form inline feature, and removes any doc
references associated with it.

src/Form.tsx

@@ -16,7 +16,6 @@ import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 export interface FormProps
   extends React.HTMLAttributes<HTMLElement>,
     BsPrefixProps {
-  inline?: boolean;
   validated?: boolean;
 }
 
@@ -48,12 +47,6 @@ const propTypes = {
    */
   _ref: PropTypes.any,
 
-  /**
-   * Display the series of labels, form controls,
-   * and buttons on a single horizontal row
-   */
-  inline: PropTypes.bool,
-
   /**
    * Mark a form as having been validated. Setting it to `true` will
    * toggle any validation styles on the forms elements.
@@ -62,15 +55,10 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  inline: false,
-};
-
 const FormImpl: Form = (React.forwardRef(
   (
     {
       bsPrefix,
-      inline,
       className,
       validated,
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
@@ -87,7 +75,7 @@ const FormImpl: Form = (React.forwardRef(
         className={classNames(
           className,
           validated && 'was-validated',
-          inline && `${bsPrefix}-inline`,
+          bsPrefix,
         )}
       />
     );
@@ -96,7 +84,6 @@ const FormImpl: Form = (React.forwardRef(
 
 FormImpl.displayName = 'Form';
 FormImpl.propTypes = propTypes;
-FormImpl.defaultProps = defaultProps;
 
 FormImpl.Group = FormGroup;
 FormImpl.Control = FormControl;

test/FormSpec.js

@@ -5,16 +5,6 @@ import Form from '../src/Form';
 import FormGroup from '../src/FormGroup';
 
 describe('<Form>', () => {
-  it('should support inline', () => {
-    mount(
-      <Form inline className="my-form">
-        <FormGroup />
-      </Form>,
-    )
-      .assertSingle('form.form-inline.my-form')
-      .assertSingle('FormGroup');
-  });
-
   it('should support custom `as`', () => {
     mount(
       <Form as="fieldset" className="my-form">

tests/simple-types-test.tsx

@@ -361,7 +361,6 @@ const MegaComponent = () => (
     <Form
       ref={React.createRef<HTMLFormElement>()}
       as="form"
-      inline
       validated
       bsPrefix="form"
     >

www/src/examples/Form/Validation.js

@@ -82,7 +82,7 @@
     </Form.Group>
   </Form>
 
-  <Form as="fieldset" inline>
+  <Form as="fieldset">
     <Form.Group controlId="formValidationWarning4" validationState="warning">
       <Form.Label>Input with warning</Form.Label> <Form.Control type="text" />
       <Form.Control />

www/src/examples/Navbar/Basic.js

@@ -13,9 +13,5 @@
         <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
       </NavDropdown>
     </Nav>
-    <Form inline>
-      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
-      <Button variant="outline-success">Search</Button>
-    </Form>
   </Navbar.Collapse>
 </Navbar>;

www/src/examples/Navbar/ColorSchemes.js

@@ -6,10 +6,6 @@
       <Nav.Link href="#features">Features</Nav.Link>
       <Nav.Link href="#pricing">Pricing</Nav.Link>
     </Nav>
-    <Form inline>
-      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
-      <Button variant="outline-info">Search</Button>
-    </Form>
   </Navbar>
   <br />
   <Navbar bg="primary" variant="dark">
@@ -19,10 +15,6 @@
       <Nav.Link href="#features">Features</Nav.Link>
       <Nav.Link href="#pricing">Pricing</Nav.Link>
     </Nav>
-    <Form inline>
-      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
-      <Button variant="outline-light">Search</Button>
-    </Form>
   </Navbar>
 
   <br />
@@ -33,9 +25,5 @@
       <Nav.Link href="#features">Features</Nav.Link>
       <Nav.Link href="#pricing">Pricing</Nav.Link>
     </Nav>
-    <Form inline>
-      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
-      <Button variant="outline-primary">Search</Button>
-    </Form>
   </Navbar>
 </>;

www/src/pages/components/forms.js

@@ -13,7 +13,6 @@ import FormDisabled from '../../examples/Form/FormDisabled';
 import FormDisabledInputs from '../../examples/Form/FormDisabledInputs';
 import FormGroup from '../../examples/Form/FormGroup';
 import FormText from '../../examples/Form/FormText';
-import FormTextInline from '../../examples/Form/FormTextInline';
 import FormLabelSizing from '../../examples/Form/FormLabelSizing';
 import GridAutoSizing from '../../examples/Form/GridAutoSizing';
 import GridAutoSizingCustom from '../../examples/Form/GridAutoSizingCustom';
@@ -22,7 +21,6 @@ import GridBasic from '../../examples/Form/GridBasic';
 import GridColSizes from '../../examples/Form/GridColSizes';
 import GridComplex from '../../examples/Form/GridComplex';
 import Horizontal from '../../examples/Form/Horizontal';
-import Inline from '../../examples/Form/Inline';
 import InputReadOnly from '../../examples/Form/InputReadOnly';
 import FormInputSizes from '../../examples/Form/InputSizes';
 import NoLabels from '../../examples/Form/NoLabels';
@@ -202,9 +200,8 @@ export default withLayout(function FormControlsSection({ data }) {
         The <code>FormGroup</code> component is the easiest way to add some
         structure to forms. It provides a flexible container for grouping of
         labels, controls, optional help text, and form validation messaging. By
-        default it only applies margin-bottom, but it picks up additional styles
-        in <code>{'<Form inline >'}</code> as needed. Use it with{' '}
-        <code>fieldset</code>s, <code>div</code>s, or nearly any other element.
+        default it only applies margin-bottom. Use it with <code>fieldset</code>
+        s, <code>div</code>s, or nearly any other element.
       </p>
       <p>
         You also add the <code>controlId</code> prop to accessibly wire the
@@ -266,51 +263,6 @@ export default withLayout(function FormControlsSection({ data }) {
         supported.
       </p>
       <ReactPlayground codeText={GridAutoSizingCustom} />
-      <LinkedHeading h="3" id="forms-inline">
-        Inline forms
-      </LinkedHeading>
-      <p>
-        Use the <code>inline</code> prop to display a series of labels, form
-        controls, and buttons on a single horizontal row. Form controls within
-        forms vary slightly from their default states.
-      </p>
-      <ul>
-        <li>
-          Controls are <code>display: flex</code>, collapsing any HTML white
-          space and allowing you to provide alignment control with spacing and
-          utilities.
-        </li>
-        <li>
-          Controls and input groups receive <code>width: auto</code> to override
-          the Bootstrap default <code>width: 100%</code>.
-        </li>
-        <li>
-          Controls{' '}
-          <b>only appear inline in viewports that are at least 576px wide</b> to
-          account for narrow viewports on mobile devices.
-        </li>
-      </ul>
-      <p>
-        You may need to manually address the width and alignment of individual
-        form controls with spacing utilities (as shown below). Lastly, be sure
-        to always include a <code>{'<Form.Label>'}</code> with each form
-        control, even if you need to hide it from non-screenreader visitors with
-        the <code>srOnly</code> prop.
-      </p>
-      <ReactPlayground codeText={Inline} />
-      <Callout>
-        <h5>Alternatives to hidden labels</h5>
-        Assistive technologies such as screen readers will have trouble with
-        your forms if you don’t include a label for every input. For these
-        inline forms, you can hide the labels using the <code>srOnly</code>{' '}
-        prop. There are further alternative methods of providing a label for
-        assistive technologies, such as the <code>aria-label</code>,{' '}
-        <code>aria-labelledby</code> or <code>title</code> attribute. If none of
-        these are present, assistive technologies may resort to using the{' '}
-        <code>placeholder</code> attribute, if present, but note that use of{' '}
-        <code>placeholder</code> as a replacement for other labelling methods is
-        not advised.
-      </Callout>
       <LinkedHeading h="2" id="forms-help-text">
         Help text
       </LinkedHeading>
@@ -333,12 +285,6 @@ export default withLayout(function FormControlsSection({ data }) {
         margin for easy spacing from the inputs above.
       </p>
       <ReactPlayground codeText={FormText} />
-      <p>
-        Inline text can use any typical inline HTML element (be it a{' '}
-        <code>{'<small>'}</code>, <code>{'<span>'}</code>, or something else)
-        with nothing more than a utility class.
-      </p>
-      <ReactPlayground codeText={FormTextInline} />
       <LinkedHeading h="2" id="forms-disabled">
         Disabled forms
       </LinkedHeading>

www/src/pages/components/navbar.js

@@ -10,7 +10,6 @@ import NavbarBasic from '../../examples/Navbar/Basic';
 import NavbarBrand from '../../examples/Navbar/Brand';
 import NavbarCollapsible from '../../examples/Navbar/Collapsible';
 import NavbarColorSchemes from '../../examples/Navbar/ColorSchemes';
-import NavbarForm from '../../examples/Navbar/Form';
 import NavbarTextLink from '../../examples/Navbar/TextLink';
 import ContainerOutside from '../../examples/Navbar/ContainerOutside';
 import ContainerInside from '../../examples/Navbar/ContainerInside';
@@ -66,11 +65,6 @@ export default withLayout(function NaπvbarSection({ data }) {
       <LinkedHeading h="2" id="navbars-form">
         Forms
       </LinkedHeading>
-      <p>
-        Use <code>{'<Form inline>'}</code> and your various form controls within
-        the Navbar. Align the contents as needed with utility classes.
-      </p>
-      <ReactPlayground codeText={NavbarForm} />
 
       <LinkedHeading h="2" id="navbars-text-link">
         Text and Non-nav links

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
 
+### Form
+
+- removed `inline`.
+
 ### FormCheck
 
 - deprecated `bsCustomPrefix` and `custom` in favor of `bsSwitchPrefix`.