Merge branch 'main' into fix/badge/remove-base

.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-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);
+}
+

elements/rh-tooltip/rh-tooltip.ts

@@ -1,42 +1,100 @@
-import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
-
-import { html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
-import { BaseTooltip } from '@patternfly/elements/pf-tooltip/BaseTooltip.js';
+import {
+  FloatingDOMController,
+  type Placement,
+} from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 
 import styles from './rh-tooltip.css';
 
+const ENTER_EVENTS = ['focusin', 'tap', 'click', 'mouseenter'];
+const EXIT_EVENTS = ['focusout', 'blur', 'mouseleave'];
+
 /**
- * A tooltip is a floating text area that provides helpful or contextual information on hover, focus, or tap.
+ * A tooltip is a floating text area that provides helpful
+ * or contextual information on hover, focus, or tap.
+ *
  * @summary Reveals a small area of information on hover
  *
- * @slot - Place element content here
+ * @slot - Place invoking element here,
+ *         i.e. the element which when hovered the tooltip will display.
+ *         Must be inline content.
+ * @slot content - Place tooltip content here. Overrides the `content` attribute.
  *
+ * @cssprop {<length>} [--rh-tooltip-arrow-size=11px]
+ * @cssprop {<color>} [--rh-tooltip-content-background-color=#ffffff]
+ * @cssprop {<color>} [--rh-tooltip-content-color=#151515]
+ * @cssprop {<length>} [--rh-tooltip-max-width=18.75rem]
+ * @cssprop {<length>} [--rh-tooltip-content-padding-block-start=16px]
+ * @cssprop {<length>} [--rh-tooltip-content-padding-inline-end=16px]
+ * @cssprop {<length>} [--rh-tooltip-content-padding-block-end=16px]
+ * @cssprop {<length>} [--rh-tooltip-content-padding-inline-start=16px]
+ * @cssprop {<absolute-size> | <relative-size> | <length> | <percentage>} [--rh-tooltip-content-font-size=0.875rem]
  */
 @customElement('rh-tooltip')
-export class RhTooltip extends BaseTooltip {
+export class RhTooltip extends LitElement {
   static readonly version = '{{version}}';
 
-  static readonly styles = [...BaseTooltip.styles, styles];
-
-  @colorContextConsumer() private on?: ColorTheme;
+  static readonly styles = [styles];
 
+  /** The position of the tooltip, relative to the invoking content */
   @property() position: Placement = 'top';
+
+  /** Tooltip content. Overridden by the content slot */
   @property() content?: string;
 
+  @colorContextConsumer() private on?: ColorTheme;
+
+  #float = new FloatingDOMController(this, {
+    content: (): HTMLElement | undefined | null => this.shadowRoot?.querySelector('#tooltip'),
+  });
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    ENTER_EVENTS.forEach(evt => this.addEventListener(evt, this.show));
+    EXIT_EVENTS.forEach(evt => this.addEventListener(evt, this.hide));
+  }
+
   override render() {
     const { on = '' } = this;
+    const { alignment, anchor, open, styles } = this.#float;
+    const ariaHidden = String(!open) as 'true' | 'false';
+
     return html`
-      <div id="rh-container" class="${classMap({ [on]: !!on })}">
-        ${super.render()}
+      <div id="container"
+           style="${styleMap(styles)}"
+           class="${classMap({ open,
+                               [on]: !!on,
+                               [anchor]: !!anchor,
+                               [alignment]: !!alignment })}">
+        <slot id="invoker" role="tooltip" aria-labelledby="tooltip"></slot>
+        <slot id="tooltip"
+              name="content"
+              aria-hidden="${ariaHidden}">${this.content}</slot>
       </div>
     `;
   }
+
+  /** Show the tooltip */
+  async show() {
+    await this.updateComplete;
+    const placement = this.position;
+    const offset =
+        !placement?.match(/top|bottom/) ? 15
+      : { mainAxis: 15, alignmentAxis: -4 };
+    await this.#float.show({ offset, placement });
+  }
+
+  /** Hide the tooltip */
+  async hide() {
+    await this.#float.hide();
+  }
 }
 
 declare global {