feat(tooltip): swapped to use floatingui (#2037)

eBay · Dec 23, 2023 · 55c758f · 55c758f
1 parent d6348b9
commit 55c758f
Show file tree

Hide file tree

Showing 22 changed files with 3,389 additions and 3,573 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -142,6 +142,7 @@
     },
     "dependencies": {
         "@marko-tags/subscribe": "^0.5.0",
+        "@floating-ui/core": "^1.5.2",
         "makeup-active-descendant": "0.6.1",
         "makeup-expander": "~0.10.1",
         "makeup-floating-label": "~0.3.2",

diff --git a/src/components/components/ebay-tooltip-base/component-browser.ts b/src/components/components/ebay-tooltip-base/component-browser.ts
@@ -1,14 +1,19 @@
 import Expander from "makeup-expander";
 import focusables from "makeup-focusables";
+import { inline, autoUpdate, flip, computePosition, shift, offset, arrow, type Placement } from '@floating-ui/dom';
+import { pointerStyles } from './constants'
 
 interface TooptipBaseInput {
     open?: boolean;
     toJSON?: () => Object;
     type: string;
+    offset?: number;
     "no-hover"?: boolean;
     "overlay-style"?: string;
     "overlay-id"?: string;
     "render-body"?: Marko.Renderable;
+    placement?: Placement;
+    pointer?: keyof typeof pointerStyles;
     "on-base-expand"?: (event: { originalEvent: Event }) => void;
     "on-base-collapse"?: (event: { originalEvent: Event }) => void;
 }
@@ -18,9 +23,14 @@ class TooltipBase extends Marko.Component<Input> {
     declare action: "expand" | "collapse" | null;
     declare _expander: any;
     declare cancelFocus: ReturnType<typeof focusables>;
+    declare hostEl: HTMLElement | null;
+    declare overlayEl: HTMLElement | null;
+    declare arrowEl: HTMLElement | null;
+    cleanup: (() => void) | undefined;
 
     handleExpand() {
         this.emit("base-expand");
+        this.updateTip();
     }
 
     handleCollapse() {
@@ -75,7 +85,7 @@ class TooltipBase extends Marko.Component<Input> {
         const expanderEl = container?.getElementsByClassName(type)[0];
 
         if (host && !isTourtip) {
-            this._expander = new Expander(expanderEl, {
+           this._expander = new Expander(expanderEl, {
                 hostSelector: hostSelector,
                 contentSelector: `.${type}__overlay`,
                 expandedClass: `${type}--expanded`,
@@ -90,9 +100,65 @@ class TooltipBase extends Marko.Component<Input> {
                 host.setAttribute("aria-describedby", input.overlayId!);
             }
         }
+        if (this.hostEl && this.overlayEl) {
+            this.updateTip();
+            this.cleanup = autoUpdate(
+                this.hostEl,
+                this.overlayEl,
+                this.update.bind(this),
+            );
+        }
     }
 
+    updateTip() {
+            computePosition((this.hostEl as HTMLElement), (this.overlayEl as HTMLElement), {
+                placement: this.input.placement || pointerStyles[this.input.pointer ?? 'bottom'],
+                middleware: [
+                    offset(this.input.offset || 6),
+                    inline(),
+                    flip(),
+                    shift(),
+                    arrow({ element: this.arrowEl as HTMLElement, padding: 20 }),
+                ],
+            }).then(({ x, y, placement, middlewareData }) => {
+                Object.assign(this.overlayEl?.style || {}, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+
+                // Accessing the data
+                const arrowX = middlewareData.arrow?.x;
+                const arrowY = middlewareData.arrow?.y;
+
+                const staticSide = {
+                    top: 'bottom',
+                    strategy: 'fixed',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[placement.split('-')[0]];
+
+                Object.assign(this.arrowEl?.style || {}, {
+                    left: arrowX != null ? `${arrowX}px` : '',
+                    top: arrowY != null ? `${arrowY}px` : '',
+                    right: '',
+                    bottom: '',
+                    [staticSide || '']: '-4px',
+                });
+            });
+        }
+
+
     _setupBaseTooltip() {
+        const { type } = this.input;
+        const hostClass = `${type}__host`;
+        const hostSelector = `.${hostClass}`;
+
+        this.hostEl = this.el?.querySelector(hostSelector) || null;
+        this.overlayEl = this.el?.querySelector(`.${type}__overlay`) || null;
+        this.arrowEl = this.el?.querySelector(`.${type}__pointer`) || null;
+
+
         if (this.input.type !== "dialog--mini") {
             this._setupMakeup();
         }
@@ -148,6 +214,10 @@ class TooltipBase extends Marko.Component<Input> {
             this._expander.destroy();
             this._expander = undefined;
         }
+        if (this.cleanup) {
+            this.cleanup();
+            this.cleanup = undefined;
+        }
     }
 }
 

diff --git a/src/components/components/ebay-tooltip-base/constants.ts b/src/components/components/ebay-tooltip-base/constants.ts
@@ -0,0 +1,16 @@
+import type { Placement } from '@floating-ui/dom';
+
+export const pointerStyles:{[index: string]: Placement} = {
+    "left": "right",
+    "left-top": "right-start",
+    "left-bottom": "right-end",
+    "right": "left",
+    "right-top": "left-start",
+    "right-bottom": "left-end",
+    "top": "bottom",
+    "top-left": "bottom-start",
+    "top-right": "bottom-end",
+    "bottom-right": "top-end",
+    "bottom-left": "top-start",
+    "bottom": "top",
+} as const;
diff --git a/src/components/components/ebay-tooltip-overlay/component-browser.ts b/src/components/components/ebay-tooltip-overlay/component-browser.ts
@@ -1,13 +1,16 @@
 import type { AttrClass } from "marko/tags-html";
-import type { pointerStyles, typeRoles } from "./constants";
+export const typeRoles = {
+    tourtip: "region",
+    tooltip: "tooltip",
+    infotip: "tooltip",
+} as const;
 
 interface TooltipOverlayInput {
     toJSON?: any;
     "style-top"?: string;
     "style-left"?: string;
     "style-right"?: string;
     "style-bottom"?: string;
-    pointer?: keyof typeof pointerStyles;
     heading?: Marko.Input<"span"> & {
         as: Marko.NativeTags;
         renderBody: Marko.Body;

diff --git a/src/components/components/ebay-tooltip-overlay/constants.ts b/src/components/components/ebay-tooltip-overlay/constants.ts
diff --git a/src/components/components/ebay-tooltip-overlay/index.marko b/src/components/components/ebay-tooltip-overlay/index.marko
@@ -1,5 +1,5 @@
 import { processHtmlAttributes } from "../../../common/html-attributes";
-import { typeRoles, pointerStyles } from "./constants";
+import { typeRoles } from "./component-browser";
 
 static function noop() {}
 
@@ -8,30 +8,12 @@ $ input.toJSON = noop;
 $ const {
     id,
     type,
-    styleTop,
-    styleLeft,
-    styleRight,
-    styleBottom,
-    pointer,
     heading,
     content,
     footer,
     a11yCloseText,
 } = input;
 
-$ var hasUserStyles = (
-    styleTop ||
-    styleLeft ||
-    styleRight ||
-    styleBottom
-);
-$ var overlayStyles = hasUserStyles ? {
-    top: styleTop,
-    left: styleLeft,
-    right: styleRight,
-    bottom: styleBottom
-} : pointerStyles[pointer || "bottom"];
-
 <span
     id=id
     class=`${type}__overlay`
@@ -41,11 +23,11 @@ $ var overlayStyles = hasUserStyles ? {
         heading &&
         component.elId("tourtip-label")
     )
-    style=overlayStyles>
-    <span class=`${type}__pointer ${type}__pointer--${pointer}`/>
-    <span class=`${type}__mask`>
-        <span class=`${type}__cell`>
-            <span class=`${type}__content`>
+>
+    <span class=`${input.type}__pointer`/>
+    <span class=`${input.type}__mask`>
+        <span class=`${input.type}__cell`>
+            <span class=`${input.type}__content`>
                 <if(heading)>
                     $ const {
                         as: headingAs,

diff --git a/src/components/ebay-infotip/component.ts b/src/components/ebay-infotip/component.ts
@@ -1,17 +1,15 @@
-import { pointerStyles } from "../components/ebay-tooltip-overlay/constants";
 import EbayTooltipBase from "../components/ebay-tooltip-base/component-browser";
+import type { Input as TooltipBaseInput } from "../components/ebay-tooltip-base/component-browser";
 
 interface InfotipInput extends Omit<Marko.Input<"span">, `on${string}`> {
     open?: boolean;
     variant?: "modal" | "default";
-    pointer?: keyof typeof pointerStyles;
+    offset?: TooltipBaseInput['offset'];
+    pointer?: TooltipBaseInput['pointer'];
+    placement?: TooltipBaseInput['placement'];
     disabled?: boolean;
     "aria-label"?: string;
     icon?: Marko.AttrTag<{ renderBody: Marko.Renderable }>;
-    "style-left"?: string;
-    "style-right"?: string;
-    "style-top"?: string;
-    "style-bottom"?: string;
     heading: Marko.Input<"span"> & {
         as: Marko.NativeTags;
         renderBody: Marko.Renderable;

diff --git a/src/components/ebay-infotip/index.marko b/src/components/ebay-infotip/index.marko
@@ -10,10 +10,6 @@ $ const {
     icon,
     open,
     pointer = "bottom",
-    styleBottom,
-    styleLeft,
-    styleRight,
-    styleTop,
     variant,
     ...htmlInput
 } = input;
@@ -27,6 +23,9 @@ $ var classPrefix = !isModal ? "infotip" : "dialog--mini";
         key="base"
         type=classPrefix
         overlayId:scoped="overlay"
+        offset=input.offset
+        pointer=input.pointer
+        placement=input.placement
         onBase-expand(isModal ? undefined : "handleExpand")
         onBase-collapse(isModal ? undefined : "handleCollapse")>
         <span
@@ -60,11 +59,6 @@ $ var classPrefix = !isModal ? "infotip" : "dialog--mini";
                 <ebay-tooltip-overlay
                     type="infotip"
                     id:scoped="overlay"
-                    styleLeft=styleLeft
-                    styleTop=styleTop
-                    styleRight=styleRight
-                    styleBottom=styleBottom
-                    pointer=pointer
                     heading=heading
                     content=content
                     a11y-close-text=a11yCloseButtonText