fix(kemptystate): add title slot, tweak action slot

Kong · Mar 5, 2024 · 0ad2ccd · 0ad2ccd
1 parent 3551d76
commit 0ad2ccd
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 10 deletions.
diff --git a/docs/components/empty-state.md b/docs/components/empty-state.md
@@ -196,6 +196,32 @@ Slot for passing message content. When provided, takes precedence over the [`mes
 </KEmptyState>
 ```
 
+### title
+
+Slot for passing title text.
+
+<KEmptyState
+  action-button-text="Action"
+  message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh."
+  title="Lorem Ipsum Dolor Sit Amet"
+>
+  <template #title>
+    Empty State Slotted Title
+  </template>
+</KEmptyState>
+
+```html
+<KEmptyState
+  action-button-text="Action"
+  message="Lorem ipsum dolor sit amet..."
+  title="Lorem Ipsum Dolor Sit Amet"
+>
+  <template #title>
+    <h1>Empty State Slotted Title</h1>
+  </template>
+</KEmptyState>
+```
+
 ### icon
 
 Slot for providing custom icon.

diff --git a/docs/components/pagination.md b/docs/components/pagination.md
@@ -211,7 +211,7 @@ Pass in a boolean value for whether or not the offset-based next button should b
 
 ## Events
 
-### pageChange
+### page-change
 
 Emitted when the page has been changed. The page number is returned starting at 1 rather than 0 to be easier to use directly in the UI.
 
@@ -225,7 +225,7 @@ Emitted when the page has been changed. The page number is returned starting at
 }
 ```
 
-### pageSizeChange
+### page-size-change
 
 Emitted when the number of items per page has been changed.
 
@@ -236,11 +236,11 @@ Emitted when the number of items per page has been changed.
 }
 ```
 
-### getNextOffset
+### get-next-offset
 
 Emitted when next arrow button clicked when [`offset` prop](#offset) is true.
 
-### getPreviousOffset
+### get-previous-offset
 
 Emitted when previous arrow button clicked when [`offset` prop](#offset) is true.
 

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -273,7 +273,6 @@ Component has been renamed to `KDropdown`
 
 #### Slots
 
-* `title` slot has been removed. You can use the new `title` prop instead
 * `message` slot has been renamed to `default`
 * `cta` slot has been renamed to `action`
 

diff --git a/src/components/KEmptyState/KEmptyState.vue b/src/components/KEmptyState/KEmptyState.vue
@@ -13,12 +13,14 @@
           />
         </slot>
       </div>
-      <span
-        v-if="title"
+      <div
+        v-if="title || $slots.title"
         class="empty-state-title"
       >
-        {{ title }}
-      </span>
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
       <div
         v-if="message || $slots.default"
         class="empty-state-message"
@@ -31,7 +33,7 @@
       </div>
     </div>
     <div
-      v-if="actionButtonVisible && (actionButtonText || $slots.action)"
+      v-if="(actionButtonVisible && actionButtonText) || $slots.action"
       class="empty-state-action"
     >
       <slot name="action">