From dca6ae311d8c267d8c0423fc69b1b6fc5e563e75 Mon Sep 17 00:00:00 2001
From: Konstantinos Paparas <kelsos86@gmail.com>
Date: Mon, 30 Oct 2023 18:05:23 +0100
Subject: [PATCH] fix(Tooltip): remove the wrapper div from activator slot

---
 example/cypress/e2e/overlays/tooltip.cy.ts      |  6 +++---
 example/src/views/TooltipView.vue               |  2 +-
 src/components/overlays/tooltip/Tooltip.spec.ts |  6 ++++--
 src/components/overlays/tooltip/Tooltip.vue     | 10 +---------
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/example/cypress/e2e/overlays/tooltip.cy.ts b/example/cypress/e2e/overlays/tooltip.cy.ts
index cd30e79..de38882 100644
--- a/example/cypress/e2e/overlays/tooltip.cy.ts
+++ b/example/cypress/e2e/overlays/tooltip.cy.ts
@@ -10,7 +10,7 @@ describe('Tooltip', () => {
 
     cy.get('div[data-cy=tooltip-0]').as('defaultTooltip');
 
-    cy.get('@defaultTooltip').find('div[class*=_activator_]');
+    cy.get('@defaultTooltip').find('[data-cy=activator]');
     cy.get('@defaultTooltip').trigger('mouseover');
     cy.get('body').find('div[role=tooltip]');
     cy.get('@defaultTooltip').trigger('mouseleave');
@@ -20,7 +20,7 @@ describe('Tooltip', () => {
   it('checks for and trigger arrow tooltip', () => {
     cy.get('div[data-cy=tooltip-4]').as('tooltipWithArrow');
 
-    cy.get('@tooltipWithArrow').find('div[class*=_activator_]');
+    cy.get('@tooltipWithArrow').find('[data-cy=activator]');
     cy.get('@tooltipWithArrow').trigger('mouseover');
     cy.get('body').find('div[role=tooltip]').as('tooltip');
     cy.get('@tooltip').find('span[data-popper-arrow]');
@@ -32,7 +32,7 @@ describe('Tooltip', () => {
   it('disabled should not trigger tooltip', () => {
     cy.get('div[data-cy=tooltip-8]').as('disabledTooltip');
 
-    cy.get('@disabledTooltip').find('div[class*=_activator_]');
+    cy.get('@disabledTooltip').find('[data-cy=activator]');
     cy.get('@disabledTooltip').trigger('mouseover');
     cy.get('body').find('div[role=tooltip-content]').should('not.exist');
   });
diff --git a/example/src/views/TooltipView.vue b/example/src/views/TooltipView.vue
index e9d34d3..306e0d3 100644
--- a/example/src/views/TooltipView.vue
+++ b/example/src/views/TooltipView.vue
@@ -156,7 +156,7 @@ const tooltips = ref<
           :data-cy="`tooltip-${i}`"
         >
           <template #activator>
-            <RuiButton :color="tooltip.buttonColor">
+            <RuiButton data-cy="activator" :color="tooltip.buttonColor">
               {{ tooltip.buttonText }}
             </RuiButton>
           </template>
diff --git a/src/components/overlays/tooltip/Tooltip.spec.ts b/src/components/overlays/tooltip/Tooltip.spec.ts
index 112ea72..6b6f816 100644
--- a/src/components/overlays/tooltip/Tooltip.spec.ts
+++ b/src/components/overlays/tooltip/Tooltip.spec.ts
@@ -7,7 +7,9 @@ const createWrapper = (options?: any) =>
   mount(Tooltip, {
     ...options,
     slots: {
-      activator: { template: '<rui-button>Tooltip trigger</rui-button>' },
+      activator: {
+        template: '<rui-button id="trigger">Tooltip trigger</rui-button>',
+      },
       default: options?.props?.text ?? '',
     },
     stubs: { RuiButton: Button },
@@ -50,7 +52,7 @@ describe('Tooltip', () => {
         disabled: true,
       },
     });
-    expect(wrapper.get('div[class*=_activator_]')).toBeTruthy();
+    expect(wrapper.get('#trigger')).toBeTruthy();
     expect(document.body.querySelector('div[role=tooltip]')).toBeFalsy();
     wrapper.destroy();
   });
diff --git a/src/components/overlays/tooltip/Tooltip.vue b/src/components/overlays/tooltip/Tooltip.vue
index 6e29f61..82ca5b0 100644
--- a/src/components/overlays/tooltip/Tooltip.vue
+++ b/src/components/overlays/tooltip/Tooltip.vue
@@ -50,9 +50,7 @@ const {
     @mouseover="onMouseOver()"
     @mouseleave="onMouseLeave()"
   >
-    <div :class="css.activator">
-      <slot name="activator" :open="open" />
-    </div>
+    <slot name="activator" :open="open" />
 
     <RuiTeleport v-if="!disabled">
       <div
@@ -101,12 +99,6 @@ const {
 $arrowSize: 0.625rem;
 .wrapper {
   @apply relative inline-flex;
-
-  .activator {
-    @apply inline;
-
-    width: inherit;
-  }
 }
 
 .tooltip {