feat(Button): add notify modifier to button for microanimation#7368
feat(Button): add notify modifier to button for microanimation#7368mcoker merged 3 commits intopatternfly:mainfrom
Conversation
|
Preview: https://patternfly-pr-7368.surge.sh A11y report: https://patternfly-pr-7368-a11y.surge.sh |
|
For convenience - here's the animation on the top of a demo page. 2025-02-25_15-20-10.mp4 |
There was a problem hiding this comment.
It's good as-is but left a few nit comments in case you wanted to change a couple of things I noticed.
| --#{$button}__icon--AnimationDuration--notify: var(--pf-t--global--duration--600); | ||
| --#{$button}__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default); |
There was a problem hiding this comment.
Technically, this is how we would normally write out this var. I'm cool leaving it the way you have it, since we have an identifier as --notify on the end. WDYT?
| --#{$button}__icon--AnimationDuration--notify: var(--pf-t--global--duration--600); | |
| --#{$button}__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default); | |
| --#{$button}--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--duration--600); | |
| --#{$button}--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default); |
| animation-duration: var(--#{$button}__icon--AnimationDuration--notify); | ||
| animation-timing-function: var(--#{$button}__icon--AnimationTimingFunction--notify); |
There was a problem hiding this comment.
If you made the other suggestion, we'd also want to update this
| animation-duration: var(--#{$button}__icon--AnimationDuration--notify); | |
| animation-timing-function: var(--#{$button}__icon--AnimationTimingFunction--notify); | |
| animation-duration: var(--#{$button}--m-notify__icon--AnimationDuration--notify); | |
| animation-timing-function: var(--#{$button}--m-notify__icon--AnimationTimingFunction--notify); |
| 100% { | ||
| transform: rotate(0); | ||
| } |
There was a problem hiding this comment.
Just a nit but since it starts at rotate(0), you shouldn't need this last part
| 100% { | |
| transform: rotate(0); | |
| } |
|
🎉 This PR is included in version 6.2.0-prerelease.11 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This is for the notification badge part of #6601
A modifier
.pf-m-notifygets added to a.pf-m-buttonin order to cause the icon portion of the button to have the ringing motion.patternfly/patternfly-react#10624 will need to add the class, wait for the animation to complete, and then remove it, and also manage if a new notification arrives before the animation finishes from the previous notification.
This also requires React to update the notification badge to put the icon into the icon container rather than the text container, following core's structure.