fix(Alert): create alert group variables for toast animation

[sg00dwin]

fixes #6812

[patternfly-build]

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

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

[srambach]

I think I found a couple of little things keeping the default fade from working in reduced-motion.

I wonder if we could do away with some variables if we move the media query into the variables, but I'm not sure if it comes out any simpler or not, or if we'd want those variables for customization (my inclination is that customizing them is not necessary). Maybe it's worth chatting about since we are kind of breaking new ground using the reduced-motion preference. @mcoker

[srambach]

I think this token should be --pf-t--global--motion--duration--fade--default, so then this variable isn't defined and that's ultimately causing the opacity change not to happen in reduced motion.

[sg00dwin]

@srambach I've updated these changes, so that at reduced-motion, pf-m-offstage-right now correctly shows a transition to opacity: 0 then it will collapse with no slide. To prevent the alert from moving while it's fading out, I used timing delays on the grid-template-rows margin-block padding and border-width properties.

Here's a recording of it in real time and slowed down.

[srambach]

I was going to start #7341 to fix an issue we noticed in patternfly/patternfly-react#11495 but I realized it would be better to address here. Left 2 teensy changes that should fix the animation as intended. (i.e. on the transition in from the top, the item will not wait until the "hole" opens before sliding into the slot; it all happens at the same time)

[sg00dwin]

Removed transition delays which addresses #7341

[srambach]

Hey, I noticed one more bug that would be good to fix here too if you don't mind - I think the pf-v6-c-alert-group__item needs to have a min-height: 0; Without it, you can see that there's still a bit of space when you take a toast alert offstage right.

2025-02-18_12-01-59.mp4

[sg00dwin]

@srambach Added the min-height: 0 to prevent the alert from adding space once it's removed.

pf-m-offstage-right.mp4

[srambach]

Looks great! Thank you!

[mcoker]

Sweet! Good job on these.

[patternfly-build]

🎉 This PR is included in version 6.2.0-prerelease.12 🎉

The release is available on:

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

Your semantic-release bot 📦🚀