feat(ktooltip): reskin component styles [KHCP-9007]

docs/components/dropdown.md

@@ -299,7 +299,7 @@ KDropdownItem takes care of icon color, size and spacing as long as you use icon
         Docs
         <KTooltip
           class="dropdown-item-content-end"
-          label="This is a tooltip"
+          text="This is a tooltip"
         >
           <InfoIcon />
         </KTooltip>
@@ -315,7 +315,7 @@ KDropdownItem takes care of icon color, size and spacing as long as you use icon
     Docs
     <KTooltip
       class="dropdown-item-content-end"
-      label="This is a tooltip"
+      text="This is a tooltip"
     >
       <InfoIcon />
     </KTooltip>

docs/components/tooltip.md

@@ -1,56 +1,56 @@
-# ToolTip
+# Tooltip
 
-**KTooltip** is a tooltip component that is used when you need a simple label to be displayed when hovering over an element. KTooltip has a single slot that takes in the element that you want the tooltip to trigger over. At least the label prop must be passed in for the tooltip to display anything. For example a button:
+A tooltip is aninformative message that appears when a user hovers over, focuses on, or taps an element, providing additional context, guidance, or information without cluttering the interface.
 
-<KTooltip label="Video Games">
-  <KButton>What is your hobby?</KButton>
+<KTooltip text="Simple tooltip.">
+  <InfoIcon />
 </KTooltip>
 
 ```html
-<KTooltip label="Video Games">
-  <KButton>What is your hobby?</KButton>
+<KTooltip text="Simple tooltip.">
+  <InfoIcon />
 </KTooltip>
 ```
 
 ## Props
 
-### label
+### text
 
-Here you can pass in the text to display in the tooltip.
+Text to display in the tooltip.
 
-<KTooltip label="I am a new sample label">
-  <KButton>Sample Button</KButton>
+<KTooltip text="You will receive a notification once your request is approved.">
+  <KButton>Request</KButton>
 </KTooltip>
 
 ```html
-<KTooltip label="I am a new sample label">
-  <KButton>Sample Button</KButton>
+<KTooltip text="You will receive a notification once your request is approved.">
+  <KButton>Request</KButton>
 </KTooltip>
 ```
 
