From 45c755d2df2e565f5f02a78b37708858989a4abe Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 15 Nov 2023 22:44:16 +0100
Subject: [PATCH 1/4] improvement: [chip/tag] fix #225 - use isEllipsis to
 trigger tooltip

---
 packages/components/chip/src/chip.vue      | 21 +++++++++++++---
 packages/components/chip/test/chip.spec.ts |  2 +-
 packages/components/tag/src/tag.vue        | 29 ++++++++++++++++------
 packages/components/tag/test/tag.spec.ts   |  2 +-
 packages/theme/src/chip.scss               |  9 ++++---
 packages/theme/src/tag.scss                |  6 ++---
 6 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/packages/components/chip/src/chip.vue b/packages/components/chip/src/chip.vue
index af8bcfdf..0c5eb1a8 100644
--- 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,8 +28,10 @@
 </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({
@@ -36,9 +39,19 @@ defineOptions({
 })
 
 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
index 41c2a904..96d33333 100644
--- 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
index dec7e99f..0b05ece4 100644
--- 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
index 5139e57c..0b56ed7f 100644
--- 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
index dc08939b..e743d923 100644
--- a/packages/theme/src/chip.scss
+++ b/packages/theme/src/chip.scss
@@ -26,10 +26,13 @@
     @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;
     }
+    // & > .puik-tooltip {
+    //   @apply max-w-[150px] overflow-hidden whitespace-nowrap text-ellipsis;
+    // }
   }
   &__content .puik-tooltip__wrapper {
     @apply max-w-[150px] mr-1 pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
diff --git a/packages/theme/src/tag.scss b/packages/theme/src/tag.scss
index f5d8a57a..dd4efa26 100644
--- 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 {

From c73b19b6fca6e40dd966f75339067e71d0352fbb Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 17 Nov 2023 17:22:27 +0100
Subject: [PATCH 2/4] fix: #251 - typography tokens

---
 docs/stories/styles/Typography.stories.ts |  3 ++
 packages/tailwind-preset/theme.js         | 10 ++++-
 packages/theme/src/common/typography.scss | 54 ++++++++++++++---------
 3 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/docs/stories/styles/Typography.stories.ts b/docs/stories/styles/Typography.stories.ts
index a4be7b21..bca61276 100644
--- a/docs/stories/styles/Typography.stories.ts
+++ b/docs/stories/styles/Typography.stories.ts
@@ -41,10 +41,13 @@ export const BrandTitle = generateStory(`
 
 export const Body = generateStory(`
   <p class="puik-body-large-bold">.puik-body-large-bold</p>
+  <p class="puik-body-large-medium">.puik-body-large-medium</p>
   <p class="puik-body-large">.puik-body-large</p>
   <p class="puik-body-default-bold">.puik-body-default-bold</p>
+  <p class="puik-body-default-medium">.puik-body-default-medium</p>
   <p class="puik-body-default">.puik-body-default</p>
   <p class="puik-body-small-bold">.puik-body-small-bold</p>
+  <p class="puik-body-small-medium">.puik-body-small-medium</p>
   <p class="puik-body-small">.puik-body-small</p>
   <p class="puik-body-default-link">.puik-body-default-link</p>
 `)
diff --git a/packages/tailwind-preset/theme.js b/packages/tailwind-preset/theme.js
index 0d0b162a..2e0595af 100644
--- a/packages/tailwind-preset/theme.js
+++ b/packages/tailwind-preset/theme.js
@@ -88,7 +88,15 @@ module.exports = {
       materialIcons: ['Material Icons Round'],
     },
     fontSize: {
-      '4xl': '2rem',
+      xs: ['0.75rem', { lineHeight: '1.125rem' }],
+      sm: ['0.875rem', { lineHeight: '1.25rem' }],
+      base: ['1rem', { lineHeight: '1.375rem' }],
+      lg: ['1.125rem', { lineHeight: '1.375rem' }],
+      xl: ['1.25rem', { lineHeight: '1.75rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+      '4xl': ['2rem', { lineHeight: '2.625rem' }],
+      '5xl': ['3rem', { lineHeight: '3.625rem' }],
     },
     screens: {
       xs: '320px',
diff --git a/packages/theme/src/common/typography.scss b/packages/theme/src/common/typography.scss
index 9013806f..7a298514 100644
--- a/packages/theme/src/common/typography.scss
+++ b/packages/theme/src/common/typography.scss
@@ -1,23 +1,23 @@
 // Titles
 
 .puik-jumbotron {
-  @apply text-5xl leading-[3.625rem] -tracking-[0.066875rem] font-extrabold font-primary;
+  @apply text-5xl -tracking-[0.066875rem] font-extrabold font-primary;
 }
 
 .puik-h1 {
-  @apply text-4xl leading-[2.625rem] -tracking-[0.043125rem] font-bold font-primary;
+  @apply text-4xl -tracking-[0.043125rem] font-bold font-primary;
 }
 
 .puik-h2 {
-  @apply text-2xl leading-8 -tracking-[0.029375rem] font-semibold font-primary;
+  @apply text-2xl -tracking-[0.029375rem] font-semibold font-primary;
 }
 
 .puik-h3 {
-  @apply text-xl leading-[1.875rem] -tracking-[0.020625rem] font-semibold font-primary;
+  @apply text-lg -tracking-[0.01125rem] font-semibold font-primary;
 }
 
 .puik-h4 {
-  @apply text-lg leading-[1.625rem] -tracking-[0.01625rem] font-medium font-primary;
+  @apply text-lg -tracking-[0.01125rem] font-medium font-primary;
 }
 
 .puik-h5 {
@@ -30,45 +30,57 @@
 
 // Brand title
 
+.puik-brand-jumbotron {
+  @extend .puik-jumbotron;
+  @apply font-secondary font-normal;
+}
+
 .puik-brand-h1 {
   @extend .puik-h1;
-  @apply -tracking-[0] font-secondary font-normal;
+  @apply font-secondary font-normal;
 }
 
 .puik-brand-h2 {
   @extend .puik-h2;
-  @apply -tracking-[0] font-secondary font-normal;
-}
-
-.puik-brand-jumbotron {
-  @extend .puik-jumbotron;
-  @apply -tracking-[0] font-secondary font-normal;
+  @apply font-secondary font-normal;
 }
 
 // Body
 
 .puik-body-small {
-  @apply text-xs leading-5 font-primary;
+  @apply text-xs font-primary;
+}
+
+.puik-body-small-medium {
+  @apply text-xs font-primary font-medium;
 }
 
 .puik-body-small-bold {
-  @apply text-xs leading-5 font-primary font-bold;
+  @apply text-xs font-primary font-bold;
 }
 
 .puik-body-default {
-  @apply text-sm leading-5 font-primary;
+  @apply text-sm font-primary;
+}
+
+.puik-body-default-medium {
+  @apply text-sm font-primary font-medium;
 }
 
 .puik-body-default-bold {
-  @apply text-sm leading-5 font-primary font-bold;
+  @apply text-sm font-primary font-bold;
 }
 
 .puik-body-large {
-  @apply text-base leading-[1.375rem] font-primary;
+  @apply text-base font-primary;
+}
+
+.puik-body-large-medium {
+  @apply text-base font-primary font-medium;
 }
 
 .puik-body-large-bold {
-  @apply text-base leading-[1.375rem] font-primary font-bold;
+  @apply text-base font-primary font-bold;
 }
 
 .puik-body-default-link {
@@ -93,13 +105,13 @@
 // Buttons
 
 .puik-text-button-default {
-  @apply font-primary font-medium text-sm leading-[1.125rem];
+  @apply font-primary font-medium text-sm/[1.125rem];
 }
 
 .puik-text-button-small {
-  @apply font-primary text-xs leading-4 font-medium;
+  @apply font-primary text-xs/4 font-medium;
 }
 
 .puik-text-button-large {
-  @apply font-primary text-base leading-5 font-medium;
+  @apply font-primary text-base/5 font-medium;
 }

From f5d401314d0bbd814667e5cbf5b94d0f0a55a8b2 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 17 Nov 2023 17:28:14 +0100
Subject: [PATCH 3/4] fix: chip.scss - remove comments

---
 packages/theme/src/chip.scss | 3 ---
 1 file changed, 3 deletions(-)

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

From b5d3e1ea41b8188b04e9b169c34509ddd9c8bba5 Mon Sep 17 00:00:00 2001
From: Mike Lebeau <mike.lebeau@prestashop.com>
Date: Tue, 21 Nov 2023 08:43:38 +0100
Subject: [PATCH 4/4] fix: tab nav remove flex col and the min width

---
 .../tab-navigation/stories/tab-navigation.stories.ts     | 9 +++++++--
 packages/theme/src/tab-navigation-group-titles.scss      | 2 +-
 packages/theme/src/tab-navigation-title.scss             | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/components/tab-navigation/stories/tab-navigation.stories.ts b/packages/components/tab-navigation/stories/tab-navigation.stories.ts
index b8cbbcd4..61bfef07 100644
--- a/packages/components/tab-navigation/stories/tab-navigation.stories.ts
+++ b/packages/components/tab-navigation/stories/tab-navigation.stories.ts
@@ -137,8 +137,13 @@ export const Default: Story = {
   parameters: {
     docs: {
       description: {
-        story:
-          'NB: The id attribute of the component corresponds to the prop name (allows you to identify each instance of the navigation component in the event that there are several on the same page)',
+        story: `
+  NB: The id attribute of the component corresponds to the prop name (allows you to identify each instance of the navigation component in the event that there are several on the same page).
+  
+  Tips: 
+  - If you want to set a width: set a width on the 'puik-tab-navigation'
+  - If you want to set a width on tab nav: set a MIN-WIDTH on the 'puik-tab-navigation-title'
+          `,
       },
       source: {
         code: `
diff --git a/packages/theme/src/tab-navigation-group-titles.scss b/packages/theme/src/tab-navigation-group-titles.scss
index 17dc41ae..b869aab1 100644
--- a/packages/theme/src/tab-navigation-group-titles.scss
+++ b/packages/theme/src/tab-navigation-group-titles.scss
@@ -1,3 +1,3 @@
 .puik-tab-navigation__group-titles {
-  @apply flex flex-col min-h-[48px] sm:flex-row sm:flex-wrap;
+  @apply flex overflow-x-auto min-h-[48px] relative;
 }
diff --git a/packages/theme/src/tab-navigation-title.scss b/packages/theme/src/tab-navigation-title.scss
index 2575d041..7abbb442 100644
--- a/packages/theme/src/tab-navigation-title.scss
+++ b/packages/theme/src/tab-navigation-title.scss
@@ -1,7 +1,7 @@
 @use './common/typography.scss';
 
 .puik-tab-navigation__title {
-  @apply relative p-2 flex gap-2 whitespace-nowrap border-b border-b-primary-400 items-center cursor-pointer puik-body-default-bold sm:w-[135px];
+  @apply relative p-2 flex gap-2 whitespace-nowrap border-b border-b-primary-400 items-center cursor-pointer puik-body-default-bold;
 
   &:focus:not(:hover) {
     @apply bg-primary-400 outline-none;