PatternFly’s major release: Everything you need to know
--
by Leslie Hinson, Titani Labaj, Zack Allen, Michael Coker, Jessie Huff, and Dana Gutride
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.
