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

Update modal animation #64580

Merged
merged 10 commits into from
Aug 29, 2024
Merged

Update modal animation #64580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
46e8c70
WIP
jameskoster Jul 26, 2024
4313a0d
Merge branch 'trunk' into update/modal-animation
jameskoster Aug 16, 2024
2972e73
Simplify
jameskoster Aug 16, 2024
e6d6d77
Remove blur
jameskoster Aug 19, 2024
e050d9a
Update changelog
jameskoster Aug 20, 2024
a1f7a62
Adjust animation
jameskoster Aug 22, 2024
bbac883
Rebase
jameskoster Aug 22, 2024
0f3327c
duration
jameskoster Aug 22, 2024
2510624
overlay easing
jameskoster Aug 22, 2024
30773e4
Merge branch 'trunk' into update/modal-animation
jameskoster Aug 29, 2024
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
4 changes: 2 additions & 2 deletions packages/base-styles/_animations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) {
animation: edit-post__fade-in-animation $speed ease-out $delay;
@mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) {
animation: edit-post__fade-in-animation $speed linear $delay;
Copy link
Contributor

Choose a reason for hiding this comment

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

The way this mixin is defined has a few issues that we should solve:

  • the mixin name suggests that the mixin is defined in the @wordpress/edit-post package, while it's actually defined in the @wordpress/base-styles package;
  • the edit-post__fade-in-animation animation keyframes are defined (twice) in separate packages: here and here. That is a potential issue in itself, since:
    • these two animation definitions can get out of sync (ie. not have the same underlying keyframe specs)
    • if a third-party consumer of @wordpress/base-styles doesn't need to load the @wordpress/edit-site or @wordpress/edit-post packages, then the animation will not work (since it's not defined in @wordpress/base-stlyles)

The result is that, currently, the Modal component in @wordpress/components is consuming a SCSS mixin from @wordpress/base-styles (which is confusingly prefixed with the name of another package), but it needs for either the @wordpress/edit-site or the @wordpress/edit-post packages to be loaded too. This creates an implicit circular dependency that we should break.

Looking at WPDirectory, it looks like the edit-post__fade-in-animation mixin is used by third-party developers, and therefore we can't really rename it.

But we can still move the @keyframes definitions in the same file as the mixin, and delete the duplicate definitions in other packages — this will remove implicit circular dependencies, and prevent unexpected behaviors caused by the keyframes potentially having different definitions.

Copy link
Contributor

Choose a reason for hiding this comment

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

Trying out the approach suggested above as part of #65203 (comment)

Copy link
Contributor

Choose a reason for hiding this comment

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

Extracted to #65377

animation-fill-mode: forwards;
@include reduce-motion("animation");
}
Expand Down
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 @@ -44,6 +44,7 @@
- `TimePicker` (on the inputs)
- `TreeSelect`
- `UnitControl`
- `Modal`: Update animation effect ([#64580](https://github.com/WordPress/gutenberg/pull/64580)).

### Bug Fixes

Expand Down
9 changes: 5 additions & 4 deletions packages/components/src/modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
background-color: rgba($black, 0.35);
z-index: z-index(".components-modal__screen-overlay");
display: flex;
// backdrop-filter: blur($grid-unit);
// This animates the appearance of the white background.
@include edit-post__fade-in-animation();
}
Expand All @@ -26,7 +25,7 @@
// Have the content element fill the vertical space yet not overflow.
display: flex;
// Animate the modal frame/contents appearing on the page.
animation: components-modal__appear-animation 0.1s ease-out;
animation: components-modal__appear-animation 0.26s cubic-bezier(0.29, 0, 0, 1);
animation-fill-mode: forwards;
@include reduce-motion("animation");

Expand Down Expand Up @@ -80,10 +79,12 @@

@keyframes components-modal__appear-animation {
from {
transform: translateY($grid-unit-40);
opacity: 0;
transform: scale(0.9);
}
to {
transform: translateY(0);
opacity: 1;
transform: scale(1);
}
}

Expand Down
Loading