-When using the `label` prop (or the [`content` slot](#content)), passing a value of `undefined`, an empty string, or no `content` slot content will prevent the tooltip from showing, while still displaying your `default` slot content.
+When using the `text` prop (or the [`content` slot](#content)), passing a value of `undefined`, an empty string, or no `content` slot content will prevent the tooltip from showing, while still displaying your `default` slot content.
 
-<KTooltip :label="labelProptooltipText">
-  <KButton>My tooltip label is empty</KButton>
+<KTooltip text="">
+  <KButton>My tooltip text is empty</KButton>
 </KTooltip>
 
 ```html
-<KTooltip :label="tooltipLabel">
-  <KButton>My tooltip label is empty</KButton>
+<KTooltip :text="tooltipText">
+  <KButton>My tooltip text is empty</KButton>
 </KTooltip>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-// The tooltip doesn't have label text yet,
+// The tooltip doesn't have text yet,
 // so hovering over the button will not render an empty tooltip
-const tooltipLabel = ref<string>('')
+const tooltipText = ref<string>('')
 </script>
 ```
 
 ### placement
 
-This is where the tooltip will appear - by default it appears on top.
+Where the tooltip should appear - by default it appears on top.
 
 Here are the different options:
 
@@ -62,49 +62,42 @@ Here are the different options:
   </li>
 </ul>
 
-<div class="custom-tooltip">
-  <KTooltip placement="bottom" label="A label that appears on the bottom">
+<div class="tooltip-container">
+  <KTooltip placement="bottom" text="A tooltip that appears on the bottom.">
     <KButton>bottom</KButton>
   </KTooltip>
-  <KTooltip placement="top" label="A label that appears on the top">
-    <KButton>top</KButton>
+  <KTooltip placement="topEnd" text="A tooltip that appears on the top.">
+    <KButton>topEnd</KButton>
   </KTooltip>
-  <KTooltip placement="left" label="A label that appears on the left">
+  <KTooltip placement="left" text="A tooltip that appears on the left.">
     <KButton>left</KButton>
   </KTooltip>
-  <KTooltip placement="right" label="A label that appears on the right">
-    <KButton>right</KButton>
+  <KTooltip placement="bottomStart" text="A tooltip that appears on the bottom.">
+    <KButton>bottomStart</KButton>
   </KTooltip>
 </div>
 
-<style>
-.custom-tooltip {
-  display: flex !important;
-  justify-content: space-around !important;
-}
-</style>
-
 ```html
-<KTooltip placement="bottom" label="A label that appears on the bottom">
+<KTooltip placement="bottom" text="A tooltip that appears on the bottom.">
   <KButton>Sample Button</KButton>
 </KTooltip>
 ```
 
 ### positionFixed
 
-Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to `false`. See [`KPop` docs](popover.html#positionfixed) for more information.
+Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to `true`. See [KPop docs](/components/popover#positionfixed) for more information.
 
 ### maxWidth
 
-You can set the maximum width of a Tooltip with the `maxWidth` property. `maxWidth` defaults to `auto`.
+You can set the maximum width of the tooltip container with the `maxWidth` property. `maxWidth` defaults to `auto`.
 
-<KTooltip placement="bottom" max-width="300" label="A label that appears on the bottom. A label that appears on the bottom">
-  <KButton>bottom</KButton>
+<KTooltip max-width="300" text="A very long tooltip that wraps to the next line. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
+  <InfoIcon />
 </KTooltip>
 
 ```html
-<KTooltip placement="bottom" max-width="300" label="A label that appears on the bottom. A label that appears on the bottom">
-  <KButton>button</KButton>
+<KTooltip max-width="300" text="A very long tooltip that wraps to the next line. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
+  <InfoIcon />
 </KTooltip>
 ```
 
@@ -115,28 +108,40 @@ You can set the maximum width of a Tooltip with the `maxWidth` property. `maxWid
 The `default` slot takes in the element you want the popover to be triggered over.
 
 ```html
-<KTooltip label="a cool label">
-  <!-- Your element goes here -->
-  <KButton>button</KButton>
+<KTooltip text="A simple tooltip.">
+  <KButton>Button</KButton>
 </KTooltip>
 ```
 
 ### content
 
 The content slot allows you to slot in any html content
 
-<KTooltip label="Video Games">
-  <KButton>&nbsp;✌🏻</KButton>
-  <template v-slot:content>
-    <span><b>yoyo</b> <em>ktooltip</em></span>
+<KTooltip>
+  <InfoIcon />
+
+  <template #content>
+    Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code>
   </template>
 </KTooltip>
 
 ```html
 <KTooltip>
-  <KButton>&nbsp;✌🏻</KButton>
-  <template v-slot:content>
-    <span><b>yoyo</b> <em>ktooltip</em></span>
+  <InfoIcon />
+
+  <template #content>
+    Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code>
   </template>
 </KTooltip>
 ```
+
+<script setup lang="ts">
+import { InfoIcon } from '@kong/icons'
+</script>
+
+<style lang="scss" scoped>
+.tooltip-container {
+  display: flex;
+  justify-content: space-around;
+}
+</style>

docs/guide/migrating-to-version-9.md

@@ -520,6 +520,18 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KTooltip
 
+#### Props
+
+* `testMode` prop has been removed
+* `label` prop has been deprecated in favor of `text` prop
+* default value of `positionFixed` prop has been changed to `true`
+
+#### Structure
+
+* `k-tooltip-top` class has been changed to `tooltip-top`
+* `k-tooltip-right` class has been changed to `tooltip-right`
+* `k-tooltip-bottom` class has been changed to `tooltip-bottom`
+* `k-tooltip-left` class has been changed to `tooltip-left`
 
 ### KTree List
 

sandbox/pages/SandboxDropdown.vue

@@ -248,7 +248,7 @@
               Docs
               <KTooltip
                 class="dropdown-item-content-end"
-                label="This is a tooltip"
+                text="This is a tooltip"
               >
                 <InfoIcon />
               </KTooltip>
@@ -323,7 +323,7 @@
               Docs
               <KTooltip
                 class="dropdown-item-content-end"
-                label="This is a tooltip"
+                text="This is a tooltip"
               >
                 <InfoIcon />
               </KTooltip>

src/components/KCopy/KCopy.vue

@@ -14,9 +14,9 @@
         v-if="format !== 'hidden'"
         :class="[textTooltipClasses]"
         data-testid="copy-tooltip-wrapper"
-        :label="textTooltipLabel"
         placement="bottomStart"
         position-fixed
+        :text="textTooltipLabel"
       >
         <span
           class="copy-text"
@@ -28,10 +28,10 @@
 
       <KTooltip
         class="text-icon-wrapper"
-        :label="tooltipText"
         max-width="500px"
         placement="bottomStart"
         position-fixed
+        :text="tooltipText"
       >
         <KClipboardProvider v-slot="{ copyToClipboard }">
           <CopyIcon

src/components/KMultiselect/KMultiselect.vue

@@ -108,8 +108,8 @@
               <KTooltip
                 v-if="invisibleSelectedItems.length"
                 class="hidden-selection-count-tooltip"
-                :label="hiddenItemsTooltip"
                 max-width="300"
+                :text="hiddenItemsTooltip"
               >
                 <KBadge
                   :appearance="getBadgeAppearance()"

src/components/KTooltip/KTooltip.cy.ts

@@ -4,23 +4,14 @@ import { h } from 'vue'
 
 const positions = ['top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'right', 'rightStart', 'rightEnd', 'bottom', 'bottomStart', 'bottomEnd']
 
-/**
- * ALL TESTS MUST USE testMode: true
- * We generate unique IDs for reference by aria properties. Test mode strips these out
- * allowing for successful snapshot verification.
- * props: {
- *   testMode: true
- * }
- */
 const rendersCorrectPosition = (variant: string) => {
   it(`renders tooltip to the ${variant} side`, () => {
     const text = 'Button text'
 
     mount(KTooltip, {
       props: {
-        testMode: true,
         placement: variant,
-        label: `I'm on the ${variant} side!`,
+        text: `I'm on the ${variant} side!`,
         trigger: 'click',
       },
       slots: {
@@ -30,20 +21,19 @@ const rendersCorrectPosition = (variant: string) => {
 
     cy.get('button').click()
 
-    cy.get('.k-tooltip').should('be.visible').and('not.have.class', 'k-tooltip-hidden').and('have.text', `I'm on the ${variant} side!`)
+    cy.get('.k-tooltip').should('be.visible').and('have.text', `I'm on the ${variant} side!`)
   })
 }
 
 describe('KTooltip', () => {
   // Loop through varients
   positions.map(p => rendersCorrectPosition(p))
 
-  it('renders the default slot content but not the tooltip if the `label` prop is empty', () => {
+  it('renders the default slot content but not the tooltip if the text prop is empty', () => {
     const text = 'Button text'
 
     mount(KTooltip, {
       props: {
-        testMode: true,
         trigger: 'click',
       },
       slots: {