Posted by & filed under PatternFly.

Hi, Flyers! 

As most of you know, PatternFly’s Medium publication was launched at the end of December 2019, and it became our official blog for PatternFly. All new articles since then have solely been published on PatternFly Medium, which is also linked on our Get in touch page. Medium is a great platform for us to connect with a wider audience and share PatternFly with more people.

What about

While is no longer in use, it still contains some valuable content that we’d hate to lose. But we also don’t want you to have to jump between two different blogs to get the information you need.

That’s why we’re moving’s content to PatternFly Medium.

What will the process look like?

The process consists of 4 main steps: 

  1. Audit: We’ll conduct a content audit and review all articles on
  2. Migrate: Members of the PatternFly team will jointly decide which articles we preserve and migrate to PatternFly Medium. We’ll migrate the most relevant and useful articles for Flyers.
  3. Tag: We’ll tag each migrated article so that you can find them in a single click on the PatternFly Medium home page.
  4. Redirect: After the content is moved, we’ll redirect to PatternFly Medium.

Sounds easy, right?

It’s not too complicated, but it will take some time. We’ll keep you in the loop with all updates. In the meantime, feel free to send any questions our way.

How can I get involved with PatternFly Medium?

If you’re a Medium user, you can follow PatternFly right from the home page. If you’re not a Medium user, no worries! You can still visit the publication and read the articles.  

You can also submit our contribution form if you’d like to write an article of your own. The more contributors, the better!

Thank you for your ongoing enthusiasm and support for content. Happy flying :)

Posted by & filed under PatternFly.

Open source goes beyond software. It can also serve as a business’s operating model, where work is grounded in the principles of transparency, collaboration, releasing early and often, meritocracy, and community.

For some designers, designing in the open sounds scary—that’s understandable. Imagine transitioning from having a password-protected portfolio to having your work accessed by anyone through a quick Google search.

But designing with an open source mindset increases a designer’s visibility, influence, and impact. PatternFly is a great example of open design’s benefits. With design and development information out in the open, knowledge is democratized. Solutions are shared. And, above all, community is created.

To truly design the open source way, you need to have the open source mindset every step of the way. Here’s what designing with an open source mindset really means.

Be a shepherd of design 

As a designer, you’re not the sole creator of design. Instead, you’re the guide —or shepherd—of design. In open source communities, good design ideas can come from anywhere. It’s your job as the designer to recognize those ideas when they come up and shepherd them through implementation.

Does this mean you can’t claim sole credit for the design work you do? Absolutely. And that’s a good thing—for your team and for the world. When we share ideas and build on each other’s perspectives, we can produce our best work. Take credit for being the designer, but also give credit to your colleagues for their contributions.

Prove yourself  

You must show value to the teams you work with. This way, you gain their trust and build your reputation as someone who has the product’s greatest interest in mind. In proprietary companies, designers can often rely on company procedure or hierarchy to enforce design direction. In open source communities, the responsibility falls to the individual to build a reputation for themselves in order for their work to gain attention.

Building this reputation takes some time and dedication. Here are some tips for starters:

  • Deeply understand the product and team you work with.
  • Participate actively in the entire creation process.
  • Share your work transparently so that everyone can see the reasoning behind your decisions. (Remember those “show your work” math problems in school? Now you get to put that skill to use.)
  • Graciously receive feedback and respond thoughtfully to what you agree and disagree with.
  • Cultivate open debate in the team and take part in it.

With this kind of behavior, your team has visibility into your work. As a result, they’ll openly engage with you and trust your outcomes.

Document your reasoning

The team you work with needs to trust you as a person and believe in your ideas. When working in an engineering environment driven by logic and practicality, establishing buy-in for your designs isn’t always easy. You’ll need to speak towards the importance and impact of your designs.

Here at Red Hat, our designers often write blogs or document design reasoning in Github as part of their design process. We have to prove to anyone in the community why we are doing what we are doing. Sharing design reasoning in any company, even on internal wikis, can improve your stature as a designer.

Communicate early and often

