fix(kcard): address PR feedback [KHCP-8971]

Kong · Dec 1, 2023 · 9caeccc · 9caeccc
1 parent 70f0e98
commit 9caeccc
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 62 deletions.
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -72,7 +72,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Props
 
 * `testMode` prop has been removed
-* `body` prop has been deprecated. Use `default` slot instead
+* `body` prop has been removed. Use `default` slot instead
 * `borderVariant` prop has been removed. KCard has a border by default
 * `hasHover` prop has been removed
 * `hasShadow` prop has been removed. KCard does not have a box-shadow by default
@@ -81,7 +81,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Slots
 
 * `statusHat` slot has been removed
-* `body` slot has been deprecated in favor of `default` slot
+* `body` slot has been removed. Use the `default` slot instead
 * `notifications` slot has been removed
 
 #### Structure

diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
@@ -95,28 +95,6 @@
           </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>
-      <SandboxSectionComponent title="body prop (deprecated)">
-        <KCard body="`body` prop is deprecated but is backwards compatible." />
-      </SandboxSectionComponent>
     </div>
   </SandboxLayout>
 </template>

diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
@@ -20,19 +20,10 @@
       </div>
     </div>
     <div
-      v-if="showCardBody"
+      v-if="$slots.default"
       class="card-content"
     >
-      <slot
-        v-if="$slots.default"
-        name="default"
-      />
-      <slot
-        v-else-if="!$slots.default && ($slots.body || body)"
-        name="body"
-      >
-        {{ body }}
-      </slot>
+      <slot name="default" />
     </div>
     <div
       v-if="$slots.footer"
@@ -44,45 +35,20 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots, computed, onMounted } from 'vue'
+import { useSlots, computed } from 'vue'
 
 const props = defineProps({
   title: {
     type: String,
     default: '',
   },
-  /**
-   * @deprecated in favor of `content` prop
-   */
-  body: {
-    type: String,
-    default: '',
-    validator: (value: string) => {
-      if (value) {
-        console.warn('KCard: `body` prop has been deprecated. Please use `default` slot instead. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#kcard')
-      }
-
-      return true
-    },
-  },
 })
 
 const slots = useSlots()
 
 const showCardHeader = computed((): boolean => {
   return !!(slots.title || props.title || slots.actions)
 })
-
-const showCardBody = computed((): boolean => {
-  return !!(slots.default || slots.body || props.body)
-})
-
-onMounted(() => {
-  if (slots.body) {
-    // TODO: remove this when @deprecated `body` slot is removed
-    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')
-  }
-})
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
@@ -160,7 +160,8 @@ const offsetTopValue = computed((): string => {
 @import '@/styles/tmp-variables';
 
 .k-slideout {
-  :deep(.kong-card) {
+  :deep(.k-card) {
+    border: none;
     padding: var(--kui-space-110, $kui-space-110) var(--kui-space-90, $kui-space-90);
   }