Merge branch 'alpha' into fix/kinput-classes

CHANGELOG.md

@@ -1,3 +1,17 @@
+# [9.0.0-alpha.158](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.157...v9.0.0-alpha.158) (2024-05-21)
+
+
+### Bug Fixes
+
+* **ktable:** emit preferences only in success state [KHCP-11890] ([#2191](https://github.com/Kong/kongponents/issues/2191)) ([a442a18](https://github.com/Kong/kongponents/commit/a442a1843d36ed2b84eb6a97f11ec93673d43a49))
+
+# [9.0.0-alpha.157](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.156...v9.0.0-alpha.157) (2024-05-21)
+
+
+### Features
+
+* **kicon:** remove component [KHCP-8983] ([#2183](https://github.com/Kong/kongponents/issues/2183)) ([e625cf8](https://github.com/Kong/kongponents/commit/e625cf817f5b834d69ef991fa5d6c617a6dd07bd))
+
 # [9.0.0-alpha.156](https://github.com/Kong/kongponents/compare/v9.0.0-alpha.155...v9.0.0-alpha.156) (2024-05-15)
 
 

docs/.vitepress/config.ts

@@ -69,7 +69,6 @@ export default defineConfig({
             { text: 'Empty State', link: '/components/empty-state' },
             { text: 'External Link', link: '/components/external-link' },
             { text: 'File Upload', link: '/components/file-upload' },
-            { text: 'Icon', link: '/components/icon' },
             { text: 'Input', link: '/components/input' },
             { text: 'Input Switch', link: '/components/input-switch' },
             { text: 'Label', link: '/components/label' },

docs/.vitepress/theme/index.ts

@@ -2,7 +2,6 @@ import type { EnhanceAppContext } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import Kongponents from '../../../src'
 // Import component-specific files
-import * as icons from '../../../src/components/KIcon/icons' // KIcon icons
 import ToastManager from '../../../src/components/KToaster/ToastManager'
 import RouterLink from '../components/RouterLink.vue'
 
@@ -15,9 +14,6 @@ export default {
     // Extend default theme custom behaviour
     DefaultTheme.enhanceApp(ctx)
 
-    // Register KIcon icons
-    ctx.app.config.globalProperties.$icons = Object.keys(icons)
-
     // Register ToastManager
     // TODO: May need to handle SSR
     ctx.app.config.globalProperties.$toaster = new ToastManager()

docs/components/button.md

@@ -64,23 +64,16 @@ KButton can render either a `<a>` or `<router-link>` by simply passing the `to`
 
 ### icon
 
-:::warning NOTE
-This prop will be changed to a `boolean` in the `9.0.0-beta.0` release.
-:::
-
-A string for the `KIcon` name to be displayed to the left of the button's content. Specifying a value for `icon` will automatically indicate that it should be visible.
-
-If the disable state of the button can be changed, it is recommended to use the `icon` property instead of the slot, as using the prop will apply correct
-coloring to the icon depending on the `disabled` state of the button.
+Optional boolean flag that you can use when the only content you are passing to KButton is icon and you need to make the button square (_left and right padding = top and bottom_). Defaults to `false`.
 
-<div class="icon-prop-demo-section">
-  <KButton appearance="primary" icon="spinner">I'm a button</KButton>
-  <KButton appearance="primary" icon="spinner" disabled>I'm a button</KButton>
-</div>
+<KButton icon>
+  <KongIcon />
+</KButton>
 
 ```html
-<KButton appearance="primary" icon="spinner">I'm a button</KButton>
-<KButton appearance="primary" icon="spinner" disabled>I'm a button</KButton>
+<KButton icon>
+  <KongIcon />
+</KButton>
 ```
 
 ### Disabled HTML Attribute
@@ -135,40 +128,6 @@ For utilizing icons in KButton not sourced from `@kong/icons`, we recommend the
 We also recommend setting the icon style `color` property to a value of `currentColor` to inherit the default KButton styling for slotted content.
 :::
 
-### icon
-
-:::danger NOTE
-This slot is deprecated and will be removed in the `9.0.0-beta.0` release. Please use the [`default` slot](#default) instead whenever possible (unless the only content you are passing to KButton is icon and you need to make the button square (_left and right padding = top and bottom_)).
-:::
-
-<div class="spacing-container">
-  <KButton appearance="secondary">
-    <template #icon>
-      <KIcon icon="externalLink" color="#003694"/>
-    </template>
-    With Text
-  </KButton>
-  <KButton appearance="secondary" size="small">
-    <template #icon>
-      <KIcon icon="gear" color="#003694"/>
-    </template>
-  </KButton>
-</div>
-
-```html
-<KButton appearance="secondary">
-  <template #icon>
-    <KIcon icon="externalLink" />
-  </template>
-  With Text
-</KButton>
-<KButton appearance="secondary" size="small">
-  <template #icon>
-    <KIcon icon="gear" />
-  </template>
-</KButton>
-```
-
 ## Events
 
 KButton supports all events a native `button` and `a` elements do. Simply bind your event handler function to event with any modifiers.
@@ -196,7 +155,7 @@ KButton supports all events a native `button` and `a` elements do. Simply bind y
 ```
 
 <script setup lang="ts">
-import { WorldIcon, ChevronDownIcon } from '@kong/icons'
+import { WorldIcon, ChevronDownIcon, KongIcon } from '@kong/icons'
 
 const onButtonClick = () => {
   alert('Button was clicked')
@@ -207,7 +166,7 @@ const onButtonEnter = () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .preview-code .preview div {
   display: flex;
   flex-wrap: wrap;

docs/components/card.md

@@ -15,7 +15,7 @@ KCard is a styled container that organizes related content and actions.
     >
       <KButton
         appearance="tertiary"
-        class="icon-button"
+        icon
         size="small"
       >
         <MoreIcon />
@@ -148,7 +148,7 @@ Bottom drawer of the card. Useful for providing contextual information.
     >
       <KButton
         appearance="tertiary"
-        class="icon-button"
+        icon
         size="small"
       >
         <MoreIcon />

docs/components/copy.md

@@ -247,7 +247,7 @@ When `badge` is `true`, use this prop to control whether the copyable text has `
 
 KCopy exposes `copy` method that can be used to trigger copy from outside the component. Here is an example of KCopy inside of KButton, clicking on which will trigger KCopy to copy the text.
 
-<KButton class="icon-button" @click="onButtonClick">
+<KButton icon @click="onButtonClick">
   <KCopy format="hidden" ref="kCopyElement" :text="text" />
 </KButton>
 

docs/components/dropdown.md

@@ -69,22 +69,6 @@ Use this prop if you would like the trigger button to display a caret icon.
 />
 ```
 
-### icon
-
-:::danger NOTE
-This prop will be removed in the `9.0.0-beta.0` release. Icons can be provided in the `default` slot.
-:::
-
-A string for the `KIcon` to be displayed on the dropdown button with or in place of the button label.
-
-<ClientOnly>
-  <KDropdown icon="cogwheel" :items="deepClone(defaultItems)" show-caret />
-</ClientOnly>
-
-```html
-<KDropdown icon="cogwheel" :items="items" show-caret />
-```
-
 ### width
 
 The width of the dropdown body (defaults to `auto`). Currently we support numbers (will be converted to `px`), `auto`, and percentages for width.
@@ -241,15 +225,15 @@ The trigger element for opening/closing the menu.
 
 <ClientOnly>
   <KDropdown :items="deepClone(defaultItems)">
-    <KButton appearance="secondary" class="icon-button">
+    <KButton appearance="secondary" icon>
       <CogIcon />
     </KButton>
   </KDropdown>
 </ClientOnly>
 
 ```html
 <KDropdown :items="items">
-  <KButton appearance="secondary" class="icon-button">
+  <KButton appearance="secondary" icon>
     <CogIcon />
   </KButton>
 </KDropdown>