UI-483 : Extracted Tooltip component styles (#419)

packages/alto/src/components/Tooltip/Tooltip.vue

@@ -17,18 +17,18 @@ const tooltipPosition = () => {
 };
 
 const handleScroll = () => {
-  if (!triggeredElement.value?.classList.contains('triggered-element-hide')) {
-    triggeredElement.value?.classList.add('triggered-element-hide');
+  if (!triggeredElement.value?.classList.contains('yc-tooltip__triggered--hide')) {
+    triggeredElement.value?.classList.add('yc-tooltip__triggered--hide');
   }
 };
 
 const handleMouseEnter = () => {
-  triggeredElement.value?.classList.remove('triggered-element-hide');
+  triggeredElement.value?.classList.remove('yc-tooltip__triggered--hide');
   tooltipPosition();
 };
 
 onMounted(() => {
-  triggeredElement.value?.classList.remove('triggered-element-hide');
+  triggeredElement.value?.classList.remove('yc-tooltip__triggered--hide');
   tooltipPosition();
   window.addEventListener('scroll', handleScroll);
 });
@@ -39,44 +39,14 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div v-if="label" ref="tooltip" class="tooltip" :class="position" @mouseenter="handleMouseEnter">
-    <span ref="triggeredElement" class="triggered-element">{{ label }}</span>
+  <div v-if="label" ref="tooltip" class="yc-tooltip" :class="position" @mouseenter="handleMouseEnter">
+    <span ref="triggeredElement" class="yc-tooltip__triggered">{{ label }}</span>
 
     <slot />
   </div>
   <slot v-else />
 </template>
 
 <style scoped>
-.tooltip {
-  display: inline-block;
-  position: relative;
-}
-
-.tooltip .triggered-element {
-  visibility: hidden;
-  position: fixed;
-  z-index: 9999999999;
-  width: max-content;
-  max-width: 200px;
-  padding: 8px 12px;
-  transition: opacity 0.3s ease-in-out;
-  transition-delay: 0.1s;
-  border-radius: 4px;
-  opacity: 0;
-  background-color: var(--base-black);
-  color: var(--base-white);
-  font: var(--text-xs-regular);
-}
-
-.tooltip .triggered-element-hide {
-  visibility: hidden !important;
-  opacity: 0 !important;
-}
-
-.tooltip:hover .triggered-element {
-  visibility: visible;
-  transition-delay: 0.2s;
-  opacity: 1;
-}
+@import "@youcan/styles/tooltip";
 </style>

packages/styles/package.json

@@ -24,6 +24,7 @@
     "./textarea": "./dist/textarea.css",
     "./status": "./dist/status.css",
     "./thumbnail": "./dist/thumbnail.css",
+    "./tooltip": "./dist/tooltip.css",
     "./toggle": "./dist/toggle.css",
     "./input": "./dist/input.css"
   },

packages/styles/src/css/index.css

@@ -933,6 +933,34 @@
   color: var(--gray-300);
 }
 
+.tooltip {
+  display: inline-block;
+  position: relative;
+}
+.tooltip__triggered {
+  visibility: hidden;
+  position: fixed;
+  z-index: 9999999999;
+  width: max-content;
+  max-width: 200px;
+  padding: 8px 12px;
+  transition: opacity 0.3s ease-in-out;
+  transition-delay: 0.1s;
+  border-radius: 4px;
+  opacity: 0;
+  background-color: var(--base-black);
+  color: var(--base-white);
+  font: var(--text-xs-regular);
+}
+.tooltip__triggered--hide {
+  visibility: hidden !important;
+  opacity: 0 !important;
+}
+.tooltip:hover .tooltip__triggered {
+  visibility: visible;
+  transition-delay: 0.2s;
+  opacity: 1;
+=======
 .wrapper {
   display: flex;
   box-sizing: border-box;

packages/styles/src/css/tooltip.css

@@ -0,0 +1,28 @@
+.tooltip {
+  display: inline-block;
+  position: relative;
+}
+.tooltip__triggered {
+  visibility: hidden;
+  position: fixed;
+  z-index: 9999999999;
+  width: max-content;
+  max-width: 200px;
+  padding: 8px 12px;
+  transition: opacity 0.3s ease-in-out;
+  transition-delay: 0.1s;
+  border-radius: 4px;
+  opacity: 0;
+  background-color: var(--base-black);
+  color: var(--base-white);
+  font: var(--text-xs-regular);
+}
+.tooltip__triggered--hide {
+  visibility: hidden !important;
+  opacity: 0 !important;
+}
+.tooltip:hover .tooltip__triggered {
+  visibility: visible;
+  transition-delay: 0.2s;
+  opacity: 1;
+}

packages/styles/src/scss/components/tooltip.scss

@@ -0,0 +1,33 @@
+.tooltip {
+  display: inline-block;
+  position: relative;
+
+  &__triggered {
+    visibility: hidden;
+    position: fixed;
+    z-index: 9999999999;
+    width: max-content;
+    max-width: 200px;
+    padding: 8px 12px;
+    transition: opacity 0.3s ease-in-out;
+    transition-delay: 0.1s;
+    border-radius: 4px;
+    opacity: 0;
+    background-color: var(--base-black);
+    color: var(--base-white);
+    font: var(--text-xs-regular);
+
+    &--hide {
+      visibility: hidden !important;
+      opacity: 0 !important;
+    }
+  }
+
+  &:hover {
+    .tooltip__triggered {
+      visibility: visible;
+      transition-delay: 0.2s;
+      opacity: 1;
+    }
+  }
+}

packages/styles/src/scss/index.scss

@@ -14,6 +14,7 @@
 @import "components/status";
 @import "components/breadcrumbs";
 @import "components/thumbnail";
+@import "components/tooltip";
 @import "components/toggle";
 @import "components/input";
 @import "components/textarea";