Open source teams are often remote, with teammates all over the world. This kind of diverse insight and experience is good for design. But keeping everyone connected requires some extra thought and attention. To keep projects healthy, the team needs to communicate regularly with asynchronous technology. Most successful open source projects follow a philosophy of “release early and often.” This philosophy allows everyone collaborating on the software to easily see the direction and make continuous small modifications to the code or approach.

At Red Hat, the designers on our open source team also adopt this same philosophy into their working style. They communicate UX plans on a regular basis with the community. They deliver documents, designs, and prototypes early and often so that small changes can be made to the design or UX approach. When applied to design, this philosophy ensures the entire team is confident you are regularly working towards the common goal. 

Try the open source way

Consider your design process and philosophy. While these changes are required for open source designers joining Red Hat, they may also be valuable in any design organization. Think about how you can use an open source design framework to improve your team’s design impact. Where can the principles of transparency, collaboration, releasing early and often, meritocracy, and community impact your work?

Posted by & filed under PatternFly.

STEM has plenty to boast about: major medical breakthroughs; advances in life-saving technology; business software that pushes us to new heights. The list goes on.


But STEM falls short in a key area: diversity.  


Progress is amplified with fresh perspectives and bright minds from all backgrounds. The proof is in the numbers, too. Diversity plays a huge role in successful business performance. More importantly, celebrating diversity and creating a sense of belonging for people of all backgrounds is the right thing to do. Humanity cannot make strides forward unless everyone has a stake in its development.  


But here’s a sobering statistic: There aren’t many women in STEM, especially science and engineering. These industries are 72% male. On top of that, only 1 in 20 employed scientists and engineers are women of color.  Women should not be shut out of this vibrant industry that’s continually making progress and changing lives. So Red Hat’s User Experience Design (UXD) team set out to connect with young women during MassSTEM week.  


In true PatternFly fashion, we wanted this event to bring communities of people together. With the Private Industry Council (PIC)’s help, we visited English High School to educate, inform, and inspire female students about the world of STEM.   




We had a great time bonding over our favorite school subjects, sharing our college and work experiences, and learning more about the students’ interests and goals. These high school students were a privilege to meet. The classroom was filled with ambitious young women with big dreams of pursuing medicine, engineering, teaching, and more.  



However, when asked what STEM looked like to them, most of the students thought of men in white lab coats. 


They’re not alone, either.  



With so few women in tech, many people don’t picture a woman when they think of a scientist or engineer. Debbie Sterling demonstrated this in her TED talk, which the students viewed for a few minutes before our discussion.   


The good news? We have the power to fix this. 


Take PatternFly, for example. PatternFly thrives on community. As an open source design system, we rely on the input and contributions from a variety of people to truly provide accessible and impactful design on a large scale. 


STEM is no different. People of all backgrounds, ethnicities, genders, etc. are needed in STEM so that we can really make a positive impact. When diverse minds come together to solve big challenges, we can hit milestones that were once deemed impossible. 


So here’s an ask of you: Continue contributing and engaging in the world of open source design. And while you’re at it, encourage others to do the same—especially those who are underrepresented in STEM. There can never be a shortage of ideas.  


With that said, let’s refuse to settle. As catalysts in the world of tech, we must demand equity, diversity, inclusion, and belonging.

Posted by & filed under PatternFly.

PatternFly has introduced the concept of experimental components. Moving forward, new components will be introduced to the community as experimental, allowing us to release new components early and adapt them based on your feedback about the design or implementation. Experimental components are opt-in only because they’re open to breaking changes before becoming fully supported in PatternFly.

Your feedback is essential in order for this component to graduate to the next level and become part of the core package. We will leverage the PatternFly mailing list to announce experimental features and collect your feedback on PatternFly forum posts. There is an Experimental Features category on the forum dedicated to this effort. 

Each forum post will include a link to the experimental component on the PatternFly website. Tell us what you think by liking the forum post if you’re happy with the design and implementation or reply with comments about how the component can improve.

You can access experimental components in patternfly-react by using the experimental.js barrel file. 

import { Badge } from '@patternfly/react-core/dist/esm/experimental';

