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.
Cleanup
Add base directory by @ddonahue007
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.
Replace separator components with divider by @mattnolting
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.
Make shield styles optional by @mcoker
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.
Cleanup bootstrap SASS variables by @mcoker
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.
Miscellaneous
Wrappers as BEM elements are now used to style icons by @christiemolloy
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.
Split transform variables by @christiemolloy
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.
Nav lists refactor by @mattnolting
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 (default, horizontal or tertiary)rather than the NavList.
Big spacer by @mcoker
We added an 80px spacer to provide a larger option when 64px just wasn’t quite enough.
Remove backdrop blur by @mcoker
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.
Support icons in form helper text by @mcoker
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.
Added icon button modifiers by @christiemolloy
To support proper spacing between text and icons inside of a button, we enabled 2 modifiers (.pf-m-start and .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.
Select BEM naming by @christiemolloy
To support consistency in element naming across library components, we renamed the search box BEM elements in the select and context selector components from menu-input to menu-search.
Allow icon in dropdown component toggle by @mattnolting
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, toggleIndicator.
Read-only form control elements now support success and invalid states by @mcoker
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
Remove deprecated `isValid` prop by @tlabaj
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.
Cleansing completed
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.
