fix(label): add disabled class when form-check-inline and disabled (#159)

TheSharpieOne · eddywashere · commit 312b29e87ce4 · 2016-09-27T20:53:55.000-07:00
Adds the disabled class when the label has both the inline and
check props. This is the way bootstrap disables inline radio
and checkboxes since there is no wrapping element.
diff --git a/src/Label.js b/src/Label.js
@@ -21,6 +21,7 @@ const propTypes = {
   hidden: PropTypes.bool,
   check: PropTypes.bool,
   inline: PropTypes.bool,
+  disabled: PropTypes.bool,
   size: PropTypes.string,
   for: PropTypes.string,
   tag: PropTypes.string,
@@ -43,6 +44,7 @@ const Label = (props) => {
     tag: Tag,
     check,
     inline,
+    disabled,
     size,
     for: htmlFor,
     ...attributes,
@@ -70,6 +72,7 @@ const Label = (props) => {
     className,
     hidden ? 'sr-only' : false,
     check ? `form-check-${inline ? 'inline' : 'label'}` : false,
+    check && inline && disabled ? 'disabled' : false,
     size ? `col-form-label-${size}` : false,
     colClasses,
     colClasses.length ? 'col-form-label' : false
diff --git a/src/__tests__/Label.spec.js b/src/__tests__/Label.spec.js
@@ -57,6 +57,12 @@ describe('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>);
 
@@ -69,12 +75,24 @@ describe('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>);
 
