fix(kinput): misc fixes [KHCP-8985]

docs/components/button.md

@@ -121,6 +121,8 @@ Should you decide to use your own custom icon, you can use design tokens exporte
 - `large` KButton the recommended icon size is `$kui-icon-size-50` (also [exported as LESS and JavaScript variables](https://www.npmjs.com/package/@kong/design-tokens#token-formats))
 - `medium` KButton use `$kui-icon-size-40`
 - `small` KButton use `$kui-icon-size-30`
+
+We also recommend setting `color: currentColor;` on your custom-provided element to utilize default KButton styling for slotted content.
 :::
 
 ### icon

docs/components/select.md

@@ -67,27 +67,6 @@ The label for the select.
 <KSelect label="Cool label" :items="items" />
 ```
 
-### overlayLabel
-
-Enable this prop to overlay the label on the input element's border for `select` and `dropdown` appearances. Defaults to `false`.
-
-<ClientOnly>
-  <KSelect label="Name" placeholder="I'm labelled!" :overlay-label="true" :items="deepClone(defaultItemsUnselect)" />
-  <br/>
-  <KSelect label="Name" placeholder="I'm labelled!" :overlay-label="true" appearance="select" :items="deepClone(defaultItemsUnselect)" />
-  <br/>
-  <KSelect label="Disabled" disabled placeholder="I'm disabled!" :overlay-label="true" :items="deepClone(defaultItemsUnselect)" />
-  <br/>
-  <KSelect label="Readonly" readonly placeholder="I'm readonly!" :overlay-label="true" :items="deepClone(defaultItemsUnselect)" />
-</ClientOnly>
-
-```html
-<KSelect label="Name" placeholder="I'm labelled!" :overlay-label="true" :items="items" />
-<KSelect label="Name" placeholder="I'm labelled!" :overlay-label="true" appearance="select" :items="items" />
-<KSelect label="Disabled" disabled placeholder="I'm disabled!" :overlay-label="true" :items="items" />
-<KSelect label="Readonly" readonly placeholder="I'm readonly!" :overlay-label="true" :items="items" />
-```
-
 ### labelAttributes
 
 Use the `labelAttributes` prop to configure the **KLabel's** [props](/components/label) if using the `label` prop. This example shows using the `label-attributes` to set up a tooltip, see the [slot](#slots) section if you want to slot HTML into the tooltip rather than use plain text.

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

@@ -140,7 +140,11 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 #### Slots
 
-* `icon` slot has been removed. Instead, you can use new `before` and `after` slots
+* `icon` slot has been removed. Instead, you can use new `before` and/or `after` slots
+
+#### Events
+
+* `icon:click` event has been removed. Instead, when using `before` and/or `after` slots, you can provide your custom click handlers bound to clicks on slotted content. See KInput's [slots](/components/input#after) for more details
 
 ### KInputSwitch
 

sandbox/pages/SandboxInput.vue

@@ -16,7 +16,10 @@
       title="Props"
     />
     <SandboxSectionComponent title="label">
-      <KInput label="Label" />
+      <KInput
+        label="Label"
+        type="search"
+      />
     </SandboxSectionComponent>
     <SandboxSectionComponent title="labelAttributes">
       <KInput label="Label" />
@@ -75,13 +78,13 @@
       <div class="toggle-container">
         <KToggle v-slot="{isToggled, toggle}">
           <KInput
-            v-model="characterLimitModelValue"
             :character-limit="67"
             class="full-width-input"
             error-message="This is errorMessage. When character limit is exceeded, this text will be replaced by character limit error message."
             :has-error="isToggled.value"
             help="This is help text. When hasError is true, this text will be red. When hasError is true and errorMessage is set, this text will be replaced by the errorMessage. When character limit is exceeded, errorMessage text will be replaced by character limit error message."
             label="Label"
+            model-value="Type in 1 more character to see the character limit error message: "
           />
           <KButton
             size="small"
@@ -108,13 +111,13 @@
         required
       />
       <KInput
-        v-model="disabledModelValue"
         disabled
         label="Disabled"
+        model-value="This input is disabled"
       />
       <KInput
-        v-model="readOnlyModelValue"
         label="Readonly"
+        model-value="This input is read only"
         readonly
       />
     </SandboxSectionComponent>
@@ -169,12 +172,11 @@
       title="Examples"
     />
     <SandboxSectionComponent
-      description="When using KInput and KButton side by side, you wanna use the large KButton. Positioning them is challenging though."
+      description="When using KInput and KButton side by side, you wanna use the large KButton. You might want to wrap them in a div and use flexbox to position them. Also, when using them side by side, it's recommended to not use the help text prop on KInput as that makes positioning challenging."
       title="KInput and KButton"
     >
       <div class="input-and-button">
         <KInput
-          help="Enter you favorite fruit."
           label="Label"
         />
         <KButton size="large">
@@ -186,16 +188,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
 import { KInput, KExternalLink, KToggle, KButton } from '@/components'
 import { SearchIcon, CloseIcon } from '@kong/icons'
 
-const characterLimitModelValue = ref<string>('Type in 1 more character to see the character limit error message: ')
-const disabledModelValue = ref<string>('This input is disabled')
-const readOnlyModelValue = ref<string>('This input is read only')
-
 const onSlotContentClick = (slotName: string) => {
   alert(`You clicked on ${slotName} slot content`)
 }

src/components/KSelect/KSelect.vue

@@ -154,7 +154,6 @@
               }"
               :label="label && overlayLabel ? strippedLabel : undefined"
               :model-value="filterStr"
-              :overlay-label="overlayLabel"
               :placeholder="selectedItem && appearance === 'select' && !filterIsEnabled ? selectedItem.label : placeholderText"
               @blur="onInputBlur"
               @focus="onInputFocus"