Compressed switch styling (#2327)

Adds smaller switch styles.
elastic · Sep 11, 2019 · 520d6dc · 520d6dc
1 parent 8be8b9d
commit 520d6dc
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `14.0.0`.
+- Added missing `compressed` styling to `EuiSwitch` ([#2327](https://github.com/elastic/eui/pull/2327))
 
 ## [`14.0.0`](https://github.com/elastic/eui/tree/v14.0.0)
 

diff --git a/src-docs/src/views/form_compressed/form_compressed.js b/src-docs/src/views/form_compressed/form_compressed.js
@@ -128,6 +128,7 @@ export default class extends Component {
             name="switch"
             checked={this.state.isSwitchChecked}
             onChange={this.onSwitchChange}
+            compressed
           />
         </EuiFormRow>
 

diff --git a/src-docs/src/views/form_compressed/form_horizontal.js b/src-docs/src/views/form_compressed/form_horizontal.js
@@ -94,6 +94,7 @@ export default class extends Component {
             name="switch"
             checked={this.state.isSwitchChecked}
             onChange={this.onSwitchChange}
+            compressed
           />
         </EuiFormRow>
       </EuiPanel>

diff --git a/src-docs/src/views/form_controls/switch.js b/src-docs/src/views/form_controls/switch.js
@@ -34,6 +34,25 @@ export default class extends Component {
           onChange={this.onChange}
           disabled
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiSwitch
+          label="I am a compressed switch"
+          checked={this.state.checked}
+          onChange={this.onChange}
+          compressed
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiSwitch
+          label="I am a compressed, disabled switch"
+          checked={this.state.checked}
+          onChange={this.onChange}
+          compressed
+          disabled
+        />
       </Fragment>
     );
   }

diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
@@ -232,7 +232,7 @@
     padding: $size / 2;
   }
 
-  border: 1px solid shadeOrTint($euiColorLightestShade, 18%, 30%);
+  border: 1px solid $euiFormCustomControlBorderColor;
   background: $euiColorEmptyShade no-repeat center;
 
   @if $type == 'round' {

diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss
@@ -14,13 +14,18 @@ $euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS !default;
 $euiSwitchThumbSize: $euiSwitchHeight !default;
 $euiSwitchIconHeight: $euiSize !default;
 
+$euiSwitchHeightCompressed: $euiSize !default;
+$euiSwitchWidthCompressed: $euiSize * 1.75 !default;
+$euiSwitchThumbSizeCompressed: $euiSwitchHeightCompressed !default;
+
 // Coloring
 $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default;
 $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
 $euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 60%) !default;
 $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
+$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default;
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
-$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default;
-$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%) !default;
+$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8);
+$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%);
diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss
@@ -104,6 +104,8 @@
 
     .euiSwitch__thumb {
       @include euiCustomControlDisabled;
+
+      border-color: $euiFormBorderColor;
       background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3));
     }
 
@@ -116,6 +118,11 @@
     }
   }
 
+  .euiSwitch__input:checked:disabled ~ .euiSwitch__body {
+    background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .7), transparentize($euiColorMediumShade, .4));
+  }
+
+  // Slightly darker background when in a checked state.
   .euiSwitch__input:not(:checked):not(:disabled) ~ .euiSwitch__body {
     background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3));
   }
@@ -137,4 +144,53 @@
       }
     }
   }
+
+  // Compressed switches operate very similar to the normal versions, but are smaller, contain no icon signifiers
+  &.euiSwitch--compressed {
+    min-height: $euiSwitchHeightCompressed;
+
+    .euiSwitch__label {
+      line-height: $euiSwitchHeightCompressed;
+    }
+
+    .euiSwitch__body {
+      width: $euiSwitchWidthCompressed;
+      height: $euiSwitchHeightCompressed;
+      border-radius: $euiSwitchHeightCompressed;
+    }
+
+    .euiSwitch__thumb {
+      @include euiCustomControl($type: 'round', $size: ($euiSwitchThumbSizeCompressed) - 2px);
+
+      left: ($euiSwitchWidthCompressed) - (($euiSwitchThumbSizeCompressed) - 2px) - 1px;
+      top: 1px;
+      transition: border-color $euiAnimSpeedNormal $euiAnimSlightBounce, background-color $euiAnimSpeedNormal $euiAnimSlightBounce, left $euiAnimSpeedNormal $euiAnimSlightBounce, transform $euiAnimSpeedNormal $euiAnimSlightBounce;
+    }
+
+    .euiSwitch__track {
+      border-radius: $euiSwitchHeightCompressed;
+    }
+
+    .euiSwitch__input:not(:checked) ~ .euiSwitch__body {
+      .euiSwitch__thumb {
+        left: 1px;
+      }
+    }
+
+    // Compressed switches need slightly darker borders since they don't have icons
+    .euiSwitch__input:not(:checked) ~ .euiSwitch__body,
+    .euiSwitch__input:checked:disabled ~ .euiSwitch__body {
+      .euiSwitch__thumb {
+        border-color: $euiFormCustomControlBorderColor;
+      }
+    }
+
+    // Similar additional treatment needed while checked
+    .euiSwitch__input:checked ~ .euiSwitch__body {
+      .euiSwitch__thumb {
+        border-color: $euiColorPrimary;
+      }
+    }
+
+  }
 }
diff --git a/src/components/form/switch/switch.js b/src/components/form/switch/switch.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -54,13 +54,17 @@ export class EuiSwitch extends Component {
         <span className="euiSwitch__body">
           <span className="euiSwitch__thumb" />
           <span className="euiSwitch__track">
-            <EuiIcon type="cross" size="m" className="euiSwitch__icon" />
+            {!compressed && (
+              <Fragment>
+                <EuiIcon type="cross" size="m" className="euiSwitch__icon" />
 
-            <EuiIcon
-              type="check"
-              size="m"
-              className="euiSwitch__icon euiSwitch__icon--checked"
-            />
+                <EuiIcon
+                  type="check"
+                  size="m"
+                  className="euiSwitch__icon euiSwitch__icon--checked"
+                />
+              </Fragment>
+            )}
           </span>
         </span>