[Improvement] Button: add warning type

example/pages/button/index.wxml

@@ -1,13 +1,19 @@
 <demo-section>
   <demo-block title="按钮类型">
-    <van-button type="default" custom-class="demo-margin-right">默认按钮</van-button>
+    <view class="row">
-    <van-button type="primary" custom-class="demo-margin-right">主要按钮</van-button>
+      <van-button type="default" custom-class="demo-margin-right">默认按钮</van-button>
+      <van-button type="primary">主要按钮</van-button>
+    </view>
+    <van-button type="warning" custom-class="demo-margin-right">警告按钮</van-button>
     <van-button type="danger">危险按钮</van-button>
   </demo-block>
 
   <demo-block title="朴素按钮">
-    <van-button type="default" plain custom-class="demo-margin-right">默认按钮</van-button>
+    <view class="row">
-    <van-button type="primary" plain custom-class="demo-margin-right">主要按钮</van-button>
+      <van-button type="default" plain custom-class="demo-margin-right">默认按钮</van-button>
+      <van-button type="primary" plain>主要按钮</van-button>
+    </view>
+    <van-button type="warning" plain custom-class="demo-margin-right">警告按钮</van-button>
     <van-button type="danger" plain>危险按钮</van-button>
   </demo-block>
 

example/pages/button/index.wxss

@@ -1,3 +1,8 @@
 .loading {
   margin: 0 18px;
 }
+
+.row {
+  height: 44px;
+  margin-bottom: 15px;
+}

packages/button/README.md

@@ -11,11 +11,12 @@
 ### 代码演示
 
 #### 按钮类型
-支持`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>
 ```
 
@@ -24,6 +25,7 @@
 ```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>
 ```
 
@@ -55,7 +57,7 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| type | 按钮类型，可选值为 `default` `primary` `danger` | `String` | `default` |
+| type | 按钮类型，可选值为 `primary` `warning` `danger` | `String` | `default` |
 | size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
 | plain | 是否为朴素按钮 | `Boolean` | `false` |
 | disabled | 是否禁用 | `Boolean` | `false` |

packages/button/index.pcss

@@ -11,6 +11,7 @@
   font-size: 16px;
   text-align: center;
   -webkit-appearance: none;
+  -webkit-text-size-adjust: 100%;
 
   &::after {
     content: " ";
@@ -53,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;
 
@@ -63,6 +70,10 @@
     &.van-button--danger {
       color: $button-danger-background-color;
     }
+
+    &.van-button--warning {
+      color: $button-warning-background-color;
+    }
   }
 
   &--large {
@@ -112,21 +123,6 @@
     display: block;
   }
 
-  &--bottom-action {
-    width: 100%;
-    height: 50px;
-    line-height: 50px;
-    border: 0;
-    border-radius: 0;
-    font-size: 16px;
-    color: $button-bottom-action-default-color;
-    background-color: $button-bottom-action-default-background-color;
-
-    &.van-button--primary {
-      background-color: $button-bottom-action-primary-background-color;
-    }
-  }
-
   &--disabled {
     color: $button-disabled-color;
     background-color: $button-disabled-background-color;

packages/common/var.pcss

@@ -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;