New Radio & Checkbox styles

CHANGELOG.md

@@ -1,6 +1,12 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.21.0`.
+- Decreased overall size of checkbox, radio, and switches as well as better styles for the different states. ([#407](https://github.com/elastic/eui/pull/407))
+
+**Bug fixes**
+
+- Fix appearance of checked checkeboxes and radios in IE ([#407](https://github.com/elastic/eui/pull/407))
+- Fix disabled vs enabled appearance of checked checkeboxes and radios ([#407](https://github.com/elastic/eui/pull/407))
+- Fix disabled & checked state of switches ([#407](https://github.com/elastic/eui/pull/407))
 
 # [`0.0.21`](https://github.com/elastic/eui/tree/v0.0.21)
 

src/components/accessibility/_screen_reader.scss

@@ -1,8 +1,12 @@
-.euiScreenReaderOnly {
+@mixin euiScreenReaderOnly() {
   position: absolute;
   left: -10000px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
 }
+
+.euiScreenReaderOnly {
+  @include euiScreenReaderOnly;
+}

src/components/form/_index.scss

@@ -1,5 +1,6 @@
 $euiFormMaxWidth: 400px;
 $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%);
+$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%); // exact 508c foreground for $euiColorLightShade
 
 @mixin euiFormControlSize {
   max-width: $euiFormMaxWidth;
@@ -87,6 +88,48 @@ $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%);
   }
 }
 
+// CUSTOM STYLES & STATES
+@mixin euiCustomControl($type: null, $size: $euiSize){
+
+  @if $size {
+    $size: $size - 2px; // subtract 2px from size to account for border size
+    padding: $size/2;
+  }
+
+  border: 1px solid shadeOrTint($euiColorLightestShade, 18%, 30%);
+  background: $euiColorEmptyShade no-repeat center;
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+
+  @if $type == 'round' {
+    border-radius: $size;
+  } @else if $type == 'square' {
+    border-radius: $euiBorderRadius;
+  }
+
+  transition: background-color $euiAnimSpeedFast ease-in,
+              border-color $euiAnimSpeedFast ease-in,
+              background-image 0s ease-out $euiAnimSpeedFast;
+}
+
+@mixin euiCustomControl--selected($type: null){
+  border-color: $euiColorPrimary;
+  background-color: $euiColorPrimary;
+  @include euiIconBackground($type, $euiColorEmptyShade);
+}
+
+@mixin euiCustomControl--disabled($type: null){
+  border-color: $euiColorLightShade;
+  background-color: $euiColorLightShade;
+  @include euiIconBackground($type, $euiFormCustomControlDisabledIconColor);
+  box-shadow: none;
+}
+
+@mixin euiCustomControl--focused(){
+  border-color: $euiColorPrimary;
+  @include euiFocusRing;
+}
+
+
 @import 'checkbox/index';
 @import 'field_number/index';
 @import 'field_password/index';

src/components/form/checkbox/__snapshots__/checkbox.test.js.snap

@@ -13,11 +13,7 @@ exports[`EuiCheckbox is rendered 1`] = `
   />
   <div
     class="euiCheckbox__square"
-  >
-    <div
-      class="euiCheckbox__check"
-    />
-  </div>
+  />
 </div>
 `;
 
@@ -33,11 +29,7 @@ exports[`EuiCheckbox props check is rendered 1`] = `
   />
   <div
     class="euiCheckbox__square"
-  >
-    <div
-      class="euiCheckbox__check"
-    />
-  </div>
+  />
 </div>
 `;
 
@@ -53,11 +45,7 @@ exports[`EuiCheckbox props disabled disabled is rendered 1`] = `
   />
   <div
     class="euiCheckbox__square"
-  >
-    <div
-      class="euiCheckbox__check"
-    />
-  </div>
+  />
 </div>
 `;
 
@@ -72,11 +60,7 @@ exports[`EuiCheckbox props label is rendered 1`] = `
   />
   <div
     class="euiCheckbox__square"
-  >
-    <div
-      class="euiCheckbox__check"
-    />
-  </div>
+  />
   <label
     class="euiCheckbox__label"
     for="id"
@@ -99,10 +83,6 @@ exports[`EuiCheckbox props type inList is rendered 1`] = `
   />
   <div
     class="euiCheckbox__square"
-  >
-    <div
-      class="euiCheckbox__check"
-    />
-  </div>
+  />
 </div>
 `;

src/components/form/checkbox/_checkbox.scss

