PatternFly 2020 roadmap

Leslie Hinson
Published in
4 min readJan 29, 2020


by Leslie Hinson, Jan Wright, Dana Gutride, Jessie Huff, and Michael Celedonia

PatternFly logo

PatternFly has a lot of moving parts, and there is never a lack of things to do. Honestly, it’s easy to get wrapped up in all the demands of the present, but we wanted to press pause to reflect back on what’s been accomplished and look forward to what’s to come.

Reflecting back on 2019

In 2019, the PatternFly team released the first stable and production version of PatternFly 4. This gave development teams confidence to adopt the new system. Over the course of the year, adoption spiked from two known products to over forty known products actively using the newest version of PatternFly.

Comparing the NPM downloads from 2018 to 2019 for PatternFly4-React, you can see a 950% increase from 30k to over 315k. Patternfly4-Core increased 525% from 40k to 250k in the same time frame.

And as a result of the hard work and efforts in 2019, the PatternFly system is more mature than ever with:

  • Over 60 components and counting for building a front-end UI.
  • Over a dozen training modules to teach PatternFly implementation best practices.
  • WCAG 2.1 accessible components and guidance to meet accessibility standards.
  • Documentation to cover all versions of PatternFly, as well as release notes to show exactly what was delivered.
  • A new PatternFly Sketch symbol library to expedite the PatternFly design process.

Looking forward into 2020

Now 2020 is here, and we’re continuing to focus on new components and enhancements. Our main goal is to provide as much value as possible to the community, so we’re refining as well as expanding what PatternFly offers today.

Refining PatternFly


The PatternFly community believes in inclusive product experiences that everyone can use. That’s why accessibility is so important to us—it’s at the forefront of our design and development.

PatternFly aims to provide accessible components that meet level AA in the Web Content Accessibility Guidelines 2.1. The PatternFly Accessibility guide offers guidance and examples to help create accessible products with PatternFly. We are leveraging both automated and manual testing through Axe tooling, integration tests, keyboard and screen reader testing, and more. PatternFly is continually improving our accessibility to provide the best possible experience. This year, our objective is to:

  • Audit all the components and address any regressions.
  • Improve our test coverage.
  • Scale a11y expertise across the community by conducting workshops.

Visual design

As components have been adopted, we’ve noted a number of visual improvements that can be made based on observation and community feedback. These changes aren’t a visual refresh, but they certainly move the components toward visual maturity. Some specifics include making better use of white space and tightening up drop shadows.

The designer and developer experience

PatternFly’s community is predominantly a mix of designers and developers — and we want to make their experience the best it can be. So we’re planning on continuing to improve the tools and resources that are available. Here’s what we have in mind for 2020:

  • Evaluate and revamp documentation on the website.
  • Continue to build out starter projects.
  • Integrate with Red Hat Developer tooling to provide quick starts for PatternFly.
  • Keep the PatternFly Sketch library up to date.

Expanding PatternFly

Website use cases

Since PatternFly started in 2014, the focus has been on web applications use cases. Therefore, design patterns have been specific to task-oriented workflows or views with a lot of data.

But this isn’t always enough for all teams.

So we’ll begin expanding PatternFly with components and documentation that address the requirements of website-specific use cases. The end result? A more robust PatternFly for teams that need a broader solution for apps, SaaS offerings, and/or websites.

Web components

Web components have matured over the last few years, so it’s a good time to revisit the idea of a framework-agnostic solution for PatternFly.

This year, the team is committed to investing time for research and development in the area. The goal is to define a web component architecture that uses the existing PatternFly styles (CSS/HTML) and achieve complete alignment with the PatternFly design system. This engineering investment is future looking, and the PatternFly React components will continue to be the supported component reference architecture for PatternFly interaction.

Stay connected

There’s so much to come, and all these improvements wouldn’t be possible without feedback from the community. We hope you continue to work with us so that we create a better PatternFly together. There are plenty of ways to stay connected:



Leslie Hinson

Creative girl living in an IT world. Project lead @patternfly_des and UX manager @redhatuxd. Find me on Twitter @iamlesliehinson