Merge pull request #3068 from defencedigital/bugfix/checkbox-e-border…

…-firefox-2 fix(CheckboxE): Fix unchecked disabled styles and Firefox border glitch
Royal-Navy · Feb 8, 2022 · b148f2a · b148f2a
2 parents f7f74d6 + 4ebed3b
commit b148f2a
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 54 deletions.
diff --git a/packages/react-component-library/src/components/CheckboxE/CheckboxE.stories.tsx b/packages/react-component-library/src/components/CheckboxE/CheckboxE.stories.tsx
@@ -27,13 +27,31 @@ Default.args = {
   name: 'default',
 }
 
-export const Disabled = Template.bind({})
-Disabled.args = {
+export const Checked = Template.bind({})
+Checked.args = {
   id: undefined,
+  defaultChecked: true,
+  label: 'Checked',
+  name: 'checked',
+}
+
+export const DisabledUnchecked = Template.bind({})
+DisabledUnchecked.storyName = 'Disabled, unchecked'
+DisabledUnchecked.args = {
+  id: undefined,
+  isDisabled: true,
+  label: 'Disabled, unchecked',
+  name: 'disabled',
+}
+
+export const DisabledChecked = Template.bind({})
+DisabledChecked.storyName = 'Disabled, checked'
+DisabledChecked.args = {
+  id: undefined,
+  defaultChecked: true,
   isDisabled: true,
-  label: 'Disabled checkbox',
+  label: 'Disabled, checked',
   name: 'disabled',
-  checked: true,
 }
 
 export const Invalid = Template.bind({})

diff --git a/packages/react-component-library/src/components/CheckboxE/CheckboxE.tsx b/packages/react-component-library/src/components/CheckboxE/CheckboxE.tsx
@@ -106,7 +106,6 @@ export const CheckboxE = React.forwardRef<HTMLInputElement, CheckboxEProps>(
             <StyledLabel htmlFor={id} data-testid="checkbox-label">
               <StyledInput
                 ref={mergeRefs([localRef, ref])}
-                $isDisabled={isDisabled}
                 id={id}
                 type="checkbox"
                 name={name}

diff --git a/packages/react-component-library/src/components/CheckboxE/partials/StyledCheckbox.tsx b/packages/react-component-library/src/components/CheckboxE/partials/StyledCheckbox.tsx
@@ -1,8 +1,6 @@
 import { selectors } from '@defencedigital/design-tokens'
 import styled, { css } from 'styled-components'
 
-import { StyledCheckmark } from './StyledCheckmark'
-
 const { color, fontSize } = selectors
 
 export interface StyledCheckboxProps {
@@ -32,13 +30,6 @@ export const StyledCheckbox = styled.div<StyledCheckboxProps>`
       0 0 0 5px ${color('action', '100')};
   }
 
-  &:hover ${StyledCheckmark}, &:active ${StyledCheckmark} {
-    border: 1px solid ${color('action', '500')};
-    outline: none;
-    box-shadow: 0 0 0 1px ${color('action', '500')};
-    transition: all 0.2s;
-  }
-
   ${({ $isInvalid }) =>
     $isInvalid &&
     css`
@@ -61,12 +52,6 @@ export const StyledCheckbox = styled.div<StyledCheckboxProps>`
         cursor: not-allowed;
       }
 
-      &&& ${StyledCheckmark} {
-        background-color: ${color('neutral', '200')};
-        border-color: ${color('neutral', '200')};
-        box-shadow: none;
-      }
-
       background-color: ${color('neutral', '000')};
       border-color: transparent;
 

diff --git a/packages/react-component-library/src/components/CheckboxE/partials/StyledCheckmark.tsx b/packages/react-component-library/src/components/CheckboxE/partials/StyledCheckmark.tsx
@@ -1,7 +1,10 @@
+import { position } from 'polished'
 import styled from 'styled-components'
 import { selectors } from '@defencedigital/design-tokens'
 
-const { color } = selectors
+import { StyledCheckbox } from './StyledCheckbox'
+
+const { animation, color } = selectors
 
 export const StyledCheckmark = styled.div`
   position: absolute;
@@ -14,9 +17,46 @@ export const StyledCheckmark = styled.div`
   border: 1px solid ${color('neutral', '200')};
   border-radius: 3px;
 
+  &::before {
+    content: '';
+    ${position('absolute', 0, 0, 0, 0)};
+    border-radius: 2px;
+  }
+
   &::after {
     content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPgogICAgPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMywgNCkiIGQ9Ik04LjgyMiAwYzEuMDUtLjAyNyAxLjU3NCAxLjMwNC44MjcgMi4wOEw0LjI5OCA3Ljc0YS44My44MyAwIDAgMS0xLjIwNyAwTC4zNzYgNC44NTVDLS43NTIgMy43MTguOTE0IDEuOTU2IDEuOTkgMy4xNDlsMS41MDggMS41OTVjLjEwNS4xMS4yODguMTEuNDA3IDBsNC4xMy00LjM3QTEuMSAxLjEgMCAwIDEgOC44MjMgMHoiCiAgICAgICAgICBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg==);
+    display: none;
     border-radius: 2px;
     color: ${color('neutral', 'white')};
   }
+
+  ${StyledCheckbox}:hover &, ${StyledCheckbox}:active & {
+    &::before {
+      box-shadow: 0 0 0 2px ${color('action', '500')};
+      transition: all ${animation('default')};
+    }
+  }
+
+  ${StyledCheckbox} input:checked ~ & {
+    background-color: ${color('action', '500')};
+    border: 1px solid ${color('action', '500')};
+    text-align: center;
+
+    &::after {
+      display: block;
+    }
+  }
+
+  ${StyledCheckbox} input:disabled ~ & {
+    background-color: ${color('neutral', '000')};
+    border-color: ${color('neutral', '200')};
+
+    &::before {
+      box-shadow: none;
+    }
+  }
+
+  ${StyledCheckbox} input:disabled:checked ~ & {
+    background-color: ${color('neutral', '200')};
+  }
 `
diff --git a/packages/react-component-library/src/components/CheckboxE/partials/StyledInput.tsx b/packages/react-component-library/src/components/CheckboxE/partials/StyledInput.tsx
@@ -1,40 +1,9 @@
-import { selectors } from '@defencedigital/design-tokens'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
-import { StyledCheckboxProps } from './StyledCheckbox'
-import { StyledCheckmark } from './StyledCheckmark'
-
-const { color } = selectors
-
-export const StyledInput = styled.input<StyledCheckboxProps>`
+export const StyledInput = styled.input`
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
-
-  &:checked ~ ${StyledCheckmark} {
-    background-color: ${color('action', '500')};
-    border: 1px solid ${color('action', '500')};
-    text-align: center;
-  }
-
-  &:checked ~ ${StyledCheckmark}:after {
-    display: block;
-  }
-
-  ${({ $isDisabled }) =>
-    $isDisabled &&
-    css`
-      ~ ${StyledCheckmark} {
-        background-color: ${color('neutral', '000')};
-        border: 1px solid ${color('neutral', '100')};
-      }
-
-      &:hover ~ ${StyledCheckmark}, input:active ~ ${StyledCheckmark} {
-        border: 1px solid ${color('neutral', '100')};
-        box-shadow: none;
-        cursor: not-allowed;
-      }
-    `}
 `