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

v1.3.2

Patch Changes

• 1d16407: <rh-tile>: corrected icon slot visibility with a slotted icon
• d61b8dc: <rh-dialog>: ensure that cancel, open, and closed events fire

v1.3.1

Patch Changes

• d87dfb9: <rh-tabs>: fixed issue that stop tabs from correctly resizing on mobile
• 01f100c: <rh-tile>: fixed issue with click target area of tile
• 08722dd: <rh-table>: corrected custom background hover color tokens.
• 4259ba0: <rh-tabs>: improved documentation

v1.3.0

Minor Changes

• 5e64235: <rh-audio-player>: added Hebrew translations

• 0829fa2: ✨ Added <rh-surface>.

  Surface is a container which sets background color and text color and provides that theme context to its child elements. Surface supports darkest, darker, dark, light, lighter, lightest color palettes.

  <rh-surface color-palette="darker">
    <rh-cta><a href="#">Call to Action</a>
  </rh-surface>

• c9b8187: <rh-tabs-panel>: adds ability to override panel margin and padding

• 31b28dc: <rh-pagination>: add numeric CSS shadow part, corresponding to the numeric page input

  Example: hiding the numeric paginator

  rh-pagination::part(numeric) {
    display: none;
  }

• 05fbc27: <rh-tile>: add accessible-label attribute to override form control label

  Accessible labels are visually hidden labels for form controls. In the case of
  <rh-tile>, they are optional, so long as the text content of the tile is
  already an accessible label for the control.

  Use accessible-label when you would like to label the form control with
  something other than the tile's text content, or when the tile has no text
  content.

  <form>
    <rh-tile-group radio>
      <rh-tile name="radio" value="1">Tile 1</rh-tile>
      <rh-tile name="radio" value="2">Tile 2</rh-tile>
      <rh-tile name="radio" value="3" accessible-label="Tile 3">
        <img slot="image" role="presentation" src="tile-3.webp" />
      </rh-tile>
    </rh-tile-group>
  </form>

• 58ab8e6: Uses @rhds/tokens - Red Hat Design Tokens - version 2!

  ⚠️ if your pages directly override "crayon" colour values, (e.g. --rh-color-red-50)
  then this is a breaking change, since the token names have changed.

  However, if your project follows the theming guidelines and only overrides the
  semantic tokens, then you should automatically receive the new colour values.

• 05fbc27: <rh-tile>: radio and checkbox tiles now submit their values in <form> elements

Patch Changes

• b123092: <rh-tabs>: removed dependency on @patternfly/elements package.

• 5e64235: <rh-alert>: fix <rh-button variant="link"> as slotted action

• 976981b: <rh-alert>: fix inline variant's styles

• 6a87885: <rh-badge>: remove dependency on @patternfly/elements

• 7198739: <rh-blockquote>: remove user-agent margin from blockquote, in accordance with design guidelines

• fcf22f0: <rh-button>: remove dependency on @patternfly/elements

• 18f802f: <rh-table>: added color palette and theme support

• c0af107: <rh-card>: improved styles for first body paragraph when there is other content displayed first

• 4f6ff65: <rh-card>: ensure footer is always on the bottom of the card

• 6e8fad6: <rh-card>: adjust whitespace of card parts to suit design

• bf7c96c: <rh-code-block>: allow for pre-rendered (via prism.js) code blocks

• f969ff1: <rh-tabs>: fixed layout of non-vertical box variant tabs

• 54264f3: <rh-spinner>: deprecates the color-palette attribute.

• 8cb9790: <rh-tile>: fixed cursor when arrow is hovered

• 976981b: <rh-alert>: remove padding for alerts which have only header content

• 976981b: <rh-alert>: make variants case-insensitive

• a6510e2: <rh-tabs>: adds default value for tab font-size

• eefc04c: <rh-tooltip>: fixes issue where content would take up unwanted space before the element fully upgraded

• 2137702: <rh-footer-social-link>: updated twitter logo with X

• 0254749: <rh-tab-panel>: removed unused color-palette attribute

• 8c5559c: <rh-dialog>: remove the dependency on @patternfly/elements.
  NOTE: The open, close, and cancel events are no longer the same object constructor type as <pf-modal>, so instanceof checks may fail.

• 2eb82a8: <rh-avatar>: removed non-existent name slot from the element manifest.
  This doesn't change the element, only the documentation. Instead of name, use
  the anonymous slot:

  <rh-avatar>
    <span>Title</span>
    <span slot="subtitle">Subtitle</span>
  </rh-avatar>

• 5e64235: <rh-menu>: support color context

• 6a134b5: <rh-tag>: remove dependency on @patternfly/elements

• 369d5b7: <rh-card>: collapses margins between header, body, and footer

  NOTE that this changes the default styling of the header, body, and footer
  CSS Shadow Parts. They previously used padding for layout, and now use margin.
  If you modified their padding via the ::part selector, you will need to update your CSS

  Before:

  .special-card::part(header) {
    padding: var(--rh-space-sm);
  }

  After:

  .special-card::part(header) {
    margin-block-start: var(--rh-space-sm);
    margin-inline: var(--rh-space-sm);
  }

