feat(Tag): add prop effect. (#15725)

examples/demo-styles/tag.scss

@@ -2,6 +2,7 @@
   .el-tag + .el-tag {
     margin-left: 10px;
   }
+
   .button-new-tag {
     margin-left: 10px;
     height: 32px;
@@ -9,9 +10,25 @@
     padding-top: 0;
     padding-bottom: 0;
   }
+
   .input-new-tag {
     width: 90px;
     margin-left: 10px;
     vertical-align: bottom;
   }
+
+  .tag-group {
+    display: flex;
+    align-items: center;
+
+    &__title {
+      width: 45px;
+      font-size: 14px;
+      color: #606266;
+    }
+
+    &+.tag-group  {
+      margin-top: 10px;
+    }
+  }
 }

examples/docs/en-US/tag.md

@@ -7,11 +7,11 @@ Used for marking and selection.
 :::demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
 
 ```html
-<el-tag>Tag One</el-tag>
+<el-tag>Tag 1</el-tag>
-<el-tag type="success">Tag Two</el-tag>
+<el-tag type="success">Tag 2</el-tag>
-<el-tag type="info">Tag Three</el-tag>
+<el-tag type="info">Tag 3</el-tag>
-<el-tag type="warning">Tag Four</el-tag>
+<el-tag type="warning">Tag 4</el-tag>
-<el-tag type="danger">Tag Five</el-tag>
+<el-tag type="danger">Tag 5</el-tag>
 ```
 :::
 
