fix(Tooltip): remove the wrapper div from activator slot

rotki · Oct 30, 2023 · dca6ae3 · dca6ae3
1 parent a24350a
commit dca6ae3
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {