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.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 themable 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 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 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 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	Minor	Updated support for a current page indicator using aria-current="page".
Fixed <rh-card> header slot	Minor	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>	Patch	Secondary Navigation now has improved keyboard navigation.
Fixed <rh-cta> brick variant	Patch	Brick variants of calls to action (CTAs) are now full width.

View version 1.2 release notes

Version 1.1.0

Released July 5, 2023

Highlights

Change	Type	Notes
Added <rh-card>	Minor	Card creates a component with a header, body, and footer. The header and footer are optional.
Added <rh-audio-player>	Minor	Audio-player creates a custom UI for audio files.
Added <rh-code-block>	Minor	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>	Minor	New CSS custom properties, like --rh-tooltip-arrow-size, --rh-tooltip-content-background-color, and more!
Added outline variant for <rh-tag>	Minor	Now you can use variant="outline".

View version 1.1 release notes

Version 1.0.0

Released April 3, 2023

Highlights

Change	Type	Notes
Added <rh-cta>	Major	A Call to Action is a styled link that directs a user to other pages or sometimes displays hidden content.
Added <rh-secondary-nav>	Major	A non-primary navigation for products and subcategory pages.
Added <rh-global-footer>	Major	A standalone global footer component.
Renamed <rh-global-footer> to <rh-footer-universal>	Major	Renamed the global slot to universal.
Renamed <rh-secondary-nav> to <rh-navigation-secondary>	Major	Renamed the component and all sub components to <rh-navigation-secondary-*>.
Added <rh-spinner>	Minor	Spinner consists of an animated circle and sometimes a message, and it indicates that a section is loading.
Added <rh-button>	Minor	Button is a form-associated custom element. Buttons allow users to perform an action when triggered.
Added <rh-tag>	Minor	A tag is an inline-block element component that provides a distinct visual style for metadata in a UI.
Added <rh-blockquote>	Minor	Displays a quote with author's name and title.
Added <rh-subnav>	Minor	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>	Minor	A tab set of layered content, including tab widgets and their associated tab panel.
Added <rh-accordion>	Minor	Accordion displays multiple, related disclosure widgets.
Added <rh-alert>	Minor	An alert displays auxiliary information on a website. An alert can have one of several states of severity.
Added <rh-avatar>	Minor	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>	Minor	Pagination is a web component for navigating paginated content.
Added <rh-stat>	Minor	An element which can be used to display statistics inside of an app.
Added <rh-badge>	Minor	A badge is used to annotate other information with numerical content.
Added <rh-tooltip>	Minor	A tooltip displays floating content next to a portion of inline content.
Added <rh-footer>	Minor	A universal footer component.

View version 1.0 release notes

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.