Merge pull request #247 from PrestaShopCorp/improvement/chip-tag-appa…

…rition-de-la-tooltip-changer-la-condition improvement: [chip/tag] fix #225 - use isEllipsis to trigger tooltip
PrestaShopCorp · Nov 22, 2023 · 1c55a83 · 1c55a83
2 parents 92db8cf + 8660712
commit 1c55a83
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 20 deletions.
diff --git a/packages/components/chip/src/chip.vue b/packages/components/chip/src/chip.vue
@@ -9,14 +9,15 @@
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-chip__icon" />
     <div class="puik-chip__content">
       <puik-tooltip
-        v-if="content?.length >= 30"
+        :key="content"
+        :is-disabled="!showTooltip"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
       >
-        <template #description>{{ content }}</template>
-        {{ content }}
+        <p ref="chipContentElem">
+          {{ content }}
+        </p>
       </puik-tooltip>
-      {{ content }}
     </div>
     <PuikIcon
       icon="close"
@@ -27,18 +28,30 @@
 </template>
 
 <script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
 import { PuikIcon } from '@puik/components/icon'
 import { PuikTooltip } from '@puik/components/tooltip'
+import { isEllipsisActive } from '@puik/utils'
 import { chipProps, type PuikChipSizeVariant } from './chip'
 import type { PuikTooltipPosition } from '@puik/components/tooltip'
 defineOptions({
   name: 'PuikChip',
 })
 
 const props = defineProps(chipProps)
+const chipContentElem = ref(null)
+const showTooltip = ref(false)
+
 const emit = defineEmits(['close'])
 
 const handleCloseEvent = () => {
   emit('close')
 }
+
+watch(chipContentElem, async () => {
+  await nextTick()
+  if (chipContentElem?.value) {
+    showTooltip.value = isEllipsisActive(chipContentElem.value)
+  }
+})
 </script>
diff --git a/packages/components/chip/test/chip.spec.ts b/packages/components/chip/test/chip.spec.ts
@@ -6,7 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 describe('Chip tests', () => {
   let wrapper: VueWrapper<any>
   const findChip = () => wrapper.find('.puik-chip')
-  const findChipContent = () => wrapper.find('.puik-chip__content')
+  const findChipContent = () => wrapper.find('.puik-chip__content p')
   const findCloseBtn = () => wrapper.find('.puik-chip__close')
   const findLeftIcon = () => wrapper.find('.puik-chip__icon')
 

diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
@@ -7,27 +7,30 @@
     ]"
   >
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
-    <div
-      class="puik-tag__content"
-      :data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
-    >
+    <div class="puik-tag__content">
       <puik-tooltip
-        v-if="content?.length >= 30"
+        :key="content"
+        :is-disabled="!showTooltip"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
         :data-test="dataTest != undefined ? `tooltip-${dataTest}` : undefined"
       >
-        <template #description>{{ content }}</template>
-        {{ content }}
+        <p
+          ref="tagContentElem"
+          :data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
+        >
+          {{ content }}
+        </p>
       </puik-tooltip>
-      {{ content }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
 import { PuikIcon } from '@puik/components/icon'
 import { PuikTooltip } from '@puik/components/tooltip'
+import { isEllipsisActive } from '@puik/utils'
 import {
   tagProps,
   type PuikTagSizeVariant,
@@ -39,9 +42,19 @@ defineOptions({
 })
 
 const props = defineProps(tagProps)
+const tagContentElem = ref(null)
+const showTooltip = ref(false)
+
 const emit = defineEmits(['close'])
 
 const handleCloseEvent = () => {
   emit('close')
 }
+
+watch(tagContentElem, async () => {
+  await nextTick()
+  if (tagContentElem?.value) {
+    showTooltip.value = isEllipsisActive(tagContentElem.value)
+  }
+})
 </script>
diff --git a/packages/components/tag/test/tag.spec.ts b/packages/components/tag/test/tag.spec.ts
@@ -6,7 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 describe('Tag tests', () => {
   let wrapper: VueWrapper<any>
   const findTag = () => wrapper.find('.puik-tag')
-  const findTagContent = () => wrapper.find('.puik-tag__content')
+  const findTagContent = () => wrapper.find('.puik-tag__content p')
   const findLeftIcon = () => wrapper.find('.puik-tag__icon')
 
   const factory = (

diff --git a/packages/theme/src/chip.scss b/packages/theme/src/chip.scss
@@ -26,9 +26,9 @@
     @apply mr-1;
   }
   &__content {
-    @apply max-w-[150px] pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
-    & > .puik-tooltip {
-      @apply max-w-[150px] overflow-hidden whitespace-nowrap text-ellipsis;
+    @apply relative max-w-[150px];
+    p {
+      @apply pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
     }
   }
   &__content .puik-tooltip__wrapper {

diff --git a/packages/theme/src/tag.scss b/packages/theme/src/tag.scss
@@ -41,9 +41,9 @@
     @apply mr-1;
   }
   &__content {
-    @apply max-w-[150px] pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
-    & > .puik-tooltip {
-      @apply max-w-[150px] overflow-hidden whitespace-nowrap text-ellipsis;
+    @apply relative max-w-[150px];
+    p {
+      @apply pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
     }
   }
   &__content .puik-tooltip__wrapper {