Release notes
Changelog
We are continually making changes in order to improve and grow the Red Hat Design System. If you think changes need to be made to a component, foundation, or anything else, please submit a GitHub issue.
Version 2.1.0
Released October 1, 2024
Highlights
| Change | Type | Notes |
|---|---|---|
| Theming: added theming tokens to most elements | New theming tokens allow page-level and container-level colour palettes on patterns and elements. | |
<rh-alert>: added new state colors |
Added info, neutral, and caution. Deprecated note (aliasing info), default (aliasing neutral), and error (aliasing danger). |
|
<rh-accordion>: improved accessibility |
Removed arrow-key keyboard navigation in favor of tab navigation through accordion sets. | |
<rh-badge>: added new state colors |
Added danger, warning, caution, neutral, and info. Deprecated critical (aliasing danger), important (aliasing caution), moderate (aliasing warning), and note (aliasing info). |
|
<rh-button>: added icon-set attribute |
Added icon-set="..." attribute, which corresponds to <rh-icon set="...">. |
|
<rh-card>: added header background theming API |
Using --rh-card-header-background-on-light and --rh-card-header-background-on-dark CSS custom props allows for theming the card header's background. |
|
<rh-code-block>: added syntax highlighting |
Code blocks now have optional Red Hat color-themed syntax highlighting via client side or server side (prerendered prismjs code-blocks). | |
<rh-table>: improved responsive layout API |
Added auto-generated table cell headings for responsive layout on small screens. | |
<rh-tag>: added new tag colors |
Added red-orange, yellow, and teal colors. Deprecated cyan, aliasing it to teal. |
|
<rh-tag>: added destaurated variant |
Added variant="desaturated" to reduce visual prominence or to better fit a specific theme or visual style. |
|
<rh-tag>: added size attribute |
Added size="compact" for areas where space is limited. |
|
<rh-tag>: added optional href attribute |
Adding href attribute to <rh-tag> removes the need for slotting an anchor element (<a>) on linked tags. |
|
<rh-tile>: added private and external link variants |
Using link="private" or link="external" indicates whether the link is private or external and changes the tile icon from an arrow to a padlock or external link icons respectively. |
|
<rh-skip-link>: added optional href attribute |
Adding href attribute to <rh-skip-link> removes the need for slotting an anchor element (<a>). |
|
<rh-audio-player>: added mini playback control |
Mini layout now has playback control. | |
<rh-navigation-secondary>: improved accessibility |
Removed arrow-key keyboard navigation in favor of tab navigation through navigation items and added accessible-label attribute to explicitly label landmark. |
|
<rh-subnav>: improved accessibility |
Removed arrow-key keyboard navigation in favor of tab navigation through navigation items and added accessible-label attribute to explicitly label landmark. |
|
<rh-table>: added container query support |
Tables now adjust to the size of their containing element, not the viewport size. | |
<rh-tabs>: added container query support |
Tabs now adjust to the size of their containing element, not the viewport size. | |
<rh-tabs>: added advanced layout support |
Tabs can now participate in advanced layouts, like display: subgrid. |
Version 2.0.0
Released August 27, 2024
Upgrading?
If you're upgrading to version 2.0, read our changelog for upgrade instructions.
Highlights
| Change | Type | Notes |
|---|---|---|
<rh-accordion> accessibility improvements |
Removed the heading-tag and heading-text attributes from the rh-accordion-header element to improve accessibility. |
|
<rh-accordion> API changes |
Removed the unused icon part (and attribute) and the (previously undocumented) container part from <rh-accordion-header>. Removed unused bordered attribute. |
|
<rh-footer> API changes |
Removed deprecated <rh-global-footer> element and deprecated global slot. Use <rh-footer-universal> element and universal slot. |
|
<rh-cta> API changes |
Removed read-only cta property; use data-analytics attributes instead. |
|
<rh-tabs> JavaScript API changes |
Removed deprectated RhTabs.isTab() and RhTabs.isPanel() static class methods. |
|
<rh-tabs> HTML/CSS API changes |
Removed deprectated theme attribute for the tabs and panels; use the --rh-tabs-active-border-color CSS property directly. |
|
<rh-dialog> API changes |
Removed deprecated --rh-modal-video-aspect-ratio CSS custom property. |
|
<rh-footer> API changes |
Removed deprecated CSS custom properties. | |
<rh-table> API changes |
Removed deprecated CSS custom properties. | |
<rh-spinner> API changes |
Removed deprecated color-palette attribute. |
|
<rh-cta> API changes |
Removed previously-deprecated color-palette attribute. |
|
<rh-alert> API changes |
Removed deprecated toast boolean attribute. |
|
<rh-navigation-secondary> API changes |
Removed deprecated alias <rh-secondary-nav>. |
|
<rh-tabs> API changes |
Removed box and vertical attributes from <rh-tab>; set them on <rh-tabs> instead. |
|
| Changed RHDS entrypoint | Removed the rhds.min.js entrypoint and replaced it with a module that reexports all our element modules. |
|
Added <rh-icon> |
Icons represents general concepts and can support text as a decorative element. The <rh-icon> element allows experience and content authors to add Red Hat icons of varying dimensions in the same area without shifting surrounding content. |
|
Added <rh-switch> |
A switch toggles the state of a setting (between on and off). Switches and checkboxes can often be used interchangeably, but the switch provides a more explicit, visible representation on a setting. | |
Added <rh-health-index> |
Health index grades the health or security level of something. | |
Added <rh-video-embed> |
A video embed is a graphical preview of a video overlayed with a play button. When clicked, the YouTube video will begin playing. | |
Added <rh-breadcrumb> |
A breadcrumb navigation is a secondary navigation element consisting of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. | |
Added promo variant to <rh-card> |
The promo card variant allows users to easily display text and optionally an image side by side. | |
Added open variant and small size to <rh-pagination> |
Users can now further customize pagination by choosing which variant and size are most appropriate for their applications. | |
Added static toast method to <rh-alert> |
The toast method allows for toast-like alert messages. |
|
Added dark color palette to <rh-pagination> |
Pagination now responds to themeable containers like <rh-surface>. |
|
Added light DOM shim for <rh-cta> |
Added rh-cta-lightdom-shim.css as an optional file to help reduce layout shift before element is defined, where declarative shadow DOM is not an option. |
|
Added <rh-card> heading custom properties |
User can now cumstomize CSS custom properties for card headings. | |
Added href attribute to <rh-cta> |
Users can now set the href directly on <rh-cta> rather than slotting an anchor tag. |
|
Added icon-set attribute to <rh-cta> |
Users can now choose an icon-set in their call-to-action. |
|
Fix <rh-tile-group> grid layout |
Corrected application of grid layout to slotted elements. | |
Updated <rh-cta> focus states |
Changed focus states to mimic hover states and an additional outline. |
Version 1.4.0
Released April 22, 2024
Highlights
| Change | Type | Notes |
|---|---|---|
Added <rh-site-status> |
Website status communicates the operational status of a website or domain using a status icon and link. It is usually located in the Footer component. | |
Added <rh-back-to-top> |
Back to top component is a fragment link that allows users to quickly navigate to the top of a lengthy content. | |
Added <rh-skip-link> |
A skip link is used to skip repetitive content on a page. It is hidden by default and can be activated by hitting the Tab key after loading/refreshing a page. | |
Updated <rh-code-block> |
Added line numbers option, "Show more" toggle, copy and wrap actions, to <rh-code-block> |
|
Updated <rh-menu> |
Improved focus accessibility for keyboard navigation users on Firefox. | |
Updated <rh-button> |
Improved focus accessibility on Firefox. | |
Updated <rh-accordion> |
Added an accents slot with placement options as inline and bottom. | |
Updated <rh-alert> |
Make sure alerts always have to correct (lightest) color palette. | |
Updated <rh-tabs> |
Allow tabs with long text content to fit into different-sized containers. | |
| Updated PatternFly Elements tooling | Patch update to dependencies, including Lit version 3. |
Version 1.3.0
Released January 11, 2024
Highlights
| Change | Type | Notes |
|---|---|---|
Added <rh-surface> |
a content container that provides accessible background and font color theming for its child elements. | |
Updated to RH Tokens 2.0 |
Uses RHDS Tokens version 2.0. See v1.3 release notes for important info regarding this update. | |
Updated <rh-tabs-panel> |
Tab Panels can now have their margin and padding overridden. | |
Updated <rh-pagination> |
Added numeric CSS shadow part. |
|
Added accessible-label to <rh-tile> |
Tile's form control labels can now be customized. | |
Fixed <rh-tile> radio and checkboxes |
Radio and checkbox tiles now submit their values in <form> elements. |
Version 1.2.0
Released October 16, 2023
Highlights
| Change | Type | Notes |
|---|---|---|
Added <rh-table> |
A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data. | |
Added <rh-tile> |
A tile is a flexible layout with a clickable and contained surface. | |
Added <rh-timestamp> |
Provides consistent formats for displaying date and time values. | |
Added <rh-navigation-secondary> current page indicator support |
Updated support for a current page indicator using aria-current="page". |
|
Fixed <rh-card> header slot |
Card's header slot now displays items vertically instead of stacking, allowing for more than one item to display in the header. | |
Improved keyboard navigation on <rh-navigation-secondary> |
Secondary Navigation now has improved keyboard navigation. | |
Fixed <rh-cta> brick variant |
Brick variants of calls to action (CTAs) are now full width. |
Version 1.1.0
Released July 5, 2023
Highlights
| Change | Type | Notes |
|---|---|---|
Added <rh-card> |
Card creates a component with a header, body, and footer. The header and footer are optional. | |
Added <rh-audio-player> |
Audio-player creates a custom UI for audio files. | |
Added <rh-code-block> |
A container for a block of code. May be composed into a toolbar or contain copy buttons or other interactive components. | |
Added new CSS custom properties for <rh-tooltip> |
New CSS custom properties, like --rh-tooltip-arrow-size, --rh-tooltip-content-background-color, and more! |
|
Added outline variant for <rh-tag> |
Now you can use variant="outline". |
Version 1.0.0
Released April 3, 2023
Highlights
| Change | Type | Notes |
|---|---|---|
Added <rh-cta> |
A Call to Action is a styled link that directs a user to other pages or sometimes displays hidden content. | |
Added <rh-secondary-nav> |
A non-primary navigation for products and subcategory pages. | |
Added <rh-global-footer> |
A standalone global footer component. | |
Renamed <rh-global-footer> to <rh-footer-universal> |
Renamed the global slot to universal. | |
Renamed <rh-secondary-nav> to <rh-navigation-secondary> |
Renamed the component and all sub components to <rh-navigation-secondary-*>. |
|
Added <rh-spinner> |
Spinner consists of an animated circle and sometimes a message, and it indicates that a section is loading. | |
Added <rh-button> |
Button is a form-associated custom element. Buttons allow users to perform an action when triggered. | |
Added <rh-tag> |
A tag is an inline-block element component that provides a distinct visual style for metadata in a UI. | |
Added <rh-blockquote> |
Displays a quote with author's name and title. | |
Added <rh-subnav> |
The subnav component is used when an alternate navigation structure is needed to provide additional navigation on a site that does not need the product branding or structural depth that rh-secondary-nav provides. |
|
Added <rh-tabs> |
A tab set of layered content, including tab widgets and their associated tab panel. | |
Added <rh-accordion> |
Accordion displays multiple, related disclosure widgets. | |
Added <rh-alert> |
An alert displays auxiliary information on a website. An alert can have one of several states of severity. | |
Added <rh-avatar> |
An Avatar is a placeholder graphic for a photo or an image that is placed to the left or on top of text. | |
Added <rh-pagination> |
Pagination is a web component for navigating paginated content. | |
Added <rh-stat> |
An element which can be used to display statistics inside of an app. | |
Added <rh-badge> |
A badge is used to annotate other information with numerical content. | |
Added <rh-tooltip> |
A tooltip displays floating content next to a portion of inline content. | |
Added <rh-footer> |
A universal footer component. |
Older versions
For release notes on older versions, please view our release notes on GitHub.
Roadmap
For an up-to-date outline of what we're working on and what we're planning to do in the Red Hat Design System, visit our roadmap.
