From cc4c41628a3245152934e974405b2656a3b4afd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <andre.amorim@prestashop.com>
Date: Tue, 17 Jan 2023 11:37:11 +0100
Subject: [PATCH 1/2] feat: add prop to set a max-width for the tooltip

---
 packages/components/tooltip/src/tooltip.ts    |  5 +++++
 packages/components/tooltip/src/tooltip.vue   |  2 +-
 .../tooltip/stories/tooltip.stories.ts        | 20 +++++++++++--------
 .../components/tooltip/test/tooltip.spec.ts   | 12 +++++++++++
 packages/theme/src/tooltip.scss               |  2 +-
 5 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/components/tooltip/src/tooltip.ts b/packages/components/tooltip/src/tooltip.ts
index 7d824830..e24dc85e 100644
--- a/packages/components/tooltip/src/tooltip.ts
+++ b/packages/components/tooltip/src/tooltip.ts
@@ -27,6 +27,11 @@ export const tooltipProps = buildProps({
     required: false,
     default: false,
   },
+  maxWidth: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   zindex: {
     type: Number,
     required: false,
diff --git a/packages/components/tooltip/src/tooltip.vue b/packages/components/tooltip/src/tooltip.vue
index d07d04ce..5df4a807 100644
--- a/packages/components/tooltip/src/tooltip.vue
+++ b/packages/components/tooltip/src/tooltip.vue
@@ -14,7 +14,7 @@
       ref="tooltip"
       class="puik-tooltip__tip"
       role="tooltip"
-      :style="{ 'z-index': zindex }"
+      :style="{ 'z-index': zindex, 'max-width': maxWidth }"
     >
       <span v-if="$slots.title || title" class="puik-tooltip__tip__title"
         ><slot name="title">{{ title }}</slot></span
diff --git a/packages/components/tooltip/stories/tooltip.stories.ts b/packages/components/tooltip/stories/tooltip.stories.ts
index b7de5245..03cb2a5e 100644
--- a/packages/components/tooltip/stories/tooltip.stories.ts
+++ b/packages/components/tooltip/stories/tooltip.stories.ts
@@ -33,6 +33,10 @@ export default {
         },
       },
     },
+    maxWidth: {
+      control: 'text',
+      description: 'Set a max-width for the tooltip',
+    },
     zindex: {
       control: 'number',
       description: 'Set the z-index level',
@@ -60,8 +64,8 @@ const Template: Story = (args: Args) => ({
     return { args }
   },
   template: `
-    <div style="display: flex; align-items: center; justify-content: center; height: 320px;">
-      <puik-tooltip :position="args.position">
+    <div class="flex items-center justify-center h-[320px]">
+      <puik-tooltip :position="args.position" :is-disabled="args.isDisabled" :max-width="args.maxWidth">
         <puik-icon font-size="1.25rem" icon="help_outline" />
         <template #title>{{ args.title }}</template>
         <template #description>{{ args.description }}</template>
@@ -78,7 +82,7 @@ export const DisabledTooltip = () => ({
     PuikButton,
   },
   template: `
-    <div style="display: flex; align-items: center; justify-content: center; height: 320px;">
+    <div class="flex items-center justify-center h-[320px]">
       <puik-tooltip :is-disabled="true" position="top">
         <puik-button>There is no tooltip</puik-button>
         <template #title>Title</template>
@@ -93,7 +97,7 @@ export const UsingAComponent = () => ({
     PuikButton,
   },
   template: `
-    <div style="display: flex; align-items: center; justify-content: center; height: 320px;">
+    <div class="flex items-center justify-center h-[320px]">
       <puik-tooltip position="top">
         <puik-button>Button</puik-button>
         <template #title>Title</template>
@@ -108,7 +112,7 @@ export const Bottom = () => ({
     PuikIcon,
   },
   template: `
-    <div style="display: flex; align-items: center; justify-content: center; height: 320px;">
+    <div class="flex items-center justify-center h-[320px]">
       <puik-tooltip position="bottom">
         <puik-icon font-size="1.25rem" icon="help_outline" />
         <template #title>Title</template>
@@ -123,7 +127,7 @@ export const Left = () => ({
     PuikIcon,
   },
   template: `
-    <div style="display: flex; align-items: center; justify-content: center; height: 320px;">
+    <div class="flex items-center justify-center h-[320px]">
       <puik-tooltip position="left">
         <puik-icon font-size="1.25rem" icon="help_outline" />
         <template #title>Title</template>
@@ -138,7 +142,7 @@ export const Right = () => ({
     PuikIcon,
   },
   template: `
-    <div style="display: flex; align-items: center; justify-content: center; height: 320px;">
+    <div class="flex items-center justify-center h-[320px]">
       <puik-tooltip position="right">
         <puik-icon font-size="1.25rem" icon="help_outline" />
         <template #title>Title</template>
@@ -156,7 +160,7 @@ export const Positions = (args: Args) => ({
     return { args }
   },
   template: `
-    <div style="display: flex; align-items: center; justify-content: center; height: 100vh;">
+    <div class="flex items-center justify-center h-screen">
       <puik-tooltip position="top">
         <puik-icon font-size="1.25rem" icon="help_outline" />
         <template #title>Title</template>
diff --git a/packages/components/tooltip/test/tooltip.spec.ts b/packages/components/tooltip/test/tooltip.spec.ts
index c5b8562c..86fcc82c 100644
--- a/packages/components/tooltip/test/tooltip.spec.ts
+++ b/packages/components/tooltip/test/tooltip.spec.ts
@@ -47,4 +47,16 @@ describe('Tooltip tests', () => {
     await factory({ position: 'right' })
     expect(findToolTip().attributes('data-popper-placement')).toBe('right')
   })
+
+  it('should have a custom z-index', async () => {
+    await factory({ zindex: 5000 })
+    expect(findToolTip().element.style.getPropertyValue('z-index')).toBe('5000')
+  })
+
+  it('should have a custom max-width', async () => {
+    await factory({ maxWidth: '200px' })
+    expect(findToolTip().element.style.getPropertyValue('max-width')).toBe(
+      '200px'
+    )
+  })
 })
diff --git a/packages/theme/src/tooltip.scss b/packages/theme/src/tooltip.scss
index bc0d1665..ef26cac1 100644
--- a/packages/theme/src/tooltip.scss
+++ b/packages/theme/src/tooltip.scss
@@ -8,7 +8,7 @@
   }
 
   &__tip {
-    @apply absolute bg-font text-white rounded px-3 py-2 font-secondary flex flex-col opacity-0 pointer-events-none w-[200px] transition-opacity;
+    @apply absolute bg-font text-white rounded px-3 py-2 font-secondary flex flex-col opacity-0 pointer-events-none transition-opacity;
     &:hover {
       @apply opacity-100;
     }

From 9c790c4ad46c525a48ed538431d83d7ecfd6e9a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <andre.amorim@prestashop.com>
Date: Tue, 17 Jan 2023 11:55:12 +0100
Subject: [PATCH 2/2] test: added test case for tooltip disable

---
 packages/components/tooltip/test/tooltip.spec.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/components/tooltip/test/tooltip.spec.ts b/packages/components/tooltip/test/tooltip.spec.ts
index 86fcc82c..a52f66b9 100644
--- a/packages/components/tooltip/test/tooltip.spec.ts
+++ b/packages/components/tooltip/test/tooltip.spec.ts
@@ -48,6 +48,19 @@ describe('Tooltip tests', () => {
     expect(findToolTip().attributes('data-popper-placement')).toBe('right')
   })
 
+  it('should be disabled', async () => {
+    await factory(
+      { isDisabled: true },
+      {
+        slots: {
+          default: '<button>Hover me</button>',
+        },
+      }
+    )
+    await expect(wrapper.find('button').trigger('mouseover'))
+    expect(findToolTip().isVisible()).toBe(false)
+  })
+
   it('should have a custom z-index', async () => {
     await factory({ zindex: 5000 })
     expect(findToolTip().element.style.getPropertyValue('z-index')).toBe('5000')