checkbox: circular shadow fix

HBM · Sep 27, 2016 · 6a8bdf4 · 6a8bdf4
1 parent d7dbe3f
commit 6a8bdf4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 26 deletions.
diff --git a/components/checkbox/Checkbox.scss b/components/checkbox/Checkbox.scss
@@ -15,14 +15,6 @@
   position: absolute;
   opacity: 0;
   z-index: -1;
-  overflow: hidden;
-  pointer-events: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
-.Checkbox-input:focus {
-  outline:0;
 }
 
 .Checkbox-icon {
@@ -85,22 +77,14 @@
   }
 }
 
-.Checkbox-input:checked:focus ~ .Checkbox-focus {
+.Checkbox-input:checked.Checkbox-input--keyboard ~ .Checkbox-focus {
   box-shadow: 0 0 0 8px rgba($blue-dark, 0.12);
   background-color: rgba($blue-dark, 0.12);
   display: block;
 }
 
-.Checkbox-input:not(:checked):focus ~ .Checkbox-focus {
+.Checkbox-input:not(:checked).Checkbox-input--keyboard ~ .Checkbox-focus {
   box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.12);
   background-color: rgba(0, 0, 0, 0.12);
   display: block;
 }
-
-.Checkbox-input:active, .Checkbox-input.active {
-  display: none;
-
-  & ~ .Checkbox-focus {
-    display: none;
-  }
-}
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
@@ -33,25 +33,26 @@ export default class Checkbox extends React.Component {
     }
   }
 
-  onCleanUp = (event) => {
+  onCleanUp = (e) => {
     this.setState({
       active: false
     })
   }
 
-  onClick = (event) => {
-    this.setState({
-      active: true
-    })
-    window.setTimeout(this.onCleanUp, 100)
+  onKeyUp = (e) => {
+    if (e.keyCode === 9) {
+      this.setState({
+        active: true
+      })
+    }
   }
 
   render () {
     return (
-      <label className='Checkbox' title={this.props.label} onClick={this.onClick}>
+      <label className='Checkbox' title={this.props.label} onKeyUp={this.onKeyUp} onBlur={this.onCleanUp}>
         <input
           checked={this.props.checked}
-          className={classnames('Checkbox-input', {active: this.state.active})}
+          className={classnames('Checkbox-input', {'Checkbox-input--keyboard': this.state.active})}
           defaultChecked={this.props.defaultChecked}
           disabled={this.props.disabled}
           name={this.props.name}