redhat-ux / red-hat-design-system

Red Hat's Design System

Red Hat Design System

Documentation, design tokens, and web components for building uniform experiences with the Red Hat brand.

🎨 For Designers

RHDS provides Adobe XD libraries and design kits to aid in your design work.

💻 For Developers

RHDS provides a collection of ready-made, framework-agnostic web components with Red Hat branding, user experience, accessibility, and style guidelines built in.

<rh-card>
  <h2 slot="heading">Red Hat Branded Web Components</h2>
  <p>So you can focus more on your content or app, and less on implementation details.</p>
  <rh-cta slot="footer">
    <a href="https://ux.redhat.com">Read the Docs</a>
  </rh-cta>
</rh-card>

Contributions are Welcome

Would you like to contribute to the documentation or design specs? Read the site contributing guide.
Would you like to contribute to component development? Read the developer contributing guide.

red-hat-design-system's Issues

Broken link on Grid page

Tabs - image export

All images need to be re-exported.

Component page - Accordion image fix (Tugboat link)

Pull request is below.

#103

Cookie user that hides mobile notice

We have a banner that displays only on mobile. When a user clicks on it, it should hide the notification and should not show within the same visit.

[docs] Anchor linking for headings

Request to create internal anchor links on pages so we can click the heading and capture a direct link to that section:

Block quote

In Style section footnote is interfering with the copy on the image, but images look good.

Card page - Fix padding amount (Tugboat link)

Add more padding above the Content section to match the padding above the Grouping section.

Color - image export

Theme

Everything else is good.

Mobile Navigation Setup

The mobile navigation needs implemented.
@coreyvickery please add navigation specs here.

Page edits | Design/code status page

Design/code status page edits

Cleaning up the table to coincide with the recent v1.7.0 kit release

Component changes

Announcement

Remove banner from Component or pattern name

Avatar

Change Component or pattern name to Default avatar

Block quote

Add a space in between Block and quote

Code block

Add (syntax highlighter) to Component or pattern name
Change Design to Done
Add PFE to Code repo
Change Documentation to In progress

Cookie banner

Change Design to Done
Change Documentation to In progress

Dropdown

Remove link from Component or pattern name

Footer group

Change Component or pattern name to Footer

Jump links

Broken link

Spacers

Change Design to Done
Change Code repo to ?
Change Documentation to this link

Video thumbnail

Broken link

---

Component additions

Unless otherwise noted, Design = Complete, Code repo = Not coded yet, and Documentation = In progress

• Breadcrumb
• Button (Stateful)
• Hero (Design = In progress)
• Horizontal jump links
• Links
• Popover
• Progress steps
• Switch

Page edits | Release notes

Release notes page edits

Design kit v1.7.0

Released on March 15, 2021.

Added

Breadcrumb

• Added light and dark themes

Default hero

• Added light and dark themes

External link icon

• Added light and dark themes

Jump links

• Added a Horizontal component

Link styles

• Added light and dark themes

Primary navigation

• Added a full tray component (all breakpoints)
• Added 2-column and 3-column compact tray components (Desktop only)
• Added a bar component with a Logged in avatar (all breakpoints, currently redhat.com only)

Popover

• Added light and dark themes

Progress steps

• Added Horizontal, Horizontal (compact), and Vertical components

Stateful button

• Added a Clipboard Stateful button in light and dark themes
• Learn more about Stateful buttons

Switch

• Added components with and without labels

Changed

Announcement

• Changed the large components (Desktop and Tablet) to support background images

Modal

• Changed background opacity to align 1:1 with PatternFly

Request to add an issue link for the site

It would be nice to include a direct link for site feedback to the page so it's easy for users to open issues against this repository.

Accordion page - Fix padding amount (Tugboat link)

Add more padding above the Label formatting section to match the padding above the Content area section.

Grid page - Images are wrong sizes (Tugboat link)

The second image looks like it's 50% smaller than it should be. These images are highlighted (blue).

---

This second image, too.

---

This second image as well.

---

And these.

Foundations - Broken link in Feedback section

Side menu - Change the order of links under Foundations

Change the order of links in the side menu under Foundations to Color, Grid, Typography.

[feat] Add jump links to all component/foundation pages

Add the ability to have auto-built jump links across documentation pages.

[add design spec here]

Jump links need to be visible on desktop and transition to collapsed on mobile.

---

from Trello:

Add jump links to component pages on UX.redhat.com for better navigation.

MVP could be one page. Determine which component page is the longest as the best candidate. We have two good candidates: navigation and call to action

Mark dev assignment: Steven or Brian or Marionne

https://docs.google.com/document/d/1hlcV7yPL3Mvv6F6IGpxDriMkTVJqzEJnw-3grO2mMEs/edit#

Sticky card - image export

Style

Footer

Layout

Content

First Best Practice

Accordion - Missing padding above headline

[feat] Secondary Nav

Create Secondary Nav component.

Links

• Design Spec
• Early version of component on "What is OpenShift?"
• Internal documentation
• Internal checklist

Requestor: JVPs team

Update to dart-sass, newer node version

npm ci fails while compiling libsass
I recommend updating to a supported node version (16+) and dart-sass, and while we're at it eleventy ^1.0

We could accomplish this by moving the docs site to the yet-to-be design system repo

Color page - image export

First two images reported as needing re-export:

First image has font issues:

I don't see font issues in second image:

Tabs page - Image fixes (Tugboat link)

This image looks way too small.

Some images on the Tabs page are missing elements.

Pull request below.

#116

Issue templates

Happy to help build out some issue templates if y'all want to brainstorm together on this. I could also help set up some labels and eventually we can build out a project board for prioritizing work.

