From c49c57d2caa1f4408709af30990b1797203bbd37 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 21 Jul 2020 22:58:26 +0800
Subject: [PATCH] style(Tag): adjust size and padding (#6828)

---
 src/card/test/__snapshots__/demo.spec.js.snap |  4 +-
 src/style/var.less                            | 13 +++--
 src/tag/README.md                             |  5 --
 src/tag/README.zh-CN.md                       | 15 ++----
 src/tag/demo/index.vue                        |  5 --
 src/tag/index.less                            | 50 +++++++++++--------
 src/tag/index.tsx                             |  3 +-
 src/tag/test/__snapshots__/demo.spec.js.snap  | 10 ++--
 8 files changed, 50 insertions(+), 55 deletions(-)

diff --git a/src/card/test/__snapshots__/demo.spec.js.snap b/src/card/test/__snapshots__/demo.spec.js.snap
index 016ba0f01..ce4cac4ec 100644
--- a/src/card/test/__snapshots__/demo.spec.js.snap
+++ b/src/card/test/__snapshots__/demo.spec.js.snap
@@ -62,9 +62,9 @@ exports[`renders demo correctly 1`] = `
           <div>
             <div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
             <div class="van-card__desc van-ellipsis">描述信息</div>
-            <div><span class="van-tag van-tag--plain van-tag--danger van-hairline--surround" style="margin-right: 5px;">
+            <div><span class="van-tag van-tag--plain van-tag--danger" style="margin-right: 5px;">
             标签
-          </span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">
+          </span> <span class="van-tag van-tag--plain van-tag--danger">
             标签
           </span></div>
           </div>
diff --git a/src/style/var.less b/src/style/var.less
index a0957a179..7a4773358 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -766,12 +766,15 @@
 @tabs-bottom-bar-color: @tabs-default-color;
 
 // Tag
-@tag-padding: 0.2em 0.5em;
-@tag-font-size: @font-size-xs;
-@tag-medium-font-size: @font-size-sm;
-@tag-large-font-size: @font-size-md;
+@tag-padding: 0 @padding-base;
 @tag-text-color: @white;
-@tag-border-radius: 0.2em;
+@tag-font-size: @font-size-sm;
+@tag-border-radius: 2px;
+@tag-line-height: 16px;
+@tag-medium-padding: 2px 6px;
+@tag-large-padding: @padding-base @padding-xs;
+@tag-large-border-radius: @border-radius-md;
+@tag-large-font-size: @font-size-md;
 @tag-round-border-radius: @border-radius-max;
 @tag-danger-color: @red;
 @tag-primary-color: @blue;
diff --git a/src/tag/README.md b/src/tag/README.md
index eb36c57e8..4a8a32d45 100644
--- a/src/tag/README.md
+++ b/src/tag/README.md
@@ -14,7 +14,6 @@ Vue.use(Tag);
 ### Basic Usage
 
 ```html
-<van-tag>Tag</van-tag>
 <van-tag type="primary">Tag</van-tag>
 <van-tag type="success">Tag</van-tag>
 <van-tag type="danger">Tag</van-tag>
@@ -24,7 +23,6 @@ Vue.use(Tag);
 ### Round style
 
 ```html
-<van-tag round>Tag</van-tag>
 <van-tag round type="primary">Tag</van-tag>
 <van-tag round type="success">Tag</van-tag>
 <van-tag round type="danger">Tag</van-tag>
@@ -34,7 +32,6 @@ Vue.use(Tag);
 ### Mark style
 
 ```html
-<van-tag mark>Tag</van-tag>
 <van-tag mark type="primary">Tag</van-tag>
 <van-tag mark type="success">Tag</van-tag>
 <van-tag mark type="danger">Tag</van-tag>
@@ -44,7 +41,6 @@ Vue.use(Tag);
 ### Plain style
 
 ```html
-<van-tag plain>Tag</van-tag>
 <van-tag plain type="primary">Tag</van-tag>
 <van-tag plain type="success">Tag</van-tag>
 <van-tag plain type="danger">Tag</van-tag>
@@ -55,7 +51,6 @@ Vue.use(Tag);
 
 ```html
 <van-tag color="#f2826a">Tag</van-tag>
-<van-tag color="#f2826a" plain>Tag</van-tag>
 <van-tag color="#7232dd">Tag</van-tag>
 <van-tag color="#7232dd" plain>Tag</van-tag>
 <van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>
diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md
index 34b682c6f..f9fc0e99b 100644
--- a/src/tag/README.zh-CN.md
+++ b/src/tag/README.zh-CN.md
@@ -13,10 +13,9 @@ Vue.use(Tag);
 
 ### 基础用法
 
-通过`type`属性控制标签颜色，默认为灰色
+通过 `type` 属性控制标签颜色。
 
 ```html
-<van-tag>标签</van-tag>
 <van-tag type="primary">标签</van-tag>
 <van-tag type="success">标签</van-tag>
 <van-tag type="danger">标签</van-tag>
@@ -25,10 +24,9 @@ Vue.use(Tag);
 
 ### 圆角样式
 
-通过`round`设置为圆角样式
+通过 `round` 设置为圆角样式。
 
 ```html
-<van-tag round>标签</van-tag>
 <van-tag round type="primary">标签</van-tag>
 <van-tag round type="success">标签</van-tag>
 <van-tag round type="danger">标签</van-tag>
@@ -37,10 +35,9 @@ Vue.use(Tag);
 
 ### 标记样式
 
-通过`mark`设置为标记样式(半圆角)
+通过 `mark` 设置为标记样式(半圆角)。
 
 ```html
-<van-tag mark>标签</van-tag>
 <van-tag mark type="primary">标签</van-tag>
 <van-tag mark type="success">标签</van-tag>
 <van-tag mark type="danger">标签</van-tag>
@@ -49,10 +46,9 @@ Vue.use(Tag);
 
 ### 空心样式
 
-设置`plain`属性设置为空心样式
+设置 `plain` 属性设置为空心样式。
 
 ```html
-<van-tag plain>标签</van-tag>
 <van-tag plain type="primary">标签</van-tag>
 <van-tag plain type="success">标签</van-tag>
 <van-tag plain type="danger">标签</van-tag>
@@ -63,7 +59,6 @@ Vue.use(Tag);
 
 ```html
 <van-tag color="#f2826a">标签</van-tag>
-<van-tag color="#f2826a" plain>标签</van-tag>
 <van-tag color="#7232dd">标签</van-tag>
 <van-tag color="#7232dd" plain>标签</van-tag>
 <van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
@@ -79,7 +74,7 @@ Vue.use(Tag);
 
 ### 可关闭标签
 
-添加`closeable`属性表示标签是可关闭的，关闭标签时会触发`close`事件，在`close`事件中可以执行隐藏标签的逻辑
+添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。
 
 ```html
 <van-tag
diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue
index 0ea06aeba..83db72ed0 100644
--- a/src/tag/demo/index.vue
+++ b/src/tag/demo/index.vue
@@ -1,7 +1,6 @@
 <template>
   <demo-section>
     <demo-block :title="t('basicUsage')">
-      <van-tag>{{ t('tag') }}</van-tag>
       <van-tag type="primary">{{ t('tag') }}</van-tag>
       <van-tag type="success">{{ t('tag') }}</van-tag>
       <van-tag type="danger">{{ t('tag') }}</van-tag>
@@ -9,7 +8,6 @@
     </demo-block>
 
     <demo-block :title="t('round')">
-      <van-tag round>{{ t('tag') }}</van-tag>
       <van-tag round type="primary">{{ t('tag') }}</van-tag>
       <van-tag round type="success">{{ t('tag') }}</van-tag>
       <van-tag round type="danger">{{ t('tag') }}</van-tag>
@@ -17,7 +15,6 @@
     </demo-block>
 
     <demo-block :title="t('mark')">
-      <van-tag mark>{{ t('tag') }}</van-tag>
       <van-tag mark type="primary">{{ t('tag') }}</van-tag>
       <van-tag mark type="success">{{ t('tag') }}</van-tag>
       <van-tag mark type="danger">{{ t('tag') }}</van-tag>
@@ -25,7 +22,6 @@
     </demo-block>
 
     <demo-block :title="t('plain')">
-      <van-tag plain>{{ t('tag') }}</van-tag>
       <van-tag plain type="primary">{{ t('tag') }}</van-tag>
       <van-tag plain type="success">{{ t('tag') }}</van-tag>
       <van-tag plain type="danger">{{ t('tag') }}</van-tag>
@@ -34,7 +30,6 @@
 
     <demo-block :title="t('customColor')">
       <van-tag color="#f2826a">{{ t('tag') }}</van-tag>
-      <van-tag color="#f2826a" plain>{{ t('tag') }}</van-tag>
       <van-tag color="#7232dd">{{ t('tag') }}</van-tag>
       <van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
       <van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
diff --git a/src/tag/index.less b/src/tag/index.less
index b7ebdb053..9f5d3b49c 100644
--- a/src/tag/index.less
+++ b/src/tag/index.less
@@ -1,19 +1,15 @@
 @import '../style/var';
 
 .van-tag {
+  position: relative;
   display: inline-flex;
   align-items: center;
   padding: @tag-padding;
   color: @tag-text-color;
   font-size: @tag-font-size;
-  line-height: normal;
+  line-height: @tag-line-height;
   border-radius: @tag-border-radius;
 
-  &::after {
-    border-color: currentColor;
-    border-radius: @tag-border-radius * 2;
-  }
-
   &--default {
     background-color: @tag-default-color;
 
@@ -56,30 +52,42 @@
 
   &--plain {
     background-color: @tag-plain-background-color;
-  }
 
-  &--mark {
-    padding-right: 0.7em;
-
-    &,
-    &::after {
-      border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0;
-    }
-  }
-
-  &--round {
-    &,
-    &::after {
-      border-radius: @tag-round-border-radius;
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: 1px solid currentColor;
+      border-radius: inherit;
+      content: '';
+      pointer-events: none;
     }
   }
 
   &--medium {
-    font-size: @tag-medium-font-size;
+    padding: @tag-medium-padding;
   }
 
   &--large {
+    padding: @tag-large-padding;
     font-size: @tag-large-font-size;
+    border-radius: @tag-large-border-radius;
+  }
+
+  &--mark {
+    border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0;
+
+    &::after {
+      display: block;
+      width: 2px;
+      content: '';
+    }
+  }
+
+  &--round {
+    border-radius: @tag-round-border-radius;
   }
 
   &__close {
diff --git a/src/tag/index.tsx b/src/tag/index.tsx
index 7c0dcd604..f33604ca0 100644
--- a/src/tag/index.tsx
+++ b/src/tag/index.tsx
@@ -1,7 +1,6 @@
 // Utils
 import { createNamespace } from '../utils';
 import { inherit, emit } from '../utils/functional';
-import { BORDER_SURROUND } from '../utils/constant';
 
 // Components
 import Icon from '../icon';
@@ -63,7 +62,7 @@ function Tag(
       <span
         key="content"
         style={style}
-        class={[bem([classes, type]), { [BORDER_SURROUND]: plain }]}
+        class={bem([classes, type])}
         {...inherit(ctx, true)}
       >
         {slots.default?.()}
diff --git a/src/tag/test/__snapshots__/demo.spec.js.snap b/src/tag/test/__snapshots__/demo.spec.js.snap
index 622597aba..b75a4f8c3 100644
--- a/src/tag/test/__snapshots__/demo.spec.js.snap
+++ b/src/tag/test/__snapshots__/demo.spec.js.snap
@@ -2,11 +2,11 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><span class="van-tag van-tag--default">标签</span> <span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--warning">标签</span></div>
-  <div><span class="van-tag van-tag--round van-tag--default">标签</span> <span class="van-tag van-tag--round van-tag--primary">标签</span> <span class="van-tag van-tag--round van-tag--success">标签</span> <span class="van-tag van-tag--round van-tag--danger">标签</span> <span class="van-tag van-tag--round van-tag--warning">标签</span></div>
-  <div><span class="van-tag van-tag--mark van-tag--default">标签</span> <span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</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--primary van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--warning van-hairline--surround">标签</span></div>
-  <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 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 van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
+  <div><span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--warning">标签</span></div>
+  <div><span class="van-tag van-tag--round van-tag--primary">标签</span> <span class="van-tag van-tag--round van-tag--success">标签</span> <span class="van-tag van-tag--round van-tag--danger">标签</span> <span class="van-tag van-tag--round van-tag--warning">标签</span></div>
+  <div><span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</span></div>
+  <div><span class="van-tag van-tag--plain van-tag--primary">标签</span> <span class="van-tag van-tag--plain van-tag--success">标签</span> <span class="van-tag van-tag--plain van-tag--danger">标签</span> <span class="van-tag van-tag--plain van-tag--warning">标签</span></div>
+  <div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</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" style="color: rgb(114, 50, 221);">标签</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 van-tag--success">标签</span> <span class="van-tag van-tag--medium van-tag--success">标签</span> <span class="van-tag van-tag--large van-tag--success">标签</span></div>
   <div><span class="van-tag van-tag--medium van-tag--primary" name="van-fade">
       标签