• 5e64235: <rh-dialog>: ensure dialog content is always on light theme

• 42c167f: <rh-table>: improved color palette styles

• 0d2d349: rh-table: corrected table height

• a1c587d: <rh-navigation-secondary>: adds current page indicator to logo slot

• c68165b: <rh-tabs>: adds deprecation notice on theme attribute

• 54264f3: <rh-spinner>: remove dependency on @patternfly/elements

• baa3820: <rh-accordion>: fixed border color for dark color palettes

• fb9e3ea: <rh-accordion>: remove dependency on @patternfly/elements

• d4e1ebd: <rh-tag>: while tag should not be used on dark contexts unless it has the
  white colour, this change ensures that tags that are used on dark context will
  be legible.

• 422d627: <rh-tile>: ensure that tiles in a flex container grow along the cross axis

• 61ca720: <rh-tooltip>: remove dependency on @patternfly/elements

• b3f7b18: <rh-tile>: added arrow animation on hover

• 9f12494: <rh-navigation-secondary>: fixed initialization of current page indicator

v1.2.0

Minor Changes

• 35c28e7: Added <rh-tile>.

  Tile creates a component that can be used in place of a link, checkbox, or radio button selection.

  <rh-tile-group radio>
    <rh-tile checked>
      <div slot="title">Title</div>
      <h2 slot="headline"><a href="#top">Link</a></h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <div slot="footer">Suspendisse eu turpis elementum</div>
    </rh-tile>
  
    <rh-tile>
      <div slot="title">Title</div>
      <h2 slot="headline"><a href="#top">Link</a></h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <div slot="footer">Suspendisse eu turpis elementum</div>
    </rh-tile>
  
    <rh-tile>
      <div slot="title">Title</div>
      <h2 slot="headline"><a href="#top">Link</a></h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <div slot="footer">Suspendisse eu turpis elementum</div>
    </rh-tile>
  </rh-tile-group>

• 9d3c7b0: ✨ Added <rh-table>.

  A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.

  <rh-table>
    <table>
      <caption>
        Concerts
      </caption>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
          <th scope="col" data-label="Date">Date</th>
          <th scope="col" data-label="Event">
            Event<rh-sort-button></rh-sort-button>
          </th>
          <th scope="col" data-label="Venue">
            Venue<rh-sort-button></rh-sort-button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Date">12 February</td>
          <td data-label="Event">Waltz with Strauss</td>
          <td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
          <td data-label="Date">24 March</td>
          <td data-label="Event">The Obelisks</td>
          <td data-label="Venue">West Wing</td>
        </tr>
        <tr>
          <td data-label="Date">14 April</td>
          <td data-label="Event">The What</td>
          <td data-label="Venue">Main Hall</td>
        </tr>
      </tbody>
    </table>
    <small slot="summary">Dates and venues subject to change.</small>
  </rh-table>

• 39e76fc: rh-card: header slot now displays items vertically instead of stacked, allowing for more than one item to display in the header.

  Example:

  <rh-card>
    <img slot="header" src="kitten-400x250.jpeg"></img>
    <h2 slot="header">Headline, sm</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nullam eleifend elit sed est egestas, a sollicitudin mauris
       tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
       felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
    <rh-cta priority="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

• c9780fc: ✨ Added <rh-timestamp>.

  Provides consistent formats for displaying date and time values.

  <rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400"
    >Tue Aug 09 2006 14:57:00 GMT-0400</rh-timestamp
  >

Patch Changes

• f4fcb1f: <rh-navigation-secondary>: improved keyboard navigation

• 681519b: <rh-avatar>:
  <rh-code-block>:
  <rh-navigation-secondary>: Updated custom elements manifest summaries

• ed6ff92: <rh-navigation-secondary>: corrected and updated support for current page indicator

• a6ca398: <rh-cta>: brick variants are now full width.

  <rh-cta variant="brick"> should only be used within grids. Check your layouts to make sure they adhere to the guidelines.

• 0c2d42b: <rh-tabs>: corrects the custom element manifest's event name for the expand event

• 7e2c9bb: <rh-cta>: adds color-palette attribute back with deprecation notice

v1.1.1

Patch Changes

• ab339ac: <rh-tag>: outline variant should now get the correct background styles added.
• f79543b: <rh-avatar>: uses SVG for default images instead of much larger base-64 PNG images
• 77fa329: <rh-audio-player>: Added @csspart docs.
• f0f66ec: <rh-tabs>: fixed vertical tabs text alignment
• 716b52d: <rh-cta> and other elements: color context support
• cf8ee6c: <rh-audio-player>: corrected subscribe slot documentation.
• d709896: <rh-cta>: corrected layout of icon brick variant
• d709896: <rh-cta>: ensured entire CTA is clickable
• d709896: <rh-cta>: fix a style bug which affects CTA links at narrow widths
• ff90f4d: <rh-footer>: prevent an error when using footer and react in certain chrome versions
• 44a444a: <rh-navigation-secondary>: corrected navigation bar height for small and large viewports'

