fix(ktooltip): improve typings for ktooltip (#2703)

Author: Justineo

docs/components/tooltip.md

@@ -85,7 +85,7 @@ Here are the different options:
 
 ### maxWidth
 
-You can set the maximum width of the tooltip container 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 `none`.
 
 <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 />
@@ -121,6 +121,10 @@ A string to be used as `id` attribute on underlying `role="tooltip"` element. Us
 <KInput id="full-name-field" />
 ```
 
+### zIndex
+
+Pass a number to use for the `z-index` property. Default value is `9999`.
+
 ### kpopAttributes
 
 Use the `kpopAttributes` prop to configure the underlying [KPop's props](/components/popover).

src/components/KTooltip/KTooltip.vue

@@ -36,68 +36,28 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useId, useSlots } from 'vue'
-import type { PropType } from 'vue'
+import { computed, useId } from 'vue'
 import KPop from '@/components/KPop/KPop.vue'
-import type { PopPlacements , PopoverAttributes } from '@/types'
-import { PopPlacementsArray } from '@/types'
 import { KUI_SPACE_20 } from '@kong/design-tokens'
+import type { TooltipProps, TooltipSlots } from '@/types'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps({
-  /**
-  * Text to show in tooltip
-  */
-  text: {
-    type: String,
-    required: false,
-    default: '',
-  },
+const {
+  text = '',
+  placement = 'bottom',
+  maxWidth = 'none',
+  label = '',
+  tooltipId = '',
+  zIndex = 9999,
+  kpopAttributes = {},
+} = defineProps<TooltipProps>()
 
-  /**
-  * Define which side the tooltip displays
-  */
-  placement: {
-    type: String as PropType<PopPlacements>,
-    default: 'bottom',
-    validator: (value: PopPlacements):boolean => {
-      return PopPlacementsArray.includes(value)
-    },
-  },
-  /**
-  * Set the max-width of the ktooltip
-  */
-  maxWidth: {
-    type: String,
-    default: 'auto',
-  },
-  /**
-   * @deprecated in favor of text prop
-   */
-  label: {
-    type: String,
-    default: '',
-  },
-  tooltipId: {
-    type: String,
-    default: '',
-  },
-  zIndex: {
-    type: Number,
-    default: 9999,
-  },
-  kpopAttributes: {
-    type: Object as PropType<PopoverAttributes>,
-    default: () => {},
-  },
-})
-
-const slots = useSlots()
+const slots = defineSlots<TooltipSlots>()
 
-const showTooltip = computed((): boolean => !!props.text || !!props.label || !!slots.content)
+const showTooltip = computed((): boolean => !!text || !!label || !!slots.content)
 
 const randomTooltipId = useId()
 </script>

src/types/index.ts

@@ -13,7 +13,6 @@ export * from './date-time-picker'
 export * from './dropdown'
 export * from './empty-state'
 export * from './input'
-export * from './label'
 export * from './method-badge'
 export * from './multi-select'
 export * from './pagination'
@@ -29,5 +28,6 @@ export * from './table'
 export * from './tabs'
 export * from './text-area'
 export * from './toaster'
+export * from './tooltip'
 export * from './tree-list'
 export * from './utils'

src/types/input.ts

@@ -1,4 +1,4 @@
-import type { TooltipAttributes } from '@/types/label'
+import type { TooltipAttributes } from '@/types/tooltip'
 
 export interface LabelAttributes {
   info?: string

src/types/label.ts

@@ -20,7 +20,17 @@ export const PopPlacementsArray = [
   'bottom-end',
 ] as const
 
-export type PopPlacements = AnyElementOf<typeof PopPlacementsArray>
+export type PopPlacement = AnyElementOf<typeof PopPlacementsArray>
+
+/**
+ * @deprecated Use `PopPlacement` instead.
+ */
+export type Placement = PopPlacement
+
+/**
+ * @deprecated Use `PopPlacement` instead.
+ */
+export type PopPlacements = PopPlacement
 
 /**
  * @internal
@@ -54,7 +64,7 @@ export interface PopProps {
    * One of ['auto', 'top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'].
    * @default 'auto'
    */
-  placement?: PopPlacements
+  placement?: PopPlacement
 
   /**
    * Whether popover should be opened on trigger element click or mouseover.

src/types/popover.ts

@@ -0,0 +1,62 @@
+import type { PopoverAttributes, PopPlacement } from './popover'
+
+export interface TooltipProps {
+  /**
+   * Text to show in tooltip.
+   * @default ''
+   */
+  text?: string
+
+  /**
+   * Define which side the tooltip displays.
+   * One of ['auto', 'top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end'].
+   * @default 'bottom'
+   */
+  placement?: PopPlacement
+
+  /**
+   * Set the max-width of the ktooltip.
+   * @default 'none'
+   */
+  maxWidth?: string
+
+  /**
+   * Text to show in tooltip.
+   * @default ''
+   * @deprecated Use `text` instead.
+   */
+  label?: string
+
+  /**
+   * A string to be used as id attribute on underlying `role="tooltip"` element.
+   * Useful for setting accessible attributes (such as `aria-describedby`) on other elements.
+   * @default ''
+   */
+  tooltipId?: string
+
+  /**
+   * The `z-index` value for the tooltip.
+   * @default 9999
+   */
+  zIndex?: number
+
+  /**
+   * Use the kpopAttributes prop to configure the underlying KPop's props.
+   * @default {}
+   */
+  kpopAttributes?: PopoverAttributes
+}
+
+export interface TooltipSlots {
+  /**
+   * The default slot takes in the element you want the popover to be triggered over.
+   */
+  default?(): any
+
+  /**
+   * The content slot allows you to slot in any html content.
+   */
+  content?(): any
+}
+
+export type TooltipAttributes = Pick<TooltipProps, 'label' | 'placement' | 'maxWidth'>