feat(tooltip-base): added options to disable middleware in floatingui (…

…#2128)
eBay · Mar 19, 2024 · a782388 · a782388
1 parent e064638
commit a782388
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 5 deletions.
diff --git a/.changeset/tasty-guests-allow.md b/.changeset/tasty-guests-allow.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+tooltip-base: added options to disable floating-ui middleware
diff --git a/src/components/components/ebay-tooltip-base/component-browser.ts b/src/components/components/ebay-tooltip-base/component-browser.ts
@@ -8,6 +8,7 @@ import {
     offset,
     arrow,
     type Placement,
+    inline,
 } from "@floating-ui/dom";
 import { pointerStyles } from "./constants";
 import type { WithNormalizedProps } from "../../../global";
@@ -22,6 +23,8 @@ interface TooptipBaseInput {
     "render-body"?: Marko.Renderable;
     placement?: Placement;
     "no-flip"?: boolean;
+    "not-inline"?: boolean;
+    "no-shift"?: boolean;
     pointer?: keyof typeof pointerStyles;
     "on-base-expand"?: (event: { originalEvent: Event }) => void;
     "on-base-collapse"?: (event: { originalEvent: Event }) => void;
@@ -122,8 +125,6 @@ class TooltipBase extends Marko.Component<Input> {
     }
 
     updateTip() {
-        const isTourtip = this.input.type === "tourtip";
-
         computePosition(
             this.hostEl as HTMLElement,
             this.overlayEl as HTMLElement,
@@ -133,8 +134,9 @@ class TooltipBase extends Marko.Component<Input> {
                     pointerStyles[this.input.pointer ?? "bottom"],
                 middleware: [
                     offset(this.input.offset || 6),
+                    !this.input.notInline && inline(),
                     !this.input.noFlip && flip(),
-                    !isTourtip && shift(),
+                    !this.input.noShift && shift(),
                     arrow({
                         element: this.arrowEl as HTMLElement,
                         padding: 20,

diff --git a/src/components/ebay-infotip/component.ts b/src/components/ebay-infotip/component.ts
@@ -16,6 +16,8 @@ interface InfotipInput extends Omit<Marko.Input<"span">, `on${string}`> {
         renderBody?: Marko.Renderable;
     } & Iterable<any>;
     "no-flip"?: TooltipBaseInput["no-flip"];
+    "not-inline"?: TooltipBaseInput["not-inline"];
+    "no-shift"?: TooltipBaseInput["no-shift"];
     content: Marko.AttrTag<Marko.Input<"span">>;
     "a11y-close-button-text"?: AttrString;
     "on-expand"?: () => void;

diff --git a/src/components/ebay-infotip/index.marko b/src/components/ebay-infotip/index.marko
@@ -12,6 +12,8 @@ $ const {
     pointer = "bottom",
     variant,
     noFlip,
+    noShift,
+    notInline,
     ...htmlInput
 } = input;
 
@@ -25,6 +27,8 @@ $ var classPrefix = !isModal ? "infotip" : "dialog--mini";
         type=classPrefix
         overlayId:scoped="overlay"
         noFlip=noFlip
+        noShift=noShift
+        notInline=notInline
         offset=input.offset
         pointer=input.pointer
         placement=input.placement

diff --git a/src/components/ebay-infotip/infotip.stories.ts b/src/components/ebay-infotip/infotip.stories.ts
@@ -69,7 +69,21 @@ export default {
         },
         noFlip: {
             control: { type: "boolean" },
-            description: "disables flipping tooltip when its offscreen",
+            description: "disables flipping infotip when its offscreen",
+            table: {
+                defaultValue: { summary: "false" },
+            },
+        },
+        noShift: {
+            control: { type: "boolean" },
+            description: "disables shifting infotip when its offscreen",
+            table: {
+                defaultValue: { summary: "false" },
+            },
+        },
+        notInline: {
+            control: { type: "boolean" },
+            description: "disables moving infotip to be inline with content when it is rendered",
             table: {
                 defaultValue: { summary: "false" },
             },

diff --git a/src/components/ebay-tooltip/component.ts b/src/components/ebay-tooltip/component.ts
@@ -12,6 +12,8 @@ interface TooltipInput extends Omit<Marko.Input<"span">, `on${string}`> {
     pointer?: TooltipBaseInput["pointer"];
     placement?: TooltipBaseInput["placement"];
     offset?: TooltipBaseInput["offset"];
+    "not-inline"?: TooltipBaseInput["not-inline"];
+    "no-shift"?: TooltipBaseInput["no-shift"];
     "no-flip"?: TooltipBaseInput["no-flip"];
     "on-expand"?: () => void;
     "on-collapse"?: () => void;

diff --git a/src/components/ebay-tooltip/index.marko b/src/components/ebay-tooltip/index.marko
@@ -10,6 +10,8 @@ $ const {
     offset,
     placement,
     pointer = "bottom",
+    noShift,
+    notInline,
     noFlip,
     ...htmlInput
 } = input;
@@ -25,6 +27,8 @@ $ const {
         type="tooltip"
         overlayId:scoped="overlay"
         noFlip=noFlip
+        notInline=notInline
+        noShift=noShift
         noHover=noHover
         pointer=pointer
         placement=placement

diff --git a/src/components/ebay-tooltip/tooltip.stories.ts b/src/components/ebay-tooltip/tooltip.stories.ts
@@ -74,6 +74,20 @@ export default {
                 defaultValue: { summary: "false" },
             },
         },
+        noShift: {
+            control: { type: "boolean" },
+            description: "disables shifting tooltip when its offscreen",
+            table: {
+                defaultValue: { summary: "false" },
+            },
+        },
+        notInline: {
+            control: { type: "boolean" },
+            description: "disables moving tooltip to be inline with content when it is rendered",
+            table: {
+                defaultValue: { summary: "false" },
+            },
+        },
         onCollapse: {
             action: "on-collapse",
             description: "Triggered on menu collapse",

diff --git a/src/components/ebay-tourtip/component.ts b/src/components/ebay-tourtip/component.ts
@@ -13,6 +13,8 @@ interface TourtipInput extends Omit<Marko.Input<"span">, `on${string}`> {
     content?: TooltipOverlayInput["content"];
     "a11y-close-text"?: TooltipOverlayInput["a11yCloseText"];
     "no-flip"?: TooltipBaseInput["noFlip"];
+    "not-inline"?: TooltipBaseInput["not-inline"];
+    "no-shift"?: TooltipBaseInput["no-shift"];
     footer?: TooltipOverlayInput["footer"] & {
         index?: string;
     };

diff --git a/src/components/ebay-tourtip/index.marko b/src/components/ebay-tourtip/index.marko
@@ -8,6 +8,8 @@ $ const {
     host,
     open,
     noFlip,
+    notInline,
+    noShift = true,
     pointer = "bottom",
     ...htmlInput
 } = input;
@@ -17,6 +19,8 @@ $ const {
         key="base"
         type="tourtip"
         noFlip=noFlip
+        notInline=notInline
+        noShift=noShift
         pointer=input.pointer
         placement=input.placement
         offset=input.offset

diff --git a/src/components/ebay-tourtip/tourtip.stories.ts b/src/components/ebay-tourtip/tourtip.stories.ts
@@ -78,7 +78,21 @@ export default {
         },
         noFlip: {
             control: { type: "boolean" },
-            description: "disables flipping tooltip when its offscreen",
+            description: "disables flipping tourtip when its offscreen",
+            table: {
+                defaultValue: { summary: "false" },
+            },
+        },
+        noShift: {
+            control: { type: "boolean" },
+            description: "disables shifting tourtip when its offscreen",
+            table: {
+                defaultValue: { summary: "true" },
+            },
+        },
+        notInline: {
+            control: { type: "boolean" },
+            description: "disables moving tourtip to be inline with content when it is rendered",
             table: {
                 defaultValue: { summary: "false" },
             },