feat(Checkbox): add support of htmlFor (#2293)

src/modules/Checkbox/Checkbox.js

@@ -9,6 +9,7 @@ import {
   customPropTypes,
   getElementType,
   getUnhandledProps,
+  htmlInputAttrs,
   makeDebugger,
   META,
   partitionHTMLInputProps,
@@ -216,7 +217,8 @@ export default class Checkbox extends Component {
     )
     const unhandled = getUnhandledProps(Checkbox, this.props)
     const ElementType = getElementType(Checkbox, this.props)
-    const [htmlInputProps, rest] = partitionHTMLInputProps(unhandled, { htmlProps: [] })
+    const [htmlInputProps, rest] = partitionHTMLInputProps(unhandled, { htmlProps: htmlInputAttrs })
+    const id = _.get(htmlInputProps, 'id')
 
     return (
       <ElementType
@@ -241,7 +243,7 @@ export default class Checkbox extends Component {
          Heads Up!
          Do not remove empty labels, they are required by SUI CSS
          */}
-        {createHTMLLabel(label) || <label />}
+        {createHTMLLabel(label, { defaultProps: { htmlFor: id } }) || <label htmlFor={id} />}
       </ElementType>
     )
   }

test/specs/modules/Checkbox/Checkbox-test.js

@@ -1,5 +1,7 @@
+import _ from 'lodash'
 import React from 'react'
 
+import { htmlInputAttrs } from 'src/lib'
 import Checkbox from 'src/modules/Checkbox/Checkbox'
 import * as common from 'test/specs/commonTests'
 import { sandbox } from 'test/utils'
@@ -141,6 +143,39 @@ describe('Checkbox', () => {
     })
   })
 
+  describe('id', () => {
+    it('passes value to the input', () => {
+      shallow(<Checkbox id='foo' />)
+        .find('input')
+        .should.have.prop('id', 'foo')
+    })
+
+    it('adds htmlFor prop to the label', () => {
+      shallow(<Checkbox id='foo' />)
+        .find('label')
+        .should.have.prop('htmlFor', 'foo')
+    })
+
+    it('adds htmlFor prop to the label when it is empty', () => {
+      shallow(<Checkbox id='foo' label={null} />)
+        .find('label')
+        .should.have.prop('htmlFor', 'foo')
+    })
+  })
+
+  describe('input', () => {
+    // Heads up! Input handles some of html props
+    const props = _.without(htmlInputAttrs, 'defaultChecked', 'disabled')
+
+    _.forEach(props, (propName) => {
+      it(`passes "${propName}" to the input`, () => {
+        shallow(<Checkbox {...{ [propName]: 'radio' }} />)
+          .find('input')
+          .should.have.prop(propName)
+      })
+    })
+  })
+
   describe('label', () => {
     it('adds the "fitted" class when not present', () => {
       shallow(<Checkbox name='firstName' />)