[Improvement] Button: add warning type (#1558)

packages/button/demo/index.vue

@@ -1,14 +1,20 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-button type="default">{{ $t('default') }}</van-button>
-      <van-button type="primary">{{ $t('primary') }}</van-button>
+      <div class="demo-button-row">
+        <van-button type="default">{{ $t('default') }}</van-button>
+        <van-button type="primary">{{ $t('primary') }}</van-button>
+      </div>
+      <van-button type="warning">{{ $t('warning') }}</van-button>
       <van-button type="danger">{{ $t('danger') }}</van-button>
     </demo-block>
 
     <demo-block :title="$t('plain')">
-      <van-button type="default" plain>{{ $t('default') }}</van-button>
-      <van-button type="primary" plain>{{ $t('primary') }}</van-button>
+      <div class="demo-button-row">
+        <van-button type="default" plain>{{ $t('default') }}</van-button>
+        <van-button type="primary" plain>{{ $t('primary') }}</van-button>
+      </div>
+      <van-button type="warning" plain>{{ $t('warning') }}</van-button>
       <van-button type="danger" plain>{{ $t('danger') }}</van-button>
     </demo-block>
 
@@ -48,6 +54,7 @@ export default {
       default: '默认按钮',
       primary: '主要按钮',
       danger: '危险按钮',
+      warning: '警告按钮',
       large: '大号按钮',
       normal: '普通按钮',
       small: '小型按钮',
@@ -63,6 +70,7 @@ export default {
       default: 'Default',
       primary: 'Primary',
       danger: 'Danger',
+      warning: 'Warning',
       large: 'Large',
       normal: 'Normal',
       small: 'Small',
@@ -99,5 +107,9 @@ export default {
   .van-doc-demo-block__title {
     padding-left: 0;
   }
+
+  &-row {
+    margin-bottom: 10px;
+  }
 }
 </style>

packages/button/en-US.md

@@ -14,6 +14,7 @@ Vue.use(Button);
 ```html
 <van-button type="default">Default</van-button>
 <van-button type="primary">Primary</van-button>
+<van-button type="warning">Warning</van-button>
 <van-button type="danger">Danger</van-button>
 ```
 
@@ -22,6 +23,7 @@ Vue.use(Button);
 ```html
 <van-button type="default" plain>Default</van-button>
 <van-button type="primary" plain>Primary</van-button>
+<van-button type="warning" plain>Warning</van-button>
 <van-button type="danger" plain>Danger</van-button>
 ```
 
@@ -60,7 +62,7 @@ Use `tag` prop to custom button tag
 
 | Attribute | Description | Type | Default |
 |-----------|-----------|-----------|-------------|
-| type | Can be set to `default` `primary` `danger` | `String` | `default` |
+| type | Can be set to `primary` `warning` `danger` | `String` | `default` |
 | size | Can be set to `normal` `large` `small` `mini` | `String` | `normal` |
 | text | Text | `String` | - |
 | tag | Tag | `String` | `button` |

packages/button/test/__snapshots__/demo.spec.js.snap

@@ -3,18 +3,26 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <button class="van-button van-button--default van-button--normal">
-      <!----><span class="van-button__text">默认按钮</span></button>
-    <button class="van-button van-button--primary van-button--normal">
-      <!----><span class="van-button__text">主要按钮</span></button>
+    <div class="demo-button-row">
+      <button class="van-button van-button--default van-button--normal">
+        <!----><span class="van-button__text">默认按钮</span></button>
+      <button class="van-button van-button--primary van-button--normal">
+        <!----><span class="van-button__text">主要按钮</span></button>
+    </div>
+    <button class="van-button van-button--warning van-button--normal">
+      <!----><span class="van-button__text">警告按钮</span></button>
     <button class="van-button van-button--danger van-button--normal">
       <!----><span class="van-button__text">危险按钮</span></button>
   </div>
   <div>
-    <button class="van-button van-button--default van-button--normal van-button--plain">
-      <!----><span class="van-button__text">默认按钮</span></button>
-    <button class="van-button van-button--primary van-button--normal van-button--plain">
-      <!----><span class="van-button__text">主要按钮</span></button>
+    <div class="demo-button-row">
+      <button class="van-button van-button--default van-button--normal van-button--plain">
+        <!----><span class="van-button__text">默认按钮</span></button>
+      <button class="van-button van-button--primary van-button--normal van-button--plain">
+        <!----><span class="van-button__text">主要按钮</span></button>
+    </div>
+    <button class="van-button van-button--warning van-button--normal van-button--plain">
+      <!----><span class="van-button__text">警告按钮</span></button>
     <button class="van-button van-button--danger van-button--normal van-button--plain">
       <!----><span class="van-button__text">危险按钮</span></button>
   </div>

packages/button/zh-CN.md

@@ -10,11 +10,12 @@ Vue.use(Button);
 ### 代码演示
 
 #### 按钮类型
-支持`default`、`primary`、`danger`三种类型，默认为`default`
+支持`default`、`primary`、`warning`、`danger`四种类型，默认为`default`
 
 ```html
 <van-button type="default">默认按钮</van-button>
 <van-button type="primary">主要按钮</van-button>
+<van-button type="warning">警告按钮</van-button>
 <van-button type="danger">危险按钮</van-button>
 ```
 
@@ -23,6 +24,7 @@ Vue.use(Button);
 ```html
 <van-button type="default" plain>默认按钮</van-button>
 <van-button type="primary" plain>主要按钮</van-button>
+<van-button type="warning" plain>警告按钮</van-button>
 <van-button type="danger" plain>危险按钮</van-button>
 ```
 
@@ -65,7 +67,7 @@ Vue.use(Button);
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| type | 按钮类型，可选值为 `default` `primary` `danger` | `String` | `default` |
+| type | 按钮类型，可选值为 `primary` `warning` `danger` | `String` | `default` |
 | size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
 | text | 按钮文字 | `String` | - |
 | tag | 按钮 HTML 标签 | `String` | `button` |

packages/vant-css/src/button.css

@@ -54,6 +54,12 @@
     border: 1px solid $button-danger-border-color;
   }
 
+  &--warning {
+    color: $button-warning-color;
+    background-color: $button-warning-background-color;
+    border: 1px solid $button-warning-border-color;
+  }
+
   &--plain {
     background-color: $white;
 
@@ -64,6 +70,10 @@
     &.van-button--danger {
       color: $button-danger-background-color;
     }
+
+    &.van-button--warning {
+      color: $button-warning-background-color;
+    }
   }
 
   &--large {

packages/vant-css/src/common/var.css

@@ -3,7 +3,7 @@ $black: #000;
 $white: #fff;
 $red: #f44;
 $blue: #38f;
-$orange: #f60;
+$orange: #f85;
 $green: #06bf04;
 $gray: #c9c9c9;
 $gray-light: #e5e5e5;
@@ -26,6 +26,9 @@ $button-primary-border-color: #4b0;
 $button-danger-color: $white;
 $button-danger-background-color: $red;
 $button-danger-border-color: $red;
+$button-warning-color: $white;
+$button-warning-background-color: $orange;
+$button-warning-border-color: $orange;
 $button-disabled-color: $gray-dark;
 $button-disabled-background-color: $active-color;
 $button-disabled-border-color: $border-color;