From c133507b01f59a340093acd3d32288a90fd9fbbd Mon Sep 17 00:00:00 2001 From: Simona <36978416+SimonaliaChen@users.noreply.github.com> Date: Mon, 27 May 2019 16:06:58 +0800 Subject: [PATCH] feat(Tag): add prop effect. (#15725) --- examples/demo-styles/tag.scss | 17 +++ examples/docs/en-US/tag.md | 61 +++++++-- examples/docs/es/tag.md | 60 +++++++-- examples/docs/fr-FR/tag.md | 46 +++++++ examples/docs/zh-CN/tag.md | 50 +++++++- packages/tag/src/tag.vue | 36 ++++-- packages/theme-chalk/src/common/var.scss | 32 ++--- packages/theme-chalk/src/tag.scss | 153 +++++++++++++---------- test/unit/specs/tag.spec.js | 11 +- types/tag.d.ts | 6 +- 10 files changed, 352 insertions(+), 120 deletions(-) diff --git a/examples/demo-styles/tag.scss b/examples/demo-styles/tag.scss index 32225698b1f..967d05bddff 100644 --- a/examples/demo-styles/tag.scss +++ b/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; + } + } } diff --git a/examples/docs/en-US/tag.md b/examples/docs/en-US/tag.md index e5438470518..e477029650d 100644 --- a/examples/docs/en-US/tag.md +++ b/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 -Tag One -Tag Two -Tag Three -Tag Four -Tag Five +Tag 1 +Tag 2 +Tag 3 +Tag 4 +Tag 5 ``` ::: @@ -139,19 +139,66 @@ 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 +
+ Dark + + {{ item.label }} + +
+
+ Plain + + {{ item.label }} + +
+ + +``` +::: + ### 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 | Event Name | Description | Parameters | |---------- |-------- |---------- | | click | triggers when Tag is clicked | — | -| close | triggers when Tag is removed | — | \ No newline at end of file +| close | triggers when Tag is removed | — | diff --git a/examples/docs/es/tag.md b/examples/docs/es/tag.md index fb833bebbc9..9646ef507ca 100644 --- a/examples/docs/es/tag.md +++ b/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 -Tag One -Tag Two -Tag Three -Tag Four -Tag Five +Tag 1 +Tag 2 +Tag 3 +Tag 4 +Tag 5 ``` ::: @@ -139,19 +139,65 @@ 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 +
+ Dark + + {{ item.label }} + +
+
+ Plain + + {{ item.label }} + +
+ + +``` +::: + ### 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 | Nombre | Descripción | Parametros | | ------ | ------------------------------------ | ---------- | | click | se dispara cuando el Tag es clic | — | -| close | se dispara cuando el Tag es removido | — | \ No newline at end of file +| close | se dispara cuando el Tag es removido | — | diff --git a/examples/docs/fr-FR/tag.md b/examples/docs/fr-FR/tag.md index 3d65cdb3504..988a5c35631 100644 --- a/examples/docs/fr-FR/tag.md +++ b/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 +
+ Dark + + {{ item.label }} + +
+
+ Plain + + {{ item.label }} + +
+ + +``` +::: + ### 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 diff --git a/examples/docs/zh-CN/tag.md b/examples/docs/zh-CN/tag.md index 45e25cdb9b5..ebc565d2cc6 100644 --- a/examples/docs/zh-CN/tag.md +++ b/examples/docs/zh-CN/tag.md @@ -139,19 +139,65 @@ Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下 ``` ::: +### 不同主题 + +Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain` + +:::demo 通过设置`effect`属性来改变主题，默认为 `light` +```html +
+ Dark + + {{ item.label }} + +
+
+ Plain + + {{ item.label }} + +
+ + +``` +::: + ### 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 | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | click | 点击 Tag 时触发的事件 | — | -| close | 关闭 Tag 时触发的事件 | — | \ No newline at end of file +| close | 关闭 Tag 时触发的事件 | — | diff --git a/packages/tag/src/tag.vue b/packages/tag/src/tag.vue index 144cc842e55..cb50c3308ae 100644 --- a/packages/tag/src/tag.vue +++ b/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}` : '', - this.tagSize ? `el-tag--${this.tagSize}` : '', - {'is-hit': this.hit} + const { type, tagSize, hit, effect } = this; + const classes = [ + 'el-tag', + type ? `el-tag--${type}` : '', + tagSize ? `el-tag--${tagSize}` : '', + effect ? `el-tag--${effect}` : '', + hit && 'is-hit' ]; - const tagEl = ( - { this.$slots.default } - { - this.closable && - } - ); + const tagEl = ( + + { this.$slots.default } + { + this.closable && + } + + ); return this.disableTransitions ? tagEl : { tagEl }; } diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 9f3760ccb6e..a738a2be173 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/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; /// color||Color|0 -$--tag-default-hover-background-color: $--color-primary !default; -$--tag-border: rgba($--color-primary, 0.20) !default; -/// fontSize||Font|1 -$--tag-font-size: 12px !default; -$--tag-border-radius: 4px !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; +/// color||Color|0 $--tag-primary-color: $--color-primary !default; - -$--tag-success-fill: rgba($--color-success, 0.10) !default; -$--tag-success-border: rgba($--color-success, 0.20) !default; +/// color||Color|0 $--tag-success-color: $--color-success !default; - -$--tag-warning-fill: rgba($--color-warning, 0.10) !default; -$--tag-warning-border: rgba($--color-warning, 0.20) !default; +/// color||Color|0 $--tag-warning-color: $--color-warning !default; - -$--tag-danger-fill: rgba($--color-danger, 0.10) !default; -$--tag-danger-border: rgba($--color-danger, 0.20) !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; /* Tree -------------------------- */ diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss index b0368485583..162290206f3 100644 --- a/packages/theme-chalk/src/tag.scss +++ b/packages/theme-chalk/src/tag.scss @@ -1,119 +1,136 @@ @import "mixins/mixins"; @import "common/var"; -@include b(tag) { - background-color: $--tag-fill; - display: inline-block; - padding: $--tag-padding; - height: 32px; - line-height: 30px; - font-size: $--tag-font-size; - color: $--tag-font-color; - border-radius: $--tag-border-radius; - box-sizing: border-box; - border: 1px solid $--tag-border; - white-space: nowrap; - - .el-icon-close { - border-radius: 50%; - text-align: center; - position: relative; - cursor: pointer; - font-size: 12px; - height: 16px; - width: 16px; - line-height: 16px; - vertical-align: middle; - top: -1px; - right: -5px; - color: $--tag-font-color; +@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); - &::before { - display: block; - } + @include when(hit) { + border-color: $--tag-primary-color; + } + .el-tag__close { + color: mix($--tag-primary-color, $--color-white, $fontColorWeight); &:hover { - background-color: $--tag-default-hover-background-color; color: $--color-white; + background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight); } } - @include m(info) { - background-color: $--tag-info-fill; - border-color: $--tag-info-border; - color: $--tag-info-color; + &.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: $--tag-info-color; - } - - .el-tag__close:hover { - background-color: $--tag-info-color; - color: $--color-white; + color: mix($--tag-info-color, $--color-white, $fontColorWeight); + &:hover { + color: $--color-white; + background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight); + } } } - @include m(success) { - background-color: $--tag-success-fill; - border-color: $--tag-success-border; - color: $--tag-success-color; + &.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: $--tag-success-color; - } - - .el-tag__close:hover { - background-color: $--tag-success-color; - color: $--color-white; + color: mix($--tag-success-color, $--color-white, $fontColorWeight); + &:hover { + color: $--color-white; + background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight); + } } } - @include m(warning) { - background-color: $--tag-warning-fill; - border-color: $--tag-warning-border; - color: $--tag-warning-color; + &.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: $--tag-warning-color; - } - - .el-tag__close:hover { - background-color: $--tag-warning-color; - color: $--color-white; + color: mix($--tag-warning-color, $--color-white, $fontColorWeight); + &:hover { + color: $--color-white; + background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight); + } } } - @include m(danger) { - background-color: $--tag-danger-fill; - border-color: $--tag-danger-border; - color: $--tag-danger-color; + &.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: $--tag-danger-color; + color: mix($--tag-danger-color, $--color-white, $fontColorWeight); + &:hover { + color: $--color-white; + background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight); + } } + } +} - .el-tag__close:hover { - background-color: $--tag-danger-color; - color: $--color-white; +@include b(tag) { + @include genTheme(10%, 20%, 100%, 100%); + display: inline-block; + height: 32px; + padding: $--tag-padding; + line-height: 30px; + font-size: $--tag-font-size; + color: $--tag-primary-color; + border-width: 1px; + border-style: solid; + border-radius: $--tag-border-radius; + box-sizing: border-box; + white-space: nowrap; + + .el-icon-close { + border-radius: 50%; + text-align: center; + position: relative; + cursor: pointer; + font-size: 12px; + height: 16px; + width: 16px; + line-height: 16px; + vertical-align: middle; + top: -1px; + right: -5px; + + &::before { + display: block; } } + @include m(dark) { + @include genTheme(100%, 100%, 0, 80%); + } + + @include m(plain) { + @include genTheme(0, 40%, 100%, 100%); + } + @include m(medium) { height: 28px; line-height: 26px; diff --git a/test/unit/specs/tag.spec.js b/test/unit/specs/tag.spec.js index 71a49895436..b0ddcf18922 100644 --- a/test/unit/specs/tag.spec.js +++ b/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'); + }); }); diff --git a/types/tag.d.ts b/types/tag.d.ts index 5fa0116b552..cc59f796b7a 100644 --- a/types/tag.d.ts +++ b/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 }