feat(tooltip): swapped to use floatingui

src/components/components/ebay-tooltip-base/component-browser.ts

@@ -1,6 +1,7 @@
 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;
@@ -11,7 +12,8 @@ interface TooptipBaseInput {
     "overlay-style"?: string;
     "overlay-id"?: string;
     "render-body"?: Marko.Renderable;
-    pointer?: Placement;
+    placement?: Placement;
+    pointer?: keyof typeof pointerStyles;
     "on-base-expand"?: (event: { originalEvent: Event }) => void;
     "on-base-collapse"?: (event: { originalEvent: Event }) => void;
 }
@@ -110,7 +112,7 @@ class TooltipBase extends Marko.Component<Input> {
 
     updateTip() {
             computePosition((this.hostEl as HTMLElement), (this.overlayEl as HTMLElement), {
-                placement: this.input.pointer,
+                placement: this.input.placement || pointerStyles[this.input.pointer ?? 'bottom'] as Placement,
                 middleware: [
                     offset(this.input.offset || 6),
                     inline(),

src/components/components/ebay-tooltip-base/constants.ts

@@ -0,0 +1,14 @@
+export const pointerStyles:{[index: string]: string} = {
+    "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;

src/components/ebay-infotip/component.ts

@@ -1,12 +1,12 @@
 import EbayTooltipBase from "../components/ebay-tooltip-base/component-browser";
-import type { Placement } from '@floating-ui/dom';
 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?: Placement;
     offset?: TooltipBaseInput['offset'];
+    pointer?: TooltipBaseInput['pointer'];
+    placement?: TooltipBaseInput['placement'];
     disabled?: boolean;
     "aria-label"?: string;
     icon?: Marko.AttrTag<{ renderBody: Marko.Renderable }>;

src/components/ebay-infotip/index.marko

@@ -17,7 +17,6 @@ static var ignoredAttributes = [
 ];
 $ var isModal = input.variant === "modal";
 $ var classPrefix = !isModal ? "infotip" : "dialog--mini";
-$ var pointer = input.pointer || "bottom";
 
 <span>
     <ebay-tooltip-base
@@ -26,7 +25,8 @@ $ var pointer = input.pointer || "bottom";
         type=classPrefix
         overlayId:scoped="overlay"
         offset=input.offset
-        pointer=pointer
+        pointer=input.pointer
+        placement=input.placement
         onBase-expand(isModal ? undefined : "handleExpand")
         onBase-collapse(isModal ? undefined : "handleCollapse")>
         <span

src/components/ebay-infotip/infotip.stories.ts

@@ -42,7 +42,7 @@ export default {
             description:
                 "Either modal or default. If modal will show the mobile version of infotip",
         },
-        pointer: {
+        placement: {
             options: [
                 'top', 'right', 'bottom', 'left',
                 'top-start', 'right-start', 'bottom-start', 'left-start',

src/components/ebay-infotip/marko-tag.json

@@ -24,10 +24,22 @@
             "left-top"
         ]
     },
-    "@style-top": "string",
-    "@style-left": "string",
-    "@style-right": "string",
-    "@style-bottom": "string",
+    "@placement": {
+        "enum": [
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "top-start",
+            "right-start",
+            "bottom-start",
+            "left-start",
+            "top-end",
+            "right-end",
+            "bottom-end",
+            "left-end"
+        ]
+    },
     "@aria-label": "string",
     "@variant": "string",
     "@a11y-close-button-text": "string",

src/components/ebay-tooltip/component.ts

@@ -9,6 +9,7 @@ interface TooltipInput extends Omit<Marko.Input<"span">, `on${string}`> {
     heading?: TooltipOverlayInput["heading"];
     content?: TooltipOverlayInput["content"];
     pointer?: TooltipBaseInput['pointer'];
+    placement?: TooltipBaseInput['placement'];
     offset?: TooltipBaseInput['offset'];
     "on-expand"?: () => void;
     "on-collapse"?: () => void;

src/components/ebay-tooltip/index.marko

@@ -3,18 +3,13 @@ import { processHtmlAttributes } from "../../common/html-attributes";
 static const isBrowser = typeof window !== "undefined";
 static var ignoredAttributes = [
     "pointer",
-    "styleTop",
-    "styleLeft",
-    "styleRight",
-    "styleBottom",
     "noHover",
     "host",
     "content",
-    "heading"
+    "heading",
+    "placement"
 ];
 
-$ var pointer = input.pointer || "bottom";
-
 <if(isBrowser && state.open)>
     <subscribe to=document as any on-keydown("handleKeydown")/>
 </if>
@@ -26,7 +21,8 @@ $ var pointer = input.pointer || "bottom";
         type="tooltip"
         overlayId:scoped="overlay"
         noHover=input.noHover
-        pointer=pointer
+        pointer=input.pointer
+        placement=input.placement
         offset=input.offset
         onBase-expand("handleExpand")
         onBase-collapse("handleCollapse")>

src/components/ebay-tooltip/marko-tag.json

@@ -21,10 +21,22 @@
             "left-top"
         ]
     },
-    "@style-top": "string",
-    "@style-left": "string",
-    "@style-right": "string",
-    "@style-bottom": "string",
+    "@placement": {
+        "enum": [
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "top-start",
+            "right-start",
+            "bottom-start",
+            "left-start",
+            "top-end",
+            "right-end",
+            "bottom-end",
+            "left-end"
+        ]
+    },
     "@no-hover": "boolean",
     "@heading <heading>": {
         "attribute-groups": ["html-attributes"],

src/components/ebay-tooltip/tooltip.stories.ts

@@ -21,7 +21,7 @@ export default {
     },
 
     argTypes: {
-        pointer: {
+        placement: {
             options: [
                 'top', 'right', 'bottom', 'left',
                 'top-start', 'right-start', 'bottom-start', 'left-start',

src/components/ebay-tourtip/component.ts

@@ -1,13 +1,13 @@
 import type { Input as TooltipBaseInput } from "../components/ebay-tooltip-base/component-browser";
 import type { Input as TooltipOverlayInput } from "../components/ebay-tooltip-overlay/component-browser";
-import type { Placement } from '@floating-ui/dom';
 
 interface TourtipInput extends Omit<Marko.Input<"span">, `on${string}`> {
     open?: boolean;
     "no-hover"?: TooltipBaseInput["noHover"];
     host?: Marko.Input<"span">;
     offset?: TooltipBaseInput['offset'];
-    pointer?: Placement;
+    pointer?: TooltipBaseInput['pointer'];
+    placement?: TooltipBaseInput['placement'];
     heading?: TooltipOverlayInput["heading"];
     content?: TooltipOverlayInput["content"];
     "a11y-close-text"?: TooltipOverlayInput["a11yCloseText"];

src/components/ebay-tourtip/index.marko

@@ -14,13 +14,12 @@ static var ignoredAttributes = [
     "content"
 ];
 
-$ var pointer = input.pointer || "bottom";
-
 <span>
     <ebay-tooltip-base
         key="base"
         type="tourtip"
-        pointer=pointer
+        pointer=input.pointer
+        placement=input.placement
         offset=input.offset
         overlay-id:scoped="overlay">
         <span

src/components/ebay-tourtip/marko-tag.json

@@ -21,10 +21,22 @@
             "left-top"
         ]
     },
-    "@style-top": "string",
-    "@style-left": "string",
-    "@style-right": "string",
-    "@style-bottom": "string",
+    "@placement": {
+        "enum": [
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "top-start",
+            "right-start",
+            "bottom-start",
+            "left-start",
+            "top-end",
+            "right-end",
+            "bottom-end",
+            "left-end"
+        ]
+    },
     "@a11y-close-text": "string",
     "@host <host>": {
         "attribute-groups": ["html-attributes"],

src/components/ebay-tourtip/tourtip.stories.ts

@@ -20,7 +20,7 @@ export default {
     },
 
     argTypes: {
-        pointer: {
+        placement: {
             options: [
                 'top', 'right', 'bottom', 'left',
                 'top-start', 'right-start', 'bottom-start', 'left-start',