Build with us
PatternFly 5 component changes
Find out which React components have changed and how to use them
In our PatternFly 5 update overview article, we mentioned that some of PatternFly’s components would be getting refactored or updated. But exactly which components were affected, and what do you need to do to keep up with the new recommendations?
Refactored components
Some of our key components have been rewritten to make them easier to maintain and use. These components are composable and their APIs are easier to configure, creating more flexibility for you. These include:
Select
The refactored select component allows developers to customize the select toggle and menu, while still managing keyboard and screen reader accessibility. Under the hood, the select component is now reusing more foundational PatternFly components of Menu and MenuToggle.
Dropdown
Similarly to the select component, the refactored dropdown allows for toggle and menu customization, and as always, is in line with accessibility best practices. The dropdown also uses the Menu and MenuToggle components composably under the hood
Wizard
The wizard underwent a few visual changes, and the React implementation was updated to allow for more flexible usage, including the addition of subcomponents.
Table
The updated table component is composable, and the selectable row styling was updated.
But what about the old versions of these components?
While we think we made some great improvements to these components, we don’t blame you if you’re committed to the OG React implementation of the PatternFly components. If you’d like to continue using the legacy versions, don’t worry — the code is still available under the React deprecated tab.
It’s important to note that, while you can continue to use deprecated components, we will no longer continue to update them and cannot ensure that they will continue to be supported in future major versions of PatternFly. Deprecated React implementations of components will be removed in the future, so we encourage you to upgrade to the new components before our next major release.
Deprecated components
We’ve retired some of our components in favor of more composable solutions. With PatternFly 5, browse new implementations for:
- Application launcher may now be built using the dropdown component.
- Options menu can be built using the select component.
- Context selector may now be built using the dropdown component.
- Page headers have been replaced with the masthead component.
If you don’t see exactly what you’re looking for, you can build a custom implementation using the Menu and MenuToggle.
However, deprecated components are still available for now, and they’re accompanied by a deprecated label…
AND demos to show you exactly how to rebuild these components using the new code and recommendations.
Note: To see the full list of components that have been refactored or are now deprecated, check out the release highlights.
Beta components
Along with updated and refactored components, you’ll also notice a few new and exciting beta components. While these new components and features are still in-the-works, we couldn’t help but give you a sneak peak into what we’re working to build.
The beta label gives us a way to share components that are currently under review and may continue to evolve. Learn more about beta components on PatternFly.
As always, we welcome your feedback on PatternFly — especially on our beta features.
Still want to learn more about what changes came with PF5? Head over to the release highlights to learn about more major component updates and enhancements, dark theme support, React 18 support, and more!
Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.
