Release highlights

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.

Your continued participation, support, and feedback will help ensure that PatternFly 6 is as well-tested and bug-free as possible before the full release.

We updated our sizing system to be based on rems, instead of pixels. Rems are relative units that adjust font size based on a webpage's HTML document root element size. For example, if the root size is 10px, a rem size of 1.5 would be 15px. This allows you to scale your font sizes, based on a root size of your choice. PatternFly's default root element size is 16px.

We created a framework for micro animation CSS tokens, which will be used to enable component animations in future minor releases.

We made more improvements to our website docs, to ensure that they're accurate and inline with our new token system. A variety of pages and sections were updated, including:

• All tokens pages:
  • About tokens
  • All PatternFly tokens
  • Develop with 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 will help you determine the correct token to use.
• Our design foundations
  • Colors
  • Icons
  • Spacers
  • Typography

We promoted some of our beta and "next" components to become standard components in PatternFly 6. These will be fully-supported features going forward:

• Buttons with count label
• Editable labels
• Flyout and drilldown menus and navigation
• Menu toggle with status indicator
• Modal title with status indicator
• Inline spinners
• Timestamp component

We updated some of our components to make room for additional features, including:

• Multiple page body elements within the page component.
• Icons in navigation items.

We also made updates to some of our component structure and naming conventions. We:

• Renamed the "text" component to "content."
  • Added <hr> element support to the content component.
• Refactored pagination to use menu toggle rather than options menu.
• Updated the <ToolbarItem> variant prop options:
  • Replaced "chip-group" with "label-group", to align with the deprecation of chip.
  • (Previously) Removed "bulk-select", "overflow-menu", and "search-filter" variants for <ToolbarItem>.
• Restructured the masthead component:
  • Renamed <MastheadBrand> to <MastheadLogo>
  • Renamed <MastheadMain> to <MastheadBrand>
  • Wrapped <MastheadToggle> and <MastheadBrand> in <MastheadMain>
  • Updated our documentation to align with the new structure.
• Restructured the empty state component:
  • Made it less composable, in order to address styling issues.
  • Updated <EmptyStateHeader> and <EmptyStateIcon> to be rendered internally within <EmptyState>. They should now only be customized using props.
  • Updated the content passed to the icon prop on <EmptyState> to be wrapped by <EmptyStateIcon> automatically.
  • Made the titleText prop required.

We applied PatternFly 6 styles to the rest of our extensions. All have now been upgraded to use the PatternFly 6 beta:

• Topology
• Component groups
• React console
• Log viewer
• User feedback
• Catalog view
• Quickstarts

Related design resources can also be found in our PatternFly 6 Figma kit.

We fixed bugs that were reported throughout the alpha period including. We:

• Fixed an issue with displaying card hover/click states in the user feedback extension.
• Updated buttons to support wrappers, which fixes padding issues.
• Updated our documentation to replace terms from deprecated components. For example, replacing "chip" with "label" across React property names.
• Fixed various small accessibility bugs.
• Removed deprecated or unused properties across some of our components.

We're excited to announce that our alpha release of PatternFly 6 is now live. Here are the highlights that you should know about!

As you've probably already noticed on the alpha website: PatternFly 6 has a new look. Our brand new visual theme is more modern and refined, so that you can create UIs that are more seamless and lightweight.

All of our components have a new look to match. As you use the alpha website, take a look at our component examples, demos, and patterns to explore our redesign.

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.

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 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.