fix(Radio): add hover/active/focus state

8base · Jun 28, 2019 · e24b210 · e24b210
1 parent e2dd806
commit e24b210
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/components/Radio/Radio.theme.js b/src/components/Radio/Radio.theme.js
@@ -19,6 +19,18 @@ const [RadioCircleTag, themeCircle] = createThemeTag(`${name}Circle`, ({ COLORS
     transition: 'opacity .3s ease',
     background: COLORS.WHITE,
     border: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
+
+    '&:hover': {
+      boxShadow: '0 1px 2px 0 rgba(50,50,93,0.14), 0 3px 4px 0 rgba(112,157,199,0.08)',
+    },
+
+    'input:focus + &': {
+      boxShadow: 'inset 0 1px 2px 0 rgba(50,50,93,0.14), inset 0 3px 4px 0 rgba(112,157,199,0.08)',
+    },
+
+    'input:active + &': {
+      boxShadow: 'inset 0 1px 2px 0 rgba(50,50,93,0.14), inset 0 3px 4px 0 rgba(112,157,199,0.08)',
+    },
   },
   modifiers: {
     hasError: {
@@ -75,7 +87,8 @@ const [RadioWrapperTag, themeRadioWrapper] = createThemeTag(`${name}Wrapper`, {
 
 const [RadioTag, themeRadio] = createThemeTag(name, {
   root: {
-    display: 'none',
+    opacity: 0,
+    position: 'absolute',
   },
 });
 

diff --git a/src/components/Radio/RadioGroup.js b/src/components/Radio/RadioGroup.js
@@ -33,7 +33,7 @@ class RadioGroup extends PureComponent<RadioProps> {
     gap: 'md',
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     RadioGroup.instanceCounter++;
   }
 

diff --git a/src/components/Radio/RadioItem.js b/src/components/Radio/RadioItem.js
@@ -60,10 +60,10 @@ class RadioItem extends PureComponent<RadioItemProps & RadioItemClonedProps> {
 
     return (
       <RadioWrapperTag tagName="label" { ...rest }>
+        <RadioTag modifiers={ rest } name={ name } tagName="input" type="radio" onChange={ this.onChange } checked={ checked } />
         <RadioCircleTag modifiers={ rest } tagName="div" >
           <RadioCircleInnerTag modifiers={ rest } tagName="div" checked={ checked } />
         </RadioCircleTag>
-        <RadioTag modifiers={ rest } name={ name } tagName="input" type="radio" onChange={ this.onChange } checked={ checked } />
         <If condition={ hasLabel }>
           <RadioTextTag modifiers={ rest } tagName="div">{ label }</RadioTextTag>
         </If>