diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index 813081f1f8..9556b0efd1 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -47,10 +47,7 @@ export default class Checkbox extends Component {
fitted: PropTypes.bool,
/** A unique identifier. */
- id: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string,
- ]),
+ id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Whether or not checkbox is indeterminate. */
indeterminate: PropTypes.bool,
@@ -86,50 +83,32 @@ export default class Checkbox extends Component {
onMouseDown: PropTypes.func,
/** Format as a radio element. This means it is an exclusive option. */
- radio: customPropTypes.every([
- PropTypes.bool,
- customPropTypes.disallow(['slider', 'toggle']),
- ]),
+ radio: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['slider', 'toggle'])]),
/** A checkbox can be read-only and unable to change states. */
readOnly: PropTypes.bool,
/** Format to emphasize the current selection state. */
- slider: customPropTypes.every([
- PropTypes.bool,
- customPropTypes.disallow(['radio', 'toggle']),
- ]),
+ slider: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['radio', 'toggle'])]),
/** A checkbox can receive focus. */
- tabIndex: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string,
- ]),
+ tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Format to show an on or off choice. */
- toggle: customPropTypes.every([
- PropTypes.bool,
- customPropTypes.disallow(['radio', 'slider']),
- ]),
+ toggle: customPropTypes.every([PropTypes.bool, customPropTypes.disallow(['radio', 'slider'])]),
/** HTML input type, either checkbox or radio. */
type: PropTypes.oneOf(['checkbox', 'radio']),
/** The HTML input value. */
- value: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- ]),
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}
static defaultProps = {
type: 'checkbox',
}
- static autoControlledProps = [
- 'checked',
- 'indeterminate',
- ]
+ static autoControlledProps = ['checked', 'indeterminate']
static _meta = {
name: 'Checkbox',
@@ -178,7 +157,11 @@ export default class Checkbox extends Component {
if (!this.canToggle()) return
- _.invoke(this.props, 'onClick', e, { ...this.props, checked: !checked, indeterminate: !!indeterminate })
+ _.invoke(this.props, 'onClick', e, {
+ ...this.props,
+ checked: !checked,
+ indeterminate: !!indeterminate,
+ })
_.invoke(this.props, 'onChange', e, { ...this.props, checked: !checked, indeterminate: false })
this.trySetState({ checked: !checked, indeterminate: false })
@@ -188,7 +171,11 @@ export default class Checkbox extends Component {
debug('handleMouseDown()')
const { checked, indeterminate } = this.state
- _.invoke(this.props, 'onMouseDown', e, { ...this.props, checked: !!checked, indeterminate: !!indeterminate })
+ _.invoke(this.props, 'onMouseDown', e, {
+ ...this.props,
+ checked: !!checked,
+ indeterminate: !!indeterminate,
+ })
_.invoke(this.inputRef, 'focus')
e.preventDefault()
@@ -250,6 +237,7 @@ export default class Checkbox extends Component {
{...htmlInputProps}
checked={checked}
className='hidden'
+ disabled={disabled}
id={id}
name={name}
onClick={this.handleInputClick}
diff --git a/test/specs/modules/Checkbox/Checkbox-test.js b/test/specs/modules/Checkbox/Checkbox-test.js
index 156401b6a5..0fc12b7e15 100644
--- a/test/specs/modules/Checkbox/Checkbox-test.js
+++ b/test/specs/modules/Checkbox/Checkbox-test.js
@@ -65,36 +65,24 @@ describe('Checkbox', () => {
it('can be checked and unchecked', () => {
wrapperShallow()
- wrapper
- .find('input')
- .should.not.be.checked()
+ wrapper.find('input').should.not.be.checked()
wrapper.simulate('click')
- wrapper
- .find('input')
- .should.be.checked()
+ wrapper.find('input').should.be.checked()
wrapper.simulate('click')
- wrapper
- .find('input')
- .should.not.be.checked()
+ wrapper.find('input').should.not.be.checked()
})
it('can be checked but not unchecked when radio', () => {
wrapperShallow()
- wrapper
- .find('input')
- .should.not.be.checked()
+ wrapper.find('input').should.not.be.checked()
wrapper.simulate('click')
- wrapper
- .find('input')
- .should.be.checked()
+ wrapper.find('input').should.be.checked()
wrapper.simulate('click')
- wrapper
- .find('input')
- .should.be.checked()
+ wrapper.find('input').should.be.checked()
})
})
@@ -154,17 +142,24 @@ describe('Checkbox', () => {
wrapperShallow()
wrapper.simulate('click')
- wrapper
- .find('input')
- .should.not.be.checked()
+ wrapper.find('input').should.not.be.checked()
})
+
it('cannot be unchecked', () => {
wrapperShallow()
wrapper.simulate('click')
- wrapper
+ wrapper.find('input').should.be.checked()
+ })
+
+ it('is applied to the underlying html input element', () => {
+ wrapperShallow()
.find('input')
- .should.be.checked()
+ .should.have.prop('disabled', true)
+
+ wrapperShallow()
+ .find('input')
+ .should.have.prop('disabled', false)
})
})
@@ -203,21 +198,17 @@ describe('Checkbox', () => {
describe('label', () => {
it('adds the "fitted" class when not present', () => {
- shallow()
- .should.have.className('fitted')
+ shallow().should.have.className('fitted')
})
it('adds the "fitted" class when is null', () => {
- shallow()
- .should.have.className('fitted')
+ shallow().should.have.className('fitted')
})
it('does not add the "fitted" class when is not nil', () => {
- shallow()
- .should.not.have.className('fitted')
+ shallow().should.not.have.className('fitted')
- shallow()
- .should.not.have.className('fitted')
+ shallow().should.not.have.className('fitted')
})
})
@@ -225,15 +216,17 @@ describe('Checkbox', () => {
it('is called with (event { name, value, !checked }) on click', () => {
const spy = sandbox.spy()
const expectProps = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
- mount()
- .simulate('click')
+ mount().simulate('click')
spy.should.have.been.calledOnce()
- spy.should.have.been.calledWithMatch({}, {
- ...expectProps,
- checked: !expectProps.checked,
- indeterminate: false,
- })
+ spy.should.have.been.calledWithMatch(
+ {},
+ {
+ ...expectProps,
+ checked: !expectProps.checked,
+ indeterminate: false,
+ },
+ )
})
it('is called once on input click when "id" prop is passed', () => {
const onChange = sandbox.spy()
@@ -260,15 +253,17 @@ describe('Checkbox', () => {
it('is called with (event { name, value, checked }) on label click', () => {
const spy = sandbox.spy()
const expectProps = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
- mount()
- .simulate('click')
+ mount().simulate('click')
spy.should.have.been.calledOnce()
- spy.should.have.been.calledWithMatch({}, {
- ...expectProps,
- checked: !expectProps.checked,
- indeterminate: expectProps.indeterminate,
- })
+ spy.should.have.been.calledWithMatch(
+ {},
+ {
+ ...expectProps,
+ checked: !expectProps.checked,
+ indeterminate: expectProps.indeterminate,
+ },
+ )
})
it('is called once on input click when "id" prop is passed', () => {
const onClick = sandbox.spy()
@@ -295,15 +290,17 @@ describe('Checkbox', () => {
it('is called with (event { name, value, checked }) on label mouse down', () => {
const onMousedDown = sandbox.spy()
const expectProps = { name: 'foo', value: 'bar', checked: false, indeterminate: true }
- mount()
- .simulate('mousedown')
+ mount().simulate('mousedown')
onMousedDown.should.have.been.calledOnce()
- onMousedDown.should.have.been.calledWithMatch({}, {
- ...expectProps,
- checked: expectProps.checked,
- indeterminate: expectProps.indeterminate,
- })
+ onMousedDown.should.have.been.calledWithMatch(
+ {},
+ {
+ ...expectProps,
+ checked: expectProps.checked,
+ indeterminate: expectProps.indeterminate,
+ },
+ )
})
it('prevents default event', () => {
const preventDefault = sandbox.spy()
@@ -326,17 +323,13 @@ describe('Checkbox', () => {
wrapperShallow()
wrapper.simulate('click')
- wrapper
- .find('input')
- .should.not.be.checked()
+ wrapper.find('input').should.not.be.checked()
})
it('cannot be unchecked', () => {
wrapperShallow()
wrapper.simulate('click')
- wrapper
- .find('input')
- .should.be.checked()
+ wrapper.find('input').should.be.checked()
})
})