fix(FormGroup,Label): Fix inline radio- and checkboxes

docs/lib/Components/FormPage.js

@@ -18,6 +18,9 @@ const FormFeedbackExampleSource = require('!!raw!../examples/FormFeedback');
 import InputTypeExample from '../examples/InputType';
 const InputTypeExampleSource = require('!!raw!../examples/InputType');
 
+import InlineCheckboxesExample from '../examples/InlineCheckboxes';
+const InlineCheckboxesExampleSource = require('!!raw!../examples/InlineCheckboxes');
+
 import InputSizingExample from '../examples/InputSizing';
 const InputSizingExampleSource = require('!!raw!../examples/InputSizing');
 
@@ -104,6 +107,16 @@ export default class FormPage extends React.Component {
           </PrismCode>
         </pre>
 
+        <h3>Inline checkboxes</h3>
+        <div className="docs-example">
+          <InlineCheckboxesExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {InlineCheckboxesExampleSource}
+          </PrismCode>
+        </pre>
+
         <h3>Input Sizing</h3>
         <div className="docs-example">
           <InputSizingExample />

docs/lib/examples/InlineCheckboxes.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Form, FormGroup, Label, Input } from 'reactstrap';
+
+export default class Example extends React.Component {
+  render() {
+    return (
+      <Form>
+        <FormGroup check inline>
+          <Label check>
+            <Input type="checkbox" /> Some input
+          </Label>
+        </FormGroup>
+        <FormGroup check inline>
+          <Label check>
+             <Input type="checkbox" /> Some other input
+          </Label>
+        </FormGroup>
+      </Form>
+    );
+  }
+}

src/FormGroup.js

@@ -7,6 +7,7 @@ const propTypes = {
   children: PropTypes.node,
   row: PropTypes.bool,
   check: PropTypes.bool,
+  inline: PropTypes.bool,
   disabled: PropTypes.bool,
   tag: PropTypes.string,
   className: PropTypes.string,
@@ -24,6 +25,7 @@ const FormGroup = (props) => {
     row,
     disabled,
     check,
+    inline,
     tag: Tag,
     ...attributes
   } = props;
@@ -32,6 +34,7 @@ const FormGroup = (props) => {
     className,
     row ? 'row' : false,
     check ? 'form-check' : 'form-group',
+    check && inline ? 'form-check-inline' : false,
     check && disabled ? 'disabled' : false
   ), cssModule);
 

src/Label.js

