Merge pull request #69 from PrestaShopCorp/feat/add-max-width-prop-fo…

…r-tooltip Add max width prop for tooltip
PrestaShopCorp · Jan 17, 2023 · 811d573 · 811d573
2 parents 8c8c9de + 9c790c4
commit 811d573
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -47,4 +47,29 @@ describe('Tooltip tests', () => {
     await factory({ position: 'right' })
     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')
+  })
+
+  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
@@ -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;
     }