feat(demo): completed initial version of animations demo by parthivrh · Pull Request #11876 · patternfly/patternfly-react

parthivrh · 2025-06-18T19:41:14Z

What: This demonstration highlights PatternFly's latest animated components, like alerts, navigation, and form validation. Closes #11810

Additional issues:

patternfly-build · 2025-06-18T19:45:15Z

Preview: https://patternfly-react-pr-11876.surge.sh

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

edonehoo · 2025-06-20T18:50:45Z

+
+## Demos
+
+This demonstration highlights PatternFly's latest animations. Explore how components like alerts, navigation, and forms use motion to provide clear feedback and improve usability across the platform.


Suggested change

This demonstration highlights PatternFly's latest animations. Explore how components like alerts, navigation, and forms use motion to provide clear feedback and improve usability across the platform.

The following demo highlights the current state of [our ongoing effort to animate PatternFly components](https://github.com/orgs/patternfly/projects/7/views/66).

To see how components like alerts, navigation, and forms can now use motion to provide clear feedback and improve usability, you can explore this demo and interact with various UI elements. We will continue to update this demo as additional animation support is added.

Could also add a more specific list if you think we want to call out the details. I'll let you decide based on what seems the most useful for this demo

"Currently, this demo includes animations for:

Alerts.

The notification badge and notification drawer.

The hamburger/navigation menu icon.

The masthead settings icon.

Expandable navigation items.

Skeleton loader in a table.

Button clicks.

Validation failure in forms."

srambach · 2025-06-23T20:20:37Z

+        {loading ? (
+          <SkeletonTable columns={['', ...expandableColumns]} rows={8} />
+        ) : (
+          <Table aria-label="Collapsible table">


I think you'll need to opt in to the expansion animation with hasAnimations on the Table.

srambach · 2025-06-23T20:24:51Z

+  };
+
+  const detailStatusEvents = (
+    <Gallery hasGutter style={{ width: '100%', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>


Can you take the inline style off and use the gallery props instead?

edonehoo

content looks good to me!

srambach

Nice job! Just a couple of really nitpicky comments 😉

srambach · 2025-06-26T18:09:18Z

+    const handlePasswordChange = (_event, password: string) => {
+      setPassword(password);
+      setIsPasswordValid(
+        password.length > 12 && /[0-9]/.test(password) && /[A-Z]/.test(password) ? 'success' : 'error'


This is very nitpicky 😄 but the text says "at least 12 characters" and this forces you to have more than 12.

srambach · 2025-06-26T18:34:54Z

+  const detailStatusEvents = (
+    <Grid hasGutter>
+      <GridItem span={4}>
+        <DetailsCard />
+      </GridItem>
+      <GridItem span={4}>
+        <CardStatus />
+      </GridItem>
+      <GridItem span={4}>
+        <EventsCard />
+      </GridItem>
+    </Grid>
+  );


So that the cards don't get so narrow, can you use props to adjust the columns at narrow widths instead? The 3 across cards could stack when the screen is too narrow.

srambach

Nice job! I think this is fine to go.

wise-king-sullyman

Great work on this so far! It looks awesome!

A few comments/change requests:

wise-king-sullyman · 2025-07-08T20:09:42Z

+  const [shouldNotify, setShouldNotify] = useState(false);
+  const prevUnreadCountRef = useRef(0);
+
+  const getNumberUnread = () => {


You'll need to put this into a useCallback to prevent it from causing infinite rerenders since it's listed as a dep in some of your useEffects

wise-king-sullyman · 2025-07-08T20:39:08Z

+              visibility={{
+                default: 'hidden'
+              }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */


With being set to hidden by default and no other visibility options won't this just never render?

wise-king-sullyman · 2025-07-08T20:40:24Z

+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation" isHamburgerButton />


I'm seeing errors in the console related to the isHamburgerButton being passed here without an isExpanded prop.

wise-king-sullyman · 2025-07-08T20:45:12Z

+    );
+  };
+
+  const CardStatus: FunctionComponent = () => {


Having these components being defined from within another component is potentially problematic, and breaks the rules of hooks for the hooks you're using within them.

wise-king-sullyman · 2025-07-08T20:48:52Z

+  const onKebabDropdownSelect = () => setIsKebabDropdownOpen(false);
+  const onCloseNotificationDrawer = (_event: any) => setIsDrawerExpanded((prevState) => !prevState);
+
+  useEffect(() => {


Also just on a more general note my gut says that the way that all of these alerts are being made and managed could be DRY'd up substantially, but since this is just a demo I'm not too worried about that.

…tions prop to Table

Also updated imports locations so hot reloads work properly

…pty state

edonehoo · 2025-07-22T14:08:34Z

When you get a chance, could you also incorporate the content updates I snuck into Jeff's PR? #11915

Open to other ideas, but I feel like the page content might be better as more of an intro, rather than "docs", since we moved to the guided tour

nicolethoen · 2025-07-28T18:52:49Z

Closing this because all of the changes here have been integrated into: #11915 and we are picking up in that PR

edonehoo reviewed Jun 20, 2025

View reviewed changes

srambach reviewed Jun 23, 2025

View reviewed changes

parthivrh force-pushed the animation-demo-page branch from 11f8da6 to 96bf1f6 Compare June 23, 2025 20:34

edonehoo approved these changes Jun 24, 2025

View reviewed changes

srambach reviewed Jun 26, 2025

View reviewed changes

srambach approved these changes Jul 7, 2025

View reviewed changes

wise-king-sullyman requested changes Jul 8, 2025

View reviewed changes

parthivrh and others added 13 commits July 16, 2025 11:54

feat(demo): completed initial version of animations demo

b636834

fix(bug): added tabContentId to resolve accessibility issue

12e23c2

fix(edit): removed unneeded dependencies and edited verbage in markdown

ef8c977

fix: removed inline styles by using Grid component and added hasAnima…

4047a4b

…tions prop to Table

fix: changed Grid so GridItems stack at small screen widths

b554de9

fix: added delayed validation on create database form

e5205c0

fix: added delayed validation to TimeZone and fixed race condition

a21727e

fix: incorporated all feedback from team

d51f02b

Add a guided tour of the animations for the animation demo

33b2e8b

Break up Animation demo into component files

196c0c3

Add additional Guided tour steps

336064b

animations guided tour: Add ending page and better mobile support

be41d94

Also updated imports locations so hot reloads work properly

animations guided tour: Add spotlight

ae41f60

parthivrh force-pushed the animation-demo-page branch from a080916 to ae41f60 Compare July 17, 2025 17:13

parthivrh added 3 commits July 21, 2025 16:27

fix: all feedback incorporated need to insert pngs in overview and em…

1087850

…pty state

fix: incorporated all design changes

b7837c3

fix: adjustments for different window sizes

193ce54

fix: made fixes to the markdown file

b65a26d

nicolethoen closed this Jul 28, 2025


		## Demos

		This demonstration highlights PatternFly's latest animations. Explore how components like alerts, navigation, and forms use motion to provide clear feedback and improve usability across the platform.

-This demonstration highlights PatternFly's latest animations. Explore how components like alerts, navigation, and forms use motion to provide clear feedback and improve usability across the platform.
+The following demo highlights the current state of [our ongoing effort to animate PatternFly components](https://github.com/orgs/patternfly/projects/7/views/66).
+To see how components like alerts, navigation, and forms can now use motion to provide clear feedback and improve usability, you can explore this demo and interact with various UI elements. We will continue to update this demo as additional animation support is added.

Conversation

parthivrh commented Jun 18, 2025

Uh oh!

patternfly-build commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edonehoo left a comment

Choose a reason for hiding this comment

Uh oh!

srambach left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

srambach left a comment

Choose a reason for hiding this comment

Uh oh!

wise-king-sullyman left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

edonehoo commented Jul 22, 2025

Uh oh!

nicolethoen commented Jul 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

patternfly-build commented Jun 18, 2025 •

edited

Loading