[improvement] Tag: add type className (#3788)

src/card/test/__snapshots__/demo.spec.js.snap

@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
             <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
                 <!----></i></div>
           </div>
-          <div class="van-card__tag"><span class="van-tag van-tag--mark" style="background-color: rgb(255, 68, 68);">标签</span></div>
+          <div class="van-card__tag"><span class="van-tag van-tag--mark van-tag--danger">标签</span></div>
         </a>
         <div class="van-card__content">
           <div class="van-card__title">商品名称</div>
@@ -53,9 +53,9 @@ exports[`renders demo correctly 1`] = `
         <div class="van-card__content">
           <div class="van-card__title">商品名称</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
-          <div><span class="van-tag van-tag--plain van-hairline--surround" style="margin-right: 5px; color: rgb(255, 68, 68);">
+          <div><span class="van-tag van-tag--plain van-tag--danger van-hairline--surround" style="margin-right: 5px;">
             标签
-          </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
+          </span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">
             标签
           </span></div>
           <div class="van-card__bottom">

src/cell/test/__snapshots__/demo.spec.js.snap

@@ -88,7 +88,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span class="custom-title">单元格</span> <span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span></div>
+      <div class="van-cell__title"><span class="custom-title">单元格</span> <span class="van-tag van-tag--danger">标签</span></div>
       <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>

src/style/var.less

@@ -571,6 +571,11 @@
 @tag-text-color: @white;
 @tag-border-radius: .2em;
 @tag-round-border-radius: .8em;
+@tag-dander-color: @red;
+@tag-primary-color: @blue;
+@tag-success-color: @green;
+@tag-default-color: @gray-dark;
+@tag-plain-background-color: @white;
 
 // Toast
 @toast-max-width: 70%;

src/tag/README.md

@@ -70,7 +70,7 @@ Vue.use(Tag);
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
-| type | Type, can be set to `primary` `success` `danger` | `String` | - |
+| type | Type, can be set to `primary` `success` `danger` | `String` | `default` |
 | size | Size, can be set to `large` `medium` | `String` | - |
 | color | Custom color | `String` | - |
 | plain | Whether to be plain style | `Boolean` | `false` |

src/tag/README.zh-CN.md

@@ -78,7 +78,7 @@ Vue.use(Tag);
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| type | 类型，可选值为`primary` `success` `danger` | `String` | - | - |
+| type | 类型，可选值为`primary` `success` `danger` | `String` | `default` | - |
 | size | 大小, 可选值为`large` `medium` | `String` | - | - |
 | color | 标签颜色 | `String` | - | - |
 | plain | 是否为空心样式 | `Boolean` | `false` | - |

src/tag/index.less

@@ -13,6 +13,42 @@
     border-radius: @tag-border-radius * 2;
   }
 
+  &--default {
+    background-color: @tag-default-color;
+
+    &.van-tag--plain {
+      color: @tag-default-color;
+    }
+  }
+
+  &--danger {
+    background-color: @tag-dander-color;
+
+    &.van-tag--plain {
+      color: @tag-dander-color;
+    }
+  }
+
+  &--primary {
+    background-color: @tag-primary-color;
+
+    &.van-tag--plain {
+      color: @tag-primary-color;
+    }
+  }
+
+  &--success {
+    background-color: @tag-success-color;
+
+    &.van-tag--plain {
+      color: @tag-success-color;
+    }
+  }
+
+  &--plain {
+    background-color: @tag-plain-background-color;
+  }
+
   &--mark {
     padding-right: .6em;
     border-radius: 0 .8em .8em 0;

src/tag/index.tsx

@@ -1,12 +1,11 @@
 import { createNamespace } from '../utils';
 import { inherit } from '../utils/functional';
-import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/types';
 
-export type TagType = 'primary' | 'success' | 'danger';
+export type TagType = 'default' | 'primary' | 'success' | 'danger';
 
 export type TagSize = 'large' | 'medium';
 
@@ -22,21 +21,14 @@ export type TagProps = {
 
 const [createComponent, bem] = createNamespace('tag');
 
-const COLOR_MAP: { [key: string]: string } = {
-  danger: RED,
-  primary: BLUE,
-  success: GREEN
-};
-
 function Tag(
   h: CreateElement,
   props: TagProps,
   slots: DefaultSlots,
   ctx: RenderContext<TagProps>
 ) {
-  const { type, mark, plain, round, size } = props;
+  const { type, mark, plain, color, round, size } = props;
 
-  const color = props.color || (type && COLOR_MAP[type]) || GRAY_DARK;
   const key = plain ? 'color' : 'backgroundColor';
   const style = { [key]: color };
 
@@ -53,7 +45,7 @@ function Tag(
     <span
       style={style}
       class={[
-        bem(classes),
+        bem([classes, type]),
         {
           'van-hairline--surround': plain
         }
@@ -67,12 +59,15 @@ function Tag(
 
 Tag.props = {
   size: String,
-  type: String,
   mark: Boolean,
   color: String,
   plain: Boolean,
   round: Boolean,
-  textColor: String
+  textColor: String,
+  type: {
+    type: String,
+    default: 'default'
+  }
 };
 
 export default createComponent<TagProps>(Tag);

src/tag/test/__snapshots__/demo.spec.js.snap

@@ -2,38 +2,38 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><span class="van-tag" style="background-color: rgb(150, 151, 153);">标签</span> <span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span> <span class="van-tag" style="background-color: rgb(25, 137, 250);">标签</span> <span class="van-tag" style="background-color: rgb(7, 193, 96);">标签</span></div>
-  <div><span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(150, 151, 153);">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color: rgb(255, 68, 68);">
+  <div><span class="van-tag van-tag--default">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span></div>
+  <div><span class="van-tag van-tag--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--round van-tag--danger van-hairline--surround">
       标签
-    </span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color: rgb(25, 137, 250);">
+    </span> <span class="van-tag van-tag--plain van-tag--round van-tag--primary van-hairline--surround">
       标签
-    </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(7, 193, 96);">
+    </span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">
       标签
     </span></div>
-  <div><span class="van-tag van-tag--round" style="background-color: rgb(150, 151, 153);">标签</span> <span class="van-tag van-tag--round" style="background-color: rgb(255, 68, 68);">
+  <div><span class="van-tag van-tag--round van-tag--default">标签</span> <span class="van-tag van-tag--round van-tag--danger">
       标签
-    </span> <span class="van-tag van-tag--round" style="background-color: rgb(25, 137, 250);">
+    </span> <span class="van-tag van-tag--round van-tag--primary">
       标签
-    </span> <span class="van-tag van-tag--round" style="background-color: rgb(7, 193, 96);">
+    </span> <span class="van-tag van-tag--round van-tag--success">
       标签
     </span></div>
-  <div><span class="van-tag van-tag--mark" style="background-color: rgb(150, 151, 153);">标签</span> <span class="van-tag van-tag--mark" style="background-color: rgb(255, 68, 68);">
+  <div><span class="van-tag van-tag--mark van-tag--default">标签</span> <span class="van-tag van-tag--mark van-tag--danger">
       标签
-    </span> <span class="van-tag van-tag--mark" style="background-color: rgb(25, 137, 250);">
+    </span> <span class="van-tag van-tag--mark van-tag--primary">
       标签
-    </span> <span class="van-tag van-tag--mark" style="background-color: rgb(7, 193, 96);">
+    </span> <span class="van-tag van-tag--mark van-tag--success">
       标签
     </span></div>
-  <div><span class="van-tag" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(242, 130, 106);">
+  <div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(242, 130, 106);">
       标签
-    </span> <span class="van-tag" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(114, 50, 221);">
+    </span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(114, 50, 221);">
       标签
-    </span> <span class="van-tag" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">
+    </span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">
       标签
     </span></div>
-  <div><span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span> <span class="van-tag van-tag--medium" style="background-color: rgb(255, 68, 68);">
+  <div><span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--medium van-tag--danger">
       标签
-    </span> <span class="van-tag van-tag--large" style="background-color: rgb(255, 68, 68);">
+    </span> <span class="van-tag van-tag--large van-tag--danger">
       标签
     </span></div>
 </div>