diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js index 963db30392..a303960e7c 100644 --- a/src/modules/Checkbox/Checkbox.js +++ b/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 ( } + {createHTMLLabel(label, { defaultProps: { htmlFor: id } }) || ) } diff --git a/test/specs/modules/Checkbox/Checkbox-test.js b/test/specs/modules/Checkbox/Checkbox-test.js index 52de4ed708..275f8b3d31 100644 --- a/test/specs/modules/Checkbox/Checkbox-test.js +++ b/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() + .find('input') + .should.have.prop('id', 'foo') + }) + + it('adds htmlFor prop to the label', () => { + shallow() + .find('label') + .should.have.prop('htmlFor', 'foo') + }) + + it('adds htmlFor prop to the label when it is empty', () => { + shallow() + .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() + .find('input') + .should.have.prop(propName) + }) + }) + }) + describe('label', () => { it('adds the "fitted" class when not present', () => { shallow()