diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13018a7a40d..afc59bc8836 100644
--- 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
index 9259674fca0..264fb3114f7 100644
--- 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
/>
diff --git a/src-docs/src/views/form_compressed/form_horizontal.js b/src-docs/src/views/form_compressed/form_horizontal.js
index 559015f8654..a69d5931ac0 100644
--- 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
/>
diff --git a/src-docs/src/views/form_controls/switch.js b/src-docs/src/views/form_controls/switch.js
index 2d8f061679c..d47a81a244e 100644
--- 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
/>
+
+
+
+
+
+
+
+
);
}
diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
index 103993d1c9d..d55408b48f8 100644
--- 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
index aff0b960de4..c723b784d3e 100644
--- a/src/components/form/_variables.scss
+++ b/src/components/form/_variables.scss
@@ -14,6 +14,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,6 +25,7 @@ $euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 2
$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
index cea8270aa94..39da09d6202 100644
--- 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
index ab16f30bcaa..06c490887e9 100644
--- 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 {
-
+ {!compressed && (
+
+
-
+
+
+ )}