Skip to content

chore(Alert): updated examples to enable animations#11705

Merged
dlabaj merged 2 commits into
patternfly:mainfrom
thatblindgeye:iss11684_alertEnableAnims
Mar 26, 2025
Merged

chore(Alert): updated examples to enable animations#11705
dlabaj merged 2 commits into
patternfly:mainfrom
thatblindgeye:iss11684_alertEnableAnims

Conversation

@thatblindgeye

Copy link
Copy Markdown
Contributor

What: Closes #11684

@edonehoo @andrew-ronaldson wdyt about the verbiage above the examples? More or less using the copy from the release highlights, but curious if you think it's worth including/helpful here.

Additional issues:

@patternfly-build

patternfly-build commented Mar 21, 2025

Copy link
Copy Markdown
Collaborator

import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
import buttonStyles from '@patternfly/react-styles/css/components/Button/button';

Micro-animations have been added for `Alert` components within an `AlertGroup`, which can be seen on all examples and demos where alerts are dynamically added. By default this is opt-in, as enabling animations may require updates to tests. You can pass the `hasAnimations` property to enable or disable the animations as needed. Additionally, with these animations enabled, we recommend you ensure that dynamically added alerts are prepended to a list of alerts, rather than appended to the end of it.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
Micro-animations have been added for `Alert` components within an `AlertGroup`, which can be seen on all examples and demos where alerts are dynamically added. By default this is opt-in, as enabling animations may require updates to tests. You can pass the `hasAnimations` property to enable or disable the animations as needed. Additionally, with these animations enabled, we recommend you ensure that dynamically added alerts are prepended to a list of alerts, rather than appended to the end of it.
Micro animations have been added for `<Alert>` components within an `<AlertGroup>`. By default, you must opt into animations, since they can require updates to tests. To enable or disable animations as needed, use the `hasAnimations` property. With animations enabled, we recommend you ensure that dynamically-added alerts are prepended to a list of alerts, rather than appended to the end of it.
Micro animations are turned on for all examples and demos where alerts are dynamically added.

just a little moving things around mainly. I think it makes sense to include this for alert, since we have motion in all examples even though its opt in!

@thatblindgeye thatblindgeye requested a review from edonehoo March 24, 2025 12:53

@edonehoo edonehoo left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🤙🏄‍♀️

@andrew-ronaldson andrew-ronaldson self-requested a review March 24, 2025 14:07

@andrew-ronaldson andrew-ronaldson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

🥇

@kmcfaul

kmcfaul commented Mar 26, 2025

Copy link
Copy Markdown
Contributor

One minor thing I noticed which can be left as is or explored in a follow up is that in the timeout alert example, if you manually dismiss the alert with the button instead of letting it time out the close animation doesn't play.

@dlabaj dlabaj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM

@dlabaj dlabaj merged commit 3a5246e into patternfly:main Mar 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Alerts - update examples/demos to have animations enabled, update docs

6 participants