v2.1.1

Patch Changes

• f63c46d: Color Context: prevent errors in certain SSR scenarios
• 249a596: <rh-alert>: corrected typography and layouts
• 613e827: <rh-code-block>: ensure that syntax colours and styles are applied when the element upgrades
• 0d70e3f: <rh-tabs>: corrects active tab styles in SSR scenarios
• 7bf5841: <rh-navigation-secondary>: corrected style regression in dark color palettes
• 955d393: <rh-surface>: corrected themed text color
• 3ef5687: <rh-alert>: change heading color for all states of alert to make them all the same
• 557ede4: <rh-table>: better SSR support
• f63c46d: <rh-cta>: fix some errors when hydrating in SSR scenarios

v2.1.0

Minor Changes

• 82ffb12: <rh-tile>: add link="private" attribute, indicating that the link is
  private, which changes the link icon from an arrow to a padlock, and
  link="external" attribute, which changes the link icon to the "external link"
  icon

• 82ffb12: <rh-card> added --rh-card-header-background-on-light and --rh-card-header-background-on-dark CSS custom properties

  rh-card.custom-card {
    --rh-card-header-background-on-light: cornflowerblue;
    --rh-card-header-background-on-dark: darkblue;
  }

• 82ffb12: <rh-subnav>:

  • removed arrow-key keyboard navigation in favor of tab navigation.
  • add accessible-label attribute to explicitly label landmark.
  • corrects overflow icons

  <rh-subnav accessible-label="Customer service">
   <a href="#" active>Help</a>
   <a href="#">Contact Us</a>
   <a href="#">FAQ</a>
  </rh-subnav>

• 82ffb12: <rh-code-block>: syntax highlighting via prerendered prismjs code-blocks. Use
  the highlighting="prerendered" attribute when rendering code blocks using
  server side prism, e.g. in a markdown fenced code block.

  <rh-code-block highlighting="prerendered">
    <pre class="language-css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-color-interactive-primary-default<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span></pre>
  </rh-code-block>

• 82ffb12: <rh-tag> added red-orange, yellow, and teal colors. NOTE that cyan is now deprecated, but will continue to work using the teal colors.

• 82ffb12: <rh-table>: added auto-generated table cell headings for responsive layout on small screens.

• 82ffb12: <rh-tag>: added desaturated variant:

  <rh-tag variant="desaturated">New</rh-tag>

• 82ffb12: <rh-tag>: added size attribute.

  <rh-tag size="compact">New</rh-tag>

• 82ffb12: <rh-alert>: added new states: info, neutral, and caution, and deprecated
  note (now an alias to info), default (now an alias to neutral), and
  error (now an alias to danger).

• 82ffb12: <rh-button>: add icon-set attribute, corresponding to <rh-icon set="...">

  <rh-button icon="giftbox" icon-set="standard">Donate</rh-button>

• 82ffb12: <rh-navigation-secondary>:

  • removed arrow-key keyboard navigation in favor of tab navigation.

  • add accessible-label attribute to explicitly label landmark.

    ...

• 82ffb12: <rh-badge>: added new states:

  • danger
  • warning
  • caution
  • neutral
  • info

  We deprecated:

  • critical (now an alias to danger)
  • important (now an alias to caution)
  • moderate (now an alias to warning)
  • note (now an alias to info)

• 82ffb12: <rh-skip-link>: added optional href attribute:

  <rh-skip-link href="#main-content">Skip to main content</rh-skip-link>

  is equivalent to:

  <rh-skip-link>
    <a href="#main-content">Skip to main content</a>
  </rh-skip-link>

• 82ffb12: <rh-code-block>: Added highlighting="client" for client-side syntax highlighting with Red Hat colour scheme

• 82ffb12: <rh-tag>: added href attribute

  <rh-tag icon="information-fill" href="/info">Info</rh-tag>

