feat(forms): Add support for floating labels

src/FormGroup.js

@@ -9,6 +9,7 @@ const propTypes = {
   check: PropTypes.bool,
   switch: PropTypes.bool,
   inline: PropTypes.bool,
+  floating: PropTypes.bool,
   disabled: PropTypes.bool,
   tag: tagPropType,
   className: PropTypes.string,
@@ -27,6 +28,7 @@ const FormGroup = (props) => {
     disabled,
     check,
     inline,
+    floating,
     tag: Tag,
     ...attributes
   } = props;
@@ -39,7 +41,8 @@ const FormGroup = (props) => {
     formCheck ? 'form-check' : 'mb-3',
     props.switch ? 'form-switch' : false,
     formCheck && inline ? 'form-check-inline' : false,
-    formCheck && disabled ? 'disabled' : false
+    formCheck && disabled ? 'disabled' : false,
+    floating && 'form-floating'
   ), cssModule);
 
   if (Tag === 'fieldset') {

src/__tests__/FormGroup.spec.js

@@ -118,6 +118,18 @@ describe('FormGroup', () => {
     expect(wrapper.hasClass('row')).toBe(false);
   });
 
+  it('should render with "form-floating" class when floating prop is truthy', () => {
+    const wrapper = shallow(<FormGroup floating>Yo!</FormGroup>);
+
+    expect(wrapper.hasClass('form-floating')).toBe(true);
+  });
+
+  it('should not render with "form-floating" class when floating prop is falsey', () => {
+    const wrapper = shallow(<FormGroup>Yo!</FormGroup>);
+
+    expect(wrapper.hasClass('form-floating')).toBe(false);
+  });
+
   it('should render additional classes', () => {
     const wrapper = shallow(<FormGroup className="other">Yo!</FormGroup>);
 

stories/Forms.stories.js

@@ -15,15 +15,16 @@ export default {
   }
 };
 
-export { default as Input } from './examples/Input';
-export { default as Form } from './examples/Form';
-export { default as FormFeedback } from './examples/FormFeedback';
-export { default as FormGrid } from './examples/FormGrid';
-export { default as FormGridFormRow } from './examples/FormGridFormRow';
-export { default as FormInline } from './examples/FormInline';
-export { default as LabelHidden } from './examples/LabelHidden';
-export { default as InlineCheckboxes } from './examples/InlineCheckboxes';
-export { default as InputGridSizing } from './examples/InputGridSizing';
-export { default as InputSizing } from './examples/InputSizing';
-export { default as InputType } from './examples/InputType';
-export { default as Props } from './examples/FormProps';
+export { default as Input } from './examples/Form/Input';
+export { default as Form } from './examples/Form/Form';
+export { default as FormFeedback } from './examples/Form/FormFeedback';
+export { default as FormGrid } from './examples/Form/FormGrid';
+export { default as FormGridFormRow } from './examples/Form/FormGridFormRow';
+export { default as FormInline } from './examples/Form/FormInline';
+export { default as FloatingLabels } from './examples/Form/LabelFloating';
+export { default as HiddenLabels } from './examples/Form/LabelHidden';
+export { default as InlineCheckboxes } from './examples/Form/InlineCheckboxes';
+export { default as InputGridSizing } from './examples/Form/InputGridSizing';
+export { default as InputSizing } from './examples/Form/InputSizing';
+export { default as InputType } from './examples/Form/InputType';
+export { default as Props } from './examples/Form/FormProps';

stories/examples/FormProps.js → stories/examples/Form/FormProps.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Form, FormGroup, Label, Input, FormText } from 'reactstrap';
-import Props from './Props';
+import Props from '../Props';
 
 const Example = () => (
   <Props components={[Form, FormGroup, Label, Input, FormText]} />

stories/examples/Form/LabelFloating.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <>
+      <p>Wrap a pair of <code>&lt;Input&gt;</code> and <code>&lt;Label&gt;</code> components in <code>&lt;FormGroup floating&gt;</code> to enable floating labels with Bootstrap’s textual form fields. A <code>placeholder</code> is required on each <code>&lt;Input&gt;</code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code>&lt;Input&gt;</code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).</p>
+      <Form inline>
+        <FormGroup floating>
+          <Input type="email" name="email" id="exampleEmail" placeholder="Email" />
+          <Label for="exampleEmail">Email</Label>
+        </FormGroup>
+        {' '}
+        <FormGroup floating>
+          <Input type="password" name="password" id="examplePassword" placeholder="Password" />
+          <Label for="examplePassword">Password</Label>
+        </FormGroup>
+        {' '}
+        <Button>Submit</Button>
+      </Form>
+    </>
+  );
+}
+
+export default Example;

types/lib/FormGroup.d.ts

@@ -6,6 +6,7 @@ export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   row?: boolean;
   check?: boolean;
   inline?: boolean;
+  floating?: boolean;
   disabled?: boolean;
   tag?: React.ElementType;
   cssModule?: CSSModule;