fix(Radio Button Group): Focus style

catho · Apr 3, 2019 · 9a80c63 · 9a80c63
1 parent 64b6dbd
commit 9a80c63
Show file tree

Hide file tree

Showing 11 changed files with 1,026 additions and 437 deletions.
diff --git a/components/Button/buttonStyle.js b/components/Button/buttonStyle.js
@@ -36,21 +36,33 @@ const height = ({ size }) => {
   return `height: ${heights[size] || heights.medium};`;
 };
 
-const skin = props => {
+const _interactiveStyle = (props, skinProp) => {
   const {
-    unselected,
-    selected,
-    disabled,
-    focused,
-    hovered,
-    decoration,
-    borderRadius,
+    [skinProp]: { shadow, background, border, color },
   } = skins(props);
+  const { disabled } = props;
+
+  return !disabled
+    ? `
+    box-shadow: ${shadow};
+    background-color: ${background};
+    border-color: ${border};
+    color: ${color};
+  `
+    : '';
+};
+
+const hover = props => _interactiveStyle(props, 'hovered');
+const focus = props => _interactiveStyle(props, 'focused');
+const active = props => _interactiveStyle(props, 'selected');
 
-  return `${`
-    background-color: ${
-      props.disabled ? disabled.background : unselected.background
-    };
+const skin = props => {
+  const { unselected, disabled, decoration, borderRadius } = skins(props);
+
+  return css`
+    background-color: ${props.disabled
+      ? disabled.background
+      : unselected.background};
     border: 1.5px solid ${props.disabled ? disabled.border : unselected.border};
 
     box-shadow: ${props.disabled ? disabled.shadow : unselected.shadow};
@@ -59,38 +71,10 @@ const skin = props => {
 
     ${decoration ? `text-decoration: ${decoration};` : ''}
     ${borderRadius ? `border-radius: ${borderRadius};` : ''}
-  `}
-
-    ${
-      !props.disabled
-        ? `
-      &:hover {
-        box-shadow: ${hovered.shadow};
-        background-color: ${hovered.background};
-        border-color: ${hovered.border};
-        color: ${hovered.color};
-      }
-
-      &:focus {
-        box-shadow: ${focused.shadow};
-        background-color: ${focused.background};
-        border-color: ${focused.border};
-        color: ${focused.color};
-      }
-
-      &:active {
-        box-shadow: ${selected.shadow};
-        background-color: ${selected.background};
-        border-color: ${selected.border};
-        color: ${selected.color};
-      }
-    `
-        : ''
-    }
   `;
 };
 
-export default css`
+const DEFAULT_STYLE = css`
   align-items: center;
   ${props => `cursor: ${props.disabled ? 'not-allowed' : 'pointer'};`}
   display: flex;
@@ -115,6 +99,43 @@ export default css`
   transition: all 0.2s ease-in-out;
 
   ${props => props.full && `width: 100%;`}
+`;
 
+const SKIN_STYLE = css`
   ${skin}
 `;
+const HOVER_STYLE = css`
+  ${hover}
+`;
+const FOCUS_STYLE = css`
+  ${focus}
+`;
+const ACTIVE_STYLE = css`
+  ${active}
+`;
+
+const BUTTON_STYLE = css`
+  ${DEFAULT_STYLE}
+  ${SKIN_STYLE}
+
+  :hover {
+    ${HOVER_STYLE}
+  }
+
+  :focus {
+    ${FOCUS_STYLE}
+  }
+
+  :active {
+    ${ACTIVE_STYLE}
+  }
+`;
+
+export {
+  DEFAULT_STYLE,
+  SKIN_STYLE,
+  HOVER_STYLE,
+  FOCUS_STYLE,
+  ACTIVE_STYLE,
+  BUTTON_STYLE as default,
+};
diff --git a/components/Modal/__snapshots__/Modal.unit.test.jsx.snap b/components/Modal/__snapshots__/Modal.unit.test.jsx.snap
@@ -1006,6 +1006,13 @@ exports[`<Modal /> Snapshots should match the snapshot 1`] = `
                                         [Function],
                                         " ",
                                         [Function],
+                                        ":hover{",
+                                        [Function],
+                                        "}:focus{",
+                                        [Function],
+                                        "}:active{",
+                                        [Function],
+                                        "}",
                                         " ",
                                         ".c12",
                                         "{",

diff --git a/components/RadioGroup/HiddenRadio.jsx b/components/RadioGroup/HiddenRadio.jsx
diff --git a/components/RadioGroup/Radio.jsx b/components/RadioGroup/Radio.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Colors from '../Colors';
 import Label from '../shared/Label';
-import HiddenRadio from './HiddenRadio';
+import HiddenRadio from '../shared/HiddenRadio';
 
 const RadioMark = styled.span`
   background-color: ${Colors.WHITE};

diff --git a/components/RadioGroup/RadioButton.jsx b/components/RadioGroup/RadioButton.jsx
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import ButtonGroupLabel from '../shared/ButtonGroupLabel';
-import HiddenRadio from './HiddenRadio';
+import HiddenRadio from '../shared/HiddenRadio';
 import Icon from '../Icon';
+import uniqId from '../shared/uniqId';
 
 const LockIcon = styled(Icon).attrs({
   name: 'lock',
@@ -41,27 +42,33 @@ const Radio = ({
   value,
   checked,
   icon,
+  id,
   inline,
   ...rest
 }) => {
   const skin = checked ? 'primary' : 'secondary';
+  const _id = id || uniqId('radio-button-');
 
   return (
     <Wrapper inline={inline}>
-      <ButtonGroupLabel
-        error={error}
+      <HiddenRadio
+        checked={checked}
         disabled={disabled}
+        id={_id}
+        onChange={e => onChange({ value, label }, e)}
+        value={value}
         skin={skin}
+        error={error}
+        {...rest}
+      />
+      <ButtonGroupLabel
         checked={checked}
+        disabled={disabled}
+        error={error}
+        htmlFor={_id}
+        skin={skin}
       >
         {icon && <ButtonIcon name={icon} />}
-        <HiddenRadio
-          checked={checked}
-          disabled={disabled}
-          onChange={e => onChange({ value, label }, e)}
-          value={value}
-          {...rest}
-        />
         {children || label}
         {disabled && <LockIcon />}
       </ButtonGroupLabel>
@@ -77,6 +84,7 @@ Radio.defaultProps = {
   disabled: false,
   error: false,
   icon: undefined,
+  id: undefined,
   inline: false,
   label: undefined,
   onChange: () => {},
@@ -88,6 +96,7 @@ Radio.propTypes = {
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   icon: PropTypes.string,
+  id: PropTypes.string,
   inline: PropTypes.bool,
   label: PropTypes.string,
   onChange: PropTypes.func,

diff --git a/components/RadioGroup/__snapshots__/Radio.unit.test.jsx.snap b/components/RadioGroup/__snapshots__/Radio.unit.test.jsx.snap
@@ -12,6 +12,27 @@ exports[`<RadioGroup.Radio /> snapshot children 1`] = `
   width: 0;
 }
 
+.c2:focus ~ .c7 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c2:hover ~ .c7 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c2:active ~ .c7 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
 .c4 {
   background-color: #FFFFFF;
   border: 1.5px solid #999999;
@@ -367,6 +388,27 @@ exports[`<RadioGroup.Radio /> snapshot error 1`] = `
   width: 0;
 }
 
+.c2:focus ~ .c7 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c2:hover ~ .c7 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c2:active ~ .c7 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
 .c4 {
   background-color: #FFFFFF;
   border: 1.5px solid #999999;
@@ -567,6 +609,27 @@ exports[`<RadioGroup.Radio /> snapshot simple 1`] = `
   width: 0;
 }
 
+.c2:focus ~ .c5 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c2:hover ~ .c5 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c2:active ~ .c5 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
 .c4 {
   background-color: #FFFFFF;
   border: 1.5px solid #999999;