PatternFly
Published in

PatternFly

PatternFly’s major release: Everything you need to know

by Leslie Hinson, Titani Labaj, Zack Allen, Michael Coker, Jessie Huff, and Dana Gutride

PatternFly UI graphic

Alright, Flyers! It’s been almost a year since our last major release, and we’re excited to announce a new one. We wanted to share what’s changing and why, along with how you can best plan for this update.

What’s changing and why?

Improved user experience

To clean up PatternFly’s current look and feel, we made design updates like tightening up spacing and reducing our usage of drop shadows across the system. We’re making component-level visual improvements based on user and product team feedback, including the restyling of tabs, navigation, labels, and alerts.

Better developer experience

We’ve refactored our components’ structure, class/element names, and CSS to make it easier, more predictable, and more flexible for you to theme and work with. We also cleaned up outdated code to deliver a leaner and overall more performant package.

For consistency across components, we updated the PatternFly React APIs and the default behaviors to align with design recommendations. As a result, the experience will be more seamless and less confusing.

To help you easily add consistent aria attributes, we cleaned up our aria prop names. We also removed outdated or unnecessary aria, removed problematic default heading levels that can cause accessibility issues, and added additional customization to labeling to increase flexibility in usage.

Better bundle size and performance

We have improvements planned for bundle size and performance. Here are a few things you can expect:

  • Bundle size savings of up to 103Kb, as measured in our seed app
  • Memory leak fixes
  • No more <style> tag injection
  • Support for ES2015 (ES6) browsers

How should I plan for the release?

Sketch Library updates

The design kit has introduced a new [deprecated] label to components that are getting a visual refresh, like the label component, so that designers have time to transition their mock-ups over to the new versions of those components. A lot of structural and cleanup updates are being made as well, which persist throughout the template file, so be sure to look for Library Updates within your Sketch files and re-download the PatternFly template file.

Get a sneak peak of our release notes

We’re also writing our release notes differently for this release, with the idea that we need to be very clear about exactly what code needs to change to adopt this major release. Check out these links for an early look at the information we intend to pass along:

Codemods

Codemods have also been created to aid with migration to this new release. You can view a sample run-through of how to use these below. More detailed instructions will be provided once we release.

OK, but what about the existing versions?

We realize that teams might take some time to migrate to the new release. We plan on continuing to address immediate/blocking bugs if they arise in our current versions (@patternfly/react-core v3.x and @patternfly/patternfly v2 version lines).

Please let us know in any issues posted if these need to be ported back to the older lines. Our hope is to only be porting bugs back for 2–3 milestones, but we welcome feedback about his plan.

Ready, set, release!

Well, not quite yet…you can expect this release in the next coming weeks.

In the meantime, let us know if anything else comes to mind about the changes ahead. We hope you’re as excited as we are to take this next step with PatternFly.

Have a UX story of your own? Send your ideas our way. More writers and fresh perspectives can only make PatternFly’s Medium publication stronger.

--

--

--

Build scalable user experiences in the open | Red Hat’s open source design system

Recommended from Medium

Async/Await and the Ever-Evolving JavaScript Toolbox

Add JaCoCo to Spring Boot Project

Build a RESTful API backend on MongoDB using Node.js and Mongoose

6 JS Object Types You May Not Have Used

How to create a web app with React, Koa, Webpack, and MySQL: Part 1 (Backend)

Week 3 — JavaScript Arrays and GUIs

My Modular Approach to Authentication in Nuxt (Overview)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dana Gutride

Dana Gutride

More from Medium

Medical University of South Carolina (MUSC) Selects Carrus for Staff Training and Development

Launching 🚀🚀 … Resilient Huddle: the Software Security Strategy & Design Workshop for Startups

Collaborative Apps. Simple, inevitable, game changing!

What is CATI Survey: Advantages, Disadvantages, Working & More