• 82ffb12: Theming: Added theming tokens to most elements

  Theming tokens let authors respond to the currently-active colour palette, and
  are especially useful when implementing patterns using themeable
  elements.

  <rh-card class="example-logo-text-and-cta">
    <p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>.</p>
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
  </rh-card>
  
  <style>
    .example-logo-text-and-cta {
      width: 360px;
      & em {
        color: var(--rh-color-accent-base);
      }
    }
  </style>

Patch Changes

• 82ffb12: <rh-audio-player>: corrected focus when keyboard navigating options menu
• 82ffb12: <rh-audio-player>: use theme tokens
• 82ffb12: <rh-accordion>: Make <rh-accordion-header>'s bold.
• 82ffb12: <rh-table>: tables now adjust to the size of their containing element, not to the size of the viewport.
• 82ffb12: <rh-accordion>: removed arrow-key keyboard navigation in favor of tab navigation.
• 82ffb12: <rh-audio-player>: use official red hat icons
• 82ffb12: <rh-tabs>: tabs now adjust to the size of their containing element, not to the size of the viewport.
• 82ffb12: <rh-alert>: hide header when it is empty
• 82ffb12: <rh-audio-player>: add a playback control to the mini layout
• 82ffb12: <rh-card>: style some slotted links
• 82ffb12: <rh-tile>: corrected layout when rendering some image slotted elements
• 82ffb12: <rh-tag>: now supports color theming
• 82ffb12: <rh-tabs>: allow tabs to participate in advanced layouts
• 82ffb12: <rh-skip-link>: ensure link is always at top of the page, per guidelines
• 82ffb12: <rh-site-status>: use <rh-icon> for status indicators

v2.0.1

Patch Changes

• 1ec3653: <rh-footer-universal>: improve compatibility with SSR
• f77af9a: <rh-navigation-secondary>: corrected visibility of the borders when using the dark color palette
• 1ec3653: <rh-alert>: fixed styles and typings for the RhAlert.toast() method
• fecbe5d: <rh-button>: corrected style issue which caused layout side effects
• 1ec3653: <rh-icon>: prevent error when hydrating server-side-rendered icons
• cb5e01a: <rh-cta>: corrected icon not loading on default variant
• f4fcd78: <rh-back-to-top>: builds-in the style guidelines in: back to top is fixed and always on top. Note that this change removes previously undocumented CSS custom properties --rh-back-to-top-position-right and --rh-back-to-top-position-bottom.
• 5323a21: <rh-tooltip>: added border radius style to match specifications
• b558e00: <rh-navigation-secondary>: corrected logo slot text line-height

v2.0.0

Major Changes

• fa2c4d2: <rh-accordion>: Removed the heading-tag and heading-text attributes from the rh-accordion-header element.
  <h2> (etc.) elements are no longer valid content for <rh-accordion-header>,
  but users are encouraged to wrap accordion headers in the appropriate heading element, in case javascript fails to load.

  Before:

  <rh-accordion>
    <rh-accordion-header>
      <h2>First Header</h2>
    </rh-accordion-header>
    <rh-accordion-panel>...</rh-accordion-panel>
  </rh-accordion>

  After:

  <rh-accordion>
    <h2><rh-accordion-header>First Header</rh-accordion-header></h2>
    <rh-accordion-panel>...</rh-accordion-panel>
  </rh-accordion>

• fa2c4d2: <rh-accordion>: removed the unused icon part and attribute from <rh-accordion-header>

• fa2c4d2: <rh-accordion>: removed the (previously undocumented) container part from <rh-accordion-header>

• fa2c4d2: <rh-footer>: removed deprecated <rh-global-footer> element and deprecated global slot. Use <rh-footer-universal> element and universal slot.

  Before:

  <rh-footer>
    <!-- ... -->
    <rh-global-footer slot="global">
      <!-- ... -->
    </rh-global-footer>
  </rh-footer>

  After:

  <rh-footer>
    <!-- ... -->
    <rh-footer-universal slot="universal">
      <!-- ... -->
    </rh-footer-universal>
  </rh-footer>

