feat(ktooltip): render a plain slot if no label or content (#1802)

* feat(ktooltip): render a plain slot if no label or content * test: assert slot content exists --------- Co-authored-by: Adam DeHaven <[email protected]>
Kong · Oct 30, 2023 · 56b29e6 · 56b29e6
1 parent 8fc6af7
commit 56b29e6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 22 deletions.
diff --git a/src/components/KTooltip/KTooltip.cy.ts b/src/components/KTooltip/KTooltip.cy.ts
@@ -38,7 +38,7 @@ describe('KTooltip', () => {
   // Loop through varients
   positions.map(p => rendersCorrectPosition(p))
 
-  it('does not render the tooltip if the `label` prop is empty', () => {
+  it('renders the default slot content but not the tooltip if the `label` prop is empty', () => {
     const text = 'Button text'
 
     mount(KTooltip, {
@@ -47,12 +47,12 @@ describe('KTooltip', () => {
         trigger: 'click',
       },
       slots: {
-        default: () => h('button', {}, text),
+        default: () => h('button', { 'data-testid': 'my-button' }, text),
       },
     })
 
-    cy.get('button').click()
+    cy.getTestId('my-button').should('be.visible').click()
 
-    cy.get('.k-tooltip').should('have.class', 'k-tooltip-hidden').and('not.be.visible')
+    cy.get('.k-tooltip').should('not.exist')
   })
 })
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
@@ -1,5 +1,6 @@
 <template>
   <KPop
+    v-if="showTooltip"
     v-bind="$attrs"
     hide-caret
     :max-width="maxWidth"
@@ -13,10 +14,7 @@
   >
     <slot />
 
-    <template
-      v-if="showTooltip"
-      #content
-    >
+    <template #content>
       <div role="tooltip">
         <slot
           :label="label"
@@ -27,6 +25,10 @@
       </div>
     </template>
   </KPop>
+
+  <template v-else>
+    <slot />
+  </template>
 </template>
 
 <script setup lang="ts">
@@ -83,27 +85,23 @@ const slots = useSlots()
 const showTooltip = computed((): boolean => !!props.label || !!slots.content)
 
 const computedClass = computed((): string => {
-  const result = []
+  let result = ''
   switch (props.placement) {
     case 'top':
-      result.push('k-tooltip-top')
+      result = 'k-tooltip-top'
       break
     case 'right':
-      result.push('k-tooltip-right')
+      result = 'k-tooltip-right'
       break
     case 'bottom':
-      result.push('k-tooltip-bottom')
+      result = 'k-tooltip-bottom'
       break
     case 'left':
-      result.push('k-tooltip-left')
+      result = 'k-tooltip-left'
       break
   }
 
-  if (!showTooltip.value) {
-    result.push('k-tooltip-hidden')
-  }
-
-  return result.join(' ')
+  return result
 })
 </script>
 
@@ -120,10 +118,6 @@ const computedClass = computed((): string => {
   --KPopBorder: none;
   pointer-events: none;
   z-index: 9999;
-
-  &.k-tooltip-hidden {
-    display: none;
-  }
 }
 
 .k-tooltip-top {