Cleanup and miscellaneous changes [2020 major release update]
By Zack Allen, Michael Coker, Titani Labej, and Michael Celedonia
Things get dirty. It happens. That’s why we’ve cleaned up PatternFly just in time for the summer. And trust us — PatternFly cleans up nicely.
We’ve scrubbed PatternFly clean, inside and out. CSS and BEM elements in Core are neater, and props in React have been polished and renamed. PatternFly’s updates are looking spiffy, and we’re excited to share them with you.
Let’s pop the hood open and take a look at what we’ve cleaned up to really make this update shine.
We reorganized PatternFly CSS/SCSS by moving our SCSS partials to a “base” directory.
We know they weren’t easy to find when they were combined with our consumables stylesheets at the root of the project. That’s why only the consumable stylesheets (patternfly.css, patternfly-no-reset.css, etc.) are at the root now. Relocating them makes our CSS easier to understand and work with.
For a cleaner, leaner, and more consistent look, all of the individual “separator” elements have been replaced by our divider components. This makes the package easier to maintain and enhance.
A base set of styles referred to as “shield” CSS used to help application styling when using both PatternFly 3 and PatternFly 4 together. As PatternFly evolved, the CSS became difficult to maintain. There was no way to opt-out of this CSS, so applications not using PF3 and PF4 together were getting these styles and any problems they introduced. We removed this CSS from the default build of PatternFly CSS and made it an opt-in for any users who might want it.
We removed a mostly neglected subset of Bootstrap SCSS variable overrides from the default build of PatternFly CSS. These styles were introduced when PatternFly 4 was created and were mostly untouched since we do not officially support a PatternFly theming layer for Bootstrap. These style overrides are now available as an opt-in for applications that rely upon them.
To better support styling and positioning of icons in our components, we introduced a wrapper for all icons used across the component library. This enables us to style the wrapper for spacing, alignment, transforms, etc changes, instead of having to style the icon directly, which is particularly useful considering react and core use different icon formats.
We rewrote transform function variables so that the variable contains the value passed to the function. Previously, the variable may have included the entire function or list of functions used in a transform.This makes for easier customization, and the variables will work better with an upcoming change in browsers where individual transform functions can be declared as CSS properties.
We replaced the lists classes inside navigation (
.pf-c-nav__simple-list, .pf-c-nav__horizontal-list and .pf-c-nav__tertiary-list) with a single list class (
.pf-c-nav__list). The list styles now adapt automatically based on where they’re used within the nav component, making the nav component easier to construct.
In React, The Nav component now has the variant prop (
tertiary)rather than the NavList.
We added an 80px spacer to provide a larger option when 64px just wasn’t quite enough.
We removed the “blur” effect from the backdrop component. Now, there is just a dark overlay, so content behind the backdrop can be read if needed. There were also performance issues and bugs with the CSS property that enabled the blur, so any pages using the backdrop component are now performant, too.
We added support for users to specify an icon to be displayed inline with a form element’s helper text.
In React, an Icon can now be placed in the Form label. This gives flexibility to add a popover to the Icon. An icon can be added to the Form Helper text as well.
To support proper spacing between text and icons inside of a button, we enabled 2 modifiers (
.pf-m-end) that can be used on the icon element to achieve proper spacing.
In React, an icon can be placed in any variation of the Button. In addition, an icon positioned before or after the Button text now.
To support consistency in element naming across library components, we renamed the search box BEM elements in the select and context selector components from
You can now add an image or icon to the dropdown component toggle. Primarily, you can use this feature in an application’s masthead, where avatars appear in the user menu dropdown.
Along with this change, we introduced the ability to designate a dropdown item as a “text” item, styled to indicate that the item contains only informational text instead of interactive content.
In React, the Dropdown now allows for an image being added to the toggle. To make this change, we renamed the
iconComponent prop in the
DropdownToggle to a more descriptive name,
To provide more flexibility in the way form control elements are used, success and invalid states are now supported on read-only form control elements
A new success state was added. In order to not have multiple props that control default, success, or invalid state, a new prop “validated” was added. The old “isValid” prop did not give us the option of adding the success state and implied a boolean value which is now a variant.
We hope that cleaning up has created a better experience for you. Now that you’ve seen our sparkle, it’s time to take the new and improved PatternFly for a ride!
We didn’t just clean — we made a lot of other changes, too. For more information on our 2020 major release, check out our major release update.
Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.