Compressed switch styling

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 **Bug fixes**
 
+- Added missing `compressed` styling to `EuiSwitch` ([#2327](https://github.com/elastic/eui/pull/2327))
 - Corrected `EuiCodeBlock`'s proptype for `children` to be string or array of strings. ([#2324](https://github.com/elastic/eui/pull/2324))
 
 ## [`13.8.1`](https://github.com/elastic/eui/tree/v13.8.1)

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>
     );
   }

src/components/form/_variables.scss

@@ -13,6 +13,10 @@ $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;
@@ -21,4 +25,4 @@ $euiFormBorderDisabledColor: transparentize($euiColorFullShade, .92) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8);
-$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%);
+$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%);

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));
+  }
+
+  // slight
   .euiSwitch__input:not(:checked):not(:disabled) ~ .euiSwitch__body {
     background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3));
   }
@@ -137,4 +144,54 @@
       }
     }
   }
+
+  // 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 {
+      pointer-events: none;
+      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: $euiFormBorderColor;
+      }
+    }
+
+    // Similar additional treatment needed while checked
+    .euiSwitch__input:checked ~ .euiSwitch__body {
+      .euiSwitch__thumb {
+        border-color: $euiColorPrimary;
+      }
+    }
+
+  }
 }

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>