Grid page - image re-export

Entire XD needs to be re-exported.

User Snap: https://usersnap.com/a/#/your-team-l09l/p/design-system-we-8d038bf0/200

Typography - image export

Behavior:

Everything else is good.

[feat] Pagination Component

Create a Pagination component for both desktop and mobile.

Latest Design

Design Doc

Latest XD mockup

Other Resources

• Old spec
• Previous issue on PFE

[epic][docs] Enhanced Accessibility Information on Component Pages

This is a meta-issue to track updating a11y-related info on component pages. This was instigated by a discussion about the behaviour of search bars in <pfe-nav> that came up in our internal chats. The aim of this issue is to 'catch-up'documentation of existing components.

This issue may be expanded in the future to include non-a11y-related things like live demos / code playgrounds

This issue tries to distinguish between navigation in a "web page" context and navigation in a "web app" context. We may determine that this is out of scope for the time being.

This list is a work-in-progress

Accordion

• Keyboard behaviour
• Live Demo
• WCAG & MDN links

Alert

• Keyboard behaviour
• Live Demo

Notes: should clarify whether toasts trap focus

Announcement

• Keyboard behaviour
• Live Demo
• WCAG & MDN links

Notes: should clarify whether announcements precede 'skip to content' in taborder

Audio Player

• Keyboard behaviour
• Focus behaviour
• Live Demo
• WCAG & MDN links

Avatar

• Keyboard behaviour (n/a)
• Contrast, alt text or presentation role
• Live Demo
• WCAG & MDN links if applicable

Button

• Keyboard behaviour
• Interaction states specification
• Live Demo
• WCAG & MDN links

Notes: we should elaborate on action vs. navigation in SPA context, Perhaps combine "Action vs navigation" and "Button vs call to action" sections of prose, and elaborate on cases like tabbed UI in SPA contexts

Call to Action

• Interaction states specification
• Keyboard behaviour
• Live Demo
• WCAG & MDN links

Card

Disclosure

Filter

Form

Jump links

Link

Link with icon

Notes: should this be collapsed into the Link page?

Modal

Navigation

• Keyboard behaviour
• Clarify: does expanding a hidden control auto focus the control?
• WCAG & MDN links

Progress steps

Promo

Quote

Search bar

Skip navigation

Sticky banner

Sticky card

Tabs

Tooltip

Video thumbnail

Wide monitor layout

Absolutely LOVE the new page! The design is gorgeous and it's very well architected.

On a larger monitor (27-inch / 5120 x 2880), there's a lot of empty space and I wanted to raise the idea that we could use more of the space or align the content such that it doesn't leave such a large white space on the right:

Happy to brainstorm if you like!

Tooltip page - Non-rendering font fix (Tugboat link)

The font in these images isn't rendering correctly on phones.

Pull request below.

#114

Color page - Dark theme image fix (Tugboat link)

Pull request is below.

#110

Component status table broken in some browsers

When some pages are viewed in Safari or other non-Chrome browsers, the Component status table does not appear.

Can this issue somehow be looked into? Should we switch to using hard code?

Sticky banner - image export

Second image under Sizes:

First image under Placement:

All Best Practice images

Behavior:

Tablet:

Mobile:

Mobile portrait:

[feat] Create Theme or Style Switcher

We need the ability to have a switcher cycle between different images/examples within the component pages.
Example in design here: https://xd.adobe.com/view/65bbdd01-22a8-4027-aa59-077544f6ed50-30e8/

Create image for Foundations page for spacing

Now that we have the new Spacing page, we need to represent it on the main Foundations page. To do so, we need and image and text to link from.

Tooltip - image export

Font issues in 2nd image under Best practices and both images under Behavior, image under Small Screens, Interaction states.

Default avatar - image export

Style:

Everything else is good.

Form - image export

Sample component:

Style:

Standard form:

Dynamic form:

Accordion page has a spacing issue

Directly above the "Label formatting" header there is zero space.

Modal - image export

All good but this one.
Mobile:

Design 404 page

Design and build a custom 404 page.

Current 404 page: https://ux.redhat.com/404

Reorder Foundations menu

Move the Spacing link above Typography.

[feat] <rh-tile> Component

Latest Design

Design Doc

Latest XD mockup

Description

Create a Link Tile component.

Old Example

View the link tiles at the bottom of this page as an example.

Disclosure - image export

Theme:

Usage:

Usage vs accordion:

Jump links:

Best practice 2:

Best practice 3:

Collapsing and expanding:

Tab order:

Desktop, tablet, mobile images all need re-export.

Spacing images need re-export.

Get started page - Line break fix (Tugboat link)

Fix weird break after the word email.

Large monitor experience

Absolutely LOVE the new page! The design is gorgeous and it's very well architected and laid out.

On a larger monitor, there's a lot of empty space and I wanted to raise the idea that we could use more of the space or align the content such that it doesn't leave such a large white space on the right:

Happy to brainstorm if you like!

Standardize cross-links on component pages

Rethinking these cross-links at the bottom of each component page, are they valuable enough given our VOC conversation on 4/21? Do we need to standardize one or both of them? For example, could the right cross-link have a link to a contact page or future survey?

Button & CTA - review

The font looks fine but I'd like you to review these pages since changing font to outlines has been known to change padding on buttons.

Wrong table repo content on Accordion page

Component status table on the Accordion page still has Tabs component repo information.

https://ux.redhat.com/components/accordion/

Components page - image re-export

Usersnap:
https://usersnap.com/a/#/your-team-l09l/p/design-system-we-8d038bf0/199
https://usersnap.com/a/#/your-team-l09l/p/design-system-we-8d038bf0/198