feat(ktooltip, kdatetimepicker): reskin components (#2003)

* feat(kexternallink): reskin component [KHCP-8981] (#1989) * feat(kexternallink): reskin component [KHCP-8981] * docs: migration doc [KHCP-8981] * fix(kmodalfullscreen): touch up component styles [KHCP-8991] (#1998) * feat(ktooltip): reskin component styles [KHCP-9007] (#1988) * feat(ktooltip): reskin component styles [KHCP-9007] * docs(tooltip): update component docs [KHCP-9007] * fix(*): ktooltip label prop [KHCP-9007] * fix(ktooltip): minor fix [KHCP-9007] * fix(ktooltip): apply PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(ktooltip): position-fixed prop default value [KHCP-9007] * fix(ktooltip): minor fix [KHCP-9007] * docs(tooltip): fix typo [KHCP-9007] --------- Co-authored-by: Adam DeHaven <[email protected]> * feat(kdatetimepicker): reskin component [KHCP-8978] (#2000) * chore(sandbox): setup kdatetimepicker sandbox [KHCP-8978] * feat(kdatetimepicker): reskin component [KHCP-8978] * fix(kdatetimepicker): handle disabled state [KHCP-8978] * test(kdatetimepicker): fix component tests [KHCP-8978] * docs(datetime-picker): update component docs [KHCP-8978] * docs(datetime-picker): use script setup [KHCP-8978] * docs(datetime-picker): update events section [KHCP-8978] * fix(kdatetimepicker): timeframes grid container [KHCP-8978] * fix(kdatetimepicker): relative timeframe button styling [KHCP-8978] * fix(sandbox): fix example [KHCP-8978] * fix(kdatetimepicker): address PR feedback [KHCP-8978] * fix(mixins): add comment [KHCP-8978] * fix(kdatetimepicker): type fix [KHCP-8978] * fix(kdatetimepicker): add popoverplacement prop (#2011) * fix(kdatetimepicker): add popoverplacement prop * docs(datetime-picker): document new prop * docs(datetime-picker): minor fix * fix: address PR feedback Co-authored-by: Adam DeHaven <[email protected]> --------- Co-authored-by: Adam DeHaven <[email protected]> * fix(kdatetimepicker): fix wrapping in timepicker display (#2013) * fix(kdatetimepicker): fix wrapping in timepicker display * fix: minor fixes --------- Co-authored-by: Adam DeHaven <[email protected]>
Kong · Jun 15, 2024 · 21ad882 · 21ad882
1 parent 712687e
commit 21ad882
Show file tree

Hide file tree

Showing 20 changed files with 913 additions and 728 deletions.
diff --git a/docs/components/datetime-picker.md b/docs/components/datetime-picker.md
diff --git a/docs/components/dropdown.md b/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>

diff --git a/docs/components/external-link.md b/docs/components/external-link.md
@@ -1,12 +1,9 @@
 # External Link
 
-**KExternalLink** - a component to render an anchor tag (that opens in a new window) with an icon
+KExternalLink renders an anchor element (that opens a link in a new window) with an icon.
 
-<KCard>
-    <template v-slot:body>
-      <KExternalLink href="https://kongponents.konghq.com/">Kongponents</KExternalLink>
-    </template>
-</KCard>
+
+<KExternalLink href="https://kongponents.konghq.com/">Kongponents</KExternalLink>
 
 ```html
 <KExternalLink href="https://kongponents.konghq.com/">
@@ -16,23 +13,29 @@
 
 ## Props
 
-### href - required
+### href
 
 The URL that the hyperlink points to.
 
-::: tip NOTE
+:::tip NOTE
 
-Must be a valid URL
+Must be a valid URL.
 
-<h4><KIcon icon="check" size="22" color="green" style="vertical-align: sub;" class="horizontal-spacing" />Correct Usage</h4>
+<h4 class="example-heading">
+  <CheckIcon :size="KUI_ICON_SIZE_40" :color="KUI_COLOR_TEXT_SUCCESS" class="icon" />
+  Correct Usage
+</h4>
 
 ```html
 <KExternalLink href="https://kongponents.konghq.com/">
   Valid URL
 </KExternalLink>
 ```
 
-<h4><KIcon icon="disabled" size="22" color="red" style="vertical-align: sub;" class="horizontal-spacing" />Incorrect Usage</h4>
+<h4 class="example-heading">
+  <CloseIcon :size="KUI_ICON_SIZE_40" :color="KUI_COLOR_TEXT_DANGER" class="icon" />
+  Incorrect Usage
+</h4>
 
 ```html
 <KExternalLink href="https://kongponents">
@@ -46,11 +49,9 @@ Must be a valid URL
 
 If true, icon won't be rendered.
 
-<KCard>
-    <template v-slot:body>
-      <KExternalLink hide-icon href="https://kongponents.konghq.com/">Kongponents</KExternalLink>
-    </template>
-</KCard>
+
+<KExternalLink hide-icon href="https://kongponents.konghq.com/">Kongponents</KExternalLink>
+
 
 ```html
 <KExternalLink hide-icon href="https://kongponents.konghq.com/">
@@ -60,10 +61,22 @@ If true, icon won't be rendered.
 
 ## Slots
 
-- `default` - link text
+### default
+
+Link text.
+
+<script setup lang="ts">
+import { CheckIcon, CloseIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_40, KUI_COLOR_TEXT_SUCCESS, KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
+</script>
+
+<style lang="scss" scoped>
+.example-heading {
+  display: inline-flex;
+  align-items: center;
 
-<style lang="scss">
-.horizontal-spacing {
-  margin-right: $kui-space-40;
+  .icon {
+    margin-right: $kui-space-40;
+  }
 }
 </style>
diff --git a/docs/components/tooltip.md b/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 an informative 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>
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -165,15 +165,23 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 #### Props
 
-* `v-model` Single date and time picker's seed value (string in ISO date format) has been changed to a `TimeRange` object whose `start` value will be set to a Date ISO string; `end` value will be set to `null`.
-
-  See KDateTimePickers's [v-model](/components/datetime-picker#v-model) for more details
+* `v-model` Single date and time picker's seed value (string in ISO date format) has been changed to a `TimeRange` object whose `start` value will be set to a Date ISO string; `end` value will be set to `null`. See KDateTimePickers's [v-model](/components/datetime-picker#v-model) for more details
 
 #### Events
 
-* `change`, `update:modelValue` – a Single date and time picker will no longer emit an ISO date format string. Instead, a `TimeRange` object with a Date ISO string `start` value, and a null `end` value will be emitted.
-
-  See KDateTimePickers's [Single date time picker events](/components/datetime-picker#single-date-time-picker) for more details
+* `change`, `update:modelValue` – a Single date and time picker will no longer emit an ISO date format string. Instead, a `TimeRange` object with a Date ISO string `start` value, and a null `end` value will be emitted. See KDateTimePickers's [Single date time picker events](/components/datetime-picker#single-date-time-picker) for more details
+
+#### Structure
+
+* `timepicker-input` class has been changed to `datetime-picker-trigger`
+* `k-datetime-picker-input` `data-testid` attribute has been changed to `datetime-picker-trigger`
+* `timepicker-display` class has been changed to `datetime-picker-display`
+* `k-datetime-picker-display` `data-testid` attribute has been changed to `datetime-picker-display`
+* `k-datetime-picker-toggle` `data-testid` attribute has been changed to `datetime-picker-toggle`
+* `k-datetime-picker-clear` `data-testid` attribute has been changed to `datetime-picker-clear`
+* `k-datetime-picker-submit` `data-testid` attribute has been changed to `datetime-picker-submit`
+* `timeframe-btn` class has been changed to `timeframe-button`
+* `action-btn` class has been changed to `action-button`
 
 #### Constants, Types & Interfaces
 
@@ -218,6 +226,7 @@ Component has been renamed to `KDropdown`
 
 ### KExternalLink
 
+No breaking changes.
 
 ### KFileUpload
 
@@ -564,6 +573,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
 

diff --git a/sandbox/index.ts b/sandbox/index.ts
@@ -22,6 +22,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KCatalog', to: { name: 'catalog' } },
   { name: 'KCheckbox', to: { name: 'checkbox' } },
   { name: 'KCopy', to: { name: 'copy' } },
+  { name: 'KDateTimePicker', to: { name: 'datetimepicker' } },
   { name: 'KDropdown', to: { name: 'dropdown' } },
   { name: 'KFileUpload', to: { name: 'fileupload' } },
   { name: 'KInput', to: { name: 'input' } },