Component changes [2020 major release update]
From new names to new additions, let’s walk through PatternFly’s updated components.
When we first create components, we have no idea just how many use cases they’ll cover or new creative ways they’ll be used. Sometimes components change so much that we rename them. And sometimes, like in the case of label, they just fall flat and need a visual overhaul to be useful again.
We’re on a constant mission to grow and evolve with you. Updating our components is a key part of that process. Let’s start off with the heavy hitters if you’re a PatternFly consumer: our renamed components.
Renamed components
We know no one likes going back to change variable names in their code, but we felt the benefits of simpler and cleaner names outweighed the cost of this change.
Expandable to ExpandableSection by @mcoker
Our components are things, and things are nouns. All of our component names are nouns — except expandable. Expandable is an adjective, and adjectives describe states and variations. Therefore we renamed the expandable component to expandable section to better align with our naming convention.
Card Component Renaming by @mcoker
You can put some pretty complex components in the header of our cards. Our card headers used to be structured rather confusingly:
<Card> <CardHead> <CardHeadMain>Header</CardHeadMain> </CardHead> <CardHeader>Title</CardHeader></Card>
You’ll notice the “Title” is in a CardHeader component… that’s rather confusing! We renamed CardHeader to CardTitle and made the rest of the names fall in line:
<Card> <CardHeader> <CardHeaderMain>Header</CardHeaderMain> </CardHeader> <CardTitle>Title</CardTitle></Card>
DataToolbar to Toolbar by @mcoker
We built the data toolbar component to replace our less functional toolbar component. Once the data toolbar was promoted to an official component, we decommissioned the old toolbar to free up its name. Continuing the toolbar’s legacy, the data toolbar was renamed to toolbar, and the rest is history.
Toolbar to PageHeaderTools by @jschuler
As it turns out, the default implementation for page headers in React was the old toolbar component. Our HTML library had a better solution for this since 2019 called PageHeaderTools. When killing the old toolbar, we replaced it with PageHeaderTools.
Refactored components
We’re sure you’re familiar with procrastination. Historically, we’ve had the perfect excuse to procrastinate refactoring components: we didn’t want to break existing usages or surprise consumers. Unfortunately for this release we couldn’t lean on that excuse anymore…
Label
Refactored label component by @mcoker
We refactored and redesigned the Label component. It now supports multiple color variations, icons, a close button, an alternate “outline” design, and interactivity when used as a link.
Sizing also changed. Instead of a normal and compact size, the label component has a single size that works for all applications.
These changes make the label component not only easier to use, but also easier to differentiate from buttons, which was an issue with the previous design.
Widen chip group labels by @christiemolloy
Sometimes you just need a little bit more space. Previously, our chip label max width truncated chip labels expanding beyond `120px`, making them difficult to read.
We increased the width of chip group labels from `120px` to `160px` to allow more space to accommodate longer label names.
Refactor of form label and control sections by @mcoker
Sometimes simple problems require complex solutions. One of our Flyers just wanted to add a popover to a form’s label text:
Unfortunately, our markup wasn’t quite up to snuff to support this, so we introduced new sections for form component layouts: .pf-c-form__group-label
and .pf-c-form__group-control
.
While we addressed this issue, we cleaned up some unused modifiers, moved padding around, and made the component’s CSS more consistent with others, given the new HTML. We also modified some styling for radios and checkboxes.
We added the requested form field level help feature, too. When clicked, the button triggers a popover with more information to help users complete the form. We added support for all of this to React.
Chip
Chip redesign by @christiemolloy
We redesigned the chip component to be sleeker and less boxy.
Chip group structure by @mcoker
We refactored the chip group for improved accessibility. The new structure makes user customization easier too.
In React, this allowed us to remove the concept of ChipGroupToolbar. Instead you can just add a category to a chip group!
Modal
Modal gets its own title by @mcoker
As part of our effort to have Wizard using Modal under the hood, our modal component now has its own built-in title. Don’t worry, you can still use the title component for your modal title if you’d like. Whither shall you modal?
Left-align modal footer actions by @mcoker
We set the modal footer actions to be left-aligned by default, to align with action placements across PatternFly. This approach improves consistency across the system and makes it easier to scan from top to bottom when forms are used inside a modal.
Tab
Tab redesign by @mattnolting
We redesigned the tabs component. The new tabs design offers both horizontal and vertical variations. It also supports an inset feature that adds padding to the tabs container, repositioning the start and end point of the tabs list. This adds flexibility to the tabs design so it can be used in custom layouts to match the padding of surrounding components and layouts. You can now use icons in tabs.
We also improved scroll button design and UX. The scroll buttons now appear inline with (as opposed to on top of) the tabs list, and both scroll buttons are always visible when overflow content exists on either side.
Here’s another example of our new tabs in action:
Alert
Refactor for better accessibility by @christiemolloy
We redesigned the alert component for improved usability and accessibility. By placing the actions below the content, we don’t have to worry about lengthy action buttons competing for content space. We gave the close action its own unique styling to match the design.
In addition, this refactor is more usable for mobile viewport sizes. The design now extends more cleanly to that size.
Your alerts might take up an extra vertical line of space, but we think it’s worth it!
At the cost of an extra line, we gain a whole lot, including changed colors which you can read about in our 2020 major release update
Navigation
Vertical nav defaults to dark theme by @mattnolting
We made the dark vertical navigation theme the default. Our user research revealed a user preference for the dark themed navigation. If you prefer the light theme, it still works just fine.
Table
Improve table text wrapping by @mattnolting
We made the text wrapping behavior in table cells less aggressive, resulting in improved text wrapping in most table component use cases.
However, some situations may call for aggressive wrapping, so we introduced a modifier class variation for table cells (.pf-m-break-word
) to re-enable aggressive wrapping.
Better table text styling by @mattnolting
We added a set of classes that serve as tools to better control the way table cells display text:
.pf-m-nowrap
keeps text from wrapping to multiple lines.pf-m-truncate
truncates overflowing text with an ellipsis when the text overflows the width of the cell.pf-m-wrap
allows text to wrap to multiple lines if it doesn’t wrap by default.pf-m-fit-content
fits text within the existing column/cell width instead of expanding it.pf-m-break-word
enables aggressive word wrapping, for use with very long strings, such as URLs
In React, the Table now has a TableText component to improve text displays in a grid layout. New decorators (nowrap, truncate, fitContent, breakWord) have also been added.
We’ve made considerable additions and modifications to our components in our 2020 major release. We hope these changes streamline and improve your PatternFly experience! For more materials 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.