Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve focus state of compressed EuiSwitch #2745

Merged
merged 6 commits into from
Jan 11, 2020
Merged

Improve focus state of compressed EuiSwitch #2745

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7983725
updated focus state for compressed EuiSwitch
andreadelrio Jan 9, 2020
143db28
Merge remote-tracking branch 'upstream/master' into focus-switch
andreadelrio Jan 9, 2020
4cd0c96
cl
andreadelrio Jan 9, 2020
6bc4b0a
cleanup
andreadelrio Jan 10, 2020
8a82235
updated cl
andreadelrio Jan 10, 2020
26ba89c
more cleanup
andreadelrio Jan 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**

Expand Down
4 changes: 4 additions & 0 deletions src/components/form/switch/_switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/global_styling/mixins/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,8 +307,8 @@
}
}

@mixin euiCustomControlFocused {
@include euiFocusRing;
@mixin euiCustomControlFocused($size: null) {
@include euiFocusRing($size);
border-color: $euiColorPrimary;
}

Expand Down
3 changes: 3 additions & 0 deletions src/global_styling/mixins/_states.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 10 additions & 0 deletions src/global_styling/utility/_animations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,16 @@
}
}

@keyframes focusRingAnimateMini {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious: What was your thought process behind creating new sized focus ring besides using an existing one?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My first thought was to continue using focusRingAnimate and just increase the value of $euiFocusRingSize. However, then I realized there's a number of components using euiCustomControlFocused (and therefore euiFocusRing with the default size of small) that would be unnecessarily affected so I decided to create a new sized focus ring (focusRingAnimateMini) for this case.

0% {
box-shadow: 0 0 0 10px $euiFocusRingAnimStartColor;
}

100% {
box-shadow: 0 0 0 $euiFocusRingSizeMini $euiFocusRingColor;
}
}

// Component specific

@keyframes euiButtonActive {
Expand Down
1 change: 1 addition & 0 deletions src/global_styling/variables/_states.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ $euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default;
// Sizing
$euiFocusRingSizeLarge: $euiSizeXS !default;
$euiFocusRingSize: $euiFocusRingSizeLarge / 2 !default;
$euiFocusRingSizeMini: $euiFocusRingSizeLarge * .75 !default;