Release notes
On this page
On this page
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 3.0.0
Released April 7, 2025
Upgrading?
If you're upgrading to version 3.0, read our v3.0 changelog for upgrade instructions.
Highlights
| Change | Type | Notes |
|---|---|---|
| 🌓 Color schemes: added built-in support for user color scheme preferences (aka "dark mode") | Color-palette and theming integrate into device color schemes, or can be overridden on a per-page or per-element basis. |
|
<rh-dialog>: Dialog's overlay CSS shadow part has been removed |
With the migration to HTML's native dialog element, <rh-dialog> now uses its ::backdrop pseudo-element. For customization, please refer to our theming documentation |
|
<rh-accordion>: Accordion panel always uses its parent's color scheme |
Users can no longer override an accordion panel's color-palette |
|
<rh-accordion>: removed unused bordered attribute |
Removed unused bordered attribute, which has had no effect since 2.0 |
|
<rh-tabs>: removed border color token |
Removed --rh-tabs-border-color and replaced with --rh-color-border-subtle token. |
|
@rhds/tokens: bumps version to 3.0 |
See the design tokens' release notes for changes. | |
@patternfly/pfe-core: SSR support |
Server-side Rendering (SSR) support through SSR hints, connectedCallback() and context protocol in SSR scenarios. For more information, read our PatternFly Elements Core v5 release notes |
|
✨ Added <rh-navigation-primary> |
The Primary navigation element ensures a consistent user experience across our website system. | |
✨ Added <rh-jump-links> |
Jump links is a navigation list of links enhanced with Red Hat branded design and a scroll spy mechanism. | |
✨ Added <rh-chip> |
Chip creates a component that can be used in place of a checkbox. | |
✨ Added <rh-disclosure> |
A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible). | |
✨ Added <rh-announcement> |
<rh-announcement> is a short banner that conveys an important message, such as promoting an event or advertising an organizational or product announcement. |
|
<rh-alert>: improved toast API |
Added actions and persistent: true options for toasts |
|
<rh-footer>: social link element can now take an href attribute |
While a slotted link will still work, the <rh-footer-social-link> elements can now have an href attribute instead. |
|
<rh-accordion>: fixed expanded and expanded-index attributes |
Accordion's expanded and expanded-index attributes now work as expected. |
|
<rh-button>: corrected play button's icon colors |
Adjusted the icon colors of the play button variant. |
|
<rh-blockquote>: fixed center alignment |
Fixed align="center" alignment and font size. |
|
<rh-card>: changed the header slot margin |
Changed Card's header slot's top margin from --rh-space-lg to --rh-space-xl. |
|
<rh-card>: layout improvements |
Corrected margins on small screens | |
<rh-dialog>: added dark color scheme support |
The Dialog element now supports dark mode. | |
<rh-tile>: corrected border colors |
Corrected border colors on Tile. | |
<rh-tile>: layout improvements |
Improved layout when footer slot is empty. | |
<rh-tile>: fix link bug |
Fix a bug where a Tile's link stretches beyond the bounds of the element when JavaScript doesn't load. | |
<rh-pagination>: dark color scheme improvements |
Improved dark mode for the numeric paginator control. | |
<rh-pagination>: layout improvements |
Improved layouts for non-left-to-right languages. | |
<rh-pagination>: removed background from open variant links |
The open pagination variant no longer has a background color behind its links |
|
<rh-auto-player>: layout improvements |
Fixed right-to-left layout. | |
<rh-health-index>: fixed z-index stacking |
Prevents graphical elements from escaping stacking context. | |
<rh-health-index>: corrected colors |
Corrected <rh-health-index> colors. |
|
<rh-navigation-secondary>: removed underlines from links |
Removed underlines from links from Secondary Navigation. | |
<rh-navigation-secondary>: layout improvements |
Improved visual rendering when scrollbars are turned on by the user. | |
<rh-back-to-top>: removed console errors and warnings |
Removed user-facing errors and warning from missing attributes/values from the console. | |
<rh-dialog>: aligned private, undocumented CSS variable names |
Changed several undocumented CSS variable names to align with privacy conventions, like --offset to --_offset, etc. |
|
<rh-subnav>: fixed overflow scrolling |
Restored horizontal overflow scrolling on <rh-subnav>. |
|
<rh-subnav>: fixed focus styles |
Correct the focus state styles on <rh-subnav>. |
|
<rh-subnav>: removed background color |
Removed Subnav's background color. | |
<rh-site-status>: correct icon colors |
Fixed icons colors in Site Status. | |
<rh-table>: removed background color |
Use an <rh-surface> element or other themable container element to set a background color. |
|
<rh-tabs>: removed background from tab panels |
Removed tab panel backgrounds and correct colors. | |
Removed instances of --rh-color-surface-dark-alt across several elements |
Instead of --rh-color-surface-dark-alt, use --rh-color-surface-dark and surface colors will be automatically darkened where necessary. |
|
| Reduced JavaScript payload across several elements | Improved performance of several elements, like <rh-accordion>, <rh-pagination>, <rh-cta>, etc. |
|
Color-palette attributes no longer depend on JavaScript |
Elements with color-palette attributes no longer depend on JavaScript to set the background color of children. See theming docs for more information. |
Patches from version 2.1.2
| Change | Type | Notes |
|---|---|---|
<rh-tooltip>: accessibility improvements |
Make tooltip content available to assistive technology. | |
<rh-tile>: layout improvements |
Fixed layout of compact link tiles with icons. | |
<rh-avatar>: layout improvements |
Corrected small viewport margin for plain variant avatars |
|
<rh-button>: accessibility improvements |
Improved accessibility by allowing focus when disabled. | |
<rh-cta>: accessibility improvements |
Improved accessibility by correcting active and focus styles. | |
<rh-cta>: fixed icon bug in Safari |
Workaround for Safari which sometimes double-renders icons. | |
<rh-icon>: fixed icon bug in Safari |
Workaround for Safari which sometimes double-renders icons. | |
<rh-code-block>: improve copy and word wrap features |
Enables copy and word wrap action for prerendered content. | |
<rh-accordion>: fix hover colors |
Restore missing hover colors. | |
<rh-accordion>: fixed header font |
Corrected accordion header text font weight. | |
<rh-footer>: fixed loading failsafe for more graceful degradation |
Shows content after 5 seconds if JavaScript fails. | |
@rhds/tokens: Use non-localized font stacks |
See @rhds/tokens v2.1.1 release notes. |
|
@rhds/tokens: bump version to 2.1.1 |
See @rhds/tokens v2.1.1 release notes. |
|
| Removed all caps in heading | No longer force headings to be in all caps on various elements, like <rh-tile>. |
Patches from version 2.1.1
| Change | Type | Notes |
|---|---|---|
| Color Context: SSR support | Prevent errors in certain Server-side Rendered (SSR) scenarios. | |
<rh-alert>: layout improvements |
Corrected typography and layouts. | |
<rh-code-block>: code highlighting improvements |
Ensure that syntax colors and styles are applied when the element upgrades. | |
<rh-tabs>: SSR fix |
Corrects active tab styles in SSR scenarios | |
<rh-navigation-secondary>: dark color scheme fix |
Corrected style regression in dark color palettes. | |
<rh-surface>: fixed themed text color |
Corrected themed text color. | |
<rh-alert>: corrected heading colors |
Change heading color for all states of alert to make them all the same. | |
<rh-table>: SSR support |
Improved SSR support. | |
<rh-cta>: SSR fix |
Fix some errors when hydrating in SSR scenarios. |
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 color 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 desaturated 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 v2.0 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 customize 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.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
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.
