fix(drawer): introduce opacity for reduced motion

[srambach]

Fixes #7360

[patternfly-build]

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

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

[mcoker]

@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

[andrew-ronaldson]

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

[mcoker]

Just one little nit, otherwise lgtm 🚀

[mcoker]

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

[sg00dwin]

LGTM!

[patternfly-build]

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

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