Component changes [2020 major release update]

From new names to new additions, let’s walk through PatternFly’s updated components.

Photo by Kaleidico on Unsplash

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.

Goodbye old toolbar component. You won’t be missed.

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.

Our old labels looked a lot like buttons (left).

Our new labels support more functionality and no longer look like buttons (right).

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.

To solve this issue, we just needed to give our chip group labels a few more characters of elbow room!

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:

Adding a popover seemed simple enough.

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.

It may look the same, but that icon is now a clickable button!

Chip

Chip redesign by @christiemolloy

We redesigned the chip component to be sleeker and less boxy.

Old chips were tall and had a grey outline (left). New chips are shorter and have no outline (right).

Chip group structure by @mcoker

We refactored the chip group for improved accessibility. The new structure makes user customization easier too.

Stacking issue caused by negative margin.

Proper markup means proper stacking!

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.

🎵 To the left, the left, the left, the leftttttt… 🎵

Tab

Tab redesign by @mattnolting

Boxy vertical tabs are in!

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:

You can now spam click those scroll buttons with confidence. We also added sub tabs!

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!

Old alerts were rather crowded when the description or actions took longer than a single line (left).

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.

The light theme (left) is being replaced by the dark theme (right).

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.

The impossible text struggle is now solved.

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.