• fa2c4d2: <rh-tabs>: removed deprecated RhTabs.isTab() and RhTabs.isPanel() static class methods.

• fa2c4d2: <rh-cta>: removed read-only cta property; use data-analytics attributes instead

• fa2c4d2: Removed the rhds.min.js entrypoint and replaced it with a module that reexports all our element modules.

  Before:

  import "@rhds/elements"; // get the minified bundle
  import "@rhds/elements/rh-cta/rh-cta.js";
  // => DOMException: 'rh-cta' has already been defined as a custom element

  After:

  import "@rhds/elements"; // get the entrypoint module
  import "@rhds/elements/rh-cta/rh-cta.js";
  // => get the same module referenced in the entry point

• 8a061e9: <rh-tabs>: Removed the deprectated attribute that sets the theme for the tabs and panels
  Please use the --rh-tabs-active-border-color CSS property directly.

  Before:

  <rh-tabs theme="base">
    <!-- ... -->
  </rh-tabs>

  After:

  <rh-tabs
    style="--rh-tabs-active-border-color: var(--rh-color-border-interactive-on-light, #0066cc)"
  >
    <!-- ... -->
  </rh-tabs>
  
  <rh-tabs
    color-palette="darkest"
    style="--rh-tabs-active-border-color: var(--rh-color-border-interactive-on-dark, #92c5f9)"
  >
    <!-- ... -->
  </rh-tabs>

• 8e68a6a: <rh-dialog>: removed deprecated --rh-modal-video-aspect-ratio CSS custom property

  Before:

  rh-dialog.custom-dialog {
    --rh-modal-video-aspect-ratio: 3/2;
  }

  After:

  rh-dialog.custom-dialog {
    --rh-dialog-video-aspect-ratio: 3/2;
  }

• 8e68a6a: <rh-footer>: removed deprecated CSS custom properties

  Before:

  rh-footer.custom-footer {
    --rh-color-link-inline-on-dark: cyan;
    --rh-color-link-inline-hover-on-dark: cornflowerblue;
    --rh-color-link-inline-focus-on-dark: cornflowerblue;
    --rh-color-link-inline-visited-on-dark: cornflowerblue;
  }

  After:

  rh-footer.custom-footer {
    --rh-color-interactive-blue-lighter: cyan;
    --rh-color-interactive-blue-lightest: cornflowerblue;
  }

• fa2c4d2: <rh-accordion>: remove unused bordered attribute

• fa2c4d2: <rh-spinner>: remove deprecated color-palette attribute

  Before:

  <rh-spinner color-palette="darkest"></rh-spinner>

  After:

  <rh-surface color-palette="darkest">
    <rh-spinner></rh-spinner>
  </rh-surface>

• fa2c4d2: <rh-cta>: Removed previously-deprecated color-palette attribute

  Use themable containers (e.g. <rh-surface> or <rh-card>) instead.

  Before:

  <rh-cta color-palette="dark" href="#default">Default</rh-cta>

  After:

  <rh-surface color-palette="dark">
    <rh-cta href="#default">Default</rh-cta>
  </rh-surface>

• fa2c4d2: <rh-alert>: removed deprecated toast boolean attribute

  Before:

  <rh-alert toast>
    <h3 slot="header">Default</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
      elit sed est egestas, a sollicitudin mauris tincidunt.
    </p>
  </rh-alert>

  After:

  <rh-alert variant="toast">
    <h3 slot="header">Default</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
      elit sed est egestas, a sollicitudin mauris tincidunt.
    </p>
  </rh-alert>

• fa2c4d2: <rh-table>: removed deprecated CSS custom properties

  Before:

  rh-table.custom-table {
    --rh-table-row-background-color: crimson;
    --rh-table-column-background-color: royalblue;
  }

  After:

  rh-table.custom-table {
    --rh-table-row-background-hover-color: crimson;
    --rh-table-column-background-hover-color: royalblue;
  }

• fa2c4d2: <rh-navigation-secondary> removed deprecated alias rh-secondary-nav

  Before:

  <rh-secondary-nav>
    <!-- ... -->
  </rh-secondary-nav>

  After:

  <rh-navigation-secondary>
    <!-- ... -->
  </rh-navigation-secondary>

• 8e68a6a: <rh-tabs>: removed box and vertical attributes from <rh-tab>. Set them
  on <rh-tabs> instead.

  In most cases, you shouldn't need to update your templates, as long as <rh-tabs>
  has the right attributes

Minor Changes

• fa2c4d2: ✨ Added <rh-health-index>

  Health index grades the health or security level of something.

  <rh-health-index grade="A">A</rh-health-index>

• fa2c4d2: <rh-alert> added static toast method

  import { RhAlert } from "@rhds/elements/rh-alert/rh-alert.js";
  
  RhAlert.toast({
    state: "warning",
    heading: "Careful",
    message: "Toast is high in calories!",
  });

• fa2c4d2: ✨ 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.

  <rh-video-embed>
    <img
      slot="thumbnail"
      src="https://fakeimg.pl/900x499/282828/eae0d0"
      alt="Image description"
    />
    <template>
      <iframe
        title="Title of video"
        width="900"
        height="499"
        src="https://www.youtube.com/embed/Hc8emNr2igU"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerpolicy="strict-origin-when-cross-origin"
        allowfullscreen
      ></iframe>
    </template>
    <p slot="caption">
      <a class="rh-video-embed-caption-link" href="https://www.redhat.com/"
        >View the infographic</a
      >
    </p>
  </rh-video-embed>

• fa2c4d2: <rh-pagination>: ✨ Added open variant and small size

  Users can now further customize pagination by choosing which variant and size are most appropriate for their applications.

  <rh-pagination variant="open" size="sm">
    <ol>
      <li><a href="#">1</a></li>
      <li><a href="#2">2</a></li>
      <li><a href="#3">3</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#5">5</a></li>
    </ol>
  </rh-pagination>

• fa2c4d2: <rh-card>: ✨ Added promo card variant

  The promo card variant allows users to easily display text and optionally an image side by side.

  <rh-card variant="promo">
    <img
      slot="image"
      alt="product illustration"
      src="/assets/images/new-product.png"
    />
    <h2 slot="header">Try our new product</h2>
    <p>Our new product is the best in class.</p>
    <rh-cta slot="footer" href="#">Start a Free Trial</rh-cta>
  </rh-card>

• fa2c4d2: ✨ 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.

  <rh-breadcrumb>
    <ol>
      <li><a href="../../../..">Home</a></li>
      <li><a href="../../../">About</a></li>
      <li><a href="#" aria-current="page">Our Team</a></li>
    </ol>
  </rh-breadcrumb>

• fa2c4d2: <rh-pagination>: ✨ Added support for dark color themes

  <rh-surface color-palette="dark">
    <rh-pagination>
      <ol>
        <li><a href="#">1</a></li>
        <li><a href="#2">2</a></li>
        <li><a href="#3">3</a></li>
        <li><a href="#4">4</a></li>
        <li><a href="#5">5</a></li>
      </ol>
    </rh-pagination>
  </rh-surface>

• fa2c4d2: ✨ 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.

  <rh-icon icon="alert"></rh-icon>

  <rh-icon> has experimental SSR support. It's not ready for production, but if you try it, let us know!

• fa2c4d2: <rh-cta>: Added rh-cta-lightdom-shim.css as an optional file to help reduce layout shift before element is defined, where dec...

v1.4.5

Patch Changes

• 45ab120: React: resolve another syntax error in generated modules

v1.4.4

Patch Changes

