FFFF fix(drawer): introduce opacity for reduced motion by srambach · Pull Request #7442 · patternfly/patternfly · GitHub
[go: up one dir, main page]
Skip to content

fix(drawer): introduce opacity for reduced motion#7442

Merged
mcoker merged 2 commits intopatternfly:mainfrom
srambach:7360-drawer-reduced-motion
Apr 10, 2025
Merged

fix(drawer): introduce opacity for reduced motion#7442
mcoker merged 2 commits intopatternfly:mainfrom
srambach:7360-drawer-reduced-motion

Conversation

@srambach
Copy link
Member
@srambach srambach commented Apr 7, 2025

Fixes #7360

@patternfly-build
Copy link
Collaborator
patternfly-build commented Apr 7, 2025 •
edited
Loading

Preview: https://patternfly-pr-7442.surge.sh

A11y report: https://patternfly-pr-7442-a11y.surge.sh

@mcoker
Copy link
Contributor
mcoker commented Apr 8, 2025

@srambach pushed some updates. From what we were looking at

  • there was a scoping issue like you suspected with this var, keeping the expanded visibility delay from triggering

    patternfly/src/patternfly/components/Drawer/drawer.scss

    Line 233 in 1b1916a

    --#{$drawer}__panel--TransitionDelay--visibility: var(--#{$drawer}__panel--TransitionDelay--expand--visibility);
  • and transform (for the translateX()) wasn't being transitioned with the default/opacity transition, so it was going off screen immediately.

I pushed an update with the changes below. One thing I didn't test was in nested drawers, so we will want to test that.

  • fixes the things above
  • removes the margin, flex-basis, and box-shadow transitions. margin and flex-basis were being used in inline drawers to make the content grow/shrink as the panel was expanded/collapsed. Just took it off and IMO it looks fine - the transition happens fast enough, it looks OK to me. Curious what @lboehling @andrew-ronaldson think. I also removed the box-shadow transition - I think it was used so the panel didn't slide off screen (with the box-shadow still visible), then the shadow would just disappear. I'm not seeing an issue with that here with the box-shadow transition disabled.
    • That should address any performance issues, we're only transitioning transform now.
  • another thing we could do is transition opacity in the no-pref animation - fade it in as it expands, and fade out as it collapses. I didn't include that in this PR, but I tested it and the diff below is what I changed to enable it FWIW.
diff --git a/src/patternfly/components/Drawer/drawer.scss b/src/patternfly/components/Drawer/drawer.scss
index c6e3fe6dc..65aecf54a 100644
--- a/src/patternfly/components/Drawer/drawer.scss
+++ b/src/patternfly/components/Drawer/drawer.scss
@@ -55,11 +55,10 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   @media screen and (prefers-reduced-motion: no-preference) {
     --#{$drawer}__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
     --#{$drawer}__panel--TransitionDelay--focus: var(--#{$drawer}__panel--TransitionDuration--slide);
-    --#{$drawer}__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--#{$drawer}__panel--TransitionDelay--focus);
+    --#{$drawer}__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--#{$drawer}__panel--TransitionDelay--focus), 0s;
     --#{$drawer}__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
-    --#{$drawer}__panel--TransitionDuration: 0s, var(--#{$drawer}__panel--TransitionDuration--slide), 0s, 0s, 0s;
-    --#{$drawer}__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility; // with no preference, slide the panel
-    --#{$drawer}__panel--Opacity: 1;
+    --#{$drawer}__panel--TransitionDuration: 0s, var(--#{$drawer}__panel--TransitionDuration--slide), 0s, 0s, 0s, var(--#{$drawer}__panel--TransitionDuration--slide);
+    --#{$drawer}__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility, opacity; // with no preference, slide the panel
   }
 
   // Drawer panel head

@mcoker mcoker marked this pull request as ready for review April 8, 2025 18:30
andrew-ronaldson
andrew-ronaldson approved these changes Apr 9, 2025
View reviewed changes
Copy link
Collaborator
@andrew-ronaldson andrew-ronaldson left a comment

Choose a reason for hiding this comment

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

Beauty never fades... unless you turn on reduced motion.

mcoker
mcoker approved these changes Apr 10, 2025
View reviewed changes
Copy link
Contributor
@mcoker mcoker left a comment

Choose a reason for hiding this comment

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

Just one little nit, otherwise lgtm 🚀

src/patternfly/components/Drawer/drawer.scss
--#{$drawer}__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
--#{$drawer}__panel--TransitionDelay--focus: var(--#{$drawer}__panel--TransitionDuration--slide);
--#{$drawer}__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--#{$drawer}__panel--TransitionDelay--focus);
--#{$drawer}__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
Copy link
Contributor
@mcoker mcoker Apr 10, 2025

Choose a reason for hiding this comment

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

Looks like this is a dupe of this line and could be removed.

sg00dwin
sg00dwin reviewed Apr 10, 2025
View reviewed changes
Copy link
Contributor
@sg00dwin sg00dwin left a comment

Choose a reason for hiding this comment

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

LGTM!

@mcoker mcoker merged commit 607b511 into patternfly:main Apr 10, 2025
4 checks passed
@patternfly-build
Copy link
Collaborator
patternfly-build commented Apr 10, 2025

dlabaj pushed a commit that referenced this pull request Apr 16, 2025
@srambach @dlabaj
fix(drawer): introduce opacity for reduced motion (#7442)
8021739
@patternfly-build patternfly-build mentioned this pull request Apr 16, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@andrew-ronaldson andrew-ronaldson andrew-ronaldson approved these changes

@mcoker mcoker mcoker approved these changes

@lboehling lboehling Awaiting requested review from lboehling

+1 more reviewer

@sg00dwin sg00dwin sg00dwin left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

released on @prerelease

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Animation: Drawer - Add reduced motion

5 participants

@srambach @patternfly-build @mcoker @sg00dwin @andrew-ronaldson
0

🎉 This PR is included in version 6.3.0-prerelease.3 🎉

The release is available on:

Your semantic-release bot 📦🚀