feat(docs): add guided animation demo by wise-king-sullyman · Pull Request #4721 · patternfly/patternfly-org

wise-king-sullyman · 2025-07-28T20:03:02Z

Closes patternfly/patternfly-react#11810

patternfly-build · 2025-07-28T20:11:05Z

Preview: https://patternfly-org-pr-4721-site.surge.sh

dlabaj

Looks good. There seems to be a missing screenshot on surge though for the full screen demo. Just has a ? mark.

jeff-phillips-18 · 2025-07-28T21:57:19Z

Looks good. There seems to be a missing screenshot on surge though for the full screen demo. Just has a ? mark.

This will get fixed by wise-king-sullyman#1

Update animation demo tab name, add thumbnail for demo

fixed alignment issues with storage card

edonehoo · 2025-07-29T14:13:26Z

Could we also update in this pr the “interactive animations demo” link in the release highlights (located within https://www.patternfly.org/get-started/release-highlights#component-animations) so that it aligns with this pr and points to /demo instead of /react-demos?

wise-king-sullyman · 2025-07-29T14:37:01Z

@edonehoo do you think the link should just go to the /demo page, or straight to the actual demo itself?

edonehoo · 2025-07-29T14:41:39Z

@wise-king-sullyman hmm good question..I can see an argument either way. I'm inclined to say send them to the /demo page, just to point out its location so that they know where they can find it again and also so they can easily choose to poke around the motion docs, which were updated with this release

Update link to animation demo is release highlights

nicolethoen · 2025-07-29T15:10:49Z

+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
+import { ArrowRightIcon, LockIcon, PortIcon, CubeIcon, AutomationIcon, ExclamationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon, HamburgerIcon, TimesIcon} from '@patternfly/react-icons';
+import { createUseStyles } from 'react-jss';


is use of react-jss necessary?
Is it used anywhere in this demo

It is used by the MultiContentCard. I'm not sure if we need it imported here. I can try removing it.

dlabaj

LGTM

Updates per UX/Content reviews

edonehoo

a few content things I noticed, but outside of these it looks good

edonehoo · 2025-07-29T18:47:14Z

+
+## Demo
+
+Explore the current state of [PatternFly component animations](https://github.com/orgs/patternfly/projects/7/views/66).


Suggested change

Explore the current state of [PatternFly component animations](https://github.com/orgs/patternfly/projects/7/views/66).

Discussed with others offline that we can remove this line now

Can you also remove the Under development alert on https://patternfly-org-pr-4721-site.surge.sh/design-foundations/motion, which carries a similar message?

edonehoo · 2025-07-29T18:48:29Z

+
+Explore the current state of [PatternFly component animations](https://github.com/orgs/patternfly/projects/7/views/66).
+
+To see how our components can now use motion to provide clear feedback and improve usability, this demo guides you through a UI that contains a variety of motion updates, including animated alerts, icons, expansion, and more.


Suggested change

To see how our components can now use motion to provide clear feedback and improve usability, this demo guides you through a UI that contains a variety of motion updates, including animated alerts, icons, expansion, and more.

Our components can now use motion to provide clear visual feedback to users, improving engagement and usability. To see our new animations in motion, take this interactive tour, which guides you through a UI that includes animated alerts, icons, expansion, and more.

edonehoo · 2025-07-29T18:56:50Z

+            </Content>
+          ) : null}
+          <Content component="p">
+            {`Click ${isMobile ? 'the settings button' : 'it'} to see the new ripple effect we've added to all buttons.`}


Suggested change

{`Click ${isMobile ? 'the settings button' : 'it'} to see the new ripple effect we've added to all buttons.`}

{`Click ${isMobile ? 'the settings button' : 'it'} to see the cog icon rotate, as well as our new button ripple effect.`}

can we change the mobile message here?

edonehoo · 2025-07-29T18:59:13Z

+  },
+  {
+    stepId: 'navToggle',
+    header: <div>Buttons: Hamburger menu</div>,


I don't see that we have a mobile-specific message for the hamburger menu step, but we do need one since the experience is different I think

Could we add that somewhere:

Hover over the hamburger menu to see an arrow indicator appear.

Click the hamburger menu button to expand the navigation menu.

Updates based on content review

andrew-ronaldson

I get e-motion-al just seeing all this come together so nicely. Thanks all!

edonehoo

looks great, thank you!

feat(docs): add guided animation demo

a8357e4

wise-king-sullyman added the DO NOT MERGE label Jul 28, 2025

dlabaj requested review from dlabaj and kmcfaul July 28, 2025 20:10

dlabaj reviewed Jul 28, 2025

View reviewed changes

dlabaj requested a review from jeff-phillips-18 July 28, 2025 20:18

wise-king-sullyman and others added 2 commits July 28, 2025 17:18

update gitignore

a6f6f9f

Update animation demo tab name, add thumbnail for demo

5628c7f

wise-king-sullyman and others added 3 commits July 29, 2025 09:02

Merge pull request #1 from jeff-phillips-18/animation-demo-page

1c9819c

Update animation demo tab name, add thumbnail for demo

fixed alignment issues with storage card

18302fc

Merge pull request #2 from jeff-phillips-18/animation-updates

8f87205

fixed alignment issues with storage card

wise-king-sullyman removed the DO NOT MERGE label Jul 29, 2025

wise-king-sullyman requested review from a team, andrew-ronaldson and mmenestr and removed request for a team and mmenestr July 29, 2025 13:56

Update link to animation demo is release highlights

e920359

Merge pull request #3 from jeff-phillips-18/animation-updates

73ff7e0

Update link to animation demo is release highlights

jeff-phillips-18 approved these changes Jul 29, 2025

View reviewed changes

nicolethoen reviewed Jul 29, 2025

View reviewed changes

dlabaj approved these changes Jul 29, 2025

View reviewed changes

jeff-phillips-18 and others added 2 commits July 29, 2025 14:54

Updates per UX/Content reviews

2f64d17

Merge pull request #4 from jeff-phillips-18/animation-updates

0abfc94

Updates per UX/Content reviews

edonehoo requested changes Jul 29, 2025

View reviewed changes

jeff-phillips-18 and others added 2 commits July 29, 2025 15:36

Updates based on content review

1528be9

Merge pull request #5 from jeff-phillips-18/animation-updates

d661107

Updates based on content review

andrew-ronaldson approved these changes Jul 29, 2025

View reviewed changes

edonehoo approved these changes Jul 29, 2025

View reviewed changes

jeff-phillips-18 merged commit 75c3933 into patternfly:main Jul 29, 2025
4 checks passed

jeff-phillips-18 mentioned this pull request Jul 30, 2025

Implement guided tour in the animations demo patternfly/pf-roadmap#249

Closed

nicolethoen pushed a commit to nicolethoen/patternfly-org that referenced this pull request Aug 1, 2025

feat(docs): add guided animation demo (patternfly#4721)

3f06588

jeff-phillips-18 mentioned this pull request Aug 18, 2025

Add Guided Tour components patternfly/patternfly-quickstarts#410

Open


		## Demo

		Explore the current state of [PatternFly component animations](https://github.com/orgs/patternfly/projects/7/views/66).


		Explore the current state of [PatternFly component animations](https://github.com/orgs/patternfly/projects/7/views/66).

		To see how our components can now use motion to provide clear feedback and improve usability, this demo guides you through a UI that contains a variety of motion updates, including animated alerts, icons, expansion, and more.

	To see how our components can now use motion to provide clear feedback and improve usability, this demo guides you through a UI that contains a variety of motion updates, including animated alerts, icons, expansion, and more.
	Our components can now use motion to provide clear visual feedback to users, improving engagement and usability. To see our new animations in motion, take this interactive tour, which guides you through a UI that includes animated alerts, icons, expansion, and more.

	{`Click ${isMobile ? 'the settings button' : 'it'} to see the new ripple effect we've added to all buttons.`}
	{`Click ${isMobile ? 'the settings button' : 'it'} to see the cog icon rotate, as well as our new button ripple effect.`}

Conversation

wise-king-sullyman commented Jul 28, 2025

Uh oh!

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

Uh oh!

Uh oh!

dlabaj left a comment

Choose a reason for hiding this comment

Uh oh!

jeff-phillips-18 commented Jul 28, 2025

Uh oh!

edonehoo commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wise-king-sullyman commented Jul 29, 2025

Uh oh!

edonehoo commented Jul 29, 2025

Uh oh!

nicolethoen Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

jeff-phillips-18 Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

dlabaj left a comment

Choose a reason for hiding this comment

Uh oh!

edonehoo left a comment

Choose a reason for hiding this comment

Uh oh!

edonehoo Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

edonehoo Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

edonehoo Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

edonehoo Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

edonehoo Jul 29, 2025

Choose a reason for hiding this comment

Uh oh!

andrew-ronaldson left a comment

Choose a reason for hiding this comment

Uh oh!

edonehoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

patternfly-build commented Jul 28, 2025 •

edited

Loading

edonehoo commented Jul 29, 2025 •

edited

Loading