fix(kcard): deprecate body slot instead of removing [KHCP-8971]

Kong · Oct 31, 2023 · 4dde509 · 4dde509
1 parent e6afc74
commit 4dde509
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 20 deletions.
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
@@ -166,9 +166,9 @@ To set the default state (collapsed or expanded) without binding to v-model you
         </div>
       </template>
       <template #visible-content>
-        <KCard body="I am content that is always visible" />
+        <KCard content="I am content that is always visible" />
       </template>
-      <KCard body="I am only visible when expanded" />
+      <KCard content="I am only visible when expanded" />
     </KCollapse>
   </template>
 </KCard>
@@ -182,10 +182,10 @@ To set the default state (collapsed or expanded) without binding to v-model you
     </div>
   </template>
   <template #visible-content>
-    <KCard body="I am content that is always visible" />
+    <KCard content="I am content that is always visible" />
   </template>
 
-  <KCard body="I am only visible when expanded" />
+  <KCard content="I am only visible when expanded" />
 </KCollapse>
 ```
 

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -101,7 +101,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Slots
 
 * `statusHat` slot has been removed
-* `body` slot has been removed. Use `default` slot instead
+* `body` slot has been deprecated in favor of `default` slot
 * `notifications` slot has been removed
 
 #### Events

diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
@@ -96,6 +96,25 @@
         </KCard>
       </div>
     </SandboxSectionComponent>
+
+    <!-- Legacy -->
+    <SandboxTitleComponent
+      is-subtitle
+      title="Legacy"
+    />
+    <SandboxSectionComponent title="body slot (deprecated)">
+      <KCard>
+        When both `default` and `body` slots are present, `default` slot will be used.
+        <template #body>
+          And `body` slot will be ignored.
+        </template>
+      </KCard>
+      <KCard>
+        <template #body>
+          But when only the `body` slot is present, it will be treated as `default`.
+        </template>
+      </KCard>
+    </SandboxSectionComponent>
   </div>
 </template>
 

diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
@@ -22,10 +22,12 @@
       </div>
     </div>
     <div
-      v-if="$slots.default || content"
+      v-if="$slots.default || $slots.body || content"
       class="card-content"
     >
-      <slot><p>{{ content }}</p></slot>
+      <slot :name="contentSlotName">
+        <p>{{ content }}</p>
+      </slot>
     </div>
     <div
       v-if="$slots.footer"
@@ -37,6 +39,8 @@
 </template>
 
 <script setup lang="ts">
+import { useSlots, computed } from 'vue'
+
 defineProps({
   title: {
     type: String,
@@ -47,6 +51,18 @@ defineProps({
     default: '',
   },
 })
+
+const slots = useSlots()
+
+const contentSlotName = computed((): 'body' | 'default' => { // TODO: remove this when body slot is removed
+  if (slots.body && !slots.default) {
+    console.warn('KCard: `body` slot has been deprecated in favor of `default` slot. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
+
+    return 'body'
+  }
+
+  return 'default'
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/KCatalog/KCatalogItem.vue b/src/components/KCatalog/KCatalogItem.vue
@@ -2,10 +2,8 @@
   <KCard
     class="k-card-catalog-item"
     :data-testid="item && item.title ? `${item.title.replace(/[^0-9a-z]/gi, '-')}-catalog-item` : 'catalog-item'"
-    has-hover
     role="button"
     tabindex="0"
-    :test-mode="!!testMode || undefined"
     @click="($event: any) => handleCardClick($event, item)"
   >
     <template #title>
@@ -18,13 +16,11 @@
       <slot name="cardActions" />
     </template>
 
-    <template #body>
-      <div :class="{ 'multi-line-truncate': truncate }">
-        <slot name="cardBody">
-          {{ item ? item.description : '' }}
-        </slot>
-      </div>
-    </template>
+    <div :class="{ 'multi-line-truncate': truncate }">
+      <slot name="cardBody">
+        {{ item ? item.description : '' }}
+      </slot>
+    </div>
   </KCard>
 </template>
 

diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
@@ -55,10 +55,8 @@
         </button>
 
         <div class="content">
-          <KCard border-variant="noBorder">
-            <template #body>
-              <slot />
-            </template>
+          <KCard>
+            <slot />
           </KCard>
         </div>
       </div>