Fixup disabled Checkbox and Radio

jxom · Oct 26, 2018 · 786ef92 · 786ef92
1 parent 91dc8df
commit 786ef92
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 4 deletions.
diff --git a/src/Checkbox/Checkbox.mdx b/src/Checkbox/Checkbox.mdx
@@ -26,6 +26,7 @@ Make the checkbox disabled with the `disabled` prop.
 
 <Playground>
   <Checkbox disabled label="Click me" />
+  <Checkbox checked disabled label="Click me" />
 </Playground>
 
 ## States

diff --git a/src/Checkbox/styled.js b/src/Checkbox/styled.js
@@ -46,6 +46,9 @@ export const HiddenCheckbox = HiddenInput({
     transform: rotate(45deg);
     width: 6px;
   `,
+  disabledTickCss: css`
+    border-color: ${palette('grayLighter')};
+  `,
   themePrefix: 'Checkbox'
 });
 

diff --git a/src/Radio/Radio.mdx b/src/Radio/Radio.mdx
@@ -26,7 +26,8 @@ import Radio from './index';
 Make the Radio disabled with the `disabled` prop.
 
 <Playground>
-  <Radio disabled name="weather" label="Sunny" />
+  <Radio disabled name="hasFannypack" label="Yes" />
+  <Radio checked disabled name="hasFannypack" label="No" />
 </Playground>
 
 ## States

diff --git a/src/Radio/styled.js b/src/Radio/styled.js
@@ -42,6 +42,9 @@ export const HiddenRadio = HiddenInput({
     transform: translate(-50%, -50%);
     width: 8px;
   `,
+  disabledTickCss: css`
+    background: ${palette('grayLighter')};
+  `,
   themePrefix: 'Radio'
 });
 

diff --git a/src/_utils/HiddenInput.js b/src/_utils/HiddenInput.js
@@ -3,7 +3,7 @@ import { palette, theme } from 'styled-tools';
 import { tint } from 'polished';
 import Input from 'reakit/Input';
 
-export default ({ Icon, tickCss, themePrefix }) => styled(Input)`
+export default ({ Icon, disabledTickCss, tickCss, themePrefix }) => styled(Input)`
   clip: rect(0, 0, 0, 0);
   height: 1px;
   margin: -1px;
@@ -27,9 +27,10 @@ export default ({ Icon, tickCss, themePrefix }) => styled(Input)`
       ${theme(`${themePrefix}.icon.focus`)};
     }
   }
-  &:checked + ${Icon} {
+  &:not([disabled]):checked + ${Icon} {
     border-color: ${props => tint(0.3, palette('primary')(props))};
-
+  }
+  &:checked + ${Icon} {
     & {
       ${props =>
         props.state &&
@@ -47,4 +48,7 @@ export default ({ Icon, tickCss, themePrefix }) => styled(Input)`
       ${theme(`${themePrefix}.icon.checked`)};
     }
   }
+  &[disabled]:checked + ${Icon}::before {
+    ${disabledTickCss};
+  }
 `;