Major release update: PatternFly 4, June 2020

Zack Allen
Jun 22, 2020 · 2 min read
Partially opened laptop with multiple colors emerging from the screen
Photo by Tianyi Ma on Unsplash
PatternFly’s branded divider, our logo centered between two lighter lines.

Hey, Flyers! As you might know, PatternFly has gone through some major changes. We’ve been busy squashing bugs and packing new features for the past 3 months, but our upgrade guides don’t quite cover everything we’ve improved or our reasons for changes in the first place. So we decided to create a series of articles that walk through it all.

Here’s a recap of the major changes. Keep an eye on this page as we release articles to cover each change in more detail.

  • Global changes: We’ve made global changes to our color palette, default font, and React packages. Components’ CSS is now mobile-first for a less cramped experience on smaller viewports.
  • Components: We’ve made numerous changes to our components, including redesigning the chip, alert, and tab components.
  • Modifiers, spacers, and naming changes: We’ve taken the chance to clean up CSS variables and BEM elements in Core as well as renamed and cleaned up props in React.

We hope this series not only better informs you of what changes are coming your way, but also gives you insight into our design and implementation processes. Enjoy!

PatternFly’s branded divider, our logo centered between two lighter lines.
PatternFly’s branded divider, our logo centered between two lighter lines.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.

PatternFly

A place where UX thrives