fix(Radio): add error indicator for circles

8base · Oct 3, 2018 · 0eb590b · 0eb590b
1 parent 1461f67
commit 0eb590b
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 24 deletions.
diff --git a/src/atoms/dataEntry/Radio/Radio.theme.js b/src/atoms/dataEntry/Radio/Radio.theme.js
@@ -32,7 +32,7 @@ const RadioCircleTag = createStyledTag(name, props => ({
   height: '2.5rem',
 
   background: 'white',
-  border: `1px solid ${getThemeColors(props).PRIMARY_BORDER_COLOR}`,
+  border: `1px solid ${getThemeColors(props)[props.hasError ? 'DANGER' : 'PRIMARY_BORDER_COLOR']}`,
   borderRadius: '50%',
   transition: 'opacity .3s ease',
 }));

diff --git a/src/atoms/dataEntry/Radio/RadioGroup.js b/src/atoms/dataEntry/Radio/RadioGroup.js
@@ -16,6 +16,8 @@ type RadioProps = {
   direction?: 'row' | 'column',
   /** callback to change the radio state */
   onChange?: (string | number, SyntheticInputEvent<HTMLInputElement>) => void,
+  /** then true when show error styles */
+  hasError?: boolean,
 }
 
 class RadioGroup extends PureComponent<RadioProps> {
@@ -37,7 +39,7 @@ class RadioGroup extends PureComponent<RadioProps> {
   }
 
   render() {
-    const { children, value, direction, gap, onChange } = this.props;
+    const { children, value, direction, gap, onChange, hasError } = this.props;
 
     return (
       <FlexLayout direction={ direction } gap={ gap }>
@@ -47,6 +49,7 @@ class RadioGroup extends PureComponent<RadioProps> {
               onChange,
               selectedValue: value,
               name: this.getGroupName(),
+              hasError,
             }))
         }
       </FlexLayout>

diff --git a/src/atoms/dataEntry/Radio/RadioItem.js b/src/atoms/dataEntry/Radio/RadioItem.js
@@ -16,6 +16,8 @@ type RadioItemClonedProps = {
   onChange?: (string | number, SyntheticInputEvent<HTMLInputElement>) => void,
   /** private cloned props */
   selectedValue?: string | number,
+  /** then true when show error styles */
+  hasError?: boolean,
 }
 
 type RadioItemProps = {
@@ -52,13 +54,14 @@ class RadioItem extends PureComponent<RadioItemProps & RadioItemClonedProps> {
       color,
       disabled,
       equalsFunc,
+      hasError,
     } = this.props;
     const hasLabel = !!label;
     const checked = value !== undefined && equalsFunc && equalsFunc({ selectedValue, value });
 
     return (
       <RadioWrapperTag tagName="label">
-        <RadioCircleTag tagName="div">
+        <RadioCircleTag tagName="div" hasError={ hasError }>
           <RadioInnerCircleTag tagName="div" color={ color } selected={ checked } disabled={ disabled } />
         </RadioCircleTag>
         <RadioTag name={ name } tagName="input" type="radio" value={ value.toString() } onChange={ this.onChange } />

diff --git a/src/atoms/dataEntry/RadioGroupField/RadioGroupField.js b/src/atoms/dataEntry/RadioGroupField/RadioGroupField.js
@@ -24,13 +24,16 @@ const RadioGroupField = ({
   meta = {},
   ...rest
   }: RadioGroupFieldProps) => {
+  const { error, touched } = meta;
   const { name, value, onChange } = input;
+  const hasError = !!error && !!touched;
 
   return (
     <FormField hideErrorLabel={ hideErrorLabel } input={ input } meta={ meta }>
       <Radio.Group
         { ...rest }
         name={ name }
+        hasError={ hasError }
         onChange={ onChange }
         value={ value }
       >

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -7851,6 +7851,26 @@ exports[`Storyshots ATOMS/DATA ENTRY/RadioGroupField with error 1`] = `
   top: -2px;
 }
 
+.emotion-3 {
+  padding-left: 1.2rem;
+  font-size: 1.4rem;
+  cursor: pointer;
+}
+
+.emotion-0 {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -.4rem;
+  margin-top: -.4rem;
+  width: .8rem;
+  height: .8rem;
+  border-radius: 50%;
+  opacity: 0;
+  background-color: #4DA1FF;
+}
+
 .emotion-1 {
   position: relative;
   display: -webkit-box;
@@ -7868,32 +7888,12 @@ exports[`Storyshots ATOMS/DATA ENTRY/RadioGroupField with error 1`] = `
   width: 2.5rem;
   height: 2.5rem;
   background: white;
-  border: 1px solid #d0d7dd;
+  border: 1px solid #ff6d4a;
   border-radius: 50%;
   -webkit-transition: opacity .3s ease;
   transition: opacity .3s ease;
 }
 
-.emotion-3 {
-  padding-left: 1.2rem;
-  font-size: 1.4rem;
-  cursor: pointer;
-}
-
-.emotion-0 {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -.4rem;
-  margin-top: -.4rem;
-  width: .8rem;
-  height: .8rem;
-  border-radius: 50%;
-  opacity: 0;
-  background-color: #4DA1FF;
-}
-
 <div
   className="emotion-20"
 >