From e0ac4bd59dc961322a23a165d2d6ec8e0d8ad839 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 1 Jul 2025 14:25:30 -0400 Subject: [PATCH 01/20] docs(release-highlights): Adds 6.3 highlights. --- .../content/get-started/release-highlights.md | 138 ++++++++++++++++++ 1 file changed, 138 insertions(+) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index cef730fe87..b18f04dfdd 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -6,6 +6,144 @@ section: get-started import './get-started.css'; import { Divider, Timestamp } from '@patternfly/react-core'; +July 2025 +## PatternFly 6.3 + +### Promoted package versions +The following packages were promoted with this release. Outside of our primary initiatives for this release, we addressed reported bugs and continued to enhance PatternFly with new features, as detailed in the linked changelogs. + +- patternfly/patternfly ([changelog](https://github.com/patternfly/patternfly/releases/tag/v6.3.0)) + - [@patternfly/patternfly@6.3.0](https://www.npmjs.com/package/@patternfly/patternfly) +- patternfly/react ([changelog](https://github.com/patternfly/patternfly-react/releases/tag/v6.3.0)) + - [@patternfly/react-charts@8.3.0](https://www.npmjs.com/package/@patternfly/react-charts) + - [@patternfly/react-code-editor@6.3.0](https://www.npmjs.com/package/@patternfly/react-code-editor) + - [@patternfly/react-core@6.3.0](https://www.npmjs.com/package/@patternfly/react-core) + - [@patternfly/react-docs@7.3.0](https://www.npmjs.com/package/@patternfly/react-docs) + - [@patternfly/react-drag-drop@6.3.0](https://www.npmjs.com/package/@patternfly/react-drag-drop) + - [@patternfly/react-icons@6.3.0](https://www.npmjs.com/package/@patternfly/react-icons) + - [@patternfly/react-styles@6.3.0](https://www.npmjs.com/package/@patternfly/react-styles) + - [@patternfly/react-table@6.3.0](https://www.npmjs.com/package/@patternfly/react-table) + - [@patternfly/react-templates@6.3.0](https://www.npmjs.com/package/@patternfly/react-templates) + - [@patternfly/react-tokens@6.3.0](https://www.npmjs.com/package/@patternfly/react-tokens) +- PatternFly extensions + - [@patternfly/chatbot@6.3.0](https://www.npmjs.com/package/@patternfly/chatbot) ([changelog](https://github.com/patternfly/chatbot/releases/tag/v6.3.0)) + - [@patternfly/quickstarts@6.3.0](https://www.npmjs.com/package/@patternfly/quickstarts) ([changelog](https://github.com/patternfly/patternfly-quickstarts/releases/tag/v6.3.0)) + - [@patternfly/react-catalog-view-extension@6.1.0](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension) ([changelog](https://github.com/patternfly/react-catalog-view/releases/tag/v6.1.0)) + - [@patternfly/react-component-groups@6.3.0](https://www.npmjs.com/package/@patternfly/react-component-groups) ([changelog](https://github.com/patternfly/react-component-groups/releases/tag/v6.3.0)) + - [@patternfly/react-console@6.1.0](https://www.npmjs.com/package/@patternfly/react-console) ([changelog](https://github.com/patternfly/react-console/releases/tag/v6.1.0)) + - [@patternfly/react-data-view@6.3.0](https://www.npmjs.com/package/@patternfly/react-data-view) ([changelog](https://github.com/patternfly/react-data-view/releases/tag/v6.3.0)) + - [@patternfly/react-log-viewer@6.3.0](https://www.npmjs.com/package/@patternfly/react-log-viewer) ([changelog](https://github.com/patternfly/react-log-viewer/releases/tag/v6.3.0)) + - [@patternfly/react-topology@6.3.0](https://www.npmjs.com/package/@patternfly/react-topology) ([changelog](https://github.com/patternfly/react-topology/releases/tag/v6.3.0)) + - [@patternfly/react-user-feedback@6.2.0](https://www.npmjs.com/package/@patternfly/react-user-feedback) ([changelog](https://github.com/patternfly/react-user-feedback/releases/tag/v6.2.0)) + - [@patternfly/react-virtualized-extension@6.1.0](https://www.npmjs.com/package/@patternfly/react-virtualized-extension) ([changelog](https://github.com/patternfly/react-virtualized-extension/releases/tag/v6.1.0)) + +### React 19 support + +PatternFly now includes support for React 19 across all components and extensions, enabling you to benefit from its new features and performance enhancements. + +This update is non-breaking, and PatternFly 6 will continue to support React 17 and 18 in line with our support policy. In future releases, we plan to more fully leverage React 19's capabilities to enhance existing PatternFly features and introduce new ones. + +### Component animations + +As we progress in our effort to integrate motion design across PatternFly components, we added the following new animations in this release. To provide a holistic view of our animated components, we also put together [a motion demo](/design-foundations/motion/react-demos), which we will continue to update as we add additional animation support. + +#### Expansion + +As the following components are expanded (via clicks to toggles, items, and buttons), hidden content sections fade in and slide in from the direction of the toggle. A similar, reversed animation collapses expanded sections. + +1. [Accordion](/components/accordion) + - **Animation type:** Opt-out. + - **Example:** As an opt-out animation, you can see this motion behavior by default across accordion examples and demos. + +1. [Dual list selector](/components/dual-list-selector#with-tree) + - **Animation type:** Opt-in. + - **Example:** To visualize the motion behavior, interact with [the dual list selector with tree example](/components/dual-list-selector#with-tree), which has opted in to animations. + +1. [Expandable section](/components/expandable-section) + - **Animation type:** Opt-out. + - **Example:** As an opt-out animation, you can see this motion behavior by default across expandable section examples and demos. + +1. [Form](/components/forms/form) + - **Animation type:** Opt-in. + - **Example:** To visualize the motion behavior, interact with [the form field group example](/components/forms/form#field-groups), which has opted in to animations. + +1. [Search input](/components/search-input#with-expandable-button) + - **Animation type:** Opt-out. + - **Example:** To visualize the motion behavior, interact with [the expandable search input example](/components/search-input#with-expandable-button). + +1. [Tree view](/components/tree-view) + - **Animation type:** Opt-in. + - **Example:** To visualize the motion behavior, interact with [the tree view examples](/components/tree-view), which have opted in to animations. + +1. [Table](/components/table#expandable) + - **Animation type:** Opt-in. + - **Example:** To visualize the motion behavior, interact with [the expandable table examples](/components/table#expandable), which have opted in to animations. + - **Note:** Tree tables are not included in this release but will be in the future. + +#### Feedback + +The following feedback animations help communicate that an action has taken or will take place. + +1. [Buttons](/components/button) + - **Animation type:** Opt-out. + - **Animation behavior:** When a button is clicked, the active state color ripples outward from the center of the button. + - **Example:** As an opt-out animation, you can see this motion behavior by default when you click buttons in our examples and demos, or in our [animated favorite button example](/components/button#favorite). + +1. Form validation + - **Animation type:** Opt-out. + - **Animation behavior:** When there's an error in a form field with validation, the component "jiggles" from side to side as danger styles are applied. + - **Example:** As an opt-out animation, you can see this motion behavior by default across form validation in our examples and demos, including [validated form select](/components/forms/form-select#validated), [invalid text area](/components/forms/text-area#invalid), and [invalid text input](/components/forms/text-input#invalid). + +1. [Progress](/components/progress#helper-text) + - **Animation type:** Opt-out. + - **Animation behavior:** When there's an error in a progress bar, the component "jiggles" from side to side as danger styles are applied. + - **Example:** As an opt-out animation, you can see this motion behavior by selecting "Danger variant" in our [progress helper text example](/components/progress#helper-text). + +1. [Tabs](/components/tabs) + - **Animation type:** Opt-in for HTML. Opt-out for React. + - **Animation behavior:** The bottom "active tab" line slides between tabs as they are selected. + - **Example:** As an opt-out animation, you can see this motion behavior by default across our tabs React examples and demos. This animation does not apply to boxed tabs. + - **Note:** To avoid a breaking change, this animation is opt-in for HTML-only implementations. To support your opt-in process, view our [HTML guidance for animating the tab accent mark](/components/tabs#animate-current-tab-accent). + +##### Icons + +1. Favorite (`fa-star-icon`) + - **Animation type:** Opt-out. + - **Animation behavior:** When a favorite icon is clicked, the star "pulses" and fills with color. + - **Example:** As an opt-out animation, you can see this motion behavior by default across favorite buttons in our examples and demos, or in our [animated favorite button example](/components/button#favorite). + +1. Hamburger menu (`fa-bars`) + - **Animation type:** Opt-out. + - **Animation behavior:** When a hamburger icon receives hover or keyboard focus, the middle bar becomes an arrow, pointing in the direction that the attached menu will move when the icon is clicked. This motion helps better indicate when a menu will open and close. + - **Example:** As an opt-out animation, you can see this by default across hamburger menus in our examples and demos. To visualize the motion behavior, interact with the navigation menu in [our page examples](/components/page#vertical-navigation). + - **Note:** Because the hamburger menu icon for the PatternFly.org navigation has more padding than standard PatternFly buttons, we've opted out of this animation to avoid fit issues. + +1. Settings (`fa-cog`) + - **Animation type:** Opt-out. + - **Animation behavior:** When a settings icon receives hover or keyboard focus, the cog rotates. When the icon loses hover or keyboard focus, it rotates back to its original position. + - **Example:** As an opt-out animation, you can see this motion behavior by default across settings icons in our examples and demos, or in our [animated settings button example](/components/button#settings). + +### New guidance for command-line interfaces + +With the help of a community contribution, we now have [a CLI handbook](/developer-resources/cli-handbook) that offers guidance for designing command-line interface experiences. This resource outlines unique accessibility considerations for CLIs, as well as writing guidelines for crafting well-designed messages, documentation, and interactive CLI experiences. + +### Updated AI guidelines + +We updated our high-level [AI principles and guidelines](/patternfly-ai/principles-and-guidelines) to expand guidance and improve the usability of this resource. We integrated community feedback and research to include new patterns and recommendations that have emerged from the increased inclusion of AI features in products. As the design and implementation of AI features continue to evolve, so will this guiding resource. + +### Notable changes + +Outside of our key initiatives, there are a few notable changes that may require changes to your codebase and tests. + +#### Components + +#### Extensions + +### What's next? + +For the Q4 release of PatternFly, we look forward to sharing updates on our design guidelines audit, system-wide accessibility improvements, new extensions, and more. We'll share the next round of exciting news in a few months! + + April 2025 ## PatternFly 6.2 From 0756ab901556c29d390eb3e5f68542dc0b163118 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 1 Jul 2025 14:45:19 -0400 Subject: [PATCH 02/20] Small link change --- .../patternfly-docs/content/get-started/release-highlights.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index b18f04dfdd..0f7def802f 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -45,7 +45,7 @@ This update is non-breaking, and PatternFly 6 will continue to support React 17 ### Component animations -As we progress in our effort to integrate motion design across PatternFly components, we added the following new animations in this release. To provide a holistic view of our animated components, we also put together [a motion demo](/design-foundations/motion/react-demos), which we will continue to update as we add additional animation support. +As we progress in our effort to integrate motion design across PatternFly components, we added the following new animations in this release. To provide a holistic view of our animated components, we also put together [an interactive animations demo](/design-foundations/motion/react-demos), which we will continue to update as we add additional animation support. #### Expansion From 9e92685a22659fedea9a2af429b5409b79787751 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 1 Jul 2025 14:47:08 -0400 Subject: [PATCH 03/20] And small wording change. --- .../patternfly-docs/content/get-started/release-highlights.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 0f7def802f..a18297f29d 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -49,7 +49,7 @@ As we progress in our effort to integrate motion design across PatternFly compon #### Expansion -As the following components are expanded (via clicks to toggles, items, and buttons), hidden content sections fade in and slide in from the direction of the toggle. A similar, reversed animation collapses expanded sections. +As the following components are expanded, hidden content sections fade in and slide in from the direction of the toggle. A similar, but reversed animation is shown when expanded sections are collapsed. 1. [Accordion](/components/accordion) - **Animation type:** Opt-out. @@ -82,7 +82,7 @@ As the following components are expanded (via clicks to toggles, items, and butt #### Feedback -The following feedback animations help communicate that an action has taken or will take place. +The following components contain animations that give users visual feedback, which will help communicate that an action has taken or will take place. 1. [Buttons](/components/button) - **Animation type:** Opt-out. From 8c3638bacbde47322ad222ef48ec842c869b3090 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 3 Jul 2025 15:42:56 -0400 Subject: [PATCH 04/20] Edits to animation details and addition of PF AI section. --- .../content/get-started/release-highlights.md | 138 +++++++++--------- 1 file changed, 70 insertions(+), 68 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index a18297f29d..7c49c8ae9b 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -39,7 +39,7 @@ The following packages were promoted with this release. Outside of our primary i ### React 19 support -PatternFly now includes support for React 19 across all components and extensions, enabling you to benefit from its new features and performance enhancements. +PatternFly now includes support for React 19 across all components and extensions, enabling you to benefit from new React features and performance enhancements. This update is non-breaking, and PatternFly 6 will continue to support React 17 and 18 in line with our support policy. In future releases, we plan to more fully leverage React 19's capabilities to enhance existing PatternFly features and introduce new ones. @@ -49,95 +49,97 @@ As we progress in our effort to integrate motion design across PatternFly compon #### Expansion -As the following components are expanded, hidden content sections fade in and slide in from the direction of the toggle. A similar, but reversed animation is shown when expanded sections are collapsed. +We added expansion animations that apply a fade-in and slide-in transition as hidden content sections are expanded in a variety of components. A similar, reversed animation applies when expanded sections are collapsed. -1. [Accordion](/components/accordion) - - **Animation type:** Opt-out. - - **Example:** As an opt-out animation, you can see this motion behavior by default across accordion examples and demos. +The following list highlights opt-in requirements and links to examples. Unless an animation is marked with "Requires opt-in," it will be enabled by default. -1. [Dual list selector](/components/dual-list-selector#with-tree) - - **Animation type:** Opt-in. - - **Example:** To visualize the motion behavior, interact with [the dual list selector with tree example](/components/dual-list-selector#with-tree), which has opted in to animations. +- Accordion + - **Example:** All [accordions](/components/accordion) in our examples and demos. -1. [Expandable section](/components/expandable-section) - - **Animation type:** Opt-out. - - **Example:** As an opt-out animation, you can see this motion behavior by default across expandable section examples and demos. +- Dual list selector + - **Requires opt-in.** + - **Example:** [Dual list selector with tree](/components/dual-list-selector#with-tree), which has opted in. -1. [Form](/components/forms/form) - - **Animation type:** Opt-in. - - **Example:** To visualize the motion behavior, interact with [the form field group example](/components/forms/form#field-groups), which has opted in to animations. +- Expandable section + - **Example:** All [expandable sections](/components/expandable-section) in our examples and demos. -1. [Search input](/components/search-input#with-expandable-button) - - **Animation type:** Opt-out. - - **Example:** To visualize the motion behavior, interact with [the expandable search input example](/components/search-input#with-expandable-button). +- Form + - **Requires opt-in.** + - **Example:** [Form field groups](/components/forms/form#field-groups), which have opted in. -1. [Tree view](/components/tree-view) - - **Animation type:** Opt-in. - - **Example:** To visualize the motion behavior, interact with [the tree view examples](/components/tree-view), which have opted in to animations. +- Navigation + - **Example:** [Expandable navigation examples](/components/navigation#expandable). + - **Note:** This animation was introduced in our 6.2 release, but performance issues were reported. For this release, we reworked the animation to resolve these issues. -1. [Table](/components/table#expandable) - - **Animation type:** Opt-in. - - **Example:** To visualize the motion behavior, interact with [the expandable table examples](/components/table#expandable), which have opted in to animations. - - **Note:** Tree tables are not included in this release but will be in the future. +- Search input + - **Example:** [Expandable search input](/components/search-input#with-expandable-button). + +- Tree view + - **Requires opt-in.** + - **Example:** All [tree view](/components/tree-view) examples and demos, which have opted in. + +- Table + - **Requires opt-in.** + - **Example:** [Expandable table](/components/table#expandable), which has opted in. + - **Note:** This release does not include expansion animations for tree tables. #### Feedback -The following components contain animations that give users visual feedback, which will help communicate that an action has taken or will take place. +The following components contain animations that give users dynamic feedback, helping to communicate that an action has taken or will take place. -1. [Buttons](/components/button) - - **Animation type:** Opt-out. - - **Animation behavior:** When a button is clicked, the active state color ripples outward from the center of the button. - - **Example:** As an opt-out animation, you can see this motion behavior by default when you click buttons in our examples and demos, or in our [animated favorite button example](/components/button#favorite). +1. Buttons + - **Animation:** When a button is clicked, the active state color ripples outward from the center of the button. + - **Example:** All buttons in our examples and demos, including our [animated favorite button example](/components/button#favorite). 1. Form validation - - **Animation type:** Opt-out. - - **Animation behavior:** When there's an error in a form field with validation, the component "jiggles" from side to side as danger styles are applied. - - **Example:** As an opt-out animation, you can see this motion behavior by default across form validation in our examples and demos, including [validated form select](/components/forms/form-select#validated), [invalid text area](/components/forms/text-area#invalid), and [invalid text input](/components/forms/text-input#invalid). + - **Animation:** When an error occurs in a form field with validation, the component "jiggles" from side to side as danger styles are applied. + - **Example:** The [validated form select](/components/forms/form-select#validated), [invalid text area](/components/forms/text-area#invalid), and [invalid text input](/components/forms/text-input#invalid) examples. -1. [Progress](/components/progress#helper-text) - - **Animation type:** Opt-out. - - **Animation behavior:** When there's an error in a progress bar, the component "jiggles" from side to side as danger styles are applied. - - **Example:** As an opt-out animation, you can see this motion behavior by selecting "Danger variant" in our [progress helper text example](/components/progress#helper-text). +1. Menu toggle validation + - **Animation:** When an error occurs in a menu toggle with validation, the component "jiggles" from side to side as danger styles are applied. + - **Example:** The [danger option in the select with validation](/components/menus/select#with-validation) example. -1. [Tabs](/components/tabs) - - **Animation type:** Opt-in for HTML. Opt-out for React. - - **Animation behavior:** The bottom "active tab" line slides between tabs as they are selected. - - **Example:** As an opt-out animation, you can see this motion behavior by default across our tabs React examples and demos. This animation does not apply to boxed tabs. - - **Note:** To avoid a breaking change, this animation is opt-in for HTML-only implementations. To support your opt-in process, view our [HTML guidance for animating the tab accent mark](/components/tabs#animate-current-tab-accent). +1. Progress + - **Animation:** When an error occurs in a progress bar, the component "jiggles" from side to side as danger styles are applied. + - **Example:** The "Danger variant" option in our [progress helper text example](/components/progress#helper-text). + +1. Tabs + - **Requires opt-in for HTML-only implementations.** + - **Animation:** The bottom "active tab" line slides between tabs as they are selected. + - **Example:** All [default tabs](/components/tabs) in our examples and demos. This animation does not apply to boxed tabs. + - **Note:** To avoid a breaking change, this animation is opt-in for HTML-only implementations. To support this, view our [HTML guidance for animating the tab accent mark](/components/tabs#animate-current-tab-accent). ##### Icons -1. Favorite (`fa-star-icon`) - - **Animation type:** Opt-out. - - **Animation behavior:** When a favorite icon is clicked, the star "pulses" and fills with color. - - **Example:** As an opt-out animation, you can see this motion behavior by default across favorite buttons in our examples and demos, or in our [animated favorite button example](/components/button#favorite). +1. Favorite: `fa-star-icon` + - **Animation:** When a favorite icon is clicked, the star "pulses" and fills with color. + - **Example:** All favorite buttons in our examples and demos, including our [animated favorite button example](/components/button#favorite). -1. Hamburger menu (`fa-bars`) - - **Animation type:** Opt-out. - - **Animation behavior:** When a hamburger icon receives hover or keyboard focus, the middle bar becomes an arrow, pointing in the direction that the attached menu will move when the icon is clicked. This motion helps better indicate when a menu will open and close. - - **Example:** As an opt-out animation, you can see this by default across hamburger menus in our examples and demos. To visualize the motion behavior, interact with the navigation menu in [our page examples](/components/page#vertical-navigation). - - **Note:** Because the hamburger menu icon for the PatternFly.org navigation has more padding than standard PatternFly buttons, we've opted out of this animation to avoid fit issues. +1. Hamburger menu + - **Animation:** The middle bar of the hamburger icon transforms into an arrow to indicate whether the menu will expand or collapse when clicked. The behavior differs slightly for desktop and mobile views: + - **Desktop:** Both arrows appears on hover or keyboard focus as appropriate. + - **Mobile:** When the menu is expanded, a "collapse" arrow is displayed. When collapsed, an "expand" arrow appears on hover or focus. + - **Example:** All hamburger menu buttons in our examples and demos, including [our page examples](/components/page#vertical-navigation). -1. Settings (`fa-cog`) - - **Animation type:** Opt-out. - - **Animation behavior:** When a settings icon receives hover or keyboard focus, the cog rotates. When the icon loses hover or keyboard focus, it rotates back to its original position. - - **Example:** As an opt-out animation, you can see this motion behavior by default across settings icons in our examples and demos, or in our [animated settings button example](/components/button#settings). +1. Settings: `fa-cog` + - **Animation:** When a settings icon receives hover or keyboard focus, the cog rotates. When focus is lost, it rotates back to its original position. + - **Example:** All settings icons in our examples and demos, including our [animated settings button example](/components/button#settings). -### New guidance for command-line interfaces +### PatternFly AI -With the help of a community contribution, we now have [a CLI handbook](/developer-resources/cli-handbook) that offers guidance for designing command-line interface experiences. This resource outlines unique accessibility considerations for CLIs, as well as writing guidelines for crafting well-designed messages, documentation, and interactive CLI experiences. +We updated our high-level [AI principles and guidelines](/patternfly-ai/principles-and-guidelines) to expand guidance and improve the usability of this resource. We integrated community feedback and research to include new patterns and recommendations that have emerged from the increased use of AI features in products. As the design and implementation of AI features continue to evolve, so will this guiding resource. -### Updated AI guidelines +#### ChatBot -We updated our high-level [AI principles and guidelines](/patternfly-ai/principles-and-guidelines) to expand guidance and improve the usability of this resource. We integrated community feedback and research to include new patterns and recommendations that have emerged from the increased inclusion of AI features in products. As the design and implementation of AI features continue to evolve, so will this guiding resource. +We expanded our ChatBot extension with improvements identified in a recent usability study, including [editable messages](/patternfly-ai/chatbot/messages#user-messages) and [compact styles](/patternfly-ai/chatbot/overview/demo#compact-chatbot). We also added other requested features, such as [auto-scrolling for messages](/patternfly-ai/chatbot/messages/demo#message-auto-scrolling) (a community contribution!), [empty and error states for the chat history drawer](/patternfly-ai/chatbot/ui#drawer-with-search-and-new-chat-button), and [expandable code blocks](/patternfly-ai/chatbot/messages#user-messages)—to name a few. -### Notable changes +On the documentation side, there's a new ["Customizing messages" guide](/patternfly-ai/chatbot/customizing-messages) that provides guidance for using rehype plugins for advanced HTML customization. -Outside of our key initiatives, there are a few notable changes that may require changes to your codebase and tests. +We also fixed reported bugs, which require no updates on your end. -#### Components +### CLI experience guidelines -#### Extensions +With the help of a community contribution, we now have [a CLI handbook](/developer-resources/cli-handbook) that offers guidance for designing command-line interface experiences. This resource outlines unique accessibility considerations for CLIs, as well as writing guidelines for crafting well-designed messages, documentation, and interactive CLI experiences. ### What's next? @@ -191,17 +193,17 @@ With this release, 3 components now support animations: 1. [Alert](/components/alert) - **Animation type:** Opt-in. - - **Animation behavior:** For alerts within a group, there's a slide-in animation as new alerts are received and a slide-out animation as alerts are dismissed. - - **Example:** To visualize the motion behavior, you can interact with our website examples, which have opted in to animations. + - **Animation:** For alerts within a group, there's a slide-in animation as new alerts are received and a slide-out animation as alerts are dismissed. + - **Example:** To visualize the motion, you can interact with our website examples, which have opted in to animations. - **Note:** By default, alert animations are opt-in and will only apply to alerts within an alert group. Opting into animations could require test updates. To ensure your test pass, the quickest solution is to set `hasAnimations` to `false`. Additionally, when alerts are dynamically added to a group, you must ensure that new alerts are prepended to the alert group list, rather than appended to the end of it. 1. [Navigation](/components/navigation) - **Animation type:** Opt-out. - - **Animation behavior:** For expandable navigation items, the sub-menu fades in and out as navigation items are expanded and collapsed. - - **Example:** As an opt-out animation, you can see this motion behavior by default across expandable navigation items. + - **Animation:** For expandable navigation items, the sub-menu fades in and out as navigation items are expanded and collapsed. + - **Example:** As an opt-out animation, you can see this motion by default across expandable navigation items. 1. [Notification badge](/components/notification-badge) - **Animation type:** Opt-in. - - **Animation behavior:** When the animation is triggered (for example, when a new notification arrives), the bell icon has a "ring" animation. - - **Example:** To illustrate the motion behavior of this animation, we added a [notification badge "With animations" example](/components/notification-badge#with-animation). + - **Animation:** When the animation is triggered (for example, when a new notification arrives), the bell icon has a "ring" animation. + - **Example:** To illustrate the motion of this animation, we added a [notification badge "With animations" example](/components/notification-badge#with-animation). ### React 19 support From a889e7a78eb9ba6d375027588c4b17c53d9596c1 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Mon, 7 Jul 2025 14:16:43 -0400 Subject: [PATCH 05/20] Update packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md --- .../patternfly-docs/content/get-started/release-highlights.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 7c49c8ae9b..8a4f41e5fe 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -89,7 +89,7 @@ The following components contain animations that give users dynamic feedback, he 1. Buttons - **Animation:** When a button is clicked, the active state color ripples outward from the center of the button. - - **Example:** All buttons in our examples and demos, including our [animated favorite button example](/components/button#favorite). + - **Example:** All buttons in our components, including in our [button examples and demos](/components/button). 1. Form validation - **Animation:** When an error occurs in a form field with validation, the component "jiggles" from side to side as danger styles are applied. From 0032f1bc440e76e5ca20aa4983f2cc30062e80f1 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 8 Jul 2025 09:47:04 -0400 Subject: [PATCH 06/20] Add mention of codemods --- .../patternfly-docs/content/get-started/release-highlights.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 8a4f41e5fe..7be118c3b5 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -47,6 +47,8 @@ This update is non-breaking, and PatternFly 6 will continue to support React 17 As we progress in our effort to integrate motion design across PatternFly components, we added the following new animations in this release. To provide a holistic view of our animated components, we also put together [an interactive animations demo](/design-foundations/motion/react-demos), which we will continue to update as we add additional animation support. +We have also created an [enable animations codemod](packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations/enable-animations.md), which can be used to enable animation across the opt-in components in your codebase. + #### Expansion We added expansion animations that apply a fade-in and slide-in transition as hidden content sections are expanded in a variety of components. A similar, reversed animation applies when expanded sections are collapsed. From 3b9803f8fcf7d827026444a7bec09d9690ef321f Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 8 Jul 2025 14:56:24 -0400 Subject: [PATCH 07/20] Package link updates and animation phrasing tweaks. --- .../content/get-started/release-highlights.md | 112 +++++++++--------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 7be118c3b5..50a946c3cf 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -13,29 +13,29 @@ import { Divider, Timestamp } from '@patternfly/react-core'; The following packages were promoted with this release. Outside of our primary initiatives for this release, we addressed reported bugs and continued to enhance PatternFly with new features, as detailed in the linked changelogs. - patternfly/patternfly ([changelog](https://github.com/patternfly/patternfly/releases/tag/v6.3.0)) - - [@patternfly/patternfly@6.3.0](https://www.npmjs.com/package/@patternfly/patternfly) + - [@patternfly/patternfly@6.3.0](https://www.npmjs.com/package/@patternfly/patternfly/v/6.3.0) - patternfly/react ([changelog](https://github.com/patternfly/patternfly-react/releases/tag/v6.3.0)) - - [@patternfly/react-charts@8.3.0](https://www.npmjs.com/package/@patternfly/react-charts) - - [@patternfly/react-code-editor@6.3.0](https://www.npmjs.com/package/@patternfly/react-code-editor) - - [@patternfly/react-core@6.3.0](https://www.npmjs.com/package/@patternfly/react-core) - - [@patternfly/react-docs@7.3.0](https://www.npmjs.com/package/@patternfly/react-docs) - - [@patternfly/react-drag-drop@6.3.0](https://www.npmjs.com/package/@patternfly/react-drag-drop) - - [@patternfly/react-icons@6.3.0](https://www.npmjs.com/package/@patternfly/react-icons) - - [@patternfly/react-styles@6.3.0](https://www.npmjs.com/package/@patternfly/react-styles) - - [@patternfly/react-table@6.3.0](https://www.npmjs.com/package/@patternfly/react-table) - - [@patternfly/react-templates@6.3.0](https://www.npmjs.com/package/@patternfly/react-templates) - - [@patternfly/react-tokens@6.3.0](https://www.npmjs.com/package/@patternfly/react-tokens) + - [@patternfly/react-charts@8.3.0](https://www.npmjs.com/package/@patternfly/react-charts/v/8.3.0) + - [@patternfly/react-code-editor@6.3.0](https://www.npmjs.com/package/@patternfly/react-code-editor/v/6.3.0) + - [@patternfly/react-core@6.3.0](https://www.npmjs.com/package/@patternfly/react-core/v/6.3.0) + - [@patternfly/react-docs@7.3.0](https://www.npmjs.com/package/@patternfly/react-docs/v/7.3.0) + - [@patternfly/react-drag-drop@6.3.0](https://www.npmjs.com/package/@patternfly/react-drag-drop/v/6.3.0) + - [@patternfly/react-icons@6.3.0](https://www.npmjs.com/package/@patternfly/react-icons/v/6.3.0) + - [@patternfly/react-styles@6.3.0](https://www.npmjs.com/package/@patternfly/react-styles/v/6.3.0) + - [@patternfly/react-table@6.3.0](https://www.npmjs.com/package/@patternfly/react-table/v/6.3.0) + - [@patternfly/react-templates@6.3.0](https://www.npmjs.com/package/@patternfly/react-templates/v/6.3.0) + - [@patternfly/react-tokens@6.3.0](https://www.npmjs.com/package/@patternfly/react-tokens/v/6.3.0) - PatternFly extensions - - [@patternfly/chatbot@6.3.0](https://www.npmjs.com/package/@patternfly/chatbot) ([changelog](https://github.com/patternfly/chatbot/releases/tag/v6.3.0)) - - [@patternfly/quickstarts@6.3.0](https://www.npmjs.com/package/@patternfly/quickstarts) ([changelog](https://github.com/patternfly/patternfly-quickstarts/releases/tag/v6.3.0)) - - [@patternfly/react-catalog-view-extension@6.1.0](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension) ([changelog](https://github.com/patternfly/react-catalog-view/releases/tag/v6.1.0)) - - [@patternfly/react-component-groups@6.3.0](https://www.npmjs.com/package/@patternfly/react-component-groups) ([changelog](https://github.com/patternfly/react-component-groups/releases/tag/v6.3.0)) - - [@patternfly/react-console@6.1.0](https://www.npmjs.com/package/@patternfly/react-console) ([changelog](https://github.com/patternfly/react-console/releases/tag/v6.1.0)) - - [@patternfly/react-data-view@6.3.0](https://www.npmjs.com/package/@patternfly/react-data-view) ([changelog](https://github.com/patternfly/react-data-view/releases/tag/v6.3.0)) - - [@patternfly/react-log-viewer@6.3.0](https://www.npmjs.com/package/@patternfly/react-log-viewer) ([changelog](https://github.com/patternfly/react-log-viewer/releases/tag/v6.3.0)) - - [@patternfly/react-topology@6.3.0](https://www.npmjs.com/package/@patternfly/react-topology) ([changelog](https://github.com/patternfly/react-topology/releases/tag/v6.3.0)) - - [@patternfly/react-user-feedback@6.2.0](https://www.npmjs.com/package/@patternfly/react-user-feedback) ([changelog](https://github.com/patternfly/react-user-feedback/releases/tag/v6.2.0)) - - [@patternfly/react-virtualized-extension@6.1.0](https://www.npmjs.com/package/@patternfly/react-virtualized-extension) ([changelog](https://github.com/patternfly/react-virtualized-extension/releases/tag/v6.1.0)) + - [@patternfly/chatbot@6.3.0](https://www.npmjs.com/package/@patternfly/chatbot/v/6.3.0) ([changelog](https://github.com/patternfly/chatbot/releases/tag/v6.3.0)) + - [@patternfly/quickstarts@6.3.0](https://www.npmjs.com/package/@patternfly/quickstarts/v/6.3.0) ([changelog](https://github.com/patternfly/patternfly-quickstarts/releases/tag/v6.3.0)) + - [@patternfly/react-catalog-view-extension@6.1.0](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension/v/6.1.0) ([changelog](https://github.com/patternfly/react-catalog-view/releases/tag/v6.1.0)) + - [@patternfly/react-component-groups@6.3.0](https://www.npmjs.com/package/@patternfly/react-component-groups/v/6.3.0) ([changelog](https://github.com/patternfly/react-component-groups/releases/tag/v6.3.0)) + - [@patternfly/react-console@6.1.0](https://www.npmjs.com/package/@patternfly/react-console/v/6.31.0) ([changelog](https://github.com/patternfly/react-console/releases/tag/v6.1.0)) + - [@patternfly/react-data-view@6.3.0](https://www.npmjs.com/package/@patternfly/react-data-view/v/6.3.0) ([changelog](https://github.com/patternfly/react-data-view/releases/tag/v6.3.0)) + - [@patternfly/react-log-viewer@6.3.0](https://www.npmjs.com/package/@patternfly/react-log-viewer/v/6.3.0) ([changelog](https://github.com/patternfly/react-log-viewer/releases/tag/v6.3.0)) + - [@patternfly/react-topology@6.3.0](https://www.npmjs.com/package/@patternfly/react-topology/v/6.3.0) ([changelog](https://github.com/patternfly/react-topology/releases/tag/v6.3.0)) + - [@patternfly/react-user-feedback@6.2.0](https://www.npmjs.com/package/@patternfly/react-user-feedback/v/6.2.0) ([changelog](https://github.com/patternfly/react-user-feedback/releases/tag/v6.2.0)) + - [@patternfly/react-virtualized-extension@6.1.0](https://www.npmjs.com/package/@patternfly/react-virtualized-extension/v/6.1.0) ([changelog](https://github.com/patternfly/react-virtualized-extension/releases/tag/v6.1.0)) ### React 19 support @@ -113,8 +113,8 @@ The following components contain animations that give users dynamic feedback, he ##### Icons -1. Favorite: `fa-star-icon` - - **Animation:** When a favorite icon is clicked, the star "pulses" and fills with color. +1. Favorite + - **Animation:** When a favorite button is clicked, the star "pulses" and fills with color. - **Example:** All favorite buttons in our examples and demos, including our [animated favorite button example](/components/button#favorite). 1. Hamburger menu @@ -123,9 +123,9 @@ The following components contain animations that give users dynamic feedback, he - **Mobile:** When the menu is expanded, a "collapse" arrow is displayed. When collapsed, an "expand" arrow appears on hover or focus. - **Example:** All hamburger menu buttons in our examples and demos, including [our page examples](/components/page#vertical-navigation). -1. Settings: `fa-cog` - - **Animation:** When a settings icon receives hover or keyboard focus, the cog rotates. When focus is lost, it rotates back to its original position. - - **Example:** All settings icons in our examples and demos, including our [animated settings button example](/components/button#settings). +1. Settings + - **Animation:** When a settings button or menu toggle receives hover or keyboard focus, the cog rotates. When focus is lost, it rotates back to its original position. + - **Example:** All settings buttons and menu toggles in our examples and demos, including our [animated settings button example](/components/button#settings). ### PatternFly AI @@ -159,25 +159,25 @@ For the Q2 2025 PatternFly release we made progress in a few of our key initiati The following packages were promoted with this release. Outside of our primary initiatives for this release, we addressed reported bugs and continued to enhance PatternFly with new features, as detailed in the linked changelogs. - patternfly/patternfly ([changelog](https://github.com/patternfly/patternfly/releases/tag/v6.2.0)) - - [@patternfly/patternfly@6.2.0](https://www.npmjs.com/package/@patternfly/patternfly) + - [@patternfly/patternfly@6.2.0](https://www.npmjs.com/package/@patternfly/patternfly/v/6.2.0) - patternfly/react ([changelog](https://github.com/patternfly/patternfly-react/releases/tag/v6.2.0)) - - [@patternfly/react-charts@8.2.0](https://www.npmjs.com/package/@patternfly/react-charts) - - [@patternfly/react-code-editor@6.2.0](https://www.npmjs.com/package/@patternfly/react-code-editor) - - [@patternfly/react-core@6.2.0](https://www.npmjs.com/package/@patternfly/react-core) - - [@patternfly/react-drag-drop@6.2.0](https://www.npmjs.com/package/@patternfly/react-drag-drop) - - [@patternfly/icons@1.0.4](https://www.npmjs.com/package/@patternfly/icons) - - [@patternfly/react-styles@6.2.0](https://www.npmjs.com/package/@patternfly/react-styles) - - [@patternfly/react-table@6.2.0](https://www.npmjs.com/package/@patternfly/react-table) - - [patternfly/react-templates@6.2.0](https://www.npmjs.com/package/@patternfly/react-templates) - - [@patternfly/react-tokens@6.2.0](https://www.npmjs.com/package/@patternfly/react-tokens) + - [@patternfly/react-charts@8.2.0](https://www.npmjs.com/package/@patternfly/react-charts/v/8.2.0) + - [@patternfly/react-code-editor@6.2.0](https://www.npmjs.com/package/@patternfly/react-code-editor/v/6.2.0) + - [@patternfly/react-core@6.2.0](https://www.npmjs.com/package/@patternfly/react-core/v/6.2.0) + - [@patternfly/react-drag-drop@6.2.0](https://www.npmjs.com/package/@patternfly/react-drag-drop/v/6.2.0) + - [@patternfly/icons@1.0.4](https://www.npmjs.com/package/@patternfly/icons/v/1.0.4) + - [@patternfly/react-styles@6.2.0](https://www.npmjs.com/package/@patternfly/react-styles/v/6.2.0) + - [@patternfly/react-table@6.2.0](https://www.npmjs.com/package/@patternfly/react-table/v/6.2.0) + - [patternfly/react-templates@6.2.0](https://www.npmjs.com/package/@patternfly/react-templates/v/6.2.0) + - [@patternfly/react-tokens@6.2.0](https://www.npmjs.com/package/@patternfly/react-tokens/v/6.2.0) - PatternFly extensions - - [@patternfly/chatbot@2.2.0](https://www.npmjs.com/package/@patternfly/chatbot) ([changelog](https://github.com/patternfly/chatbot/releases/tag/v2.2.0)) - - [@patternfly/quickstarts@6.2.0](https://www.npmjs.com/package/@patternfly/quickstarts) ([changelog](https://github.com/patternfly/patternfly-quickstarts/releases/tag/v6.2.0)) - - [@patternfly/react-catalog-view-extension@6.1.0](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension) ([changelog](https://github.com/patternfly/react-catalog-view/releases/tag/v6.1.0)) - - [@patternfly/react-component-groups@6.2.0](https://www.npmjs.com/package/@patternfly/react-component-groups) ([changelog](https://github.com/patternfly/react-component-groups/releases/tag/v6.2.0)) - - [@patternfly/react-log-viewer@6.1.0](https://www.npmjs.com/package/@patternfly/react-log-viewer) ([changelog](https://github.com/patternfly/react-log-viewer/releases/tag/v6.1.0)) + - [@patternfly/chatbot@2.2.0](https://www.npmjs.com/package/@patternfly/chatbot/v/2.2.0) ([changelog](https://github.com/patternfly/chatbot/releases/tag/v2.2.0)) + - [@patternfly/quickstarts@6.2.0](https://www.npmjs.com/package/@patternfly/quickstarts/v/6.2.0) ([changelog](https://github.com/patternfly/patternfly-quickstarts/releases/tag/v6.2.0)) + - [@patternfly/react-catalog-view-extension@6.1.0](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension/v/6.1.0) ([changelog](https://github.com/patternfly/react-catalog-view/releases/tag/v6.1.0)) + - [@patternfly/react-component-groups@6.2.0](https://www.npmjs.com/package/@patternfly/react-component-groups/v/6.2.0) ([changelog](https://github.com/patternfly/react-component-groups/releases/tag/v6.2.0)) + - [@patternfly/react-log-viewer@6.1.0](https://www.npmjs.com/package/@patternfly/react-log-viewer/v/6.1.0) ([changelog](https://github.com/patternfly/react-log-viewer/releases/tag/v6.1.0)) - [@patternfly/react-topology@6.2.0](https://www.npmjs.com/package/@patternfly/react-topology) ([changelog](https://github.com/patternfly/react-topology/releases/tag/v6.2.0)) - - [@patternfly/react-user-feedback@6.1.0](https://www.npmjs.com/package/@patternfly/react-user-feedback) ([changelog](https://github.com/patternfly/react-user-feedback/releases/tag/v6.1.0)) + - [@patternfly/react-user-feedback@6.1.0](https://www.npmjs.com/package/@patternfly/react-user-feedback/v/6.1.0) ([changelog](https://github.com/patternfly/react-user-feedback/releases/tag/v6.1.0)) ### PatternFly 6 enablement @@ -287,22 +287,22 @@ As a quick follow up to our last release, this update publishes the new data vie ### Promoted package versions - patternfly/patternfly ([changelog](https://github.com/patternfly/patternfly/releases/tag/v6.1.0)) - - [@patternfly/patternfly@6.1.0](https://www.npmjs.com/package/@patternfly/patternfly) + - [@patternfly/patternfly@6.1.0](https://www.npmjs.com/package/@patternfly/patternfly/v/6.1.0) - patternfly/react ([changelog](https://github.com/patternfly/patternfly-react/releases/tag/v6.1.0)) - - [@patternfly/react-charts@8.1.0](https://www.npmjs.com/package/@patternfly/react-charts) - - [@patternfly/react-code-editor@6.1.0](https://www.npmjs.com/package/@patternfly/react-code-editor) - - [@patternfly/react-core@6.1.0](https://www.npmjs.com/package/@patternfly/react-core) - - [@patternfly/react-drag-drop@6.1.0](https://www.npmjs.com/package/@patternfly/react-drag-drop) - - [@patternfly/react-styles@6.1.0](https://www.npmjs.com/package/@patternfly/react-styles) - - [@patternfly/react-table@6.1.0](https://www.npmjs.com/package/@patternfly/react-table) - - [patternfly/react-templates@6.1.0](https://www.npmjs.com/package/@patternfly/react-templates) - - [@patternfly/react-tokens@6.1.0](https://www.npmjs.com/package/@patternfly/react-tokens) + - [@patternfly/react-charts@8.1.0](https://www.npmjs.com/package/@patternfly/react-charts/v/8.1.0) + - [@patternfly/react-code-editor@6.1.0](https://www.npmjs.com/package/@patternfly/react-code-editor/v/6.1.0) + - [@patternfly/react-core@6.1.0](https://www.npmjs.com/package/@patternfly/react-core/v/6.1.0) + - [@patternfly/react-drag-drop@6.1.0](https://www.npmjs.com/package/@patternfly/react-drag-drop/v/6.1.0) + - [@patternfly/react-styles@6.1.0](https://www.npmjs.com/package/@patternfly/react-styles/v/6.1.0) + - [@patternfly/react-table@6.1.0](https://www.npmjs.com/package/@patternfly/react-table/v/6.1.0) + - [patternfly/react-templates@6.1.0](https://www.npmjs.com/package/@patternfly/react-templates/v/6.1.0) + - [@patternfly/react-tokens@6.1.0](https://www.npmjs.com/package/@patternfly/react-tokens/v/6.1.0) - PatternFly extensions - - [@patternfly/react-component-groups@6.1.0](https://www.npmjs.com/package/@patternfly/react-component-groups) ([changelog](https://github.com/patternfly/react-component-groups/releases/tag/v6.1.0)) - - [@patternfly/react-log-viewer@6.1.0](https://www.npmjs.com/package/@patternfly/react-log-viewer) ([changelog](https://github.com/patternfly/react-log-viewer/releases/tag/v6.1.0)) - - [@patternfly/react-topology@6.1.0](https://www.npmjs.com/package/@patternfly/react-topology) ([changelog](https://github.com/patternfly/react-topology/releases/tag/v6.1.0)) - - [@patternfly/quickstarts@6.1.0](https://www.npmjs.com/package/@patternfly/quickstarts) ([changelog](https://github.com/patternfly/patternfly-quickstarts/releases/tag/v6.1.0)) - - [@patternfly/chatbot@2.1.0](https://www.npmjs.com/package/@patternfly/chatbot) ([changelog](https://github.com/patternfly/chatbot/releases/tag/v2.1.0)) + - [@patternfly/react-component-groups@6.1.0](https://www.npmjs.com/package/@patternfly/react-component-groups/v/6.1.0) ([changelog](https://github.com/patternfly/react-component-groups/releases/tag/v6.1.0)) + - [@patternfly/react-log-viewer@6.1.0](https://www.npmjs.com/package/@patternfly/react-log-viewer/v/6.1.0) ([changelog](https://github.com/patternfly/react-log-viewer/releases/tag/v6.1.0)) + - [@patternfly/react-topology@6.1.0](https://www.npmjs.com/package/@patternfly/react-topology/v/6.1.0) ([changelog](https://github.com/patternfly/react-topology/releases/tag/v6.1.0)) + - [@patternfly/quickstarts@6.1.0](https://www.npmjs.com/package/@patternfly/quickstarts/v/6.1.0) ([changelog](https://github.com/patternfly/patternfly-quickstarts/releases/tag/v6.1.0)) + - [@patternfly/chatbot@2.1.0](https://www.npmjs.com/package/@patternfly/chatbot/v/2.1.0) ([changelog](https://github.com/patternfly/chatbot/releases/tag/v2.1.0)) ### Component updates From 963be455105a4fb81697459bace482d2040857e1 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 8 Jul 2025 15:02:30 -0400 Subject: [PATCH 08/20] Update enable animations codemod info --- .../patternfly-docs/content/get-started/release-highlights.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 50a946c3cf..1c393fc07d 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -47,7 +47,7 @@ This update is non-breaking, and PatternFly 6 will continue to support React 17 As we progress in our effort to integrate motion design across PatternFly components, we added the following new animations in this release. To provide a holistic view of our animated components, we also put together [an interactive animations demo](/design-foundations/motion/react-demos), which we will continue to update as we add additional animation support. -We have also created an [enable animations codemod](packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations/enable-animations.md), which can be used to enable animation across the opt-in components in your codebase. +We have also created an [enable-animations codemod](https://github.com/patternfly/pf-codemods/tree/main/packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations), which adds the `hasAnimations` prop to components that support opt-in animations. #### Expansion From c9c4dc18bf7e81d4f11b364beca9656921ae3b07 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 8 Jul 2025 16:15:42 -0400 Subject: [PATCH 09/20] Update packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> --- .../patternfly-docs/content/get-started/release-highlights.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 1c393fc07d..60051a12ad 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -74,7 +74,8 @@ The following list highlights opt-in requirements and links to examples. Unless - **Note:** This animation was introduced in our 6.2 release, but performance issues were reported. For this release, we reworked the animation to resolve these issues. - Search input - - **Example:** [Expandable search input](/components/search-input#with-expandable-button). + - **Requires opt-in.** + - **Example:** [Expandable search input](/components/search-input#with-expandable-button), which has opted in. - Tree view - **Requires opt-in.** From 72815f28e3fe94dbde4fed8eab46a4d3fafcf397 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Wed, 9 Jul 2025 11:32:58 -0400 Subject: [PATCH 10/20] Adds more details per reviews --- .../content/get-started/release-highlights.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 60051a12ad..8ec1dd6fd0 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -58,12 +58,13 @@ The following list highlights opt-in requirements and links to examples. Unless - Accordion - **Example:** All [accordions](/components/accordion) in our examples and demos. -- Dual list selector +- Dual list selector with tree - **Requires opt-in.** - **Example:** [Dual list selector with tree](/components/dual-list-selector#with-tree), which has opted in. - Expandable section - **Example:** All [expandable sections](/components/expandable-section) in our examples and demos. + - **Note:** When using [detached expandable sections](/components/expandable-section#detached), you will need to use the new `direction` prop to set the direction of the expansion animation. - Form - **Requires opt-in.** @@ -83,8 +84,11 @@ The following list highlights opt-in requirements and links to examples. Unless - Table - **Requires opt-in.** - - **Example:** [Expandable table](/components/table#expandable), which has opted in. - - **Note:** This release does not include expansion animations for tree tables. + - **Example:** [Expandable table](/components/table#expandable) and [compound expandable table](/components/table/#compound-expandable), which have both opted in. + - **Notes:** + - This release does not include expansion animations for tree tables. + - To prevent visual issues with the divider on expanded rows, ensure that both the `` and the first `Tr` in the `Tbody` contains `isExpanded` logic. + - To avoid visual issues with animations in compound expandable tables, ensure that the `Tr` which contains `isControlRow` contains `isExpanded` logic. To dynamically render the content, each expandable row content should also be rendered in its own structure. #### Feedback @@ -94,6 +98,10 @@ The following components contain animations that give users dynamic feedback, he - **Animation:** When a button is clicked, the active state color ripples outward from the center of the button. - **Example:** All buttons in our components, including in our [button examples and demos](/components/button). +1. Helper text validation + - **Animation:** When an error occurs in an input that supports helper text (such as in the form and progress components), the helper text fades in as danger styles are applied. + - **Example:** The [static text and dynamic status example](/components/helper-text/react-demos#static-text-and-dynamic-status) for helper text. + 1. Form validation - **Animation:** When an error occurs in a form field with validation, the component "jiggles" from side to side as danger styles are applied. - **Example:** The [validated form select](/components/forms/form-select#validated), [invalid text area](/components/forms/text-area#invalid), and [invalid text input](/components/forms/text-input#invalid) examples. @@ -114,6 +122,8 @@ The following components contain animations that give users dynamic feedback, he ##### Icons +The following animations are unique to each icon and don't support any custom icons. For example, you cannot apply the favorite animation to any icon besides the favorite star. + 1. Favorite - **Animation:** When a favorite button is clicked, the star "pulses" and fills with color. - **Example:** All favorite buttons in our examples and demos, including our [animated favorite button example](/components/button#favorite). @@ -122,7 +132,8 @@ The following components contain animations that give users dynamic feedback, he - **Animation:** The middle bar of the hamburger icon transforms into an arrow to indicate whether the menu will expand or collapse when clicked. The behavior differs slightly for desktop and mobile views: - **Desktop:** Both arrows appears on hover or keyboard focus as appropriate. - **Mobile:** When the menu is expanded, a "collapse" arrow is displayed. When collapsed, an "expand" arrow appears on hover or focus. - - **Example:** All hamburger menu buttons in our examples and demos, including [our page examples](/components/page#vertical-navigation). + - **Example:** All hamburger menu buttons in our examples and demos, including [our page examples](/components/page#vertical-navigation). + - **Note:** This animation automatically occurs for hamburger menu buttons in mastheads, but not elsewhere. You can view implementation details in the [hamburger button example](/components/button#hamburger), which demonstrate how to set up the animation logic outside of mastheads. 1. Settings - **Animation:** When a settings button or menu toggle receives hover or keyboard focus, the cog rotates. When focus is lost, it rotates back to its original position. From 542cfca7ecee53f67923bc7274f0ee0d5409b5db Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Wed, 9 Jul 2025 11:36:30 -0400 Subject: [PATCH 11/20] Adds more codemod instruction per request. --- .../content/get-started/release-highlights.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 8ec1dd6fd0..9edeb10d91 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -47,8 +47,14 @@ This update is non-breaking, and PatternFly 6 will continue to support React 17 As we progress in our effort to integrate motion design across PatternFly components, we added the following new animations in this release. To provide a holistic view of our animated components, we also put together [an interactive animations demo](/design-foundations/motion/react-demos), which we will continue to update as we add additional animation support. +#### enable-animations codemods + We have also created an [enable-animations codemod](https://github.com/patternfly/pf-codemods/tree/main/packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations), which adds the `hasAnimations` prop to components that support opt-in animations. +To enable the optional animations run the following command: + +`npx @patternfly/pf-codemods --only enable-animations /path-to-src` + #### Expansion We added expansion animations that apply a fade-in and slide-in transition as hidden content sections are expanded in a variety of components. A similar, reversed animation applies when expanded sections are collapsed. From 23903a8d4606818ba2fdba20cd0bf8e190e783d1 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Wed, 9 Jul 2025 14:52:45 -0400 Subject: [PATCH 12/20] Add more around codemod. --- .../patternfly-docs/content/get-started/release-highlights.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 9edeb10d91..26bdc90d88 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -49,7 +49,7 @@ As we progress in our effort to integrate motion design across PatternFly compon #### enable-animations codemods -We have also created an [enable-animations codemod](https://github.com/patternfly/pf-codemods/tree/main/packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations), which adds the `hasAnimations` prop to components that support opt-in animations. +We have also created an [enable-animations codemod](https://github.com/patternfly/pf-codemods/tree/main/packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations), which adds the `hasAnimations` prop to components that require opt-in animations. Keep in mind that, depending on your codebase, this codemod could introduce breaking changes that require further attention. To enable the optional animations run the following command: From c215637fcbf03012c0987da4520f307682a7ac45 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 10 Jul 2025 14:26:01 -0400 Subject: [PATCH 13/20] update details about expandable table animations. --- .../content/get-started/release-highlights.md | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 26bdc90d88..9a188d5c2e 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -93,8 +93,31 @@ The following list highlights opt-in requirements and links to examples. Unless - **Example:** [Expandable table](/components/table#expandable) and [compound expandable table](/components/table/#compound-expandable), which have both opted in. - **Notes:** - This release does not include expansion animations for tree tables. - - To prevent visual issues with the divider on expanded rows, ensure that both the `
` and the first `Tr` in the `Tbody` contains `isExpanded` logic. - - To avoid visual issues with animations in compound expandable tables, ensure that the `Tr` which contains `isControlRow` contains `isExpanded` logic. To dynamically render the content, each expandable row content should also be rendered in its own structure. + - To prevent possible visual issues with [expandable](/components/table#expandable) and [compound expandable tables](/components/table#compound-expandable), ensure that your implementation aligns with our currently recommended structure. In your table's code: + - `
` must have `isExpandable` passed to it. + - Any `` containing expandable rows must have `isExpanded` logic. + - Any `` that acts as a "control row" (for normal expandable tables) or has the `isControlRow` prop (for compound expansion tables) must have `isExpanded` logic. + - Any `` that expands/collapses and contains the expandable content must have `isExpandable` passed to it, in addition to `isExpanded` logic. + - Any `` must wrap any content in an `ExpandableRowContent`. + - The basic structure, which is used in our expandable and compound expandable examples should resemble this: + + ``` +
` within an expandable `
// if opting into animations, pass the hasAnimations prop or run the enable-animations codemods to auto-apply the prop + ...Thead... + + // for compound expandable, pass isControlRow as well + ..."control row" content... + + + + + +
+ + ...the content to display for the cell... + +
+ ``` #### Feedback From 8679ded5139b492f390f448fa1a5c1482daff6c5 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Fri, 11 Jul 2025 09:20:45 -0400 Subject: [PATCH 14/20] Tabbing for code block Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> --- .../content/get-started/release-highlights.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 9a188d5c2e..82480406bf 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -103,19 +103,19 @@ The following list highlights opt-in requirements and links to examples. Unless ``` // if opting into animations, pass the hasAnimations prop or run the enable-animations codemods to auto-apply the prop - ...Thead... - + ...Thead... + // for compound expandable, pass isControlRow as well - ..."control row" content... + ..."control row" content... - + - +
+ - ...the content to display for the cell... + ...the content to display for the cell... -
``` From 7a19455d002ee1b7ebd07643df01d74ffcea2194 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 17 Jul 2025 09:19:35 -0400 Subject: [PATCH 15/20] Update packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- .../content/get-started/release-highlights.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 82480406bf..ad101b2fe8 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -96,19 +96,19 @@ The following list highlights opt-in requirements and links to examples. Unless - To prevent possible visual issues with [expandable](/components/table#expandable) and [compound expandable tables](/components/table#compound-expandable), ensure that your implementation aligns with our currently recommended structure. In your table's code: - `` must have `isExpandable` passed to it. - Any `` containing expandable rows must have `isExpanded` logic. - - Any `` that acts as a "control row" (for normal expandable tables) or has the `isControlRow` prop (for compound expansion tables) must have `isExpanded` logic. - - Any `` that expands/collapses and contains the expandable content must have `isExpandable` passed to it, in addition to `isExpanded` logic. + - Any `` that acts as a "control row" (for normal expandable tables) or has the `isControlRow` prop (for compound expansion tables) must have `isContentExpanded` logic (this logic should match the `isExpanded` logic being passed to other sub-components). + - Any `` that expands/collapses and contains the expandable content must have `isExpanded` logic (this should always have been the case in order for expansion to work). - Any `` must wrap any content in an `ExpandableRowContent`. - The basic structure, which is used in our expandable and compound expandable examples should resemble this: ```
` within an expandable `
// if opting into animations, pass the hasAnimations prop or run the enable-animations codemods to auto-apply the prop - ...Thead... - - // for compound expandable, pass isControlRow as well + ...Thead content... + + // for compound expandable, pass isControlRow as well ..."control row" content... - +
...the content to display for the cell... From 8b349e008b848091c70f6c2e91bd674357e7d9e0 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 17 Jul 2025 09:26:47 -0400 Subject: [PATCH 16/20] Small edits for table --- .../patternfly-docs/content/get-started/release-highlights.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index ad101b2fe8..9878bef3c3 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -88,7 +88,7 @@ The following list highlights opt-in requirements and links to examples. Unless - **Requires opt-in.** - **Example:** All [tree view](/components/tree-view) examples and demos, which have opted in. -- Table +- Table (beta) - **Requires opt-in.** - **Example:** [Expandable table](/components/table#expandable) and [compound expandable table](/components/table/#compound-expandable), which have both opted in. - **Notes:** @@ -96,7 +96,7 @@ The following list highlights opt-in requirements and links to examples. Unless - To prevent possible visual issues with [expandable](/components/table#expandable) and [compound expandable tables](/components/table#compound-expandable), ensure that your implementation aligns with our currently recommended structure. In your table's code: - `` must have `isExpandable` passed to it. - Any `` containing expandable rows must have `isExpanded` logic. - - Any `` that acts as a "control row" (for normal expandable tables) or has the `isControlRow` prop (for compound expansion tables) must have `isContentExpanded` logic (this logic should match the `isExpanded` logic being passed to other sub-components). + - Any `` that acts as a "control row" (for normal expandable tables) or has the `isControlRow` prop (for compound expansion tables) must have `isContentExpanded` logic. This logic should match the `isExpanded` logic being passed to other sub-components. - Any `` that expands/collapses and contains the expandable content must have `isExpanded` logic (this should always have been the case in order for expansion to work). - Any `` must wrap any content in an `ExpandableRowContent`. - The basic structure, which is used in our expandable and compound expandable examples should resemble this: From 216a1d68988bcb200843190ecfb623595d28bf5a Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 17 Jul 2025 11:14:24 -0400 Subject: [PATCH 17/20] Make note of potential memory issues re spinners. --- .../patternfly-docs/content/get-started/release-highlights.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 9878bef3c3..1ba4a3d670 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -47,6 +47,8 @@ This update is non-breaking, and PatternFly 6 will continue to support React 17 As we progress in our effort to integrate motion design across PatternFly components, we added the following new animations in this release. To provide a holistic view of our animated components, we also put together [an interactive animations demo](/design-foundations/motion/react-demos), which we will continue to update as we add additional animation support. +**Note:** In some edge cases, the browser can deactivate animations due to memory overload. For example, animated spinners are particularly memory intensive, so components including multiple spinners are more likely to consume a lot of memory and disable all animations. + #### enable-animations codemods We have also created an [enable-animations codemod](https://github.com/patternfly/pf-codemods/tree/main/packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations), which adds the `hasAnimations` prop to components that require opt-in animations. Keep in mind that, depending on your codebase, this codemod could introduce breaking changes that require further attention. @@ -88,7 +90,7 @@ The following list highlights opt-in requirements and links to examples. Unless - **Requires opt-in.** - **Example:** All [tree view](/components/tree-view) examples and demos, which have opted in. -- Table (beta) +- Table (in beta) - **Requires opt-in.** - **Example:** [Expandable table](/components/table#expandable) and [compound expandable table](/components/table/#compound-expandable), which have both opted in. - **Notes:** From 331ba51cb2244e6693bc72706221c7d7252aec13 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 17 Jul 2025 12:02:18 -0400 Subject: [PATCH 18/20] Update animations memory issue note --- .../patternfly-docs/content/get-started/release-highlights.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 1ba4a3d670..2697252a81 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -47,7 +47,7 @@ This update is non-breaking, and PatternFly 6 will continue to support React 17 As we progress in our effort to integrate motion design across PatternFly components, we added the following new animations in this release. To provide a holistic view of our animated components, we also put together [an interactive animations demo](/design-foundations/motion/react-demos), which we will continue to update as we add additional animation support. -**Note:** In some edge cases, the browser can deactivate animations due to memory overload. For example, animated spinners are particularly memory intensive, so components including multiple spinners are more likely to consume a lot of memory and disable all animations. +**Note:** In some edge cases, resource-intensive pages can cause browser memory issues where animations will fail to run correctly. For example, animated spinners are particularly memory intensive, so adding multiple spinners to a page might consume too much memory and disable all animations. #### enable-animations codemods From 4c93d8478c8c22e63c2d71b3c65c78d5881fe44e Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Thu, 17 Jul 2025 13:41:17 -0400 Subject: [PATCH 19/20] Update animations note per Jenny's suggestion --- .../patternfly-docs/content/get-started/release-highlights.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 2697252a81..2e55cb96e3 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -47,7 +47,7 @@ This update is non-breaking, and PatternFly 6 will continue to support React 17 As we progress in our effort to integrate motion design across PatternFly components, we added the following new animations in this release. To provide a holistic view of our animated components, we also put together [an interactive animations demo](/design-foundations/motion/react-demos), which we will continue to update as we add additional animation support. -**Note:** In some edge cases, resource-intensive pages can cause browser memory issues where animations will fail to run correctly. For example, animated spinners are particularly memory intensive, so adding multiple spinners to a page might consume too much memory and disable all animations. +**Note:** Browsers may slow down or deactivate animations on resource-intensive pages. This can occur when continuous animations (like multiple spinners) are active at the same time as other demanding tasks (like frequent data polling), which can overload the browser's processing capacity. #### enable-animations codemods From 7d4be3f9eab190752d073150beb574ced420e0cd Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Fri, 18 Jul 2025 16:50:34 -0400 Subject: [PATCH 20/20] Update animations codemod note --- .../patternfly-docs/content/get-started/release-highlights.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md index 2e55cb96e3..11f2d31db7 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md +++ b/packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md @@ -51,7 +51,9 @@ As we progress in our effort to integrate motion design across PatternFly compon #### enable-animations codemods -We have also created an [enable-animations codemod](https://github.com/patternfly/pf-codemods/tree/main/packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations), which adds the `hasAnimations` prop to components that require opt-in animations. Keep in mind that, depending on your codebase, this codemod could introduce breaking changes that require further attention. +We have also created an [enable-animations codemod](https://github.com/patternfly/pf-codemods/tree/main/packages/eslint-plugin-pf-codemods/src/rules/v6/enableAnimations), which adds the `hasAnimations` prop to components that require opt-in animations. + +Keep in mind that, depending on your codebase, this codemod could introduce breaking changes that require further attention. In particular, when you run the codemod you will be asked whether you want to opt into animations for table components, or just for the react-core package. To enable the optional animations run the following command:
` within an expandable `