OPEN SOURCE
PatternFly component groups grow!
A closer look at the new release 5.1.0
React component groups, an official extension of the PatternFly design system, is a relatively new collection of React UI components built on top of PatternFly, which usually address more specific, complex, and recurring UI needs than the parent library. Since the initial release of component groups at the end of 2023, the extension has undergone dynamic development, and several front-end projects have started to benefit from its qualities.
This March, a new major version 5.1.0 was released. This article will introduce the new components added, other interesting improvements that come with this release, and the plans for further development of this extension. Are you interested? Just read on!
General improvements
Among the myriad changes in the latest release, the first notable improvement is the added support for internationalization. This support helps provide users with a seamless experience, regardless of their locale or language preference.
Another important change empowers users of component groups with greater flexibility in customizing component variants. Previously customization was limited to string names for specifying variants. This update now incorporates the use of enums, which bring a more structured and safe approach to components. This enhancement is particularly notable in the battery, log snippet, and multi content card components. Users can still choose the method that best aligns with their workflow.
Component groups are also becoming a part of the PatternFly Design Kit, which means that any designer designing with PatternFly can now see and use the component groups!
Last but not least — the extension contributors worked hard on enhancing the documentation clarity and accessibility with updated source links and documentation references, ensuring that users can easily navigate and use the components.
New components available
In a collaborative effort between the Red Hat OpenShift team, ConsoleDot Platform, and PatternFly, the multi content card component has been introduced to address requests from numerous projects. This component provides a way to display multiple PatternFly cards within a single layout.
There has been a growing demand for methods of keeping users engaged and informed while waiting for content to load on a webpage. In response, the skeleton table component has been introduced to serve as a loading state for the PatternFly table component, with column names and skeletons for the data being loaded.
Another component introduced is the shortcut grid, which empowers developers to integrate a grid of keyboard shortcuts into their web applications.
Apart from these primary new components, there are more new (and improved) components that cover smaller use cases. These include:
- Log snippet: Facilitates the display of log snippets or code alongside messages
- Close button: Offers a standardized way of closing UI panels
- Warning modal: Updated to include expanded variants and options for checks prior to making potentially risky actions
Future of component groups
Looking ahead, we are already working on our next updates, most of which will be related to a new composable component, called data view. This component will be a step forward in data visualization and manipulation capabilities. Designed to offer developers a composable and highly-customizable solution, the data view component will be able to integrate various data layouts, including a table, cards, or any preferred information presentation format that contains header and footer sections for data manipulation.
Another focus in our ongoing development efforts is to improve the testing strategy of our components. We are prioritizing the implementation of Cypress component and E2E tests, which should enhance the existing unit testing framework. The goal is to keep delivering high-quality and robust components that meet expectations.
In addition, you can expect to see even more new components created by collaboration between Red Hat and external projects. Plus, we’ll continue to improve existing components to keep them up to date with the latest PatternFly standards.
Call to action
Development of the component groups extension remains ongoing to better serve users. To enhance its usability and foster wider adoption, we would love your help! Does your UI project combine multiple PatternFly components to address unique use cases? Do you believe your implementation could be beneficial for other projects? Check out our contribution guide and share your insights with the community.
You can always reach out to us on Slack, or by starting a GitHub discussion.
Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.
