From 7983725eda2ea9ada7976129f774f47383906afc Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 8 Jan 2020 22:27:45 -0800 Subject: [PATCH 1/4] updated focus state for compressed EuiSwitch --- src/components/form/switch/_switch.scss | 4 ++++ src/global_styling/mixins/_form.scss | 4 ++-- src/global_styling/mixins/_states.scss | 3 +++ src/global_styling/utility/_animations.scss | 10 ++++++++++ src/global_styling/variables/_states.scss | 1 + 5 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index 94c10570c6f..a3112b183c5 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -182,6 +182,10 @@ &.euiSwitch--compressed, &.euiSwitch--mini { + .euiSwitch__button:focus .euiSwitch__thumb { + @include euiCustomControlFocused('mini'); + } + .euiSwitch__button[aria-checked='false'] { .euiSwitch__thumb { left: 1px; diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 56b0e87bab1..9d69a28644d 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -307,8 +307,8 @@ } } -@mixin euiCustomControlFocused { - @include euiFocusRing; +@mixin euiCustomControlFocused($size: null) { + @include euiFocusRing($size); border-color: $euiColorPrimary; } diff --git a/src/global_styling/mixins/_states.scss b/src/global_styling/mixins/_states.scss index e448c81e61a..246a36f36cc 100644 --- a/src/global_styling/mixins/_states.scss +++ b/src/global_styling/mixins/_states.scss @@ -3,6 +3,9 @@ // It's always OK to use the focus animation. This will take precendence over times we turn it off individually like EuiButtonEmpty // sass-lint:disable-block no-important animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important; + } @else if $size == 'mini' { + // sass-lint:disable-block no-important + animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateMini !important; } @else { // sass-lint:disable-block no-important animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate !important; diff --git a/src/global_styling/utility/_animations.scss b/src/global_styling/utility/_animations.scss index f5bedf92568..0f8b6f32d98 100644 --- a/src/global_styling/utility/_animations.scss +++ b/src/global_styling/utility/_animations.scss @@ -46,6 +46,16 @@ } } +@keyframes focusRingAnimateMini { + 0% { + box-shadow: 0 0 0 10px $euiFocusRingAnimStartColor; + } + + 100% { + box-shadow: 0 0 0 $euiFocusRingSizeMini $euiFocusRingColor; + } +} + // Component specific @keyframes euiButtonActive { diff --git a/src/global_styling/variables/_states.scss b/src/global_styling/variables/_states.scss index dc6d3a8f52e..a3285237687 100644 --- a/src/global_styling/variables/_states.scss +++ b/src/global_styling/variables/_states.scss @@ -5,3 +5,4 @@ $euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default; // Sizing $euiFocusRingSizeLarge: $euiSizeXS !default; $euiFocusRingSize: $euiFocusRingSizeLarge / 2 !default; +$euiFocusRingSizeMini: $euiFocusRingSizeLarge * .75 !default; From 4cd0c96fb4db4d478594cbf76c1fd518088eeb52 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 8 Jan 2020 22:51:12 -0800 Subject: [PATCH 2/4] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 044def9a5ef..c33aa90e226 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - Converted `EuiRangeInput` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732)) - Added `bellSlash` glyph to `EuiIcon` ([#2714](https://github.com/elastic/eui/pull/2714)) - Added `legend` prop to `EuiCheckboxGroup` and `EuiRadioGroup` to add `EuiFieldset` wrappers for title the groups ([#2739](https://github.com/elastic/eui/pull/2739)) +- Improved focus state of compressed and mini `EuiSwitch` ([#2745](https://github.com/elastic/eui/pull/2745)) **Bug fixes** From 6bc4b0ab41f74796fcabf302ea45b2cd4a7eca83 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Fri, 10 Jan 2020 15:48:20 -0800 Subject: [PATCH 3/4] cleanup --- src-docs/src/views/form_controls/switch.js | 10 ++++++++++ src/components/form/switch/_switch.scss | 6 +----- src/global_styling/utility/_animations.scss | 10 ---------- src/global_styling/variables/_states.scss | 3 +-- 4 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src-docs/src/views/form_controls/switch.js b/src-docs/src/views/form_controls/switch.js index eab0ffd7e42..e26dc970cbc 100644 --- a/src-docs/src/views/form_controls/switch.js +++ b/src-docs/src/views/form_controls/switch.js @@ -72,6 +72,16 @@ export default class extends Component { onChange={this.onChange} compressed /> + + + + ); } diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss index a3112b183c5..b3743f15cc9 100644 --- a/src/components/form/switch/_switch.scss +++ b/src/components/form/switch/_switch.scss @@ -17,7 +17,7 @@ flex-shrink: 0; // ensures the button doesn't lose width because of a long label line-height: 0; // ensures button takes height of switch inside - &:focus .euiSwitch__thumb { + &:focus .euiSwitch__track { @include euiCustomControlFocused; } @@ -182,10 +182,6 @@ &.euiSwitch--compressed, &.euiSwitch--mini { - .euiSwitch__button:focus .euiSwitch__thumb { - @include euiCustomControlFocused('mini'); - } - .euiSwitch__button[aria-checked='false'] { .euiSwitch__thumb { left: 1px; diff --git a/src/global_styling/utility/_animations.scss b/src/global_styling/utility/_animations.scss index 0f8b6f32d98..f5bedf92568 100644 --- a/src/global_styling/utility/_animations.scss +++ b/src/global_styling/utility/_animations.scss @@ -46,16 +46,6 @@ } } -@keyframes focusRingAnimateMini { - 0% { - box-shadow: 0 0 0 10px $euiFocusRingAnimStartColor; - } - - 100% { - box-shadow: 0 0 0 $euiFocusRingSizeMini $euiFocusRingColor; - } -} - // Component specific @keyframes euiButtonActive { diff --git a/src/global_styling/variables/_states.scss b/src/global_styling/variables/_states.scss index a3285237687..42f750130a7 100644 --- a/src/global_styling/variables/_states.scss +++ b/src/global_styling/variables/_states.scss @@ -4,5 +4,4 @@ $euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default; // Sizing $euiFocusRingSizeLarge: $euiSizeXS !default; -$euiFocusRingSize: $euiFocusRingSizeLarge / 2 !default; -$euiFocusRingSizeMini: $euiFocusRingSizeLarge * .75 !default; +$euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default; From 26ba89caaac4bc4a4ca75aaa9de1bdad89fa1dab Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Fri, 10 Jan 2020 16:15:42 -0800 Subject: [PATCH 4/4] more cleanup --- src-docs/src/views/form_controls/switch.js | 10 ---------- src/global_styling/mixins/_form.scss | 4 ++-- src/global_styling/mixins/_states.scss | 3 --- 3 files changed, 2 insertions(+), 15 deletions(-) diff --git a/src-docs/src/views/form_controls/switch.js b/src-docs/src/views/form_controls/switch.js index e26dc970cbc..eab0ffd7e42 100644 --- a/src-docs/src/views/form_controls/switch.js +++ b/src-docs/src/views/form_controls/switch.js @@ -72,16 +72,6 @@ export default class extends Component { onChange={this.onChange} compressed /> - - - - ); } diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 9d69a28644d..56b0e87bab1 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -307,8 +307,8 @@ } } -@mixin euiCustomControlFocused($size: null) { - @include euiFocusRing($size); +@mixin euiCustomControlFocused { + @include euiFocusRing; border-color: $euiColorPrimary; } diff --git a/src/global_styling/mixins/_states.scss b/src/global_styling/mixins/_states.scss index 246a36f36cc..e448c81e61a 100644 --- a/src/global_styling/mixins/_states.scss +++ b/src/global_styling/mixins/_states.scss @@ -3,9 +3,6 @@ // It's always OK to use the focus animation. This will take precendence over times we turn it off individually like EuiButtonEmpty // sass-lint:disable-block no-important animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important; - } @else if $size == 'mini' { - // sass-lint:disable-block no-important - animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateMini !important; } @else { // sass-lint:disable-block no-important animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate !important;