Experimental components in core (patternfly-next) are not included with the bundled patternfly.css. Instead, they can be imported as separate stylesheets: 

import '@patternfly/patternfly/components/ExperimentalComponent/experimental-component.css';
import '@patternfly/patternfly/components/ExperimentalComponent/experimental-component.scss';

Once your feedback has been collected, we will evaluate it and integrate the necessary changes to enhance the component. We will keep you up-to-date via the forum posts, so weigh in and stay tuned to learn how a component evolves.

Posted by & filed under PatternFly.

PatternFly has introduced two new fonts, Red Hat Text and Red Hat Display. These new fonts improve the performance and legibility at any type size. They are also designed to support more browsers than the current Overpass font. To learn more, check out the Red Hat typography standards.

The new font is available in the 2.18.0 release. It was added in addition to the Overpass font to give teams a flexible migration period, adopting when it’s best suited for their own timelines. Ultimately, the Overpass font will be marked deprecated and removed in a future breaking change release. 

For more information on how to opt-in to the new font, check out our documentation on

Posted by & filed under Content Views, Navigation, PatternFly, UX Research.

The UXD Research team recently conducted a study to explore differences between light and dark visual themes for PatternFly’s navigation component. Previous research on this topic yielded inconclusive results, so the PatternFly team wanted to follow-up on that study to determine if meaningful differences in performance, perception, or preference existed or not between the two themes. 

The test approach

For this study, a mixed methods approach was used in which data collection was conducted through unmoderated and moderated techniques. All data was collected through the Loop11 platform, an online user testing platform. Fifty-six participants performed task scenarios in the unmoderated protocol, while eight participants performed the same tasks in moderated testing. 


Participants were presented with one of four variations of the interface (shown below).

PatternFly interfaces with List (left) and Dashboard (right) views.

Participants were asked to complete five tasks as part of the study. The first four tasks were designed to measure participants performance (i.e. task completion time) and perception (i.e. how readable is this interface?). The fifth task was designed to measure the participant’s preference for dark theme or light theme. 


Following each question, participants were given a chance to explain why they responded the way they did. This method allowed us to gather quantitative and qualitative data to build a complete picture. 

The results 

Data analysis on the quantitative data revealed that there were no statistical differences between light and dark navigation themes in terms of performance or perception. There was, however, a statistically significant difference in preference between the themes. Participants significantly preferred the dark theme more than the light theme and indicated this preference was due to the reduced strain on the eyes and the increased contrast between the navigation bar and the content area. For more details, check out the PatternFly Visual Theme Results PDF

What’s next? 

The PatternFly team has decided to move forward with a dark theme for navigation, as opposed to the light version given the research results. From a visual design perspective, the intent of the light navigation theme was to use dark imagery and backgrounds in the content area of the applications. The heavy dark content required a lighter navigation style to balance it.  As PatternFly has been adopted, we realized that not all the applications and pages have data visualizations that use the dark imagery. For this reason, it made sense to adjust the approach to the dark theme for navigation. 


Development will begin immediately to introduce the dark navigation theme to PatternFly. To ensure applications have adequate time to adopt and migrate, the dark navigation will be added to PatternFly as an opt-in solution. The plan is to deprecate the light navigation at a later date, after adequate time for adoption has passed.

Posted by & filed under PatternFly.

After careful research and consideration, the latest version of PatternFly is introducing a new standard for buttons, recommending left-alignment for button groups in forms, with primary buttons always appearing as the first button in the button group. This approach is being applied across components like form, wizard, and modal, and the updates will be rolled out to the community in the coming weeks.

A form embedded in a page, showing that the form submit buttons are left-aligned with the form, with the primary action first.
Form embedded in a page
A form in a modal, showing that the form submit buttons are left-aligned in the modal footer with the primary action first.
Form in a modal
A form in a wizard, showing that the form submit buttons are left-aligned in the modal footer with the primary action labelled "Next" first.
Form as a wizard

Members of the PatternFly community have questioned this decision for a few different reasons, but most commonly it’s because this alignment isn’t the convention users are most familiar with. So, why is PatternFly challenging designers and developers to move away from a familiar standard? Very simply, it’s not compatible with universal design, and it doesn’t align with our PatternFly principles.

