chore: update tooltip arrow position and style (#1829)

* chore: update tooltip arrow position and style * chore: tooltip was not firing an event when disconnected
momentum-design · Nov 19, 2024 · 232019d · 232019d
1 parent 1808b37
commit 232019d
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 50 deletions.
diff --git a/web-components/package.json b/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.14.23",
+  "version": "2.14.24",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

diff --git a/web-components/src/[sandbox]/examples/tooltip.ts b/web-components/src/[sandbox]/examples/tooltip.ts
@@ -96,8 +96,8 @@ export const tooltipTemplate = html`
     <md-tooltip message="Tooltip" placement="right">
       <md-button variant="secondary">Tooltip Right</md-button>
     </md-tooltip>
-    <md-tooltip message="Tooltip" placement="right">
-      <md-button variant="secondary">Tooltip Right</md-button>
+    <md-tooltip message="Long Tooltip Long Tooltip Long Tooltip Long Tooltip Long Tooltip" placement="left">
+      <md-button variant="secondary">Tooltip left</md-button>
     </md-tooltip>
   </div>
   <div class="row md-padding__vertical">
@@ -116,7 +116,7 @@ export const tooltipTemplate = html`
     </md-tooltip>
   </div>
   <div class="row md-padding__vertical">
-    <md-tooltip message="Tooltip" placement="right">
+    <md-tooltip message="Long Tooltip Long Tooltip Long Tooltip Long Tooltip Long Tooltip" placement="right">
       <md-button variant="secondary">Tooltip Right</md-button>
     </md-tooltip>
   </div>

diff --git a/web-components/src/components/taskitem/TaskItem.stories.ts b/web-components/src/components/taskitem/TaskItem.stories.ts
@@ -50,7 +50,7 @@ const render = (args: Args) => {
       @taskitem-keydown=${action("keydown")}
     >
       <md-badge slot="task-type" color="darkmint" circle>
-        <md-icon name="social-sms" size="20" iconSet="momentumDesign" color="white-100"></md-icon>
+        <md-icon name="sms-filled" size="20" iconSet="momentumDesign" color="white-100"></md-icon>
       </md-badge>
       <div>${args.time}</div>
     </md-task-item>

diff --git a/web-components/src/components/theme/Theme.ts b/web-components/src/components/theme/Theme.ts
@@ -8,7 +8,7 @@
 
 import styles from "@/components/tooltip/scss/module.scss";
 import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { arrow, createPopper, flip, Instance, offset } from "@popperjs/core/lib";
+import { arrow, createPopper, flip, Instance, offset, Placement } from "@popperjs/core/lib";
 import { defaultModifiers } from "@popperjs/core/lib/popper-lite";
 import { html, internalProperty, LitElement, property, PropertyValues, query } from "lit-element";
 import { Tooltip, TooltipEvent } from "../tooltip/Tooltip"; // Keep type import as a relative path
@@ -255,6 +255,9 @@ export namespace Theme {
 
     private createPopperInstance(placement: Tooltip.Placement) {
       if (this.virtualPopper) {
+        const halfArrowSize = 8;
+        const additionalPadding = 4;
+
         this.popperInstance = createPopper(this.virtualReference, this.virtualPopper, {
           placement,
           modifiers: [
@@ -265,7 +268,15 @@ export namespace Theme {
             {
               name: "offset",
               options: {
-                offset: [8, 8]
+                offset: ({ placement }: { placement: Placement }) => {
+                  const padding = halfArrowSize + additionalPadding;
+                  if (placement.startsWith("left") || placement.startsWith("right")) {
+                    return [0, padding];
+                  } else if (placement.startsWith("top") || placement.startsWith("bottom")) {
+                    return [0, padding];
+                  }
+                  return [8, 8]; // leave old defaults
+                }
               }
             },
             ...(this.virtualArrow
@@ -274,7 +285,7 @@ export namespace Theme {
                     name: "arrow",
                     options: {
                       element: this.virtualArrow,
-                      padding: 5
+                      padding: halfArrowSize
                     }
                   }
                 ]

diff --git a/web-components/src/components/tooltip/Tooltip.ts b/web-components/src/components/tooltip/Tooltip.ts
@@ -58,6 +58,8 @@ export namespace Tooltip {
     }
 
     disconnectedCallback(): void {
+      this.notifyTooltipDisconnected();
+
       super.disconnectedCallback();
       document.removeEventListener("keydown", this._keyDownListener);
       window.removeEventListener("wheel", this._wheelListener);
@@ -92,6 +94,16 @@ export namespace Tooltip {
       );
     }
 
+    private notifyTooltipDisconnected() {
+      document.dispatchEvent(
+        new CustomEvent("tooltip-disconnected", {
+          bubbles: true,
+          composed: true,
+          detail: {}
+        })
+      );
+    }
+
     private closeTooltip() {
       this.dispatchEvent(
         new CustomEvent<TooltipEvent>("tooltip-destroy", {

diff --git a/web-components/src/components/tooltip/scss/module.scss b/web-components/src/components/tooltip/scss/module.scss
@@ -4,9 +4,6 @@
 @import "@/wc_scss/colors/settings-transparencies";
 @import "@/wc_scss/settings/core";
 
-@import "./vars/lm-tooltip-settings";
-@import "./vars/md-tooltip-settings";
-
 @import "./settings";
 @import "./tooltip";
 
diff --git a/web-components/src/components/tooltip/scss/settings.scss b/web-components/src/components/tooltip/scss/settings.scss
@@ -3,9 +3,9 @@ $tooltip__min-width: 100px;
 $tooltip__padding: rem-calc(6) rem-calc(10);
 $tooltip__radius: rem-calc(4);
 $tooltip-arrow__size: rem-calc(16);
-$tooltip__font-size: var(--body-primary-font-size, rem-calc(14));
-$tooltip__line-height: var(--body-primary-line-height, rem-calc(21));
+$tooltip__font-size: rem-calc(14);
+$tooltip__line-height: rem-calc(20);
 
 $tooltip-box-shadow: 0 rem-calc(8) rem-calc(16) $black-16, 0 0 rem-calc(1) $black-16, 0 0 0 rem-calc(1) $md-gray-90;
-$tooltip-border-color: $md-gray-70;
+$tooltip-border-color: var(--tooltip-border, $md-gray-70);
 
diff --git a/web-components/src/components/tooltip/scss/tooltip.scss b/web-components/src/components/tooltip/scss/tooltip.scss
@@ -19,11 +19,11 @@
   }
 
   &__popper {
-    background-color: var(--tooltip-bg-color, $lm-tooltip-bg-color-light);
-    border: 1px solid var(--tooltip-border, $tooltip-border-color);
+    background-color: var(--tooltip-bg-color);
+    border: 1px solid $tooltip-border-color;
     border-radius: var(--tooltip-radius, $tooltip__radius);
     box-shadow: var(--tooltip-shadow, $tooltip-box-shadow);
-    color: var(--tooltip-font-color, $lm-tooltip-font-color-light);
+    color: var(--tooltip-font-color);
     display: none;
     font-size: $tooltip__font-size;
     line-height: $tooltip__line-height;
@@ -35,22 +35,26 @@
     word-break: break-word;
     z-index: 9999;
 
-    .md-tooltip__arrow,
-    .md-tooltip__arrow::before {
+    .md-tooltip__arrow {      
       height: $tooltip-arrow__size;
-      position: absolute;
       width: $tooltip-arrow__size;
       z-index: -1;
-    }
+      visibility: hidden;
 
-    .md-tooltip__arrow::before {
-      background-color: var(--tooltip-bg-color, $lm-tooltip-bg-color-light);
-      border: 1px solid var(--tooltip-border, var(--tooltip-bg-color, $lm-tooltip-bg-color-light));
-      box-shadow: var(--tooltip-shadow, "inset 0 0 0 1px $tooltip-border-color");
-      content: "";
-      pointer-events: none;
-      transform: rotate(45deg);
-      z-index: 1;
+      &::before {
+        content: "";
+        height: $tooltip-arrow__size;
+        width: $tooltip-arrow__size;
+        background-color: var(--tooltip-bg-color);
+        border: 1px solid var(--tooltip-border, var(--tooltip-bg-color));
+        position: absolute;
+        box-shadow: var(--tooltip-shadow, "inset 0 0 0 1px $tooltip-border-color");
+
+        pointer-events: none;
+        transform: rotate(45deg);
+        z-index: 1;
+        visibility: visible;
+      }
     }
 
     &[data-show] {
@@ -59,42 +63,48 @@
     }
 
     &[data-popper-placement^="top"] > .md-tooltip__arrow {
-      bottom: -7px;
-
+      bottom: 0;
       &::before {
-        border-radius: 0 0 $tooltip__radius 0;
-        clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
-        left: 0;
+        left: calc(50% - 8px);
+        bottom: -9px;
+        border-top: none;
+        border-left: none;
+        border-bottom-right-radius: 3px;
       }
     }
 
     &[data-popper-placement^="bottom"] > .md-tooltip__arrow {
-      top: var(--tooltip-arrow-bottom-top, -8px);
-
+      top: 0;
       &::before {
-        border-radius: $tooltip__radius 0 0 0;
-        clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
-        left: 0;
+        left: calc(50% - 8px);
+        top: -9px;
+        border-bottom: none;
+        border-right: none;
+        border-top-left-radius: $tooltip__radius;
       }
     }
 
     &[data-popper-placement^="left"] > .md-tooltip__arrow {
-      right: 1px;
+      right: 0;
 
       &::before {
-        top: var(--tooltip-arrow-right-before-top, inherit);
-        border-radius: 0 $tooltip__radius 0 0;
-        clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
+        top: calc(50% - 8px);
+        right: var(--tooltip-arrow-right-left, -8px);
+        border-bottom: none;
+        border-left: none;
+        border-top-right-radius: $tooltip__radius;
       }
     }
 
     &[data-popper-placement^="right"] > .md-tooltip__arrow {
-      left: var(--tooltip-arrow-right-left, -15px);
+      left: 0;
 
       &::before {
-        top: var(--tooltip-arrow-right-before-top, inherit);
-        border-radius: 0 0 0 $tooltip__radius;
-        clip-path: polygon(0% 100%, 100% 100%, 0% 0%);
+        top: calc(50% - 8px);
+        left: var(--tooltip-arrow-right-left, -8px);
+        border-right: none;
+        border-top: none;
+        border-bottom-left-radius: $tooltip__radius;
       }
     }
   }

diff --git a/web-components/src/components/tooltip/tokens/mdv2-tooltip-tokens.js b/web-components/src/components/tooltip/tokens/mdv2-tooltip-tokens.js
@@ -22,15 +22,15 @@ const tooltip = {
   arrow: {
     bottom: {
       top: {
-        common: "-9px"
+        common: "-8px"
       },
       "before-top": {
         common: "2px"
       }
     },
     right: {
       left: {
-        common: "-17px"
+        common: "-9px"
       },
       "before-top": {
         common: "2px"

diff --git a/web-components/src/wc_scss/themes/global--mdv2.scss b/web-components/src/wc_scss/themes/global--mdv2.scss
@@ -16,7 +16,7 @@ $inter-thin-oblique-font: "Inter Thin Oblique", $font-family-sans-serif;
 $inter-medium-font: "Inter Medium", $font-family-sans-serif;
 
 @mixin global-theme-specific-vars {
-  --rem-base: 16px;
+  --rem-base: 14px;
   --brand-font-regular: #{$inter-base-font};
   --brand-font-bold: #{$inter-bold-font};
   --brand-font-bold-oblique: #{$inter-bold-oblique-font};