• 0f94d81: React: corrected syntax errors in certain generated modules
• 0f94d81: React: moved files from /react/elements/* to /react/*, and updated the export map to match
• cbd7c6a: Custom Elements Manifest: corrected module paths in the manifest
• a5853c7: Copies lightdom CSS files into the package root, making it easier to use RHDS with CDNS like UNPKG.

v1.4.3

Patch Changes

• 8eebce6: <rh-tabs>: improved focus accessibility for keyboard navigation and assistive technology users.'

v1.4.2

Patch Changes

• 69e2cd9: <rh-tabs>: added support for rtl language overflow scroll buttons
• 1b20464: React: add generated react wrappers to NPM package
• 971214d: <rh-site-status>: automatically fetch status for the current domain
• 835a008: <rh-card>: hide header, body, or footer regions when they have no content
• 727c799: <rh-card>: applied heading font to card headings
• b443fe2: <rh-code-block>: corrected 'show more' button styles
• 8365fac: <rh-tag>: ensure correct font-family is used
• 2f1324e: <rh-card>: removes landmark semantics from card, simplifying page navigation for screen reader users

v1.4.1

Patch Changes

• 862380b: corrected @patternfly/elements dependency to be included with the package

v1.4.0

Minor Changes

• fecdcbf: <rh-codeblock>: added line numbers

• fecdcbf: ✨ 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.

  <rh-site-status></rh-site-status>

• fecdcbf: ✨ 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.

  <rh-back-to-top href="#top">Back to top</rh-back-to-top>

• fecdcbf: ✨ 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.

  <rh-skip-link>
    <a href="#main-content">Skip to main content</a>
  </rh-skip-link>

• fecdcbf: ⚛️ Added React wrapper components

  You can now more easily integrate RHDS elements into your React apps by importing our wrapper components

  First, make sure that you list @lit/react as a dependency in your project

  npm install --save @lit/react

  Then import the element components you need and treat them like any other react component

  import { Tabs } from '@rhds/elements/react/rh-tabs/rh-tabs.js';
  import { Tab } from '@rhds/elements/react/rh-tabs/rh-tab.js';
  import { TabPanel } from '@rhds/elements/react/rh-tabs/rh-tab-panel.js';
  
  import { useState } from 'react';
  
  const tabs = [
    { heading: 'Hello Red Hat', content: 'Let\'s break down silos' },
    { heading: 'Web components', content: 'They work everywhere' }
  ];
  
  function App() {
    const [index, setExpanded] = useState(-1);
    return (
      <span>expanded {expanded}</span>
      <Tabs>{tabs.map(({ heading, content }, i) => (
        <Tab slot="tab" onExpand={() => setExpanded(i)}>{heading}</Tab>
        <TabPanel>{content}</TabPanel>))}
      </Tabs>
    );
  }

• fecdcbf: <rh-codeblock>: added Show more toggle

• fecdcbf: <rh-codeblock>: added copy and wrap actions, with localizable slots for the button labels

  <rh-code-block actions="wrap copy">
    <span slot="action-label-copy">Copy to Clipboard</span>
    <span slot="action-label-copy" hidden data-code-block-state="active"
      >Copied!</span
    >
    <span slot="action-label-wrap">Toggle word wrap</span>
    <span slot="action-label-wrap" hidden data-code-block-state="active"
      >Toggle overflow</span
    >
    <script type="text/css">
      :host {
        display: block;
      }
    </script>
  </rh-code-block>

Patch Changes

• fecdcbf: <rh-menu>: improved focus accessibility for keyboard navigation users on firefox
  <rh-button>: improved focus accessibility on firefox
• fecdcbf: <rh-accordion>: added a accents slot with placement options as inline and bottom
• fecdcbf: Context: aligned context implementation with updated protocol defintions
• fecdcbf: Update dependencies, including Lit version 3
• fecdcbf: <rh-alert>: make sure alerts always have to correct (lightest) colour palette
• fecdcbf: <rh-tabs>: allow tabs with long text content to fit into different-sized containers