From 520d6dc8b4fbd793faaaecc637f60c80fb21318b Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Wed, 11 Sep 2019 15:38:23 -0700 Subject: [PATCH] Compressed switch styling (#2327) Adds smaller switch styles. --- CHANGELOG.md | 2 +- .../views/form_compressed/form_compressed.js | 1 + .../views/form_compressed/form_horizontal.js | 1 + src-docs/src/views/form_controls/switch.js | 19 +++++++ src/components/form/_mixins.scss | 2 +- src/components/form/_variables.scss | 9 ++- src/components/form/switch/_switch.scss | 56 +++++++++++++++++++ src/components/form/switch/switch.js | 18 +++--- 8 files changed, 97 insertions(+), 11 deletions(-) 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 && ( + + - + + + )}