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.

Changelog

Version 2.1.0

Released October 1, 2024

Highlights

Change	Type	Notes
Theming: added theming tokens to most elements	Minor	New theming tokens allow page-level and container-level colour palettes on patterns and elements.
<rh-alert>: added new state colors	Minor	Added info, neutral, and caution. Deprecated note (aliasing info), default (aliasing neutral), and error (aliasing danger).
<rh-accordion>: improved accessibility	Minor	Removed arrow-key keyboard navigation in favor of tab navigation through accordion sets.
<rh-badge>: added new state colors	Minor	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	Minor	Added icon-set="..." attribute, which corresponds to <rh-icon set="...">.
<rh-card>: added header background theming API	Minor	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	Minor	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	Minor	Added auto-generated table cell headings for responsive layout on small screens.
<rh-tag>: added new tag colors	Minor	Added red-orange, yellow, and teal colors. Deprecated cyan, aliasing it to teal.
<rh-tag>: added destaurated variant	Minor	Added variant="desaturated" to reduce visual prominence or to better fit a specific theme or visual style.
<rh-tag>: added size attribute	Minor	Added size="compact" for areas where space is limited.
<rh-tag>: added optional href attribute	Minor	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	Minor	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	Minor	Adding href attribute to <rh-skip-link> removes the need for slotting an anchor element (<a>).
<rh-audio-player>: added mini playback control	Patch	Mini layout now has playback control.
<rh-navigation-secondary>: improved accessibility	Patch	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	Patch	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	Patch	Tables now adjust to the size of their containing element, not the viewport size.
<rh-tabs>: added container query support	Patch	Tabs now adjust to the size of their containing element, not the viewport size.
<rh-tabs>: added advanced layout support	Patch	Tabs can now participate in advanced layouts, like display: subgrid.

View all version 2.1 release notes

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	Major	Removed the heading-tag and heading-text attributes from the rh-accordion-header element to improve accessibility.
<rh-accordion> API changes	Major	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	Major	Removed deprecated <rh-global-footer> element and deprecated global slot. Use <rh-footer-universal> element and universal slot.
<rh-cta> API changes	Major	Removed read-only cta property; use data-analytics attributes instead.
<rh-tabs> JavaScript API changes	Major	Removed deprectated RhTabs.isTab() and RhTabs.isPanel() static class methods.
<rh-tabs> HTML/CSS API changes	Major	Removed deprectated theme attribute for the tabs and panels; use the --rh-tabs-active-border-color CSS property directly.
<rh-dialog> API changes	Major	Removed deprecated --rh-modal-video-aspect-ratio CSS custom property.
<rh-footer> API changes	Major	Removed deprecated CSS custom properties.
<rh-table> API changes	Major	Removed deprecated CSS custom properties.
<rh-spinner> API changes	Major	Removed deprecated color-palette attribute.
<rh-cta> API changes	Major	Removed previously-deprecated color-palette attribute.
<rh-alert> API changes	Major	Removed deprecated toast boolean attribute.
<rh-navigation-secondary> API changes	Major	Removed deprecated alias <rh-secondary-nav>.
<rh-tabs> API changes	Major	Removed box and vertical attributes from <rh-tab>; set them on <rh-tabs> instead.
Changed RHDS entrypoint	Major	Removed the rhds.min.js entrypoint and replaced it with a module that reexports all our element modules.
Added <rh-icon>	Minor	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>	Minor	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>	Minor	Health index grades the health or security level of something.
Added <rh-video-embed>	Minor	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>	Minor	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>	Minor	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>	Minor	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>	Minor	The toast method allows for toast-like alert messages.
Added dark color palette to <rh-pagination>	Minor	Pagination now responds to themeable containers like <rh-surface>.
Added light DOM shim for <rh-cta>	Minor	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	Minor	User can now cumstomize CSS custom properties for card headings.
Added href attribute to <rh-cta>	Minor	Users can now set the href directly on <rh-cta> rather than slotting an anchor tag.
Added icon-set attribute to <rh-cta>	Minor	Users can now choose an icon-set in their call-to-action.
Fix <rh-tile-group> grid layout	Patch	Corrected application of grid layout to slotted elements.
Updated <rh-cta> focus states	Patch	Changed focus states to mimic hover states and an additional outline.

View all version 2.0 release notes

Version 1.4.0

Released April 22, 2024

Highlights

Change	Type	Notes
Added <rh-site-status>	Minor	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>	Minor	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>	Minor	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>	Minor	Added line numbers option, "Show more" toggle, copy and wrap actions, to <rh-code-block>
Updated <rh-menu>	Patch	Improved focus accessibility for keyboard navigation users on Firefox.
Updated <rh-button>	Patch	Improved focus accessibility on Firefox.
Updated <rh-accordion>	Patch	Added an accents slot with placement options as inline and bottom.
Updated <rh-alert>	Patch	Make sure alerts always have to correct (lightest) color palette.
Updated <rh-tabs>	Patch	Allow tabs with long text content to fit into different-sized containers.
Updated PatternFly Elements tooling	Minor	Patch update to dependencies, including Lit version 3.

View all version 1.4 release notes

Version 1.3.0

Released January 11, 2024

Highlights

Change	Type	Notes
Added <rh-surface>	Minor	a content container that provides accessible background and font color theming for its child elements.
Updated to RH Tokens 2.0	Minor	Uses RHDS Tokens version 2.0. See v1.3 release notes for important info regarding this update.
Updated <rh-tabs-panel>	Minor	Tab Panels can now have their margin and padding overridden.
Updated <rh-pagination>	Minor	Added numeric CSS shadow part.
Added accessible-label to <rh-tile>	Minor	Tile's form control labels can now be customized.
Fixed <rh-tile> radio and checkboxes	Minor	Radio and checkbox tiles now submit their values in <form> elements.

View all version 1.3 release notes

Version 1.2.0

Released October 16, 2023

Highlights

Change	Type	Notes
Added <rh-table>	Minor	A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.
Added <rh-tile>	Minor	A tile is a flexible layout with a clickable and contained surface.
Added <rh-timestamp>	Minor	Provides consistent formats for displaying date and time values.
Added <rh-navigation-secondary> current page indicator support