feat(Tag): add warning type (#4232)

src/style/var.less

@@ -610,6 +610,7 @@
 @tag-dander-color: @red;
 @tag-primary-color: @blue;
 @tag-success-color: @green;
+@tag-warning-color: @orange;
 @tag-default-color: @gray-dark;
 @tag-plain-background-color: @white;
 

src/tag/README.md

@@ -15,36 +15,40 @@ Vue.use(Tag);
 
 ```html
 <van-tag>Tag</van-tag>
-<van-tag type="danger">Tag</van-tag>
 <van-tag type="primary">Tag</van-tag>
 <van-tag type="success">Tag</van-tag>
+<van-tag type="danger">Tag</van-tag>
+<van-tag type="warning">Tag</van-tag>
 ```
 
 ### Plain style
 
 ```html
 <van-tag plain>Tag</van-tag>
-<van-tag plain type="danger">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>
+<van-tag plain type="warning">Tag</van-tag>
 ```
 
 ### Round style
 
 ```html
 <van-tag round>Tag</van-tag>
-<van-tag round type="danger">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>
+<van-tag round type="warning">Tag</van-tag>
 ```
 
 ### Mark style
 
 ```html
 <van-tag mark>Tag</van-tag>
-<van-tag mark type="danger">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>
+<van-tag mark type="warning">Tag</van-tag>
 ```
 
 ### Custom Color
@@ -60,9 +64,9 @@ Vue.use(Tag);
 ### Custom Size
 
 ```html
-<van-tag>Tag</van-tag>
+<van-tag type="danger">Tag</van-tag>
-<van-tag size="medium">Tag</van-tag>
+<van-tag type="danger" size="medium">Tag</van-tag>
-<van-tag size="large">Tag</van-tag>
+<van-tag type="danger" size="large">Tag</van-tag>
 ```
 
 ## API
@@ -71,7 +75,7 @@ Vue.use(Tag);
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
-| type | Type, can be set to `primary` `success` `danger` | `string` | `default` |
+| type | Type, can be set to `primary` `success` `danger` `warning` | `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

@@ -17,9 +17,10 @@ Vue.use(Tag);
 
 ```html
 <van-tag>标签</van-tag>
-<van-tag type="danger">标签</van-tag>
 <van-tag type="primary">标签</van-tag>
 <van-tag type="success">标签</van-tag>
+<van-tag type="danger">标签</van-tag>
+<van-tag type="warning">标签</van-tag>
 ```
 
 ### 空心样式
@@ -28,9 +29,10 @@ Vue.use(Tag);
 
 ```html
 <van-tag plain>标签</van-tag>
-<van-tag plain type="danger">标签</van-tag>
 <van-tag plain type="primary">标签</van-tag>
 <van-tag plain type="success">标签</van-tag>
+<van-tag plain type="danger">标签</van-tag>
+<van-tag plain type="warning">标签</van-tag>
 ```
 
 ### 圆角样式
@@ -39,9 +41,10 @@ Vue.use(Tag);
 
 ```html
 <van-tag round>标签</van-tag>
-<van-tag round type="danger">标签</van-tag>
 <van-tag round type="primary">标签</van-tag>
 <van-tag round type="success">标签</van-tag>
+<van-tag round type="danger">标签</van-tag>
+<van-tag round type="warning">标签</van-tag>
 ```
 
 ### 标记样式
@@ -50,9 +53,10 @@ Vue.use(Tag);
 
 ```html
 <van-tag mark>标签</van-tag>
-<van-tag mark type="danger">标签</van-tag>
 <van-tag mark type="primary">标签</van-tag>
 <van-tag mark type="success">标签</van-tag>
+<van-tag mark type="danger">标签</van-tag>
+<van-tag mark type="warning">标签</van-tag>
 ```
 
 ### 自定义颜色
@@ -68,9 +72,9 @@ Vue.use(Tag);
 ### 标签大小
 
 ```html
-<van-tag>标签</van-tag>
+<van-tag type="danger">标签</van-tag>
-<van-tag size="medium">标签</van-tag>
+<van-tag type="danger" size="medium">标签</van-tag>
-<van-tag size="large">标签</van-tag>
+<van-tag type="danger" size="large">标签</van-tag>
 ```
 
 ## API
@@ -79,7 +83,7 @@ Vue.use(Tag);
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| type | 类型，可选值为`primary` `success` `danger` | `string` | `default` | - |
+| type | 类型，可选值为`primary` `success` `danger` `warning` | `string` | `default` | - |
 | size | 大小, 可选值为`large` `medium` | `string` | - | - |
 | color | 标签颜色 | `string` | - | - |
 | plain | 是否为空心样式 | `boolean` | `false` | - |

src/tag/demo/index.vue

@@ -2,116 +2,48 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-tag>{{ $t('tag') }}</van-tag>
-      <van-tag type="danger">{{ $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>
+      <van-tag type="warning">{{ $t('tag') }}</van-tag>
     </demo-block>
 
     <demo-block :title="$t('plain')">
       <van-tag plain>{{ $t('tag') }}</van-tag>
-      <van-tag
+      <van-tag plain type="primary">{{ $t('tag') }}</van-tag>
-        round
+      <van-tag plain type="success">{{ $t('tag') }}</van-tag>
-        plain
+      <van-tag plain type="danger">{{ $t('tag') }}</van-tag>
-        type="danger"
+      <van-tag plain type="warning">{{ $t('tag') }}</van-tag>
-      >
-        {{ $t('tag') }}
-      </van-tag>
-      <van-tag
-        round
-        plain
-        type="primary"
-      >
-        {{ $t('tag') }}
-      </van-tag>
-      <van-tag
-        plain
-        type="success"
-      >
-        {{ $t('tag') }}
-      </van-tag>
     </demo-block>
 
     <demo-block :title="$t('round')">
       <van-tag round>{{ $t('tag') }}</van-tag>
-      <van-tag
+      <van-tag round type="primary">{{ $t('tag') }}</van-tag>
-        round
+      <van-tag round type="success">{{ $t('tag') }}</van-tag>
-        type="danger"
+      <van-tag round type="danger">{{ $t('tag') }}</van-tag>
-      >
+      <van-tag round type="warning">{{ $t('tag') }}</van-tag>
-        {{ $t('tag') }}
-      </van-tag>
-      <van-tag
-        round
-        type="primary"
-      >
-        {{ $t('tag') }}
-      </van-tag>
-      <van-tag
-        round
-        type="success"
-      >
-        {{ $t('tag') }}
-      </van-tag>
     </demo-block>
 
     <demo-block :title="$t('mark')">
       <van-tag mark>{{ $t('tag') }}</van-tag>
-      <van-tag
+      <van-tag mark type="primary">{{ $t('tag') }}</van-tag>
-        mark
+      <van-tag mark type="success">{{ $t('tag') }}</van-tag>
-        type="danger"
+      <van-tag mark type="danger">{{ $t('tag') }}</van-tag>
-      >
+      <van-tag mark type="warning">{{ $t('tag') }}</van-tag>
-        {{ $t('tag') }}
-      </van-tag>
-      <van-tag
-        mark
-        type="primary"
-      >
-        {{ $t('tag') }}
-      </van-tag>
-      <van-tag
-        mark
-        type="success"
-      >
-        {{ $t('tag') }}
-      </van-tag>
     </demo-block>
 
     <demo-block :title="$t('customColor')">
       <van-tag color="#f2826a">{{ $t('tag') }}</van-tag>
-      <van-tag
+      <van-tag color="#f2826a" plain>{{ $t('tag') }}</van-tag>
-        color="#f2826a"
-        plain
-      >
-        {{ $t('tag') }}
-      </van-tag>
       <van-tag color="#7232dd">{{ $t('tag') }}</van-tag>
-      <van-tag
+      <van-tag color="#7232dd" plain>{{ $t('tag') }}</van-tag>
-        color="#7232dd"
+      <van-tag color="#ffe1e1" text-color="#ad0000">{{ $t('tag') }}</van-tag>
-        plain
-      >
-        {{ $t('tag') }}
-      </van-tag>
-      <van-tag
-        color="#ffe1e1"
-        text-color="#ad0000"
-      >
-        {{ $t('tag') }}
-      </van-tag>
     </demo-block>
 
     <demo-block :title="$t('customSize')">
       <van-tag type="danger">{{ $t('tag') }}</van-tag>
-      <van-tag
+      <van-tag type="danger" size="medium">{{ $t('tag') }}</van-tag>
-        type="danger"
+      <van-tag type="danger" size="large">{{ $t('tag') }}</van-tag>
-        size="medium"
-      >
-        {{ $t('tag') }}
-      </van-tag>
-      <van-tag
-        type="danger"
-        size="large"
-      >
-        {{ $t('tag') }}
-      </van-tag>
     </demo-block>
   </demo-section>
 </template>
@@ -138,7 +70,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-tag {
   background-color: @white;

src/tag/index.less

@@ -45,6 +45,14 @@
     }
   }
 
+  &--warning {
+    background-color: @tag-warning-color;
+
+    &.van-tag--plain {
+      color: @tag-warning-color;
+    }
+  }
+
   &--plain {
     background-color: @tag-plain-background-color;
   }

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

@@ -2,39 +2,11 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <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--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--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--round van-tag--danger van-hairline--surround">
+  <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--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>
-    </span> <span class="van-tag van-tag--plain van-tag--round van-tag--primary van-hairline--surround">
+  <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--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>
-    </span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">
+  <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 van-tag--danger">标签</span></div>
-      标签
-    </span></div>
-  <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 van-tag--primary">
-      标签
-    </span> <span class="van-tag van-tag--round van-tag--success">
-      标签
-    </span></div>
-  <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 van-tag--primary">
-      标签
-    </span> <span class="van-tag van-tag--mark van-tag--success">
-      标签
-    </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--danger">标签</span> <span class="van-tag van-tag--medium van-tag--danger">
-      标签
-    </span> <span class="van-tag van-tag--large van-tag--danger">
-      标签
-    </span></div>
 </div>
 `;