From 564476b064e4b23c61383ae03d0c8a0a642724e2 Mon Sep 17 00:00:00 2001
From: uxuip <110730129+uxuip@users.noreply.github.com>
Date: Thu, 10 Aug 2023 22:23:04 +0800
Subject: [PATCH] feat(components): [card]  add body class (#11869)

* feat(components): [card]  add body class

* fix(components): [card] remove default value

* fix(components): [card] modify description
---
 docs/en-US/component/card.md                     | 1 +
 packages/components/card/__tests__/card.test.tsx | 7 +++++++
 packages/components/card/src/card.ts             | 4 ++++
 packages/components/card/src/card.vue            | 2 +-
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/docs/en-US/component/card.md b/docs/en-US/component/card.md
index 290c0e1256..6398a99a2d 100644
--- a/docs/en-US/component/card.md
+++ b/docs/en-US/component/card.md
@@ -55,6 +55,7 @@ card/shadow
 | ---------- | ------------------------------------------------------------- | --------------------------------- | ------- |
 | header     | title of the card. Also accepts a DOM passed by `slot#header` | ^[string]                         | —       |
 | body-style | CSS style of card body                                        | ^[object]`CSSProperties`          | —       |
+| body-class | custom class name of card body                                | ^[string]                         | —       |
 | shadow     | when to show card shadows                                     | ^[enum]`always \| never \| hover` | always  |
 
 ### Slots
diff --git a/packages/components/card/__tests__/card.test.tsx b/packages/components/card/__tests__/card.test.tsx
index 663f1a6db0..65e89c8723 100644
--- a/packages/components/card/__tests__/card.test.tsx
+++ b/packages/components/card/__tests__/card.test.tsx
@@ -59,6 +59,13 @@ describe('Card.vue', () => {
     ).toBe('font-size:14px;color:blue;')
   })
 
+  test('should render body-class props', async () => {
+    const bodyClass = 'test-body-class'
+    const wrapper = mount(() => <Card body-class={bodyClass} />)
+
+    expect(wrapper.find('.el-card__body').classes()).toContain(bodyClass)
+  })
+
   test('shadow', () => {
     const shadow = 'always'
     const wrapper = mount(() => <Card shadow={shadow}>{AXIOM}</Card>)
diff --git a/packages/components/card/src/card.ts b/packages/components/card/src/card.ts
index 81305c01df..ee14e1769a 100644
--- a/packages/components/card/src/card.ts
+++ b/packages/components/card/src/card.ts
@@ -16,6 +16,10 @@ export const cardProps = buildProps({
     type: definePropType<StyleValue>([String, Object, Array]),
     default: '',
   },
+  /**
+   * @description custom class name of card body
+   */
+  bodyClass: String,
   /**
    * @description when to show card shadows
    */
diff --git a/packages/components/card/src/card.vue b/packages/components/card/src/card.vue
index 35b98f9889..e364835564 100644
--- a/packages/components/card/src/card.vue
+++ b/packages/components/card/src/card.vue
@@ -3,7 +3,7 @@
     <div v-if="$slots.header || header" :class="ns.e('header')">
       <slot name="header">{{ header }}</slot>
     </div>
-    <div :class="ns.e('body')" :style="bodyStyle">
+    <div :class="[ns.e('body'), bodyClass]" :style="bodyStyle">
       <slot />
     </div>
   </div>