The PatternFly principles ensure that, even as we evolve, we’re always staying true to the original goals we set out for the design system.

By following the principles of modularity, accessibility, and responsive design, we made several key decisions:

  • To maintain consistency, the order and position of form submit buttons shouldn’t change based on context. Alignment should be the same whether we present a form on a page, a form in a modal, or a form in a wizard.
  • To prioritize the user’s primary task, the primary action button should be presented first.
    • This approach reinforces a natural, conversational style where affirmative choices are generally presented first.
    • Accessibility standards require that actions be presented visually to users in the same order they are defined in the DOM. As a result of responsive design, interfaces can be laid out differently depending on screen size, meaning actions could be displayed to users horizontally or vertically. If the first action in a vertical stack of actions should be the primary action, then the first action in a row of actions should also be the primary action.
    • An observation made by a low vision student who participated in a UX design and research workshop confirmed that it would be beneficial to have primary actions presented first. [1]
  • To make it easier for users to complete a form, submit buttons should be presented in the same scan line as the form inputs.
    • This approach benefits users displaying the webpage in full screen mode on a large monitor. Based on previous feedback, we realized a large spatial gap between form content, like input fields, and buttons caused users to miss critical parts of their workflow.
    • This approach also benefits low vision users who use screen magnification devices to view the contents of a web page and rely on related information, like form inputs and form submit buttons, being in close proximity. The straw test is a great way to test the accessibility of a layout for these users.
    • Finally, this approach is consistent with a finding provided by Luke Wroblewski in his book Web Form Design. [2]

If you’re interested in learning more about how the PatternFly principles helped guide this decision, we go into further detail in the following sections.

Modularity and flexibility

Modular design systems enable you to take very isolated interaction patterns and combine them to build complex designs that can support different user tasks. Modularity helps ensure consistency, since isolated patterns shouldn’t change much between different contexts. With this in mind, we felt it critical for PatternFly that form submit buttons remain consistent in order and position as they are moved between various contexts.

When deciding on button placement, we considered every possible context: forms on pages, in wizards, in small modals, in large modals, forms with a single input, forms with numerous inputs. Because considering all possible scenarios—and not just your basic use case—is important when creating a design system.

After reviewing every possible variation, one approach—to align form submit buttons to the left with the primary action appearing first— emerged as the pattern that could be successfully applied to any context with consistency and without concern of creating any pain points for users.

Button placement remains consistent whether a form is placed in a page or a modal.
Button placement remains consistent whether a form is placed in a page or a modal.


Accessibility adds a new level of challenges and forces you to consider all the possible ways that a user can experience a web page. Are users sighted? Are they using magnification? Is the page full screen on a huge monitor, or on a screen the size of a phone? Are they using a keyboard to interact with the form? Are they using a screen reader?

When you start to consider all the ways that a user can interact with a web page, you realize that small things like alignment, proximity, and order can have a huge impact on their experience. Using spatial concepts to reinforce the progression of a workflow aren’t applicable to all users, specifically low vision, no vision, and also mobile users. Low vision users benefit from having the form submit buttons in the same scan line as the form fields. No vision users benefit from having the order of form submit buttons be consistent across any context. As designers, we should be willing to recognize that the spatial concepts we applied in the past to the placement and order of buttons were optimized to the needs of sighted users with good vision. Sometimes being inclusive means letting go of the standards we have been following for so long when we realize they no longer satisfy the needs of all users.

Left aligning the primary action facilitates scanning and ensures that it will come first in the tab order for keyboard users.
Left aligning the primary action facilitates scanning and ensures that it will come first in the tab order for keyboard users.

Responsive design

Standards that exist for desktop applications aren’t always applicable to the design of web applications. Designers of desktop applications have a lot control over the presentation and layout of UI elements, whereas users of web applications access the interface on a variety of devices and screens. Web designers have to consider every possible viewport size. This means the order of elements have to be considered sequentially, where the most important elements come first and least important elements come last. This way, when elements need to be stacked vertically, the most important things are encountered first. This also means that when elements are presented in a row, the most important items (e.g. the Next button) should be presented on the left.

