From 1669e36625263053c1a4d319780bb32b11a3d820 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 9 Jul 2019 14:02:48 +0800
Subject: [PATCH] [improvement] Tag: add type className (#3788)

---
 src/card/test/__snapshots__/demo.spec.js.snap |  6 ++--
 src/cell/test/__snapshots__/demo.spec.js.snap |  2 +-
 src/style/var.less                            |  5 +++
 src/tag/README.md                             |  2 +-
 src/tag/README.zh-CN.md                       |  2 +-
 src/tag/index.less                            | 36 +++++++++++++++++++
 src/tag/index.tsx                             | 21 +++++------
 src/tag/test/__snapshots__/demo.spec.js.snap  | 30 ++++++++--------
 8 files changed, 70 insertions(+), 34 deletions(-)

diff --git a/src/card/test/__snapshots__/demo.spec.js.snap b/src/card/test/__snapshots__/demo.spec.js.snap
index 5e65197f3..795e377c0 100644
--- a/src/card/test/__snapshots__/demo.spec.js.snap
+++ b/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">
diff --git a/src/cell/test/__snapshots__/demo.spec.js.snap b/src/cell/test/__snapshots__/demo.spec.js.snap
index 9c06e61c8..848855113 100644
--- a/src/cell/test/__snapshots__/demo.spec.js.snap
+++ b/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>
diff --git a/src/style/var.less b/src/style/var.less
index d50b4aa3f..4d5c49efe 100644
--- a/src/style/var.less
+++ b/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%;
diff --git a/src/tag/README.md b/src/tag/README.md
index c9dcfac86..356683f3f 100644
--- a/src/tag/README.md
+++ b/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` |
diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md
index e151f4ced..3c3e1c6b6 100644
--- a/src/tag/README.zh-CN.md
+++ b/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` | - |
diff --git a/src/tag/index.less b/src/tag/index.less
index 156302828..1c65cae59 100644
--- a/src/tag/index.less
+++ b/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;
diff --git a/src/tag/index.tsx b/src/tag/index.tsx
index 4d9b04f64..aaa13ad9f 100644
--- a/src/tag/index.tsx
+++ b/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);
diff --git a/src/tag/test/__snapshots__/demo.spec.js.snap b/src/tag/test/__snapshots__/demo.spec.js.snap
index 49e60835c..1ff0333de 100644
--- a/src/tag/test/__snapshots__/demo.spec.js.snap
+++ b/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>