[UI Framework] KuiCheckbox and KuiSwitch visual bugs (elastic#13515)

* Retain focus state appearance on KuiCheckbox when it's being clicked on. * Document KuiIcon check and lock types. * Use KuiIcon inside of KuiSwitch to remove aliased border.
cjcenizal · Aug 26, 2017 · ddc69a6 · ddc69a6
1 parent b70aa3c
commit ddc69a6
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 68 deletions.
diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css
@@ -676,13 +676,10 @@ table {
       background-color: #F5F5F5;
       -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
               mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
-    .kuiCheckbox .kuiCheckbox__input:focus ~ .kuiCheckbox__square {
+    .kuiCheckbox .kuiCheckbox__input:focus ~ .kuiCheckbox__square,
+    .kuiCheckbox .kuiCheckbox__input:active ~ .kuiCheckbox__square {
       background-color: #275160;
       border-color: #4da1c0; }
-    .kuiCheckbox .kuiCheckbox__input:checked:focus ~ .kuiCheckbox__square .kuiCheckbox__check {
-      background-color: #F5F5F5;
-      -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
-              mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
 
 .kuiCheckboxGroup__item + .kuiCheckboxGroup__item {
   margin-top: 8px; }
@@ -960,12 +957,6 @@ table {
   /**
    * 1. The input is "hidden" but still focusable.
    */
-  /**
-   * 1. Accounts for the border on the body.
-   */
-  /**
-   * 1. Mask is used to color the svg. Text color is used so works regardless of theme.
-   */
   /**
    * The thumb is slightly scaled when in use.
    */
@@ -993,7 +984,7 @@ table {
     width: 52px;
     height: 24px;
     background: #262626;
-    border: 1px solid #444;
+    box-shadow: inset 0 0 0 1px #444;
     display: inline-block;
     position: relative;
     border-radius: 24px;
@@ -1005,7 +996,6 @@ table {
     display: inline-block;
     background-color: #222;
     left: 28px;
-    top: -1px;
     border-radius: 50%;
     border: 1px solid #444;
     transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
@@ -1023,27 +1013,24 @@ table {
   .kuiSwitch .kuiSwitch__icon {
     position: absolute;
     right: -40px;
-    top: 0;
+    top: 4px;
     bottom: 0;
     width: 48px;
+    height: 16px;
     transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), right 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
-    -webkit-mask: url("../src/components/icon/assets/cross.svg") center center no-repeat;
-            mask: url("../src/components/icon/assets/cross.svg") center center no-repeat;
-    background-color: #F5F5F5; }
+    fill: #F5F5F5; }
   .kuiSwitch .kuiSwitch__icon--checked {
     right: auto;
     left: -8px;
-    background-color: #F5F5F5;
-    -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
-            mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
+    fill: #F5F5F5; }
   .kuiSwitch:hover .kuiSwitch__thumb {
     -webkit-transform: scale(1.05);
             transform: scale(1.05); }
   .kuiSwitch:active .kuiSwitch__thumb {
     -webkit-transform: scale(0.95);
             transform: scale(0.95); }
   .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__thumb {
-    left: -1px; }
+    left: 0; }
   .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon {
     right: -8px; }
     .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon.kuiSwitch__icon--checked {

diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css
@@ -676,13 +676,10 @@ table {
       background-color: #3F3F3F;
       -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
               mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
-    .kuiCheckbox .kuiCheckbox__input:focus ~ .kuiCheckbox__square {
+    .kuiCheckbox .kuiCheckbox__input:focus ~ .kuiCheckbox__square,
+    .kuiCheckbox .kuiCheckbox__input:active ~ .kuiCheckbox__square {
       background-color: #e6f2f6;
       border-color: #0079a5; }
-    .kuiCheckbox .kuiCheckbox__input:checked:focus ~ .kuiCheckbox__square .kuiCheckbox__check {
-      background-color: #3F3F3F;
-      -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
-              mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
 
 .kuiCheckboxGroup__item + .kuiCheckboxGroup__item {
   margin-top: 8px; }
@@ -960,12 +957,6 @@ table {
   /**
    * 1. The input is "hidden" but still focusable.
    */
-  /**
-   * 1. Accounts for the border on the body.
-   */
-  /**
-   * 1. Mask is used to color the svg. Text color is used so works regardless of theme.
-   */
   /**
    * The thumb is slightly scaled when in use.
    */
@@ -993,7 +984,7 @@ table {
     width: 52px;
     height: 24px;
     background: #fbfbfb;
-    border: 1px solid #D9D9D9;
+    box-shadow: inset 0 0 0 1px #D9D9D9;
     display: inline-block;
     position: relative;
     border-radius: 24px;
@@ -1005,7 +996,6 @@ table {
     display: inline-block;
     background-color: #FFF;
     left: 28px;
-    top: -1px;
     border-radius: 50%;
     border: 1px solid #D9D9D9;
     transition: border-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), background-color 250ms cubic-bezier(0.34, 1.61, 0.7, 1), left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
@@ -1023,27 +1013,24 @@ table {
   .kuiSwitch .kuiSwitch__icon {
     position: absolute;
     right: -40px;
-    top: 0;
+    top: 4px;
     bottom: 0;
     width: 48px;
+    height: 16px;
     transition: left 250ms cubic-bezier(0.34, 1.61, 0.7, 1), right 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
-    -webkit-mask: url("../src/components/icon/assets/cross.svg") center center no-repeat;
-            mask: url("../src/components/icon/assets/cross.svg") center center no-repeat;
-    background-color: #3F3F3F; }
+    fill: #3F3F3F; }
   .kuiSwitch .kuiSwitch__icon--checked {
     right: auto;
     left: -8px;
-    background-color: #3F3F3F;
-    -webkit-mask: url("../src/components/icon/assets/check.svg") center center no-repeat;
-            mask: url("../src/components/icon/assets/check.svg") center center no-repeat; }
+    fill: #3F3F3F; }
   .kuiSwitch:hover .kuiSwitch__thumb {
     -webkit-transform: scale(1.05);
             transform: scale(1.05); }
   .kuiSwitch:active .kuiSwitch__thumb {
     -webkit-transform: scale(0.95);
             transform: scale(0.95); }
   .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__thumb {
-    left: -1px; }
+    left: 0; }
   .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon {
     right: -8px; }
     .kuiSwitch .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body .kuiSwitch__icon.kuiSwitch__icon--checked {

diff --git a/ui_framework/doc_site/src/views/icon/icons.js b/ui_framework/doc_site/src/views/icon/icons.js
@@ -9,6 +9,8 @@ const iconTypes = [
   'search',
   'user',
   'cross',
+  'check',
+  'lock',
   'help',
   'arrowUp',
   'arrowDown',

diff --git a/ui_framework/src/components/form/checkbox/_checkbox.scss b/ui_framework/src/components/form/checkbox/_checkbox.scss
@@ -32,19 +32,17 @@
     position: absolute;
     opacity: 0;
 
-    &:checked ~ .kuiCheckbox__square .kuiCheckbox__check {
-      background-color: $kuiTextColor;
-      mask: url('../src/components/icon/assets/check.svg') center center no-repeat;
+    &:checked ~ .kuiCheckbox__square {
+      .kuiCheckbox__check {
+        background-color: $kuiTextColor;
+        mask: url('../src/components/icon/assets/check.svg') center center no-repeat;
+      }
     }
 
-    &:focus ~ .kuiCheckbox__square {
+    &:focus ~ .kuiCheckbox__square,
+    &:active ~ .kuiCheckbox__square {
       background-color: $kuiFocusBackgroundColor;
       border-color: $kuiColorPrimary;
     }
-
-    &:checked:focus ~ .kuiCheckbox__square .kuiCheckbox__check {
-      background-color: $kuiTextColor;
-      mask: url('../src/components/icon/assets/check.svg') center center no-repeat;
-    }
   }
 }
diff --git a/ui_framework/src/components/form/switch/_index.scss b/ui_framework/src/components/form/switch/_index.scss
@@ -1,5 +1,6 @@
 $kuiSwitchHeight: $kuiSizeL;
 $kuiSwitchWidth: ($kuiSizeL * 2) + $kuiSizeXS;
 $kuiSwitchThumbSize: $kuiSizeL;
+$kuiSwitchIconHeight: $kuiSize;
 
 @import 'switch';
diff --git a/ui_framework/src/components/form/switch/_switch.scss b/ui_framework/src/components/form/switch/_switch.scss
@@ -34,24 +34,20 @@
     width: $kuiSwitchWidth;
     height: $kuiSwitchHeight;
     background: $kuiFormBackgroundColor;
-    border: $kuiBorderThin;
+    box-shadow: inset 0 0 0 1px $kuiBorderColor;
     display: inline-block;
     position: relative;
     border-radius: $kuiSwitchHeight;
     vertical-align: middle;
   }
 
-  /**
-   * 1. Accounts for the border on the body.
-   */
   .kuiSwitch__thumb {
     position: absolute;
     width: $kuiSwitchHeight;
     height: $kuiSwitchHeight;
     display: inline-block;
     background-color: $kuiColorEmptyShade;
     left: $kuiSwitchWidth - $kuiSwitchThumbSize;
-    top: -1px; // 1
     border-radius: 50%;
     border: $kuiBorderThin;
     transition: border-color $kuiAnimSpeedNormal $kuiAnimSlightBounce, background-color $kuiAnimSpeedNormal $kuiAnimSlightBounce, left $kuiAnimSpeedNormal $kuiAnimSlightBounce, transform $kuiAnimSpeedNormal $kuiAnimSlightBounce;
@@ -68,25 +64,21 @@
     border-radius: $kuiSwitchHeight;
   }
 
-  /**
-   * 1. Mask is used to color the svg. Text color is used so works regardless of theme.
-   */
   .kuiSwitch__icon {
     position: absolute;
     right: -($kuiSwitchWidth - ($kuiSwitchThumbSize / 2));
-    top: 0;
+    top: ($kuiSwitchHeight - $kuiSwitchIconHeight) / 2;
     bottom: 0;
     width: $kuiSwitchWidth - ($kuiSwitchThumbSize / 2) + $kuiSizeS;
+    height: $kuiSwitchIconHeight;
     transition: left $kuiAnimSpeedNormal $kuiAnimSlightBounce, right $kuiAnimSpeedNormal $kuiAnimSlightBounce;
-    mask: url('../src/components/icon/assets/cross.svg') center center no-repeat; // 1
-    background-color: $kuiTextColor; // 1
+    fill: $kuiTextColor;
   }
 
   .kuiSwitch__icon--checked {
     right: auto;
     left: -$kuiSizeS;
-    background-color: $kuiTextColor;
-    mask: url('../src/components/icon/assets/check.svg') center center no-repeat;
+    fill: $kuiTextColor;
   }
 
   /**
@@ -108,9 +100,8 @@
    * When input is not checked, we shift around the positioning of sibling/child selectors.
    */
   .kuiSwitch__input:not(:checked) ~ .kuiSwitch__body {
-
     .kuiSwitch__thumb {
-      left: -1px;
+      left: 0;
     }
 
     .kuiSwitch__icon {

diff --git a/ui_framework/src/components/form/switch/switch.js b/ui_framework/src/components/form/switch/switch.js
@@ -3,6 +3,8 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
+import { KuiIcon } from '../../icon';
+
 export const KuiSwitch = ({
   label,
   id,
@@ -28,8 +30,17 @@ export const KuiSwitch = ({
       <span className="kuiSwitch__body">
         <span className="kuiSwitch__thumb" />
         <span className="kuiSwitch__track">
-          <span className="kuiSwitch__icon" />
-          <span className="kuiSwitch__icon kuiSwitch__icon--checked" />
+          <KuiIcon
+            type="cross"
+            size="medium"
+            className="kuiSwitch__icon"
+          />
+
+          <KuiIcon
+            type="check"
+            size="medium"
+            className="kuiSwitch__icon kuiSwitch__icon--checked"
+          />
         </span>
       </span>