Card: add shadow attribute (#10418)

* Card: add shadow attribute

* Card: fix test file

* Card: modify shadow class

* Card: modify test file

* Card: fix props

examples/docs/en-US/card.md

@@ -183,8 +183,34 @@ export default {
 ```
 :::
 
+### Shadow
+
+Set the conditions that appear for shadow.
+
+:::demo Use attribute `shadow` to set shadow with `always`, `hover` or `never`.
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      Always
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      Hover
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      Never
+  </el-col>
+</el-row>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | header | Title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |
 | body-style | CSS style of body | object| — | { padding: '20px' } |
+| shadow | Status of shadow | string | always/hover/never | always |

examples/docs/es/card.md

@@ -185,8 +185,34 @@ export default {
 ```
 :::
 
+### Shadow
+
+Set the conditions that appear for shadow.
+
+:::demo Use attribute `shadow` to set shadow with `always`, `hover` or `never`.
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      Always
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      Hover
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      Never
+  </el-col>
+</el-row>
+```
+:::
+
 ### Atributos
-| Atributo   | Descripción                              | Tipo   | Valores aceptados | Por defecto         |
-| ---------- | ---------------------------------------- | ------ | ----------------- | ------------------- |
-| header     | Titulo del card. También acepta DOM pasado por `slot#header` | string | —                 | —                   |
-| body-style | Estilo CSS del cuerpo                    | object | —                 | { padding: '20px' } |
+| Atributo   | Descripción                              | Tipo   | Valores aceptados  | Por defecto         |
+| ---------- | ---------------------------------------- | ------ | -----------------  | ------------------- |
+| header     | Titulo del card. También acepta DOM pasado por `slot#header` | string  | —                 | —                   |
+| body-style | Estilo CSS del cuerpo                    | object | —                  | { padding: '20px' } |
+| shadow     | Status of shadow                         | string | always/hover/never | always              |

examples/docs/zh-CN/card.md

@@ -184,8 +184,34 @@ export default {
 ```
 :::
 
+### 卡片阴影
+
+可对阴影的显示情况进行配置。
+
+:::demo `always`、`hover`、`never`，通过设置`shadow`属性来配置卡片阴影。
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      总是显示
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      鼠标悬浮时显示
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      从不显示
+  </el-col>
+</el-row>
+```
+:::
+
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — |
 | body-style | 设置 body 的样式| object| — | { padding: '20px' } |
+| shadow | 设置 shadow 状态| string | always/hover/never | always |

packages/card/src/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="el-card">
+  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
     <div class="el-card__header" v-if="$slots.header || header">
       <slot name="header">{{ header }}</slot>
     </div>
@@ -12,7 +12,12 @@
 <script>
   export default {
     name: 'ElCard',
-
-    props: ['header', 'bodyStyle']
+    props: {
+      header: {},
+      bodyStyle: {},
+      shadow: {
+        type: String
+      }
+    }
   };
 </script>

packages/theme-chalk/src/card.scss

@@ -6,8 +6,19 @@
   border: 1px solid $--card-border-color;
   background-color: $--color-white;
   overflow: hidden;
-  box-shadow: $--box-shadow-light;
   color: $--color-text-primary;
+  transition: 0.3s;
+
+  @include when(always-shadow) {
+    box-shadow: $--box-shadow-light;
+  }
+
+  @include when(hover-shadow) {
+    &:hover,
+    &:focus {
+      box-shadow: $--box-shadow-light;
+    }
+  }
 
   @include e(header) {
     padding: #{$--card-padding - 2 $--card-padding};

test/unit/specs/card.spec.js

@@ -32,4 +32,25 @@ describe('Card', () => {
 
     expect(vm.$el.querySelector('.el-card__body').style.padding).to.equal('10px');
   });
+
+  it('shadow', () => {
+    vm = createTest(Card, {
+      shadow: 'always'
+    });
+    expect(vm.$el.classList.contains('is-always-shadow')).to.be.true;
+  });
+
+  it('shadow', () => {
+    vm = createTest(Card, {
+      shadow: 'hover'
+    });
+    expect(vm.$el.classList.contains('is-hover-shadow')).to.be.true;
+  });
+
+  it('shadow', () => {
+    vm = createTest(Card, {
+      shadow: 'never'
+    });
+    expect(vm.$el.classList.contains('is-never-shadow')).to.be.true;
+  });
 });