Left aligning the primary action will ensure that it comes first whether buttons are inline or stacked.
Left aligning the primary action will ensure that it comes first whether buttons are inline or stacked.

We hope the research and rationale outlined in this post helps shine some light on the updated approach we’re taking to button alignment on forms. As always, we welcome and encourage feedback from the community. For additional questions or concerns, feel free to reach out to us on the PatternFly forum.


  1. Presenting the primary task first was something noted by one of the low vision students in a user research workshop we had with students at Governor Morehead School in Raleigh. When presented with a card that stated “Previous & Next Page” she stated, “Next should be first because it’s the action I most likely want.”
  2. Luke Wroblewski makes the following statements in his book Web Form Design:
    • In chapter 3, Path to Completion, he provides two examples and states: “One has a clear scan line that starts at the first information point, ends at the primary action, and allows people to take in all the information they need to review quickly. The other has a number of different visual treatments that break up the path to completion into a series of zigzagging eye movements. A single path makes it easier to process the questions a form is asking through a consistent layout.”
    • In chapter 6, Actions, when talking about the style and placement of form submit buttons, he states: “According to the data we collected, the most effective designs of the six we tested all shared a common characteristic: they presented their Submit and Cancel options left-aligned with the input fields and labels above them.”

Posted by & filed under PatternFly Design, UX Research.

A peek into the research being done around the dark or light visual theme for PatternFly 4 navigation

A major goal with PatternFly 4 was to create an updated, modern look and feel with our visual design language. To meet that goal, we revamped every component to provide something that looks great and is flexible enough to be applied across the system.

One of the most obvious differences between the new visual language and previous versions of PatternFly is the direction to proceed with a light versus a dark visual theme for the navigation.

So far, the new light theme has been met with mixed reactions from the PatternFly community, so we leaned on research to help us make an informed decision on the best direction forward. To proceed with the light theme, or adjust to a dark theme?

examples of dark and light navigation color themeLight theme vs. dark theme

Here’s a recap of what’s been done and what’s still to come..

The Study

At Red Hat Summit 2019, we conducted a study to gather both objective and subjective feedback on two visual design variations for PatternFly’s navigation system. The light theme was designed for PatternFly 4, and the dark theme came from a previous version of PatternFly (see image above). In addition to the navigation color, the themes also differed in font, overall spacing, and layout.

During the study, we  gathered 68 survey responses and worked with 6 participants in a moderated research setting. We also worked remotely with 61 Mechanical Turk users from IT domains to reach higher confidence in reporting the results. In total, we had 135 respondents who were primarily Engineers, SysAdmins, and Developers.

We looked at the designs from three different user perspectives: performance, perception, and preference. Participants were asked to complete two first-click tasks and two general tasks within the mock-ups to gather performance data. Then we asked participants to provide feedback on their perception and preferences.

The Data


  • Performance: There were no statistically significant differences between the two variations
  • Perception: There were no statistically significant differences between the two variations when users evaluated each theme individually
  • Preference: Users generally preferred the dark variation when they evaluated the two themes side-by-side


A good number of respondents suggested that the light theme seemed higher quality and they liked the simplicity of it. However, most respondents also stated that the light version appeared “too white/plain and need[ed] more contrast”. They also mentioned that they liked the clear separation of space in the dark variation.


Results showed that the dark variation is generally preferred mostly due to  the higher contrast between different sections of the page. However, respondents suggested that the light theme looked more modern and high quality compared to the dark theme.

Also, while performance data suggested that the light theme resulted in a slightly higher success rate (though not statistically significant), we can’t be confident this result is due to the color of the navigation. We suspect that the bigger font and better spacing in the light theme may have made the text more legible and easier to read, but we can not be sure at this point.

