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

@@ -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

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>)

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
    */

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>