feat(Radio): disabled item state

8base · Mar 19, 2020 · 20d8e52 · 20d8e52
1 parent c237a90
commit 20d8e52
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 9 deletions.
diff --git a/..._image_snapshots__/radio-group-field-test-js-components-radio-common-1-snap.png b/..._image_snapshots__/radio-group-field-test-js-components-radio-common-1-snap.png
diff --git a/...napshots__/radio-test-js-components-radio-group-field-disabled-story-1-snap.png b/...napshots__/radio-test-js-components-radio-group-field-disabled-story-1-snap.png
diff --git a/src/components/Radio/Radio.theme.js b/src/components/Radio/Radio.theme.js
@@ -37,6 +37,10 @@ const [RadioCircleTag, themeCircle] = createThemeTag(`${name}Circle`, ({ COLORS
     hasError: {
       borderColor: COLORS.DANGER,
     },
+
+    disabled: {
+      backgroundColor: COLORS.GRAY_10,
+    },
   },
 }));
 

diff --git a/src/components/Radio/RadioGroup.js b/src/components/Radio/RadioGroup.js
@@ -20,7 +20,7 @@ type RadioProps = {
   /** then true when show error styles */
   hasError?: boolean,
   /** options to define radio items */
-  options?: Array<({ value: any, label: string })>,
+  options?: Array<({ value: any, label: string, disabled?: boolean })>,
   /** disabled */
   disabled?: boolean,
   /** stretch */
@@ -53,8 +53,8 @@ class RadioGroup extends PureComponent<RadioProps> {
     }
 
     // $FlowFixMe
-    return options.map(({ value, label }) => (
-      <RadioItem key={ value } label={ label } value={ value } />
+    return options.map(({ value, label, disabled }) => (
+      <RadioItem key={ value } label={ label } value={ value } disabled={ disabled || this.props.disabled } />
     ));
   }
 

diff --git a/src/components/RadioGroupField/RadioGroupField.js b/src/components/RadioGroupField/RadioGroupField.js
@@ -21,7 +21,7 @@ type RadioGroupFieldProps = {
   /** direction of the radio items */
   direction?: 'row' | 'column',
   /** options to define radio items */
-  options?: Array<({ value: any, label: string })>,
+  options?: Array<({ value: any, label: string, disabled?: boolean })>,
   /** disabled */
   disabled?: boolean,
   /** stretch */

diff --git a/src/components/RadioGroupField/RadioGroupField.stories.js b/src/components/RadioGroupField/RadioGroupField.stories.js
@@ -32,11 +32,15 @@ button.story = {
 };
 
 export const disabledStory = () => (
-  <RadioGroupField direction="row" input={{ value: 1 }} meta={{}} disabled>
-    <Radio.Item label="Radio" value={ 1 } />
-    <Radio.Item label="Radio" value={ 2 } />
-    <Radio.Item label="Radio" value={ 3 } />
-  </RadioGroupField>
+  <React.Fragment>
+    <RadioGroupField direction="row" input={{ value: 1 }} meta={{}} disabled>
+      <Radio.Item label="Radio" value={ 1 } />
+      <Radio.Item label="Radio" value={ 2 } />
+      <Radio.Item label="Radio" value={ 3 } />
+    </RadioGroupField>
+
+    <RadioGroupField direction="row" input={{ value: 3 }} meta={{}} options={ [{ label: '1', value: 1 }, { label: '2', value: 2, disabled: true }, { label: '3', value: 3, disabled: true }] } />
+  </React.Fragment>
 );
 
 disabledStory.story = {