[new feature] Button: add info type (#2831)

packages/button/demo/index.vue

@@ -2,10 +2,11 @@
   <demo-section>
     <demo-block :title="$t('type')">
       <div class="demo-button-row">
+        <van-button type="default">{{ $t('default') }}</van-button>
         <van-button type="primary">{{ $t('primary') }}</van-button>
-        <van-button type="danger">{{ $t('danger') }}</van-button>
+        <van-button type="info">{{ $t('info') }}</van-button>
       </div>
-      <van-button type="default">{{ $t('default') }}</van-button>
+      <van-button type="danger">{{ $t('danger') }}</van-button>
       <van-button type="warning">{{ $t('warning') }}</van-button>
     </demo-block>
 
@@ -79,6 +80,7 @@ export default {
       shape: '按钮形状',
       default: '默认按钮',
       primary: '主要按钮',
+      info: '信息按钮',
       danger: '危险按钮',
       warning: '警告按钮',
       large: '大号按钮',
@@ -97,6 +99,7 @@ export default {
       shape: 'Shape',
       default: 'Default',
       primary: 'Primary',
+      info: 'Info',
       danger: 'Danger',
       warning: 'Warning',
       large: 'Large',

packages/button/en-US.md

@@ -12,9 +12,10 @@ Vue.use(Button);
 #### Type
 
 ```html
-<van-button type="primary">Primary</van-button>
-<van-button type="danger">Danger</van-button>
 <van-button type="default">Default</van-button>
+<van-button type="primary">Primary</van-button>
+<van-button type="info">Info</van-button>
+<van-button type="danger">Danger</van-button>
 <van-button type="warning">Warning</van-button>
 ```
 
@@ -59,7 +60,7 @@ Vue.use(Button);
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
-| type | Can be set to `primary` `warning` `danger` | `String` | `default` |
+| type | Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
 | size | Can be set to `large` `small` `mini` | `String` | `normal` |
 | text | Text | `String` | - |
 | tag | Tag | `String` | `button` |

packages/button/index.less

@@ -51,6 +51,12 @@
     border: 1px solid @button-primary-border-color;
   }
 
+  &--info {
+    color: @button-info-color;
+    background-color: @button-info-background-color;
+    border: 1px solid @button-info-border-color;
+  }
+
   &--danger {
     color: @button-danger-color;
     background-color: @button-danger-background-color;
@@ -70,6 +76,10 @@
       color: @button-primary-background-color;
     }
 
+    &.van-button--info {
+      color: @button-info-background-color;
+    }
+
     &.van-button--danger {
       color: @button-danger-background-color;
     }

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

@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="demo-button-row"><button class="van-button van-button--primary 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> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--warning 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> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">信息按钮</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
   </div>
   <div><button class="van-button van-button--primary 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>
   <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>

packages/button/zh-CN.md

@@ -11,11 +11,12 @@ Vue.use(Button);
 
 #### 按钮类型
 
-支持`default`、`primary`、`warning`、`danger`四种类型，默认为`default`
+支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
 
 ```html
 <van-button type="default">默认按钮</van-button>
 <van-button type="primary">主要按钮</van-button>
+<van-button type="info">信息按钮</van-button>
 <van-button type="warning">警告按钮</van-button>
 <van-button type="danger">危险按钮</van-button>
 ```
@@ -65,7 +66,7 @@ Vue.use(Button);
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| type | 类型，可选值为 `primary` `warning` `danger` | `String` | `default` | - |
+| type | 类型，可选值为 `primary` `info` `warning` `danger` | `String` | `default` | 1.6.6 |
 | size | 尺寸，可选值为 `large` `small` `mini` | `String` | `normal` | - |
 | text | 文字 | `String` | - | - |
 | tag | HTML 标签 | `String` | `button` | - |

packages/style/var.less

@@ -26,6 +26,9 @@
 @button-primary-color: @white;
 @button-primary-background-color: @green;
 @button-primary-border-color: @green;
+@button-info-color: @white;
+@button-info-background-color: @blue;
+@button-info-border-color: @blue;
 @button-danger-color: @white;
 @button-danger-background-color: @red;
 @button-danger-border-color: @red;