Study Constraints

  • Since the two variations were different in terms of font, spacing and layout, and navigation color, we can’t say which UI factor played a more prominent role in the results, especially when it comes to the legibility of the designs.
  • We utilized a survey as the main method of data collection at the Summit because that seemed to be the most feasible method for that context. But that resulted in presenting design variations in a non-realistic format.
  • The mockups of PF3  that were used in the survey missed a vertical visual pointer on the left side of a category in the navigation bar. We suspect that mistake could have impacted the success rate of a task in the dark variation.
  • Additionally, according to our previous research we suspect the content areas may also affect user preference and perception and requires further investigation.

Future Research

Given the constraints, in the next round of study we’ll:

  • Have consistent font, spacing, and layout across variations to investigate the effect of color more precisely.
  • Use an unmoderated platform that will allow participants to see the designs in their real states.
  • Make sure the test materials are identical and that the only difference is the color theme.
  • Include two different variations of the content area (list view vs. dashboard).

Our goal is to address the following questions in the upcoming follow-up research to help the team to make an informed decision about the color theme:

  • Which color theme results in a better performance?
  • Does the content within the content area affect performance?
  • Do color and content interact to affect performance?
  • Do users prefer one color over the other?

We expect to complete this study and have a summary of the results in the coming weeks. Once we have this, we will post another update sharing the findings and explaining PatternFly’s next steps. Feel free to reach out in the meantime with any questions or comments.

Posted by & filed under PatternFly.

PatternFly 4 version rc.2 is live!

We’ve added a bunch of features and improvements with our latest release. Check out what’s new and changed:

What’s new

Refined and improved charting in React now available on the website
Improved TypeScript support – updated 23 components that were using handcrafted d.ts files to natively written TypeScript

What’s fixed

Updates and fixes to documentation for tables, charts, alerts, about modal, and grid props
– Added support for groups in dropdown, compact wizard nav width, alerts in about modal, nodes in Alert title, and dropping columns in a table

Breaking changes – PatternFly 4 React charts

Due to improvements and updates made to charting, this release includes breaking changes that could impact any products that have adopted the React charting package in PatternFly 4.

In order to help resolve these breaking changes in products quickly, we added detailed information about what’s changed and instructions on how to resolve issues in release notes for charting.

Check out the latest updates on the PatternFly 4 website. For more information, see our GitHub release milestones for React and Core or check out our release notes for React and Core.

If you have feedback or questions, head over to the PatternFly forum. New ideas are always welcome!

Posted by & filed under PatternFly.

PatternFly was built to drive product consistency and unify teams. With its guidelines, standards, and code, PatternFly has made it possible to scale usable and consistent design across the entire company.

We’re excited to announce the official launch of PatternFly 4!

An updated look

We’ve completely revamped the look and feel of the system to provide something modern, clean, and flexible enough to work for all of our products, personas, and use cases.

A fresh website

The new PatternFly 4 website focuses on helping you make the most of the design system, with updated styling, overarching improvements to search and information architecture, and a new approach to design guidelines that help you use the right components and patterns to solve common design challenges.

A completely new PatternFly

PatternFly 4 is built to be accessible, responsive, and modular, so it’s easier to adopt and maintain. It’s also decoupled from Bootstrap, meaning we have full control and are no longer tied to another team’s product decisions or release cycles. And our streamlined focus on the React framework helps ensure consistent design, development, and community support.

What’s been added since beta?

Since the release of the PatternFly 4 beta, we introduced 41 modular, accessible, and responsive components and demos.

We’ve also onboarded several teams, like Red Hat Managed Integration, OpenShift, and Red Hat Insights and cloud services, who have begun successfully developing using PatternFly 4.

We want to extend a thank you to those teams for all of their help and collaboration throughout the beta!

Get connected

To follow along as we continue to improve (or become a contributor, if you’re feeling ambitious), take advantage of GitHub, join us on Slack, and subscribe to our mailing list. You can also ask questions and get support on the PatternFly forum.

Get PatternFly 4 today

Visit the new PatternFly 4 website to take a look at the updated visual design and explore our styles, guidelines, and code samples.

If you’re a PatternFly 3 user interested in migrating to PatternFly 4, be reassured that PatternFly 3 and PatternFly 4 will work side-by-side so you can migrate at your own pace.

Check out our PatternFly 4 migration guide to learn more.