fix(tooltip-base): added option for no flip

eBay · Mar 5, 2024 · fd5c565 · fd5c565
1 parent 4dbbbe8
commit fd5c565
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 2 deletions.
diff --git a/.changeset/pretty-turtles-dream.md b/.changeset/pretty-turtles-dream.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": patch
+---
+
+(ebay-tooltip-base): added option to ignore flip
diff --git a/src/components/components/ebay-tooltip-base/component-browser.ts b/src/components/components/ebay-tooltip-base/component-browser.ts
@@ -21,6 +21,7 @@ interface TooptipBaseInput {
     "overlay-id"?: string;
     "render-body"?: Marko.Renderable;
     placement?: Placement;
+    "no-flip"?: boolean;
     pointer?: keyof typeof pointerStyles;
     "on-base-expand"?: (event: { originalEvent: Event }) => void;
     "on-base-collapse"?: (event: { originalEvent: Event }) => void;
@@ -132,7 +133,7 @@ class TooltipBase extends Marko.Component<Input> {
                     pointerStyles[this.input.pointer ?? "bottom"],
                 middleware: [
                     offset(this.input.offset || 6),
-                    flip(),
+                    !this.input.noFlip && flip(),
                     !isTourtip && shift(),
                     arrow({
                         element: this.arrowEl as HTMLElement,

diff --git a/src/components/ebay-carousel/carousel.stories.ts b/src/components/ebay-carousel/carousel.stories.ts
@@ -151,7 +151,6 @@ export default {
                 category: "accessibility attributes",
             },
         },
-
         //     text(
         //     'badge-aria-label',
         //     'number of notifications',

diff --git a/src/components/ebay-infotip/component.ts b/src/components/ebay-infotip/component.ts
@@ -15,6 +15,7 @@ interface InfotipInput extends Omit<Marko.Input<"span">, `on${string}`> {
         as?: Marko.NativeTags;
         renderBody?: Marko.Renderable;
     } & Iterable<any>;
+    "no-flip"?: TooltipBaseInput["no-flip"];
     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
@@ -11,6 +11,7 @@ $ const {
     open,
     pointer = "bottom",
     variant,
+    noFlip,
     ...htmlInput
 } = input;
 
@@ -23,6 +24,7 @@ $ var classPrefix = !isModal ? "infotip" : "dialog--mini";
         key="base"
         type=classPrefix
         overlayId:scoped="overlay"
+        noFlip=noFlip
         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
@@ -60,6 +60,13 @@ export default {
                 defaultValue: { summary: "6" },
             }
         },
+        noFlip: {
+            control: { type: "boolean" },
+            description: "disables flipping tooltip when its offscreen",
+            table: {
+                defaultValue: { summary: "false" },
+            }
+        },
         disabled: {
             control: { type: "boolean" },
             description: "adds a `disabled` attribute to the button",

diff --git a/src/components/ebay-tooltip/component.ts b/src/components/ebay-tooltip/component.ts
@@ -12,6 +12,7 @@ interface TooltipInput extends Omit<Marko.Input<"span">, `on${string}`> {
     pointer?: TooltipBaseInput["pointer"];
     placement?: TooltipBaseInput["placement"];
     offset?: TooltipBaseInput["offset"];
+    "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,7 @@ $ const {
     offset,
     placement,
     pointer = "bottom",
+    noFlip,
     ...htmlInput
 } = input;
 
@@ -23,6 +24,7 @@ $ const {
         key="base"
         type="tooltip"
         overlayId:scoped="overlay"
+        noFlip=noFlip
         noHover=noHover
         pointer=pointer
         placement=placement

diff --git a/src/components/ebay-tooltip/tooltip.stories.ts b/src/components/ebay-tooltip/tooltip.stories.ts
@@ -60,6 +60,13 @@ export default {
             description:
                 "allows dev to specify whether tooltip is open or closed",
         },
+        noFlip: {
+            control: { type: "boolean" },
+            description: "disables flipping tooltip when its offscreen",
+            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
@@ -12,6 +12,7 @@ interface TourtipInput extends Omit<Marko.Input<"span">, `on${string}`> {
     heading?: TooltipOverlayInput["heading"];
     content?: TooltipOverlayInput["content"];
     "a11y-close-text"?: TooltipOverlayInput["a11yCloseText"];
+    "no-flip"?: TooltipBaseInput["noFlip"];
     footer?: TooltipOverlayInput["footer"] & {
         index?: string;
     };

diff --git a/src/components/ebay-tourtip/index.marko b/src/components/ebay-tourtip/index.marko
@@ -7,6 +7,7 @@ $ const {
     heading,
     host,
     open,
+    noFlip,
     pointer = "bottom",
     ...htmlInput
 } = input;
@@ -15,6 +16,7 @@ $ const {
     <ebay-tooltip-base
         key="base"
         type="tourtip"
+        noFlip=noFlip
         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
@@ -69,6 +69,13 @@ export default {
                 category: "@attribute tags",
             },
         },
+        noFlip: {
+            control: { type: "boolean" },
+            description: "disables flipping tooltip when its offscreen",
+            table: {
+                defaultValue: { summary: "false" },
+            }
+        },
         open: {
             control: { type: "boolean" },
             description: