Merge branch 'main' into fix/button/remove-basebutton

.changeset/badge-remove-base.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-badge>`: remove dependency on `@patternfly/elements`

.changeset/tooltip-no-base.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-tooltip>`: remove dependency on `@patternfly/elements`

.gitignore

@@ -94,3 +94,4 @@ $RECYCLE.BIN/
 *.lnk
 
 !declaration.d.ts
+docs/assets/playgrounds/rh-playground.js

docs/_includes/accessibility/1.3.1-A.md

@@ -0,0 +1 @@
+- [SC 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) (Level A)

elements/rh-badge/rh-badge.css

@@ -2,10 +2,13 @@
   --_color: var(--rh-color-text-primary-on-light, #151515);
   --_background-color: var(--rh-color-surface-lighter, #f2f2f2);
 
+  display: inline-block;
+  position: relative;
+  white-space: nowrap;
+  text-align: center;
   background-color: var(--_background-color);
   border-radius: var(--rh-border-radius-pill, 64px);
   color: var(--_color);
-  display: inline-block;
   font-size: var(--rh-font-size-body-text-xs, 0.75rem);
   font-weight: 700;
   line-height: var(--rh-line-height-body-text, 1.5);

elements/rh-badge/rh-badge.ts

@@ -1,8 +1,7 @@
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
-import { BaseBadge } from '@patternfly/elements/pf-badge/BaseBadge.js';
-
 import styles from './rh-badge.css';
 
 /**
@@ -18,19 +17,40 @@ import styles from './rh-badge.css';
  *
  */
 @customElement('rh-badge')
-export class RhBadge extends BaseBadge {
+export class RhBadge extends LitElement {
   static readonly version = '{{version}}';
 
-  static readonly styles = [...BaseBadge.styles, styles];
+  static readonly styles = [styles];
 
   /**
    * Denotes the state-of-affairs this badge represents
    */
   @property({ reflect: true }) state?: 'info' | 'success' | 'moderate' | 'important' | 'critical';
 
+  /**
+   * Sets a numeric value for a badge.
+   *
+   * You can pair it with `threshold` attribute to add a `+` sign
+   * if the number exceeds the threshold value.
+   */
   @property({ reflect: true, type: Number }) number?: number;
 
+  /**
+   * Sets a threshold for the numeric value and adds `+` sign if
+   * the numeric value exceeds the threshold value.
+   */
   @property({ reflect: true, type: Number }) threshold?: number;
+
+  override render() {
+    const { threshold, number, textContent } = this;
+    const displayText =
+        (threshold && number && (threshold < number)) ? `${threshold.toString()}+`
+      : (number != null) ? number.toString()
+      : textContent ?? '';
+    return html`
+      <span>${displayText}</span>
+    `;
+  }
 }
 
 declare global {

elements/rh-table/docs/40-accessibility.md

@@ -1,3 +1,61 @@
+## Markup Guidance
+
+{% alert state="warning", title="Warning" %} Tables are strictly intended for tabular data, and should never be used for layout purposes. {% endalert %}
+
+Since tables are inherently complex HTML structures, they can create barriers for users and assistive technologies ([View WCAG guidelines](#web-content-accessibility-guidelines)) if their markup does not clearly define the relationships within the tabular data. Therefore, it is essential for tables to contain as much context as possible through the application of appropriate structural markup.
+
+### Minimum requirements
+
+- Column titles (or headers) must use `<th>` elements with `scope="col"` attributes
+- Row titles (or headers) must use `<th>` elements with `scope="row"` attributes
+
+### Further guidance
+
+- Use `id` and `headers` attributes to associate data cells with their table headers
+- Add a `<caption>` element for brief descriptive text
+- Define sections with `thead` and `tbody` (and optionally `tfoot` for larger tables)
+
+### Example markup
+
+```html
+<rh-table>
+  <table>
+    <caption>
+      Concerts
+    </caption>
+    <colgroup>
+      <col>
+      <col>
+      <col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th id="concerts-date" scope="col" data-label="Date">Date</th>
+        <th id="concerts-event" scope="col" data-label="Event">Event</th>
+        <th id="concerts-venue" scope="col" data-label="Venue">Venue</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td headers="concerts-date" data-label="Date">12 February</td>
+        <td headers="concerts-event" data-label="Event">Waltz with Strauss</td>
+        <td headers="concerts-venue" data-label="Venue">Main Hall</td>
+      </tr>
+      <tr>
+        <td headers="concerts-date" data-label="Date">24 March</td>
+        <td headers="concerts-event" data-label="Event">The Obelisks</td>
+        <td headers="concerts-venue" data-label="Venue">West Wing</td>
+      </tr>
+      <tr>
+        <td headers="concerts-date" data-label="Date">14 April</td>
+        <td headers="concerts-event" data-label="Event">The What</td>
+        <td headers="concerts-venue" data-label="Venue">Main Hall</td>
+      </tr>
+    </tbody>
+  </table>
+</rh-table>
+```
+
 ## Keyboard interactions
 
 If a table is in a container that can receive keyboard focus (e.g., with a `tabindex="0"` attribute), then a user can place focus on the container and scroll the table horizontally or vertically using the arrow keys.
@@ -46,7 +104,7 @@ If a table is in a container that can receive keyboard focus (e.g., with a `tabi
     </tbody>
   </table>
 </rh-table>
-    
+
 <!-- | Key {style="width: 25%" } | Result                                                                            |
 | ------------------------- | --------------------------------------------------------------------------------- |
 | Up Arrow                  | Moves the table view up                                                           |
@@ -75,14 +133,14 @@ Each cell includes enough spacing for selecting interactive elements.
 ## Additional guidelines
 
 - No column title cells should be blank
-- Column titles must use `<th>` elements with `scope="col"` attributes
 - Each cell should only have one piece of data
 - Do not place multiple inactive elements in a single cell
 
 {% include 'accessibility/ariaguide.md' %}
 
 {% include 'accessibility/wcag.md' %}
+{% include 'accessibility/1.3.1-A.md' %}
 {% include 'accessibility/2.1.1-A.md' %}
 {% include 'accessibility/2.1.3-AAA.md' %}
 {% include 'accessibility/2.4.3-A.md' %}
-{% include 'accessibility/2.5.5-AAA.md' %}
+{% include 'accessibility/2.5.5-AAA.md' %}

elements/rh-tile/docs/10-style.md

@@ -86,6 +86,8 @@ Interaction states are visual representations used to communicate the status of
 
 ### Hover 
 
+The hover state of a link tile also includes the arrow icon moving 3px to the right.
+
 {% example palette="light",
         alt="On hover, light theme tiles have a light gray background, an underlined (and sometimes darker blue) heading, a darker blue arrow icon ",
         src="../tile-states-hover-light-theme.png" %}
@@ -97,7 +99,7 @@ Interaction states are visual representations used to communicate the status of
 ### Focus
 
 {% alert title="Helpful tip" %}
-The Focus state has the same styles as the Hover state.
+The Focus state has the same styles as the Hover state, except for the arrow icon animation.
 {% endalert %}
 
 {% example palette="light",

elements/rh-tooltip/rh-tooltip.css

@@ -1,27 +1,40 @@
-/* WARNING: properties containing `__`are deprecated and will be removed */
-
-:host([position="left"]),
-:host([position="right"]) {
-  --_text-alignment: "start";
+:host {
+  display: inline;
 }
 
-#rh-container {
-  display: contents;
+#container {
+  display: inline-flex;
+  position: relative;
+  max-width: 100%;
 
+  /* WARNING: properties containing `__`are deprecated and will be removed */
   --_floating-arrow-size: var(--rh-tooltip-arrow-size,
     var(--rh-tooltip__arrow--Width, 11px));
 }
 
-.dark {
-  --rh-tooltip-content-background-color: var(--rh-color-surface-lightest, #ffffff);
-  --rh-tooltip-content-color: var(--rh-color-text-primary-on-light, #151515);
+#tooltip,
+#tooltip:after {
+  position: absolute;
 }
 
 #tooltip {
-  line-height: var(--rh-line-height-body-text, 1.5);
-  max-width: var(--rh-tooltip-max-width, var(--rh-tooltip--MaxWidth, 18.75rem));
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 10000;
+  transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;
   text-align: var(--_text-alignment, center);
+  word-break: break-word;
+  translate: var(--_floating-content-translate);
+  width: max-content;
+  top: 0;
+  left: 0;
+  will-change: opacity;
+  line-height: var(--rh-line-height-body-text, 1.5);
   box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
+  max-width: var(--rh-tooltip-max-width, var(--rh-tooltip--MaxWidth, 18.75rem));
+
+  /* WARNING: properties containing `__`are deprecated and will be removed */
   padding:
     var(--rh-tooltip-content-padding-block-start,
       var(--rh-tooltip__content--PaddingTop, var(--rh-space-lg, 16px)))
@@ -31,15 +44,66 @@
       var(--rh-tooltip__content--PaddingBottom, var(--rh-space-lg, 16px)))
     var(--rh-tooltip-content-padding-inline-start,
       var(--rh-tooltip__content--PaddingLeft, var(--rh-space-lg, 16px)));
+
+  /* WARNING: properties containing `__`are deprecated and will be removed */
   font-size: var(--rh-tooltip-content-font-size,
     var(--rh-tooltip__content--FontSize, var(--rh-font-size-body-text-sm, 0.875rem)));
+
+  /* WARNING: properties containing `__`are deprecated and will be removed */
   color: var(--rh-tooltip-content-color,
     var(--rh-tooltip__content--Color, var(--rh-color-text-primary-on-dark, #ffffff)));
   background-color: var(--rh-tooltip-content-background-color,
     var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515)));
 }
 
 #tooltip:after {
+  display: block;
+  content: "";
+  rotate: 45deg;
+  width: var(--_floating-arrow-size);
+  height: var(--_floating-arrow-size);
+  will-change: left top right bottom;
+
+  /* WARNING: properties containing `__`are deprecated and will be removed */
   background-color: var(--rh-tooltip-content-background-color,
     var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515)));
 }
+
+.open #tooltip {
+  opacity: 1;
+}
+
+/* PLAIN */
+.left #tooltip:after          { right: calc(-0.5 * var(--_floating-arrow-size)); }
+.top #tooltip:after           { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.right #tooltip:after         { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.bottom #tooltip:after        { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+
+/* CENTER */
+.left.center #tooltip:after   { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.top.center #tooltip:after    { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.right.center #tooltip:after  { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.bottom.center #tooltip:after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+
+/* START */
+.left.start #tooltip:after    { top: var(--_floating-arrow-size); }
+.top.start #tooltip:after     { left: var(--_floating-arrow-size); }
+.right.start #tooltip:after   { top: var(--_floating-arrow-size); }
+.bottom.start #tooltip:after  { left: var(--_floating-arrow-size); }
+
+/* END */
+.left.end #tooltip:after      { bottom: var(--_floating-arrow-size); }
+.top.end #tooltip:after       { right: var(--_floating-arrow-size); }
+.right.end #tooltip:after     { bottom: var(--_floating-arrow-size); }
+.bottom.end #tooltip:after    { right: var(--_floating-arrow-size); }
+
+:host([position="left"]),
+:host([position="right"]) {
+  --_text-alignment: "start";
+}
+
+.dark {
+  --rh-tooltip-content-background-color: var(--rh-color-surface-lightest, #ffffff);
+  --rh-tooltip-content-color: var(--rh-color-text-primary-on-light, #151515);
+}
+