feat: Added tooltip component (#1621)

* feat: Added tooltip component

---------

Co-authored-by: Radoslav Karaivanov <[email protected]>
Co-authored-by: Arkan Ahmedov <[email protected]>
Co-authored-by: didimmova <[email protected]>
Co-authored-by: Dilyana Yarabanova <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

Author: 5 people

CHANGELOG.md

@@ -6,8 +6,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Added
-- New File Input Component(`igc-file-input`)
+- File Input component
 - Exposed more public API type aliases for component property types like `ButtonVariant`, `PickerMode`, `StepperOrientation`, `HorizontalTransitionAnimation` (carousel and horizontal stepper) and more.
+- Tooltip component
 
 ### Deprecated
 - Some event argument types have been renamed for consistency:

src/animations/player.ts

@@ -71,6 +71,15 @@ class AnimationController implements ReactiveController {
     );
   }
 
+  public async playExclusive(animation: AnimationReferenceMetadata) {
+    const [_, event] = await Promise.all([
+      this.stopAll(),
+      this.play(animation),
+    ]);
+
+    return event.type === 'finish';
+  }
+
   public hostConnected() {}
 }
 

src/animations/presets/scale/index.ts

@@ -0,0 +1,18 @@
+import { EaseOut } from '../../easings.js';
+import { animation } from '../../types.js';
+
+const baseOptions: KeyframeAnimationOptions = {
+  duration: 350,
+  easing: EaseOut.Quad,
+};
+
+const scaleInCenter = (options = baseOptions) =>
+  animation(
+    [
+      { transform: 'scale(0)', opacity: 0 },
+      { transform: 'scale(1)', opacity: 1 },
+    ],
+    options
+  );
+
+export { scaleInCenter };

src/components/common/definitions/defineAllComponents.ts

@@ -63,6 +63,7 @@ import IgcTextareaComponent from '../../textarea/textarea.js';
 import IgcTileManagerComponent from '../../tile-manager/tile-manager.js';
 import IgcTileComponent from '../../tile-manager/tile.js';
 import IgcToastComponent from '../../toast/toast.js';
+import IgcTooltipComponent from '../../tooltip/tooltip.js';
 import IgcTreeItemComponent from '../../tree/tree-item.js';
 import IgcTreeComponent from '../../tree/tree.js';
 import { defineComponents } from './defineComponents.js';
