fix(ktable): kemptystate props (#2054)

* feat(kviewswitcher): remove component [KHCP-9010] (#2030) * feat(kalert): component reskin [KHCP-8967] (#2021) * fix(kalert): remove old props and slots, set up sandbox [KHCP-8967] * feat(kalert): reskin component [KHCP-8967] * fix(kalert): minor fix [KHCP-8967] * test(kalert): update component tests [KHCP-8967] * docs(alert): update component docs [KHCP-8967] * docs(alert): minor fix [KHCP-8967] * fix(kalert): apply PR feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kalert): address PR feedback [KHCP-8967] * fix(kalert): minor fix [KHCP-8967] * fix(kalert): icon slot fixed [KHCP-8967] * fix(kalert): update title styles [KHCP-8967] * docs(alert): minor fix [KHCP-8967] * fix: minor fix * fix: minor fix --------- Co-authored-by: Adam DeHaven <[email protected]> * feat(kpagination): reskin component [KKHCP-8993] (#2041) * feat(kpagination): reskin component [KKHCP-8993] * test(kcatalog): fix component test [KKHCP-8993] * fix(kpagination): rename events [KKHCP-8993] * fix(kpagination): events and types fix [KKHCP-8993] * fix(kpagination): minor tweaks [KKHCP-8993] * docs(pagination): update component docs [KKHCP-8993] * refactor(kpagination): use button instead of a [KKHCP-8993] * test(kpagination): fix component tests [KKHCP-8993] * refactor(kpagination): remove pagination type prop [KKHCP-8993] * refactor(kpagination): fix props and events names [KKHCP-8993] * fix(kpagiantion): minor fix [KKHCP-8993] * fix(kpagination): apply feedback Co-authored-by: Adam DeHaven <[email protected]> * fix(kpagination): address PR feedback [KKHCP-8993] * fix(kpagination): misc fix [KKHCP-8993] * test(kpagination): fix component tests [KKHCP-8993] * fix(kpagination): misc fix [KKHCP-8993] --------- Co-authored-by: Adam DeHaven <[email protected]> * fix(kpagination): reduce spacing, icon size (#2048) * feat(kemptystate): component reskin [KHCP-8980] (#2031) * chore(kemptystate): setup component sandbox [KHCP-8980] * feat(kemptystate): reskin component [KHCP-8980] * fix(kcatalog, ktable): update kemptystate usage [KHCP-8980] * test(kcatalog, ktable): fix component tests [KHCP-8980] * test(kemptystate): update component tests [KHCP-8980] * fix(kemptystate): minor fix [KHCP-8980] * test(kemptystate): add action button event test [KHCP-8980] * docs(empty-state): update component docs [KHCP-8980] * fix(kemptystate): add icon variant prop [KHCP-8980] * fix(ktable, kcatalog): update kemptystate usage [KHCP-8980] * fix(kemptystate): icon variant prop [KHCP-8980] * docs: minor fix [KHCP-8980] * fix(kemptystate): address PR feedback [KHCP-8980] * fix(kemptystate): address PR feedback [KHCP-8980] * fix(kemptystate): remove action button icon prop [KHCP-8980] * fix(kemptystate): add title slot, tweak action slot (#2053) * fix(ktable): fix kemptystate action * fix(ktable): kemptystate icon props * docs: document prop changes * fix(ktable): minor fix * fix(ktable): minor fix * fix(ktable): kemptystate action * fix(ktable): remove action button icon slot and prop * docs(dropdown): document missing events * docs: small tweak * fix(kemptystate): add kong icon variant * docs(table): minor fix * fix(ktable): address PR feedback * docs(table): minor fix --------- Co-authored-by: Adam DeHaven <[email protected]>
Kong · Mar 7, 2024 · 1706786 · 1706786
1 parent 9ae9fa5
commit 1706786
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 110 deletions.
diff --git a/docs/components/button.md b/docs/components/button.md
@@ -110,12 +110,19 @@ The default slot allows you to provide the button text as well as to slot in oth
     Button Two
     <ChevronDownIcon />
   </KButton>
-  <!-- TODO: [beta] change this to icon prop -->
-  <KButton appearance="danger" size="small" class="icon-button">
-    <TrashIcon />
-  </KButton>
 </div>
 
+```html
+<KButton size="large">
+  <WorldIcon />
+  Button One
+</KButton>
+<KButton appearance="secondary">
+  Button Two
+  <ChevronDownIcon />
+</KButton>
+```
+
 :::tip TIP
 When utilizing icons inside KButton, some sizes work better than others. You can use the `kui-icon-size-*` tokens exported by the [@kong/design-tokens](https://github.com/Kong/design-tokens) package, or manually set the size.
 
@@ -131,13 +138,9 @@ We also recommend setting the icon style `color` property to a value of `current
 ### 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).
+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_)).
 :::
 
-KButton supports using an icon either before the text or without text. If you are using the KIcon component you must maintain the icon color yourself when the button is enabled or disabled.
-
-Using only this slot without the default slot will make button square (left and right padding = top and bottom).
-
 <div class="spacing-container">
   <KButton appearance="secondary">
     <template #icon>

diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
@@ -335,6 +335,16 @@ Should you decide to use your own custom icons, you can use design tokens export
 We also recommend setting the icon style `color` property to a value of `currentColor` to utilize default KDropdownItem styling for slotted content.
 :::
 
+## Events
+
+### toggleDropdown
+
+Fires when dropdown is opened/closed. Returns state of the dropdown (boolean).
+
+### change
+
+Fires when item is selected. Returns the selected menu item object.
+
 ## KDropdownItem
 
 KDropdown generates a KDropdownItem for each object in the `items` prop array. At the most basic level, KDropdownItem is a wrapper around each item to display it correctly inside KDropdown. You can use the `items` slot of the KDropdown to manually create your own menu items.

diff --git a/docs/components/empty-state.md b/docs/components/empty-state.md
@@ -140,6 +140,7 @@ Accepted values:
 * `default` (default)
 * `error`
 * `search`
+* `kong`
 
 <KEmptyState
   icon-variant="error"

diff --git a/docs/components/table.md b/docs/components/table.md
@@ -843,7 +843,7 @@ Using a `KPop` inside of a clickable row requires some special handling. Non-cli
 
 <template>
   <KCard>
-    <template v-slot:body>
+    <template #default>
       <div v-if="eventType">
         {{eventType}} on: {{row}}
       </div>
@@ -1229,9 +1229,10 @@ the section below or completely slot in your own content.
 
 - `empty-state` - Slot content to be displayed when empty
 - `error-state` - Slot content to be displayed when in an error state
+- `empty-state-action-icon` - Slot for slotting an icon to be rendered to the left of button text in empty state action button
 
 <KCard>
-  <template v-slot:body>
+  <template #default>
     <KTable :fetcher="emptyFetcher" :headers="headers">
       <template v-slot:empty-state>
         <div style="text-align: center;">
@@ -1270,28 +1271,25 @@ Set the following properties to handle empty state:
 
 - `emptyStateTitle` - Title text for empty state
 - `emptyStateMessage` - Message for empty state
-- `emptyStateIcon` - Icon for empty state
-- `emptyStateIconColor` - Color for empty state icon
-- `emptyStateIconSize` - Size for empty state icon
 - `emptyStateActionRoute` - Route for empty state action
 - `emptyStateActionMessage` - Button text for empty state action
-- `emptyStateActionButtonIcon` - Icon for the empty state action button
+- `emptyStateIconVariant` - Prop set empty state icon variant. See [KEmptyState component docs](/components/empty-state#iconvariant) for details
 
 If using a CTA button, a `@ktable-empty-state-cta-clicked` event is fired when clicked.
 
 #### Default Empty State Messaging
 
 <br/>
 <KCard>
-  <template v-slot:body>
+  <template #default>
     <KTable :fetcher="() => { return { data: [] } }" />
   </template>
 </KCard>
 
 ```html
 <template>
   <KCard>
-    <template v-slot:body>
+    <template #default>
       <KTable :fetcher="fetcher" :headers="headers" />
     </template>
   </KCard>
@@ -1302,25 +1300,27 @@ If using a CTA button, a `@ktable-empty-state-cta-clicked` event is fired when c
 
 <br/>
 <KCard>
-  <template v-slot:body>
+  <template #default>
     <KTable
       :fetcher="() => { return { data: [] } }"
       emptyStateTitle="No Workspaces exist"
       emptyStateMessage="Adding a new Workspace will populate this table."
       emptyStateActionMessage="Create a Workspace"
       emptyStateActionButtonIcon="plus"
       emptyStateActionRoute="#empty-state-full-example"
-      emptyStateIcon="workspaces"
-      emptyStateIconColor="#5996ff"
-      emptyStateIconSize="35" />
+      empty-state-icon-variant="kong">
+      <template #empty-state-action-icon>
+        <AddIcon />
+      </template>
+    </KTable>
   </template>
 </KCard>
 
 ```html
 <!-- Using a route string -->
 <template>
   <KCard>
-    <template v-slot:body>
+    <template #default>
       <KTable
         :fetcher="fetcher"
         :headers="headers"
@@ -1329,33 +1329,36 @@ If using a CTA button, a `@ktable-empty-state-cta-clicked` event is fired when c
         emptyStateActionMessage="Create a Workspace"
         emptyStateActionButtonIcon="plus"
         emptyStateActionRoute="create-workspace"
-        emptyStateIcon="workspaces"
-        emptyStateIconColor="#5996ff"
-        emptyStateIconSize="35" />
+        empty-state-icon-variant="kong">
+        <template #empty-state-action-icon>
+          <AddIcon />
+        </template>
+      </KTable>
     </template>
   </KCard>
 </template>
 
 <!-- Using a route object -->
 <template>
   <KCard>
-    <template v-slot:body>
+    <template #default>
       <KTable
         :fetcher="fetcher"
         :headers="headers"
         emptyStateTitle="No Workspaces exist"
         emptyStateMessage="Adding a new Workspace will populate this table."
         emptyStateActionMessage="Create a Workspace"
-        emptyStateActionButtonIcon="plus"
         emptyStateActionRoute="{
           name: 'create-workspace',
           params: {
             organizationId: 'd27e40e0-c9ac-43e2-8be8-54862fab45ea'
           }
         }"
-        emptyStateIcon="workspaces"
-        emptyStateIconColor="#5996ff"
-        emptyStateIconSize="35" />
+        empty-state-icon-variant="kong">
+        <template #empty-state-action-icon>
+          <AddIcon />
+        </template>
+      </KTable>
     </template>
   </KCard>
 </template>
@@ -1380,15 +1383,15 @@ If using a CTA button, a `ktable-error-cta-clicked` event is fired when clicked.
 
 <br/>
 <KCard>
-  <template v-slot:body>
+  <template #default>
     <KTable :fetcher="() => { return { data: [] } }" :hasError="true" />
   </template>
 </KCard>
 
 ```html
 <template>
   <KCard>
-    <template v-slot:body>
+    <template #default>
       <KTable :fetcher="fetcher" :headers="headers" :hasError="true" />
     </template>
   </KCard>
@@ -1399,7 +1402,7 @@ If using a CTA button, a `ktable-error-cta-clicked` event is fired when clicked.
 
 <br/>
 <KCard>
-  <template v-slot:body>
+  <template #default>
     <KTable
       :fetcher="() => { return { data: [] } }"
       :hasError="true"
@@ -1417,7 +1420,7 @@ If using a CTA button, a `ktable-error-cta-clicked` event is fired when clicked.
 <!-- Using a route string -->
 <template>
   <KCard>
-    <template v-slot:body>
+    <template #default>
       <KTable
         :fetcher="fetcher"
         :headers="headers"
@@ -1436,7 +1439,7 @@ If using a CTA button, a `ktable-error-cta-clicked` event is fired when clicked.
 <!-- Using a route object -->
 <template>
   <KCard>
-    <template v-slot:body>
+    <template #default>
       <KTable
         :fetcher="fetcher"
         :headers="headers"
@@ -1463,7 +1466,7 @@ If using a CTA button, a `ktable-error-cta-clicked` event is fired when clicked.
 Set the `isLoading` prop to `true` to enable the loading state.
 
 <KCard>
-  <template v-slot:body>
+  <template #default>
     <KTable
       :fetcher="() => { return { data: [] } }"
       :isLoading="true"
@@ -1474,7 +1477,7 @@ Set the `isLoading` prop to `true` to enable the loading state.
 ```html
 <template>
 <KCard>
-  <template v-slot:body>
+  <template #default>
     <KTable
       :fetcher="fetcher"
       :headers="headers"
@@ -1504,7 +1507,7 @@ https://kongponents.dev/api/components?_page=1&_limit=10&_sort=name&_order=desc
 <!-- Example Component Usage -->
 
 <KCard>
-  <template v-slot:body>
+  <template #default>
     <KInput placeholder="Search" v-model="search" type="search" />
     <KTable
       cache-identifier="server-side-functions-table"
@@ -1569,8 +1572,12 @@ fetcher(payload) {
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { AddIcon } from '@kong/icons'
 
 export default defineComponent({
+  components: {
+    AddIcon
+  },
   data() {
     return {
       row: null,

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -644,6 +644,12 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KTable
 
+#### Props
+
+* `emptyStateIcon` prop has been removed. You can use the new `emptyStateIconVariant` prop instead
+* `emptyStateIconColor` prop has been removed
+* `emptyStateIconSize` prop has been removed
+* `emptyStateActionButtonIcon` prop has been removed. You can use the new `empty-state-action-icon` slot instead
 
 ### KTabs
 

diff --git a/sandbox/pages/SandboxEmptyState.vue b/sandbox/pages/SandboxEmptyState.vue
@@ -82,6 +82,12 @@
           message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh."
           title="Search Icon Variant"
         />
+        <KEmptyState
+          action-button-text="Action"
+          icon-variant="kong"
+          message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh."
+          title="Kong Icon Variant"
+        />
       </SandboxSectionComponent>
 
       <!-- Slots -->