diff --git a/.storybook/styles/components/_forms.scss b/.storybook/styles/components/_forms.scss index 56c989b1..5d56a520 100755 --- a/.storybook/styles/components/_forms.scss +++ b/.storybook/styles/components/_forms.scss @@ -133,6 +133,14 @@ select{ } } +/*----------------------- +Radio +-----------------------*/ +.RadioGroup { + label { + cursor: pointer; + } +} /*----------------------- Checkbox @@ -197,6 +205,19 @@ input[type="checkbox"]{ } } +/*----------------------- +Disabled +-----------------------*/ + +.disabled { + label { + cursor: default; + } + + input[type="checkbox"], input[type="radio"] { + cursor: not-allowed; + } +} /*----------------------- Error diff --git a/src/forms/labels/labeled-field.js b/src/forms/labels/labeled-field.js index 06add699..42e473c3 100644 --- a/src/forms/labels/labeled-field.js +++ b/src/forms/labels/labeled-field.js @@ -93,7 +93,12 @@ function LabeledField ({ const { name } = input const { touched, invalid } = meta return ( -
+
{ children } { !hideErrorLabel && } diff --git a/stories/forms/inputs/radio-group.story.js b/stories/forms/inputs/radio-group.story.js index e7482cba..99884e10 100644 --- a/stories/forms/inputs/radio-group.story.js +++ b/stories/forms/inputs/radio-group.story.js @@ -64,3 +64,11 @@ storiesOf('RadioGroup', module) meta={{}} /> )) + .add('with disabled options', () => ( + + )) \ No newline at end of file diff --git a/test/forms/labels/labeled-field.test.js b/test/forms/labels/labeled-field.test.js index e08bf2ca..44a9de55 100644 --- a/test/forms/labels/labeled-field.test.js +++ b/test/forms/labels/labeled-field.test.js @@ -17,6 +17,13 @@ test('adds error class when touched and invalid', () => { expect(wrapper.find('fieldset').hasClass('error')).toEqual(true) }) +test('adds disabled class when disabled', () => { + const Wrapped = () => + const props = { input: { name: 'foo' }, meta: {}, disabled: true } + const wrapper = mount() + expect(wrapper.find('fieldset').hasClass('disabled')).toEqual(true) +}) + test('adds InputLabel and InputError', () => { const Wrapped = () => const props = { input: { name: 'foo' }, meta: { touched: true, invalid: true } }