From bb4d43cc49e9ec00c5ad87e4273ce3597da5e4d9 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 10 Sep 2019 20:46:30 -0700 Subject: [PATCH 1/4] compressed switch styling --- src-docs/src/views/form_controls/switch.js | 19 ++++++++++ src/components/form/_variables.scss | 6 +++- src/components/form/switch/_switch.scss | 42 ++++++++++++++++++++++ src/components/form/switch/switch.js | 18 ++++++---- 4 files changed, 77 insertions(+), 8 deletions(-) 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/_variables.scss b/src/components/form/_variables.scss index eae29dabd11..e9e53155842 100644 --- a/src/components/form/_variables.scss +++ b/src/components/form/_variables.scss @@ -13,6 +13,10 @@ $euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS !default; $euiSwitchThumbSize: $euiSwitchHeight !default; $euiSwitchIconHeight: $euiSize !default; +$euiSwitchHeightCompressed: $euiSwitchHeight * .5 !default; +$euiSwitchWidthCompressed: $euiSwitchWidth * .5 !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%); \ No newline at end of file +$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%); diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index cea8270aa94..f32f56be1b6 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -137,4 +137,46 @@ } } } + + &.euiSwitch--compressed { + min-height: $euiSwitchHeightCompressed; + + .euiSwitch__label { + line-height: $euiSwitchHeightCompressed; + font-size: $euiFontSizeXS; + } + + .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: $euiColorMediumShade; + } + } + } } 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 && ( + + - + + + )} From c55e4952ff6b28d6d9a80ee86e7487aad6e748aa Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 10 Sep 2019 21:03:29 -0700 Subject: [PATCH 2/4] cl and small stuff --- CHANGELOG.md | 1 + src/components/form/switch/_switch.scss | 9 +++++++++ 2 files changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c751602e84..413ec07db68 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index f32f56be1b6..4936dca72cf 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -138,6 +138,7 @@ } } + // Compressed switches operate very similar to the normal versions, but are smaller, contain no icon signifiers &.euiSwitch--compressed { min-height: $euiSwitchHeightCompressed; @@ -178,5 +179,13 @@ border-color: $euiColorMediumShade; } } + + // Similar additional treatment needed while checked + .euiSwitch__input:checked ~ .euiSwitch__body { + .euiSwitch__thumb { + border-color: $euiColorPrimary; + } + } + } } From f0a312ad80c46351b0444b01e1b24b06994a8b06 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 11 Sep 2019 13:11:34 -0700 Subject: [PATCH 3/4] update styling --- src/components/form/_variables.scss | 4 ++-- src/components/form/switch/_switch.scss | 10 ++++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss index e9e53155842..b7f110eb4a8 100644 --- a/src/components/form/_variables.scss +++ b/src/components/form/_variables.scss @@ -13,8 +13,8 @@ $euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS !default; $euiSwitchThumbSize: $euiSwitchHeight !default; $euiSwitchIconHeight: $euiSize !default; -$euiSwitchHeightCompressed: $euiSwitchHeight * .5 !default; -$euiSwitchWidthCompressed: $euiSwitchWidth * .5 !default; +$euiSwitchHeightCompressed: $euiSize !default; +$euiSwitchWidthCompressed: $euiSize * 1.75 !default; $euiSwitchThumbSizeCompressed: $euiSwitchHeightCompressed !default; // Coloring diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index 4936dca72cf..c3869387e4a 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)); + } + + // slight .euiSwitch__input:not(:checked):not(:disabled) ~ .euiSwitch__body { background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)); } @@ -144,7 +151,6 @@ .euiSwitch__label { line-height: $euiSwitchHeightCompressed; - font-size: $euiFontSizeXS; } .euiSwitch__body { @@ -176,7 +182,7 @@ .euiSwitch__input:not(:checked) ~ .euiSwitch__body, .euiSwitch__input:checked:disabled ~ .euiSwitch__body { .euiSwitch__thumb { - border-color: $euiColorMediumShade; + border-color: $euiFormBorderColor; } } From 32a69fb7aaf04212a467727d29646495ffdb4396 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 11 Sep 2019 15:17:09 -0700 Subject: [PATCH 4/4] feedback --- src/components/form/switch/_switch.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index b37f0fd9fbf..39da09d6202 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -122,7 +122,7 @@ background-color: lightOrDarkTheme(transparentize($euiColorMediumShade, .7), transparentize($euiColorMediumShade, .4)); } - // slight + // 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)); } @@ -154,7 +154,6 @@ } .euiSwitch__body { - pointer-events: none; width: $euiSwitchWidthCompressed; height: $euiSwitchHeightCompressed; border-radius: $euiSwitchHeightCompressed;