fix(radio,checkbox): indicate that Input is focused

react95-io · Mar 24, 2020 · bfd978e · bfd978e
1 parent 6f4a362
commit bfd978e
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 89 deletions.
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -2,53 +2,30 @@ import React from 'react';
 import propTypes from 'prop-types';
 
 import styled, { css } from 'styled-components';
-import { createDisabledTextStyles, createHatchedBackground } from '../common';
+import { createHatchedBackground } from '../common';
 
-import { padding, fontSizes } from '../common/system';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
 import Cutout from '../Cutout/Cutout';
 import { StyledListItem } from '../ListItem/ListItem';
+import {
+  size,
+  StyledInput,
+  StyledLabel,
+  LabelText
+} from '../SwitchBase/SwitchBase';
 
-const checkboxSize = 20;
-
-const StyledLabel = styled.label`
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  margin: ${padding.sm} 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  font-size: ${fontSizes.md};
-  ${props => props.isDisabled && createDisabledTextStyles()}
-
-  ${StyledListItem} & {
-    margin: 0;
-    height: 100%;
-  }
-`;
-
-const StyledInput = styled.input`
-  position: absolute;
-  left: 0;
-  margin: 0;
-  width: ${checkboxSize}px;
-  height: ${checkboxSize}px;
-  opacity: 0;
-  z-index: -99;
-`;
 const sharedCheckboxStyles = css`
+  width: ${size}px;
+  height: ${size}px;
   display: flex;
   align-items: center;
   justify-content: space-around;
   margin-right: 0.5rem;
 `;
 const StyledCheckbox = styled(Cutout)`
   ${sharedCheckboxStyles}
-  width: ${checkboxSize}px;
-  height: ${checkboxSize}px;
+  width: ${size}px;
+  height: ${size}px;
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.material : theme.canvas};
   &:before {
@@ -62,8 +39,8 @@ const StyledFlatCheckbox = styled.div`
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.flatLight : theme.canvas};
   ${sharedCheckboxStyles}
-  width: ${checkboxSize - 4}px;
-  height: ${checkboxSize - 4}px;
+  width: ${size - 4}px;
+  height: ${size - 4}px;
   outline: none;
   border: 2px solid ${({ theme }) => theme.flatDark};
   background: ${({ theme, isDisabled }) =>
@@ -77,8 +54,8 @@ const StyledMenuCheckbox = styled.div`
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.flatLight : theme.canvas};
   ${sharedCheckboxStyles}
-  width: ${checkboxSize - 4}px;
-  height: ${checkboxSize - 4}px;
+  width: ${size - 4}px;
+  height: ${size - 4}px;
   background: none;
   border: none;
   outline: none;
@@ -172,10 +149,6 @@ const IndeterminateIcon = styled.span.attrs(() => ({
       `};
   }
 `;
-const LabelText = styled.span`
-  display: inline-block;
-  line-height: 1;
-`;
 
 const CheckboxComponents = {
   flat: StyledFlatCheckbox,
@@ -218,15 +191,6 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
   }
   return (
     <StyledLabel isDisabled={disabled} className={className} style={style}>
-      <CheckboxComponent
-        checked={state}
-        indeterminate={indeterminate}
-        isDisabled={disabled}
-        role='presentation'
-      >
-        {Icon && <Icon isDisabled={disabled} variant={variant} />}
-      </CheckboxComponent>
-      {label && <LabelText>{label}</LabelText>}
       <StyledInput
         disabled={disabled}
         onChange={disabled ? undefined : handleChange}
@@ -239,6 +203,15 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
         ref={ref}
         {...otherProps}
       />
+      <CheckboxComponent
+        checked={state}
+        indeterminate={indeterminate}
+        isDisabled={disabled}
+        role='presentation'
+      >
+        {Icon && <Icon isDisabled={disabled} variant={variant} />}
+      </CheckboxComponent>
+      {label && <LabelText>{label}</LabelText>}
     </StyledLabel>
   );
 });

diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js
@@ -2,44 +2,20 @@ import React from 'react';
 import propTypes from 'prop-types';
 
 import styled, { css } from 'styled-components';
-import { createDisabledTextStyles, createFlatBoxStyles } from '../common';
-import { padding, fontSizes } from '../common/system';
+import { createFlatBoxStyles } from '../common';
 import Cutout from '../Cutout/Cutout';
 import { StyledListItem } from '../ListItem/ListItem';
 
-const radioSize = '20px';
-const StyledLabel = styled.label`
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  margin: ${padding.sm} 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  font-size: ${fontSizes.md};
-  ${props => props.isDisabled && createDisabledTextStyles()}
-
-  ${StyledListItem} & {
-    margin: 0;
-    height: 100%;
-  }
-`;
-
-const StyledInput = styled.input`
-  position: absolute;
-  left: 0;
-  margin: 0;
-  width: ${radioSize};
-  height: ${radioSize};
-  opacity: 0;
-  z-index: -99;
-`;
+import {
+  size,
+  StyledInput,
+  StyledLabel,
+  LabelText
+} from '../SwitchBase/SwitchBase';
 
 const sharedCheckboxStyles = css`
-  width: ${radioSize};
-  height: ${radioSize};
+  width: ${size}px;
+  height: ${size}px;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -122,10 +98,6 @@ const Icon = styled.span.attrs(() => ({
       `};
   }
 `;
-const LabelText = styled.span`
-  display: inline-block;
-  line-height: 1;
-`;
 
 const CheckboxComponents = {
   flat: StyledFlatCheckbox,
@@ -156,7 +128,6 @@ const Radio = React.forwardRef(function Radio(props, ref) {
       >
         {checked && <Icon isDisabled={disabled} variant={variant} />}
       </CheckboxComponent>
-      {label && <LabelText>{label}</LabelText>}
       <StyledInput
         disabled={disabled}
         onChange={disabled ? undefined : onChange}
@@ -166,6 +137,7 @@ const Radio = React.forwardRef(function Radio(props, ref) {
         ref={ref}
         {...otherProps}
       />
+      {label && <LabelText>{label}</LabelText>}
     </StyledLabel>
   );
 });

diff --git a/src/components/SwitchBase/SwitchBase.js b/src/components/SwitchBase/SwitchBase.js
@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import { createDisabledTextStyles, focusOutline } from '../common';
+
+import { padding, fontSizes } from '../common/system';
+import { StyledListItem } from '../ListItem/ListItem';
+
+export const size = 20;
+
+export const StyledInput = styled.input`
+  position: absolute;
+  left: 0;
+  margin: 0;
+  width: ${size}px;
+  height: ${size}px;
+  opacity: 0;
+  z-index: -99;
+`;
+
+export const StyledLabel = styled.label`
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  margin: ${padding.sm} 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  font-size: ${fontSizes.md};
+  ${props => props.isDisabled && createDisabledTextStyles()}
+
+  ${StyledListItem} & {
+    margin: 0;
+    height: 100%;
+  }
+`;
+
+// TODO how to handle focus styles in 'menu' variant of Checkbox/Radio?
+export const LabelText = styled.span`
+  display: inline-block;
+  line-height: 1;
+  padding: 2px;
+  ${StyledInput}:focus ~ & {
+    ${focusOutline}
+  }
+`;