-
Notifications
You must be signed in to change notification settings - Fork 148
docs(release-highlights): Adds highlights for 6.2 release. #4493
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 20 commits
df69e4f
cac204d
0702447
01c20ff
df71233
85d31f5
dbe5a54
261d5a5
5ba2f6b
a686d36
42ca99c
bc89a2c
78c5c79
e938e32
5ee300c
f51c4bb
bf5e096
e0eef52
a810f22
1b58830
0465e00
0f884bc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,11 +3,125 @@ id: Release highlights | |
| title: Release highlights | ||
| section: get-started | ||
| --- | ||
|
|
||
| import './get-started.css'; | ||
| import { Divider, Timestamp } from '@patternfly/react-core'; | ||
|
|
||
| <Timestamp>January 2024</Timestamp> | ||
| <Timestamp date={new Date(2025, 3)}>April 2025</Timestamp> | ||
|
|
||
| ## PatternFly 6.2 | ||
|
|
||
| For the Q2 2025 PatternFly release we made progress in a few of our key initiatives, including PatternFly 6 migration enablement, component animations, React 19 support, and the continued evolution of PatternFly AI. Updates for these key areas can be found here, in this quarter's release highlights. | ||
|
|
||
| ### 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.2.0)) | ||
| - [@patternfly/patternfly@6.2.0](https://www.npmjs.com/package/@patternfly/patternfly) | ||
| - 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 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/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 6 enablement | ||
|
|
||
| As products have continued their PatternFly 6 migration journeys, we've received helpful feedback on the upgrade process, including common roadblocks and situations that could use more guidance. So, we expanded and reorganized the [PatternFly 6 upgrade guide](/get-started/upgrade) to more clearly and comprehensively support the upgrade process. | ||
|
|
||
| ### Component animations | ||
|
|
||
| Our highly-anticipated animations project focuses on integrating motion design into PatternFly components, to enhance user experiences and provide additional cues for interaction. You can keep track of this project via [our micro-animations roadmap](https://github.com/orgs/patternfly/projects/16/views/23?pane=issue&itemId=86507128&issue=patternfly%7Cpf-roadmap%7C215). | ||
|
|
||
| Note that animations will either be specified as opt-in or opt-out: | ||
| - **Opt-in:** Must be enabled in your code. | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we add a note about why opt-in animations are being released? Rather than having them all be opt-out? Make a note about the fact that they'll require further updating code in order to get them running? |
||
| - **Opt-out:** Turned on by default, can be disabled in your code. | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just an FYI in case it isn't known, there isn't a react prop or anything to disable the opt-out animation (navigation in this case), like there is for opt-in. You'd either need to disable all animations ( |
||
|
|
||
| With this release, 3 components now support animations: | ||
|
|
||
|
edonehoo marked this conversation as resolved.
|
||
| 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. | ||
| - **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. | ||
| 1. [Notification badge](/components/notification-badge) | ||
| - **Animation type:** Opt-in. | ||
| - **Animation behavior:** When a new notification arrives, the bell icon has a "ring" animation. | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Possibly more nitpicky, but something along the lines of "When the animation is triggered..." might be more accurate since It will be entirely up to the consumer to trigger the animation - though it most likely would be when a new notification arrives. My only worry is not wanting consumers to think we handle triggering the animation for them, even though our example does show it requires manual logic. |
||
| - **Example:** To illustrate the motion behavior of this animation, we added a [notification badge "With animations" example](/components/notification-badge#with-animation). | ||
|
|
||
| ### React 19 support | ||
|
|
||
| We’ve made significant progress towards React 19 support in PatternFly, which is being tracked in [the React 19 roadmap](https://github.com/patternfly/pf-roadmap/issues/201). Our remaining work involves updating our React dependencies, testing version support, and creating any necessary support resources or documentation. | ||
|
|
||
| ### PatternFly AI | ||
|
|
||
| In the world of PatternFly AI, we've continued our focus on expanding our ChatBot extension. As more Flyers have used ChatBot, we've gained insight into the types of new features that would have the most impact. To make progress on growing ChatBot needs, this release adds *many* new features, including [an inline drawer display mode](https://patternfly-org-pr-4493-site.surge.sh/patternfly-ai/chatbot/overview/demo/#inline-drawer-chatbot), the ability for users to give [message feedback](https://patternfly-org-pr-4493-site.surge.sh/patternfly-ai/chatbot/messages#message-feedback), [support for quick starts](https://patternfly-org-pr-4493-site.surge.sh/patternfly-ai/chatbot/messages#messages-with-quick-start-tiles), additional content types for [messages](/patternfly-ai/chatbot/messages#bot-messages), and much more. | ||
|
|
||
| To see a complete list of new ChatBot features, [view the changelog](https://github.com/patternfly/chatbot/releases/tag/v2.2.0). | ||
|
|
||
| Along with these new features, we've updated our documentation: | ||
| - [The ChatBot design guidelines](/patternfly-ai/chatbot/overview/design-guidelines) have been updated to reflect new features, expand on previous guidance, and add higher-level patterns for ChatBots usage in products. | ||
| - New [ChatBot analytics documentation](/patternfly-ai/chatbot/analytics) is also now available, which provides general guidance on the implementation of analytics tracking. | ||
|
|
||
| ### Notable changes | ||
|
|
||
| Outside of our key initiatives, there are a few notable changes that may require changes to your codebase and tests. | ||
|
|
||
| #### Components | ||
| - Button | ||
| - **Change:** The `aria-disabled` will now only render when `true`, not on elements where it is `false` or `undefined`. | ||
| - **Required update:** Update tests that either: | ||
| - Check for `aria-disabled` to be `false` | ||
| - Match the disabled property | ||
| - Charts | ||
| - **Change:** Errors related to Victory 37.3.4 have been addressed. | ||
| - **Required update:** If you're using PatternFly 5, use [react-charts](https://www.npmjs.com/package/@patternfly/react-charts) v7.4.8 with Victory v37.3.4 or later. | ||
|
|
||
| - Table | ||
| - **Change:** The [column management](/components/table/react-demos#column-management) and [column management with draggable](/components/table/react-demos#column-management-with-draggable) features have been rewritten to replace the use of the deprecated `<DragDrop>` component. | ||
| - **Required update:** Remove the deprecated `<DragDrop>` component by referring to the updated table demos. | ||
|
|
||
| #### Extensions | ||
| - ChatBot | ||
| - **Change:** DOMpurify is no longer a dependency. | ||
| - **Required updates:** Uninstall/remove DOMpurify from your codebases. | ||
| - ChatBot | ||
| - **Change:** `<MessageBar>` is now a [PatternFly `<TextArea>`](/components/forms/text-area), which leads to the following type changes for `<MessageBarProps>`: | ||
| - `onChange`: | ||
| - Before: `(event: React.ChangeEvent<HTMLDivElement>, value: string) => void;` | ||
| - After: `(event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;` | ||
| - `onSendMessage`: | ||
| - Before: `(message: string) => void;` | ||
| - After: `(message: string | number) => void;` | ||
| - **Required change:** Where relevant, update the Typescript types for `<MessageBarProps>`. | ||
| - Quick starts | ||
| - **Change:** The markdown parser has been changed to one that's more actively being maintained. | ||
| - **Required change:** Verify that any custom markdown extensions you use still work properly. This is where bugs are most likely from this change. | ||
| - If you see issues with custom markdown extensions, or any other issues with markdown parsing after this change, please [raise an issue](https://github.com/patternfly/patternfly-quickstarts/issues). | ||
|
|
||
| ### What's next? | ||
|
|
||
| For the Q3 release of PatternFly, we will continue to focus on the initiatives mentioned in this release, fix bugs, and address any new, critical priorities that come up. To stay up to date with our primary focus areas, you can keep track of [the PatternFly Roadmap initiatives board](https://github.com/orgs/patternfly/projects/16/views/23). | ||
|
|
||
| <Divider /> | ||
|
|
||
| <Timestamp date={new Date(2025, 0)}>January 2025</Timestamp> | ||
|
|
||
| ## PatternFly 6.1.1 | ||
|
|
||
|
|
@@ -20,7 +134,7 @@ As a quick follow up to our last release, this update publishes the new data vie | |
|
|
||
| <Divider /> | ||
|
|
||
| <Timestamp>December 2024</Timestamp> | ||
| <Timestamp date={new Date(2024, 11)}>December 2024</Timestamp> | ||
|
|
||
| ## PatternFly 6.1 | ||
|
|
||
|
|
@@ -96,7 +210,7 @@ We've continued to evolve our new ChatBot: | |
|
|
||
| <Divider /> | ||
|
|
||
| <Timestamp>October 2024</Timestamp> | ||
| <Timestamp date={new Date(2024, 9)}>October 2024</Timestamp> | ||
|
|
||
| ## PatternFly 6.0 | ||
| The official release of PatternFly 6 is here! It contains all of the previous features from our alpha and beta releases, but also adds everything described in these release highlights. | ||
|
|
@@ -142,7 +256,7 @@ We made many updates to our [component groups extension](/component-groups/about | |
|
|
||
| Our updated documentation includes: | ||
|
|
||
| | **Category** | **Components** | | ||
| | **Category*- | **Components*- | | ||
| | --- | --- | | ||
| | Content containers | - Details page <br /> - Multi-content card<br /> - Page header (previously named "content header")<br /> - Service card (new!) | | ||
| | Controls | - Bulk select <br /> - Close button <br /> - Responsive actions (new!) | | ||
|
|
@@ -208,7 +322,7 @@ In addition to the previously mentioned documentation updates, we've made change | |
|
|
||
| <Divider /> | ||
|
|
||
| <Timestamp>August 2024</Timestamp> | ||
| <Timestamp date={new Date(2024, 7)}>August 2024</Timestamp> | ||
|
|
||
| ## PatternFly 6 beta | ||
| We’re excited to share the next milestone in our journey to PatternFly 6–our beta release! This beta introduces more improvements and refinement, and contains all major PatternFly 6 features. | ||
|
|
@@ -233,7 +347,7 @@ We made more improvements to our website docs, to ensure that they're accurate a | |
| - [All PatternFly tokens](/tokens/all-patternfly-tokens) | ||
| - [Develop with tokens](/tokens/develop-with-tokens) | ||
| - [Design with tokens](/tokens/design-with-tokens) | ||
| - **Note:** Any @patternfly/react-tokens referencing global variables will need to be updated, since global variables have been replaced with tokens. Following our [token migration instructions](/tokens/develop-with-tokens#migrate-to-tokens) will help you determine the correct token to use. | ||
| - **Note:*- Any @patternfly/react-tokens referencing global variables will need to be updated, since global variables have been replaced with tokens. Following our [token migration instructions](/tokens/develop-with-tokens#migrate-to-tokens) will help you determine the correct token to use. | ||
| - Our design foundations | ||
| - [Colors](/design-foundations/colors) | ||
| - [Icons](/design-foundations/icons) | ||
|
|
@@ -290,7 +404,7 @@ We applied PatternFly 6 styles to the rest of our extensions. All have now been | |
| - Catalog view | ||
| - Quickstarts | ||
|
|
||
| Related design resources can also be found in [our PatternFly 6 Figma kit.](https://www.figma.com/@patternfly) | ||
| Related design resources can also be found in [our PatternFly 6 Figma kit](https://www.figma.com/@patternfly). | ||
|
|
||
| ### Bug fixes | ||
| We fixed bugs that were reported throughout the alpha period including. We: | ||
|
|
@@ -302,7 +416,7 @@ We fixed bugs that were reported throughout the alpha period including. We: | |
|
|
||
| <Divider /> | ||
|
|
||
| <Timestamp>June 2024</Timestamp> | ||
| <Timestamp date={new Date(2024, 5)}>June 2024</Timestamp> | ||
|
|
||
| ## PatternFly 6 alpha | ||
|
|
||
|
|
@@ -316,8 +430,8 @@ All of our components have a new look to match. As you use the alpha website, ta | |
|
|
||
| ### Design tokens | ||
|
|
||
| In order to support PatternFly 6, and any future visual theming capabilities, we have implemented a design token system for PatternFly. For more details and instructions on how to use tokens, you can refer to our new [design token documentation.](/tokens/about-tokens) | ||
| In order to support PatternFly 6, and any future visual theming capabilities, we have implemented a design token system for PatternFly. For more details and instructions on how to use tokens, you can refer to our new [design token documentation](/tokens/about-tokens). | ||
|
|
||
| Our tokens cover both dark and light themes, and make it easier to support both in your product. We also updated our [dark theme handbook](/developer-resources/dark-theme-handbook) to align with our tokens. | ||
|
|
||
| **Note:** The PatternFly 5 design library is not built with tokens. To take advantage of our token system, you must [upgrade your product to PatternFly 6.](/get-started/upgrade) | ||
| **Note:*- The PatternFly 5 design library is not built with tokens. To take advantage of our token system, you must [upgrade your product to PatternFly 6](/get-started/upgrade). | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
version?