@@ -136,6 +137,7 @@ const allComponents: IgniteComponent[] = [
   IgcTextareaComponent,
   IgcTileComponent,
   IgcTileManagerComponent,
+  IgcTooltipComponent,
 ];
 
 export function defineAllComponents() {

src/components/common/util.ts

@@ -292,10 +292,36 @@ export function isString(value: unknown): value is string {
   return typeof value === 'string';
 }
 
+export function isObject(value: unknown): value is object {
+  return value != null && typeof value === 'object';
+}
+
+export function isEventListenerObject(x: unknown): x is EventListenerObject {
+  return isObject(x) && 'handleEvent' in x;
+}
+
+export function addWeakEventListener(
+  element: Element,
+  event: string,
+  listener: EventListenerOrEventListenerObject,
+  options?: AddEventListenerOptions | boolean
+): void {
+  const weakRef = new WeakRef(listener);
+  const wrapped = (evt: Event) => {
+    const handler = weakRef.deref();
+
+    return isEventListenerObject(handler)
+      ? handler.handleEvent(evt)
+      : handler?.(evt);
+  };
+
+  element.addEventListener(event, wrapped, options);
+}
+
 /**
- * Returns whether a given collection has at least one member.
+ * Returns whether a given collection is empty.
  */
-export function isEmpty<T, U extends string>(
+export function isEmpty<T, U extends object>(
   x: ArrayLike<T> | Set<T> | Map<U, T>
 ): boolean {
   return 'length' in x ? x.length < 1 : x.size < 1;

src/components/common/utils.spec.ts

@@ -202,6 +202,14 @@ export function simulatePointerLeave(
   );
 }
 
+export function simulateFocus(node: Element) {
+  node.dispatchEvent(new FocusEvent('focus'));
+}
+
+export function simulateBlur(node: Element) {
+  node.dispatchEvent(new FocusEvent('blur'));
+}
+
 export function simulatePointerDown(
   node: Element,
   options?: PointerEventInit,

src/components/popover/popover.ts

@@ -1,8 +1,12 @@
 import {
   type Middleware,
+  type MiddlewareData,
+  type Placement,
+  arrow,
   autoUpdate,
   computePosition,
   flip,
+  inline,
   limitShift,
   offset,
   shift,
@@ -14,6 +18,7 @@ import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import {
+  first,
   getElementByIdFromRoot,
   isEmpty,
   isString,
@@ -59,7 +64,7 @@ export default class IgcPopoverComponent extends LitElement {
   private dispose?: ReturnType<typeof autoUpdate>;
   private target?: Element;
 
-  @query('#container', true)
+  @query('#container')
   private _container!: HTMLElement;
 
   @queryAssignedElements({ slot: 'anchor', flatten: true })
@@ -72,6 +77,23 @@ export default class IgcPopoverComponent extends LitElement {
   @property()
   public anchor?: Element | string;
 
+  /**
+   * Element to render as an "arrow" element for the current popover.
+   */
+  @property({ attribute: false })
+  public arrow: HTMLElement | null = null;
+
+  /** Additional offset to apply to the arrow element if enabled. */
+  @property({ type: Number, attribute: 'arrow-offset' })
+  public arrowOffset = 0;
+
+  /**
+   * Improves positioning for inline reference elements that span over multiple lines.
+   * Useful for tooltips or similar components.
+   */
+  @property({ type: Boolean, reflect: true })
+  public inline = false;
+
   /**
    * When enabled this changes the placement of the floating element in order to keep it
    * in view along the main axis.
@@ -110,8 +132,14 @@ export default class IgcPopoverComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public shift = false;
 
+  /**
+   * Virtual padding for the resolved overflow detection offsets in pixels.
+   */
+  @property({ type: Number, attribute: 'shift-padding' })
+  public shiftPadding = 0;
+
   @watch('anchor')
-  protected async anchorChange() {
+  protected anchorChange() {
     const newTarget = isString(this.anchor)
       ? getElementByIdFromRoot(this, this.anchor)
       : this.anchor;
@@ -127,11 +155,15 @@ export default class IgcPopoverComponent extends LitElement {
     this.open ? this.show() : this.hide();
   }
 
+  @watch('arrow', { waitUntilFirstUpdate: true })
+  @watch('arrowOffset', { waitUntilFirstUpdate: true })
   @watch('flip', { waitUntilFirstUpdate: true })
+  @watch('inline', { waitUntilFirstUpdate: true })
   @watch('offset', { waitUntilFirstUpdate: true })
   @watch('placement', { waitUntilFirstUpdate: true })
   @watch('sameWidth', { waitUntilFirstUpdate: true })
   @watch('shift', { waitUntilFirstUpdate: true })
+  @watch('shiftPadding', { waitUntilFirstUpdate: true })
   protected floatingPropChange() {
     this._updateState();
   }
@@ -151,7 +183,10 @@ export default class IgcPopoverComponent extends LitElement {
   }
 
   protected show() {
-    if (!this.target) return;
+    if (!this.target) {
+      return;
+    }
+
     this._showPopover();
 
     this.dispose = autoUpdate(
@@ -187,14 +222,23 @@ export default class IgcPopoverComponent extends LitElement {
       middleware.push(offset(this.offset));
     }
 
+    if (this.inline) {
+      middleware.push(inline());
+    }
+
     if (this.shift) {
       middleware.push(
         shift({
+          padding: this.shiftPadding,
           limiter: limitShift(),
         })
       );
     }
 
+    if (this.arrow) {
+      middleware.push(arrow({ element: this.arrow }));
+    }
+
     if (this.flip) {
       middleware.push(flip());
     }
@@ -222,25 +266,60 @@ export default class IgcPopoverComponent extends LitElement {
   }
 
   private async _updatePosition() {
-    if (!this.open || !this.target) {
+    if (!(this.open && this.target)) {
       return;
     }
 
-    const { x, y } = await computePosition(this.target, this._container, {
-      placement: this.placement ?? 'bottom-start',
-      middleware: this._createMiddleware(),
-      strategy: 'fixed',
-    });
+    const { x, y, middlewareData, placement } = await computePosition(
+      this.target,
+      this._container,
+      {
+        placement: this.placement ?? 'bottom-start',
+        middleware: this._createMiddleware(),
+        strategy: 'fixed',
+      }
+    );
 
     Object.assign(this._container.style, {
       left: 0,
       top: 0,
       transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
     });
+
+    this._positionArrow(placement, middlewareData);
+  }
+
+  private _positionArrow(placement: Placement, data: MiddlewareData) {
+    if (!(data.arrow && this.arrow)) {
+      return;
+    }
+
+    const { x, y } = data.arrow;
+
+    // The current placement of the popover along the x/y axis
+    const currentPlacement = first(placement.split('-'));
+
+    // The opposite side where the arrow element should render based on the `currentPlacement`
+    const staticSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right',
+    }[currentPlacement]!;
+
+    this.arrow.part = currentPlacement;
+
+    Object.assign(this.arrow.style, {
+      left: x != null ? `${roundByDPR(x + this.arrowOffset)}px` : '',
+      top: y != null ? `${roundByDPR(y + this.arrowOffset)}px` : '',
+      [staticSide]: '-4px',
+    });
   }
 
   private _anchorSlotChange() {
-    if (this.anchor || isEmpty(this._anchors)) return;
+    if (this.anchor || isEmpty(this._anchors)) {
+      return;
+    }
 
     this.target = this._anchors[0];
     this._updateState();