@@ -139,15 +139,62 @@ Besides default size, Tag component provides three additional sizes for you to c
 ```
 :::
 
+
+### Theme
+
+Tag provide three different themes: `dark`、`light` and `plain`
+
+:::demo Using `effect` to change, default is `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: 'Tag 1' },
+          { type: 'success', label: 'Tag 2' },
+          { type: 'info', label: 'Tag 3' },
+          { type: 'danger', label: 'Tag 4' },
+          { type: 'warning', label: 'Tag 5' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | theme | string | success/info/warning/danger | — |
+| type | component type | string | success/info/warning/danger | — |
 | closable | whether Tag can be removed | boolean | — | false |
 | disable-transitions | whether to disable animations | boolean | — | false |
 | hit | whether Tag has a highlighted border | boolean | — | false |
 | color | background color of the Tag | string | — | — |
 | size | tag size | string | medium / small / mini | — |
+| effect | component theme | string | dark / light / plain | light |
 
 
 ### Events

examples/docs/es/tag.md

@@ -7,11 +7,11 @@ Se utiliza para marcar y seleccionar.
 :::demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.
 
 ```html
-<el-tag>Tag One</el-tag>
+<el-tag>Tag 1</el-tag>
-<el-tag type="success">Tag Two</el-tag>
+<el-tag type="success">Tag 2</el-tag>
-<el-tag type="info">Tag Three</el-tag>
+<el-tag type="info">Tag 3</el-tag>
-<el-tag type="warning">Tag Four</el-tag>
+<el-tag type="warning">Tag 4</el-tag>
-<el-tag type="danger">Tag Five</el-tag>
+<el-tag type="danger">Tag 5</el-tag>
 ```
 :::
 
@@ -139,15 +139,61 @@ Además del tamaño predeterminado, el componente Tag proporciona tres tamaños
 ```
 :::
 
+### Theme
+
+Tag provide three different themes: `dark`、`light` and `plain`
+
+:::demo Using `effect` to change, default is `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: 'Tag 1' },
+          { type: 'success', label: 'Tag 2' },
+          { type: 'info', label: 'Tag 3' },
+          { type: 'danger', label: 'Tag 4' },
+          { type: 'warning', label: 'Tag 5' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Atributos
 | Atributo            | Descripción                         | Tipo    | Valores aceptados           | Por defecto |
 | ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
-| type                | tema                                | string  | success/info/warning/danger | —           |
+| type                | component type                      | string  | success/info/warning/danger | —           |
 | closable            | si el Tag puede ser removido        | boolean | —                           | false       |
 | disable-transitions | si se deshabilitan las animaciones  | boolean | —                           | false       |
 | hit                 | si el  Tag tiene un borde resaltado | boolean | —                           | false       |
 | color               | color de fondo del Tag              | string  | —                           | —           |
 | size                | tamaño del Tag                      | string  | medium / small / mini       | —           |
+| effect | component theme | string | dark / light / plain | light |
 
 
 ### Eventos

examples/docs/fr-FR/tag.md

@@ -139,6 +139,51 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan
 ```
 :::
 
+### Theme
+
+Tag provide three different themes: `dark`、`light` and `plain`
+
+:::demo Using `effect` to change, default is `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: 'Tag 1' },
+          { type: 'success', label: 'Tag 2' },
+          { type: 'info', label: 'Tag 3' },
+          { type: 'danger', label: 'Tag 4' },
+          { type: 'warning', label: 'Tag 5' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributs
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
@@ -149,6 +194,7 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan
 | hit | Si le tag à une bordure mise en valeur. | boolean | — | false |
 | color | Couleur de fond du tag. | string | — | — |
 | size | Taille du tag. | string | medium / small / mini | — |
+| effect | component theme | string | dark / light / plain | light |
 
 ### Évènements
 

examples/docs/zh-CN/tag.md

@@ -139,15 +139,61 @@ Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下
 ```
 :::
 
+### 不同主题
+
+Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`
+
+:::demo 通过设置`effect`属性来改变主题，默认为 `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: '标签一' },
+          { type: 'success', label: '标签二' },
+          { type: 'info', label: '标签三' },
+          { type: 'danger', label: '标签四' },
+          { type: 'warning', label: '标签五' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 主题 | string | success/info/warning/danger | — |
+| type | 类型 | string | success/info/warning/danger | — |
 | closable | 是否可关闭 | boolean | — | false |
 | disable-transitions | 是否禁用渐变动画 | boolean | — | false |
 | hit | 是否有边框描边 | boolean | — | false |
 | color | 背景色 | string | — | — |
 | size | 尺寸 | string | medium / small / mini | — |
+| effect | 主题 | string | dark / light / plain | light |
 
 
 ### Events

packages/tag/src/tag.vue

@@ -8,7 +8,14 @@
       hit: Boolean,
       disableTransitions: Boolean,
       color: String,
-      size: String
+      size: String,
+      effect: {
+        type: String,
+        default: 'light',
+        validator(val) {
+          return ['dark', 'light', 'plain'].includes(val);
+        }
+      }
     },
     methods: {
       handleClose(event) {
@@ -26,16 +33,25 @@
       }
     },
     render(h) {
-      const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '',
+      const { type, tagSize, hit, effect } = this;
-        this.tagSize ? `el-tag--${this.tagSize}` : '',
+      const classes = [
-        {'is-hit': this.hit}
+        'el-tag',
+        type ? `el-tag--${type}` : '',
+        tagSize ? `el-tag--${tagSize}` : '',
+        effect ? `el-tag--${effect}` : '',
+        hit && 'is-hit'
       ];
-      const tagEl = (<span class={classes} style={{backgroundColor: this.color}} on-click={this.handleClick}>
+      const tagEl = (
-        { this.$slots.default }
+        <span
-        {
+          class={ classes }
-          this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleClose}></i>
+          style={{ backgroundColor: this.color }}
-        }
+          on-click={ this.handleClick }>
-      </span>);
+          { this.$slots.default }
+          {
+            this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
+          }
+        </span>
+      );
 
       return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
     }

packages/theme-chalk/src/common/var.scss

@@ -707,36 +707,20 @@ $--tooltip-padding: 10px !default;
 
 /* Tag
 -------------------------- */
-$--tag-padding: 0 10px !default;
-$--tag-fill: rgba($--color-primary, 0.10) !default;
 /// color||Color|0
-$--tag-font-color: $--color-primary !default;
+$--tag-info-color: $--color-info !default;
 /// color||Color|0
-$--tag-default-hover-background-color: $--color-primary !default;
+$--tag-primary-color: $--color-primary !default;
-$--tag-border: rgba($--color-primary, 0.20) !default;
+/// color||Color|0
+$--tag-success-color: $--color-success !default;
+/// color||Color|0
+$--tag-warning-color: $--color-warning !default;
+/// color||Color|0
+$--tag-danger-color: $--color-danger !default;
 /// fontSize||Font|1
 $--tag-font-size: 12px !default;
 $--tag-border-radius: 4px !default;
-
+$--tag-padding: 0 10px !default;
-$--tag-info-fill: rgba($--color-info, 0.10) !default;
-$--tag-info-border: rgba($--color-info, 0.20) !default;
-$--tag-info-color: $--color-info !default;
-
-$--tag-primary-fill: rgba($--color-primary, 0.10) !default;
-$--tag-primary-border: rgba($--color-primary, 0.20) !default;
-$--tag-primary-color: $--color-primary !default;
-
-$--tag-success-fill: rgba($--color-success, 0.10) !default;
-$--tag-success-border: rgba($--color-success, 0.20) !default;
-$--tag-success-color: $--color-success !default;
-
-$--tag-warning-fill: rgba($--color-warning, 0.10) !default;
-$--tag-warning-border: rgba($--color-warning, 0.20) !default;
-$--tag-warning-color: $--color-warning !default;
-
-$--tag-danger-fill: rgba($--color-danger, 0.10) !default;
-$--tag-danger-border: rgba($--color-danger, 0.20) !default;
-$--tag-danger-color: $--color-danger !default;
 
 /* Tree
 -------------------------- */

packages/theme-chalk/src/tag.scss

@@ -1,17 +1,108 @@
 @import "mixins/mixins";
 @import "common/var";
 
+@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $hoverColorWeight) {
+  background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight);
+  border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
+  color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
+
+  @include when(hit) {
+    border-color: $--tag-primary-color;
+  }
+
+  .el-tag__close {
+    color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
+    &:hover {
+      color: $--color-white;
+      background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
+    }
+  }
+
+  &.el-tag--info {
+    background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-info-color, $--color-white, $fontColorWeight);
+
+    @include when(hit) {
+      border-color: $--tag-info-color;
+    }
+
+    .el-tag__close {
+      color: mix($--tag-info-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
+      }
+    }
+  }
+
+  &.el-tag--success {
+    background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-success-color, $--color-white, $fontColorWeight);
+
+    @include when(hit) {
+      border-color: $--tag-success-color;
+    }
+
+    .el-tag__close {
+      color: mix($--tag-success-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
+      }
+    }
+  }
+
+  &.el-tag--warning {
+    background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
+
+    @include when(hit) {
+      border-color: $--tag-warning-color;
+    }
+
+    .el-tag__close {
+      color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
+      }
+    }
+  }
+
+  &.el-tag--danger {
+    background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
+
+    @include when(hit) {
+      border-color: $--tag-danger-color;
+    }
+
+    .el-tag__close {
+      color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);
+      }
+    }
+  }
+}
+
 @include b(tag) {
-  background-color: $--tag-fill;
+  @include genTheme(10%, 20%, 100%, 100%);
   display: inline-block;
-  padding: $--tag-padding;
   height: 32px;
+  padding: $--tag-padding;
   line-height: 30px;
   font-size: $--tag-font-size;
-  color: $--tag-font-color;
+  color: $--tag-primary-color;
+  border-width: 1px;
+  border-style: solid;
   border-radius: $--tag-border-radius;
   box-sizing: border-box;
-  border: 1px solid $--tag-border;
   white-space: nowrap;
 
   .el-icon-close {
@@ -26,92 +117,18 @@
     vertical-align: middle;
     top: -1px;
     right: -5px;
-    color: $--tag-font-color;
 
     &::before {
       display: block;
     }
-
-    &:hover {
-      background-color: $--tag-default-hover-background-color;
-      color: $--color-white;
-    }
   }
 
-  @include m(info) {
+  @include m(dark) {
-    background-color: $--tag-info-fill;
+    @include genTheme(100%, 100%, 0, 80%);
-    border-color: $--tag-info-border;
-    color: $--tag-info-color;
-
-    @include when(hit) {
-      border-color: $--tag-info-color;
-    }
-
-    .el-tag__close {
-      color: $--tag-info-color;
-    }
-
-    .el-tag__close:hover {
-      background-color: $--tag-info-color;
-      color: $--color-white;
-    }
   }
 
-  @include m(success) {
+  @include m(plain) {
-    background-color: $--tag-success-fill;
+    @include genTheme(0, 40%, 100%, 100%);
-    border-color: $--tag-success-border;
-    color: $--tag-success-color;
-
-    @include when(hit) {
-      border-color: $--tag-success-color;
-    }
-
-    .el-tag__close {
-      color: $--tag-success-color;
-    }
-
-    .el-tag__close:hover {
-      background-color: $--tag-success-color;
-      color: $--color-white;
-    }
-  }
-
-  @include m(warning) {
-    background-color: $--tag-warning-fill;
-    border-color: $--tag-warning-border;
-    color: $--tag-warning-color;
-
-    @include when(hit) {
-      border-color: $--tag-warning-color;
-    }
-
-    .el-tag__close {
-      color: $--tag-warning-color;
-    }
-
-    .el-tag__close:hover {
-      background-color: $--tag-warning-color;
-      color: $--color-white;
-    }
-  }
-
-  @include m(danger) {
-    background-color: $--tag-danger-fill;
-    border-color: $--tag-danger-border;
-    color: $--tag-danger-color;
-
-    @include when(hit) {
-      border-color: $--tag-danger-color;
-    }
-
-    .el-tag__close {
-      color: $--tag-danger-color;
-    }
-
-    .el-tag__close:hover {
-      background-color: $--tag-danger-color;
-      color: $--color-white;
-    }
   }
 
   @include m(medium) {

test/unit/specs/tag.spec.js

@@ -1,4 +1,5 @@
-import { createVue, destroyVM } from '../util';
+import { createTest, createVue, destroyVM } from '../util';
+import Tag from 'packages/tag';
 
 describe('Tag', () => {
   let vm;
@@ -113,4 +114,12 @@ describe('Tag', () => {
       done();
     }, 20);
   });
+
+  it('theme', () => {
+    vm = createTest(Tag, { effect: 'dark' }, true);
+    const el = vm.$el;
+    expect(el.className).to.includes('el-tag--dark');
+    expect(el.className).to.not.includes('el-tag--light');
+    expect(el.className).to.not.includes('el-tag--plain');
+  });
 });

types/tag.d.ts

@@ -1,10 +1,11 @@
 import { ElementUIComponent, ElementUIComponentSize } from './component'
 
 export type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger'
+export type TagTheme = 'dark' | 'light' | 'plain'
 
 /** Tag Component */
 export declare class ElTag extends ElementUIComponent {
-  /** Theme */
+  /** Tag type */
   type: TagType
 
   /** Whether Tab can be removed */
@@ -21,4 +22,7 @@ export declare class ElTag extends ElementUIComponent {
 
   /** Tag size */
   size: ElementUIComponentSize
+
+  /** Tag theme */
+  effect: TagTheme
 }