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

Jump to bottom

FormToggle: refine animation #56515

Merged
merged 3 commits into from
Nov 29, 2023
Merged

FormToggle: refine animation #56515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dafdd28
ToggleForm: refine animation
ciampo Nov 24, 2023
f8a275f
CHANGELOG
ciampo Nov 24, 2023
aa82396
Use same transition duration for both color and position-based styles
ciampo Nov 29, 2023
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 packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Enhancements

- `FormToggle`: refine animation and improve high contrast styles ([#56515](https://github.com/WordPress/gutenberg/pull/56515)).
- `Button`: Add focus rings to focusable disabled buttons ([#56383](https://github.com/WordPress/gutenberg/pull/56383)).

### Bug Fix
Expand Down
44 changes: 37 additions & 7 deletions packages/components/src/form-toggle/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
$toggle-width: 36px;
$toggle-height: 18px;
$toggle-border-width: 1px;
$thumb-size: $toggle-height - ($toggle-border-width * 6);

$transition-duration: 0.2s;

.components-form-toggle {
position: relative;
display: inline-block;

// Unchecked state.
.components-form-toggle__track {
position: relative;
content: "";
display: inline-block;
box-sizing: border-box;
Expand All @@ -17,8 +21,26 @@ $toggle-border-width: 1px;
width: $toggle-width;
height: $toggle-height;
border-radius: $toggle-height * 0.5;
transition: 0.2s background ease;
transition:
$transition-duration background-color ease,
$transition-duration border-color ease;
@include reduce-motion("transition");
overflow: hidden;

// Windows High Contrast Mode
&::after {
content: "";
position: absolute;
inset: 0;
box-sizing: border-box;
// Expand the border to fake a solid in Windows High Contrast Mode.
border-top: #{ $toggle-height } solid transparent;

transition: $transition-duration opacity ease;
@include reduce-motion("transition");

opacity: 0;
}
}

.components-form-toggle__thumb {
Expand All @@ -27,20 +49,28 @@ $toggle-border-width: 1px;
box-sizing: border-box;
top: $toggle-border-width * 3;
left: $toggle-border-width * 3;
width: $toggle-height - ($toggle-border-width * 6);
height: $toggle-height - ($toggle-border-width * 6);
width: $thumb-size;
height: $thumb-size;
border-radius: 50%;
transition: 0.1s transform ease;
transition:
$transition-duration transform ease,
$transition-duration background-color ease-out;
@include reduce-motion("transition");
background-color: $gray-900;
border: 5px solid $gray-900; // Has explicit border to act as a fill in Windows High Contrast Mode.

// Transparent border acts as a fill in Windows High Contrast Mode.
border: $thumb-size / 2 solid transparent;
Copy link
Contributor

Choose a reason for hiding this comment

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

This appears to be throwing a deprecation warning when building the plugin locally. I ran out of time today to put up a quick fix, but just thought I'd mention it:

image

Copy link
Contributor

Choose a reason for hiding this comment

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

I think you can do this, to enable the SASS:

border: #{ $thumb-size / 2 } solid transparent;

That will make the calculation in the sass part of things, instead of the CSS part of things.

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh wait, I might be wrong. The other option is to do $thumb-size * 0.5 — I think it's because the slash is now also used for some grid CSS properties, so it's not good as a math operator anymore.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Right! I'll spin up a PR to implement @jasmussen 's suggestion. Thank you!

Copy link
Contributor

Choose a reason for hiding this comment

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

The official recommendation is to @use "sass:math". So in theory, this...

border: math.div($thumb-size, 2) solid transparent;

}

// Checked state.
&.is-checked .components-form-toggle__track {
background-color: $components-color-accent;
border: $toggle-border-width solid $components-color-accent;
border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
border-color: $components-color-accent;

// Windows High Contrast Mode
&::after {
opacity: 1;
}
}

.components-form-toggle__input:focus + .components-form-toggle__track {
Expand Down
Loading