@@ -23,7 +23,6 @@ const propTypes = {
   children: PropTypes.node,
   hidden: PropTypes.bool,
   check: PropTypes.bool,
-  inline: PropTypes.bool,
   disabled: PropTypes.bool,
   size: PropTypes.string,
   for: PropTypes.string,
@@ -61,7 +60,6 @@ const Label = (props) => {
     widths,
     tag: Tag,
     check,
-    inline,
     disabled,
     size,
     for: htmlFor,
@@ -101,8 +99,8 @@ const Label = (props) => {
   const classes = mapToCssModules(classNames(
     className,
     hidden ? 'sr-only' : false,
-    check ? `form-check-${inline ? 'inline' : 'label'}` : false,
-    check && inline && disabled ? 'disabled' : false,
+    check ? 'form-check-label' : false,
+    check && disabled ? 'disabled' : false,
     size ? `col-form-label-${size}` : false,
     colClasses,
     colClasses.length ? 'col-form-label' : false,

src/__tests__/FormGroup.spec.js

@@ -21,10 +21,11 @@ describe('FormGroup', () => {
     expect(wrapper.hasClass('form-group')).toBe(true);
   });
 
-  it('should not render with "form-check" class by default', () => {
+  it('should not render with "form-check" nor "form-check-inline"  class by default', () => {
     const wrapper = shallow(<FormGroup>Yo!</FormGroup>);
 
     expect(wrapper.hasClass('form-check')).toBe(false);
+    expect(wrapper.hasClass('form-check-inline')).toBe(false);
   });
 
   it('should render with "form-check" class when check prop is truthy', () => {
@@ -33,6 +34,25 @@ describe('FormGroup', () => {
     expect(wrapper.hasClass('form-check')).toBe(true);
   });
 
+  it('should not render with "form-check-inline" class when check prop is truthy and inline prop is falsy', () => {
+    const wrapper = shallow(<FormGroup check>Yo!</FormGroup>);
+
+    expect(wrapper.hasClass('form-check-inline')).toBe(false);
+  });
+
+  it('should render with "form-check" and "form-check-inline" classes when check prop and inline prop are both truthy', () => {
+    const wrapper = shallow(<FormGroup check inline>Yo!</FormGroup>);
+
+    expect(wrapper.hasClass('form-check')).toBe(true);
+    expect(wrapper.hasClass('form-check-inline')).toBe(true);
+  });
+
+  it('should not render with "form-check-inline" class when check prop is falsy and inline prop is truthy', () => {
+    const wrapper = shallow(<FormGroup inline>Yo!</FormGroup>);
+
+    expect(wrapper.hasClass('form-check-inline')).toBe(false);
+  });
+
   it('should not render with "form-group" class when check prop is truthy', () => {
     const wrapper = shallow(<FormGroup check>Yo!</FormGroup>);
 

src/__tests__/Label.spec.js

@@ -111,61 +111,6 @@ describe('Label', () => {
     expect(wrapper.hasClass('sr-only')).toBe(true);
   });
 
-  it('should render with "form-check-label" class when check prop is truthy and inline is not', () => {
-    const wrapper = shallow(<Label check>Yo!</Label>);
-
-    expect(wrapper.hasClass('form-check-label')).toBe(true);
-  });
-
-  it('should not render with "form-check-inline" class when check prop is truthy and inline is not', () => {
-    const wrapper = shallow(<Label check>Yo!</Label>);
-
-    expect(wrapper.hasClass('form-check-inline')).toBe(false);
-  });
-
-  it('should not render with "disabled" class when check and disabled props are truthy and inline is not', () => {
-    const wrapper = shallow(<Label check disabled>Yo!</Label>);
-
-    expect(wrapper.hasClass('disabled')).toBe(false);
-  });
-
-  it('should render with "form-check-inline" class when check and inline props are truthy', () => {
-    const wrapper = shallow(<Label check inline>Yo!</Label>);
-
-    expect(wrapper.hasClass('form-check-inline')).toBe(true);
-  });
-
-  it('should not render with "form-check-inline" class when check and inline props are truthy', () => {
-    const wrapper = shallow(<Label check inline>Yo!</Label>);
-
-    expect(wrapper.hasClass('form-check-label')).toBe(false);
-  });
-
-  it('should not render with "disabled" class when check, inline, and disabled props are truthy', () => {
-    const wrapper = shallow(<Label check inline disabled>Yo!</Label>);
-
-    expect(wrapper.hasClass('disabled')).toBe(true);
-  });
-
-  it('should not render with "form-check-inline" class when inline prop is truthy and check is not', () => {
-    const wrapper = shallow(<Label inline>Yo!</Label>);
-
-    expect(wrapper.hasClass('form-check-inline')).toBe(false);
-  });
-
-  it('should not render with "disabled" class when inline and disabled props are truthy and check is not', () => {
-    const wrapper = shallow(<Label inline disabled>Yo!</Label>);
-
-    expect(wrapper.hasClass('disabled')).toBe(false);
-  });
-
-  it('should not render with "form-check-inline" nor "form-check-label" by default', () => {
-    const wrapper = shallow(<Label>Yo!</Label>);
-
-    expect(wrapper.hasClass('form-check-inline')).toBe(false);
-    expect(wrapper.hasClass('form-check-label')).toBe(false);
-  });
-
   it('should render with "col-form-label-${size}" class when size is provided', () => {
     const wrapper = shallow(<Label size="lg">Yo!</Label>);