@@ -1,96 +1,93 @@
 .euiCheckbox {
   position: relative;
-  min-height: $euiSizeL;
 
-  /**
-   * 1. Float above the visual checkbox and match its dimension, so that when users try to click it
-   *    they actually click this input.
-   */
   .euiCheckbox__input {
-    position: absolute; /* 1 */
-    opacity: 0; /* 1 */
-    height: $euiSizeL; /* 1 */
-    width: $euiSizeL; /* 1 */
-    z-index: 1; /* 1 */
-    margin: 0; /* 1 */
-    cursor: pointer;
+    @include euiScreenReaderOnly;
 
-    &:checked ~ .euiCheckbox__square {
-      background: $euiColorPrimary;
-      border-color: $euiColorPrimary;
-
-      .euiCheckbox__check {
-        border-color: $euiColorPrimary;
-        background-color: $euiColorEmptyShade;
-        // This path is relative to ~/src-docs/postcss.config.js, which uses
-        // the postcss-line-svg plugin.
-        mask: svg-load('../src/components/icon/assets/check.svg') center center no-repeat;
-      }
+    ~ .euiCheckbox__label {
+      display: block;
+      padding-left: ($euiCheckBoxSize * 1.5);
+      line-height: $euiSizeL;
+      font-size: $euiFontSizeS;
+      position: relative;
+      z-index: 2;
+      cursor: pointer;
     }
 
-    &:focus ~ .euiCheckbox__square,
-    &:active:not(:disabled) ~ .euiCheckbox__square {
-      box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1);
-      border-color: $euiColorPrimary;
-      border-width: $euiSizeXS / 2;
+    + .euiCheckbox__square {
+      display: inline-block;
+      position: absolute;
+      left: 0;
+      top: ($euiSizeL - $euiCheckBoxSize)/2;
+      @include euiCustomControl($type: 'square', $size: $euiCheckBoxSize);
     }
 
-    &:focus:checked ~.euiCheckbox__square {
-      border-color: darken($euiColorPrimary, 10%);
+    &:checked {
+      + .euiCheckbox__square {
+        @include euiCustomControl--selected($type: 'check');
+      }
     }
 
-    &:disabled,
-    &:disabled ~ .euiCheckbox__label {
-      cursor: not-allowed;
+    &:indeterminate {
+      + .euiCheckbox__square {
+        @include euiCustomControl--selected($type: 'dot');
+      }
     }
 
-    &:disabled:checked ~ .euiCheckbox__square {
-      background-color: $euiColorLightShade;
-      border-color: $euiColorLightShade;
-    }
+    &[disabled] {
+      cursor: not-allowed !important;
 
-    &:disabled:not(:checked) ~ .euiCheckbox__square {
-      background-color: $euiColorLightestShade;
+      ~ .euiCheckbox__label {
+        color: $euiColorDarkShade;
+        cursor: not-allowed !important;
+      }
+
+      + .euiCheckbox__square {
+        @include euiCustomControl--disabled();
+      }
     }
-  }
 
-  .euiCheckbox__square {
-    position: absolute;
-    height: $euiSizeL;
-    width: $euiSizeL;
-    border-radius: $euiBorderRadius;
-    border: $euiBorderThin;
-    background: $euiFormBackgroundColor;
-    z-index: 0;
-    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
-  }
+    &:checked[disabled] {
+      + .euiCheckbox__square {
+        @include euiCustomControl--disabled($type: 'check');
+      }
+    }
 
-    .euiCheckbox__check {
-      height: 100%;
-      width: 100%;
+    &:indeterminate[disabled] {
+      + .euiCheckbox__square {
+        @include euiCustomControl--disabled($type: 'dot');
+      }
     }
 
-  .euiCheckbox__label {
-    padding-left: $euiSizeXL;
-    line-height: $euiSizeL;
-    display: block;
-    font-weight: $euiFontWeightRegular;
-    z-index: 2;
-    font-size: $euiFontSizeS;
-    cursor: pointer;
+    &:focus,
+    &:active:not(:disabled) {
+      + .euiCheckbox__square {
+        @include euiCustomControl--focused;
+      }
+    }
   }
 
+  /**
+   * 1. Float above the visual radio and match its dimension, so that when users try to click it
+   *    they actually click this input.
+   */
+
   &.euiCheckbox--inList {
-    min-height: $euiSize;
+    min-height: $euiCheckBoxSize;
+    min-width: $euiCheckBoxSize;
 
     .euiCheckbox__square {
-      height: $euiSize;
-      width: $euiSize;
+      top: 0;
     }
 
     .euiCheckbox__input {
-      height: $euiSize;
-      width: $euiSize;
+      position: absolute; /* 1 */
+      opacity: 0; /* 1 */
+      @include size($euiCheckBoxSize); /* 1 */
+      z-index: 1; /* 1 */
+      margin: 0; /* 1 */
+      left: 0; /* 1 */
+      cursor: pointer;
     }
   }
 }

src/components/form/checkbox/_index.scss

@@ -1,2 +1,4 @@
+$euiCheckBoxSize: $euiSize;
+
 @import 'checkbox';
 @import 'checkbox_group';

src/components/form/checkbox/checkbox.js

@@ -51,9 +51,7 @@ export const EuiCheckbox = ({
         {...rest}
       />
 
-      <div className="euiCheckbox__square">
-        <div className="euiCheckbox__check" />
-      </div>
+      <div className="euiCheckbox__square" />
 
       {optionalLabel}
     </div>

src/components/form/radio/__snapshots__/radio.test.js.snap

@@ -13,11 +13,7 @@ exports[`EuiRadio is rendered 1`] = `
   />
   <div
     class="euiRadio__circle"
-  >
-    <div
-      class="euiRadio__check"
-    />
-  </div>
+  />
 </div>
 `;
 
@@ -33,11 +29,7 @@ exports[`EuiRadio props checked is rendered 1`] = `
   />
   <div
     class="euiRadio__circle"
-  >
-    <div
-      class="euiRadio__check"
-    />
-  </div>
+  />
 </div>
 `;
 
@@ -53,11 +45,7 @@ exports[`EuiRadio props disabled is rendered 1`] = `
   />
   <div
     class="euiRadio__circle"
-  >
-    <div
-      class="euiRadio__check"
-    />
-  </div>
+  />
 </div>
 `;
 
@@ -72,11 +60,7 @@ exports[`EuiRadio props label is rendered 1`] = `
   />
   <div
     class="euiRadio__circle"
-  >
-    <div
-      class="euiRadio__check"
-    />
-  </div>
+  />
   <label
     class="euiRadio__label"
     for="id"