v1.1.0

Minor Changes

• 9eedf47: <rh-tag>: added outline variant

• bc0fd96: ✨ Added <rh-card>.

  Card creates a component with a header, body, and footer. The header and footer are optional.

  <rh-card>
    <h2 slot="header">Headline, sm</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
      elit sed est egestas, a sollicitudin mauris tincidunt. Pellentesque vel
      dapibus risus. Nullam aliquam felis orci, eget cursus mi lacinia quis.
      Vivamus at felis sem.
    </p>
    <rh-cta slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>

• b4815ae: ✨ Added <rh-audio-player>.

  Audio-player creates a custom UI for audio files.

  <rh-audio-player>
    <h3 slot="title">Rethinking Networks In Telecommunications</h3>
    <p slot="series">Code Comments</p>
    <audio crossorigin="anonymous" slot="media" controls>
      <source type="audio/mp3" srclang="en" src="./rethinking.mp3" />
    </audio>
  </rh-audio-player>

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

  <rh-code-block>
    <script type="text/text">
      Error: Error creating network Load Balancer: AccessDenied: User:
      arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is
      not authorized to perform: iam:CreateServiceLinkedRole on resource:
      arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/
      AWSServiceRoleForElasticLoadBalancing
    </script>
  </rh-code-block>

• b2e607b: <rh-tooltip>: added new CSS custom properties:

  • --rh-tooltip-arrow-size
  • --rh-tooltip-content-background-color
  • --rh-tooltip-content-color
  • --rh-tooltip-content-font-size
  • --rh-tooltip-content-padding-block-end
  • --rh-tooltip-content-padding-block-start
  • --rh-tooltip-content-padding-inline-end
  • --rh-tooltip-content-padding-inline-start
  • --rh-tooltip-max-width

Patch Changes

• fca7437: Updated design system token metadata in custom elements manifest
• 9eedf47: <rh-tag>: support dark color context
• 4861f8a: <rh-navigation-secondary>: corrected css parts and css properties manifest documentation
• 1a569a2: <rh-accordion>: corrected and updated custom elements manifest
• 9acd4e0: <rh-tabs>: Vertical tabs on small screen size <768px will display as a horizontal
• 760ef10: <rh-footer>: corrected and updated custom elements manifest
• c92f29f: Adds <rh-context-picker> element in /lib. Moves the undocumented
  <rh-context-provider> element to /lib, and adds a deprecation warning.
• 2245dfe: <rh-footer>: contain focus outline to the width of the link text
• b2e607b: <rh-tooltip>: corrected and updated custom elements manifest
• 3785dfc: <rh-tabs>: reduced padding on overflow scroll buttons
• a99c620: <rh-subnav>: decreased padding on overflow buttons.
• 0504e5c: rh-footer: fixes mobile layout on initial load
• 86c606b: <rh-button>: corrected and updated custom elements manifest
• f42910c: <rh-badge>: corrected and updated custom elements manifest
• cced7a4: prevent "command not found" error which could occur when installing the npm
  package in certain situations
• ee37ace: <rh-alert>: clarify that the variant attribute takes values: alternate,
  inline (default) or toast
• f4ff68d: <rh-avatar>: corrected css custom property data type in custom elements manifest
• b4815ae: <rh-avatar>: fixed styles for names, links
• b4815ae: <rh-avatar>: fix bug which could hide the name of the avatar's subject if the element contains whitespace.
• de61361: <rh-cta>: make the entire background clickable
• b5333ad: <rh-navigation-secondary>: fix unclosed cta slot tag
• de6c586: <rh-pagination>: prevent false content validation warning
• 0625218: <rh-pagination>: fix for pagination in right-to-left contexts
• 4e27262: <rh-spinner>: updated and corrected custom elements manifest
• 58124c4: <rh-tabs>: corrected and updated custom elements manifest
• 58124c4: <rh-tabs>: replaced nonexistent --rh-spacer-xl token with the correct name --rh-space-xl
• 04573fa: <rh-accordion>: fixed keyboard navigation inside of nested accordions
• 469a1c5: <rh-navigation-secondary>: reduce, validate, and simplify styles
• 71dd262: <rh-tag>: improve loading performance by removing unnecessary imports
• 81c1676: <rh-subnav>: corrected default background color to @rhds/tokens value
• a0d20b6: <rh-alert>: corrected css for header font-weight and padding

v1.0.1

Patch Changes

• 12b7143: <rh-accordion>: fixed font-weight of focused or active header
• bac2b97: <rh-tabs>: improved accessibility by updating PatternFly Elements
  dependencies. Assigns random IDs to tabs if none is provided.
• 0f5ecac: <rh-alert>: fixed font-family for header slot