[Improvement] Button: add plain prop (#1444)

packages/button/demo/index.vue

@@ -6,6 +6,12 @@
       <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>
+      <van-button type="danger" plain>{{ $t('danger') }}</van-button>
+    </demo-block>
+
     <demo-block :title="$t('title2')">
       <van-button size="large">{{ $t('large') }}</van-button>
       <van-button size="normal">{{ $t('normal') }}</van-button>
@@ -27,19 +33,6 @@
         {{ $t('button') }}
       </van-button>
     </demo-block>
-
-    <demo-block :title="$t('title5')">
-      <van-button type="primary" bottom-action>{{ $t('button') }}</van-button>
-
-      <van-row>
-        <van-col span="12">
-          <van-button bottom-action>{{ $t('button') }}</van-button>
-        </van-col>
-        <van-col span="12">
-          <van-button type="primary" bottom-action>{{ $t('button') }}</van-button>
-        </van-col>
-      </van-row>
-    </demo-block>
   </demo-section>
 </template>
 
@@ -58,7 +51,8 @@ export default {
       large: '大号按钮',
       normal: '普通按钮',
       small: '小型按钮',
-      mini: '迷你按钮'
+      mini: '迷你按钮',
+      plain: '朴素按钮'
     },
     'en-US': {
       title1: 'Type',
@@ -72,7 +66,8 @@ export default {
       large: 'Large',
       normal: 'Normal',
       small: 'Small',
-      mini: 'Mini'
+      mini: 'Mini',
+      plain: 'Plain'
     }
   }
 };
@@ -83,8 +78,7 @@ export default {
   .van-button {
     user-select: none;
 
-    &--large,
+    &--large {
-    &--bottom-action {
       margin-bottom: 15px;
     }
 

packages/button/en-US.md

@@ -17,6 +17,14 @@ Vue.use(Button);
 <van-button type="danger">Danger</van-button>
 ```
 
+#### Plain
+
+```html
+<van-button type="default" plain>Default</van-button>
+<van-button type="primary" plain>Primary</van-button>
+<van-button type="danger" plain>Danger</van-button>
+```
+
 #### Size
 
 ```html 
@@ -48,21 +56,6 @@ Use `tag` prop to custom button tag
 </van-button>
 ```
 
-#### Action Button
-
-```html 
-<van-button type="primary" bottom-action>Button</van-button>
-
-<van-row>
-  <van-col span="12">
-    <van-button bottom-action>Button</van-button>
-  </van-col>
-  <van-col span="12">
-    <van-button type="primary" bottom-action>Button</van-button>
-  </van-col>
-</van-row>
-```
-
 ### API
 
 | Attribute | Description | Type | Default |
@@ -72,10 +65,10 @@ Use `tag` prop to custom button tag
 | text | Text | `String` | - |
 | tag | Tag | `String` | `button` |
 | native-type | Native Type Attribute | `String` | `''` |
-| disabled | Whether disable button | `Boolean` | `false` |
+| plain | Whether to be plain button | `Boolean` | `false` |
+| disabled | Whether to disable button | `Boolean` | `false` |
 | loading | Whether show loading status | `Boolean` | `false` |
 | block | Whether to set display block | `Boolean` | `false` |
-| bottom-action | Whether to be action button | `Boolean` | `false` |
 
 ### Event
 

packages/button/index.vue

@@ -8,6 +8,7 @@
       size,
       {
         block,
+        plain,
         loading,
         disabled,
         unclickable: disabled || loading,
@@ -32,6 +33,7 @@ export default create({
   props: {
     text: String,
     block: Boolean,
+    plain: Boolean,
     loading: Boolean,
     disabled: Boolean,
     nativeType: String,

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

@@ -10,6 +10,14 @@ exports[`renders demo correctly 1`] = `
     <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>
+    <button class="van-button van-button--danger van-button--normal van-button--plain">
+      <!----><span class="van-button__text">危险按钮</span></button>
+  </div>
   <div>
     <button class="van-button van-button--default van-button--large">
       <!----><span class="van-button__text">大号按钮</span></button>
@@ -37,19 +45,5 @@ exports[`renders demo correctly 1`] = `
       按钮
     </span></a>
   </div>
-  <div>
-    <button class="van-button van-button--primary van-button--normal van-button--bottom-action">
-      <!----><span class="van-button__text">按钮</span></button>
-    <div class="van-row">
-      <div class="van-col van-col--12">
-        <button class="van-button van-button--default van-button--normal van-button--bottom-action">
-          <!----><span class="van-button__text">按钮</span></button>
-      </div>
-      <div class="van-col van-col--12">
-        <button class="van-button van-button--primary van-button--normal van-button--bottom-action">
-          <!----><span class="van-button__text">按钮</span></button>
-      </div>
-    </div>
-  </div>
 </div>
 `;

packages/button/zh-CN.md

@@ -18,6 +18,14 @@ Vue.use(Button);
 <van-button type="danger">危险按钮</van-button>
 ```
 
+#### 朴素按钮
+
+```html
+<van-button type="default" plain>默认按钮</van-button>
+<van-button type="primary" plain>主要按钮</van-button>
+<van-button type="danger" plain>危险按钮</van-button>
+```
+
 #### 按钮尺寸
 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
 
@@ -52,20 +60,6 @@ Vue.use(Button);
 </van-button>
 ```
 
-#### 页面底部操作按钮
-
-```html 
-<van-button type="primary" bottom-action>按钮</van-button>
-
-<van-row>
-  <van-col span="12">
-    <van-button bottom-action>按钮</van-button>
-  </van-col>
-  <van-col span="12">
-    <van-button type="primary" bottom-action>按钮</van-button>
-  </van-col>
-</van-row>
-```
 
 ### API
 
@@ -76,10 +70,10 @@ Vue.use(Button);
 | text | 按钮文字 | `String` | - |
 | tag | 按钮 HTML 标签 | `String` | `button` |
 | native-type | 按钮类型（原生） | `String` | - |
+| plain | 是否为朴素按钮 | `Boolean` | `false` |
 | disabled | 是否禁用 | `Boolean` | `false` |
 | loading | 是否显示为加载状态 | `Boolean` | `false` |
 | block | 是否为块级元素 | `Boolean` | `false` |
-| bottom-action | 是否为底部行动按钮 | `Boolean` | `false` |
 
 ### Event
 

packages/vant-css/src/button.css

@@ -53,6 +53,18 @@
     border: 1px solid $button-danger-border-color;
   }
 
+  &--plain {
+    background-color: $white;
+
+    &.van-button--primary {
+      color: $button-primary-background-color;
+    }
+
+    &.van-button--danger {
+      color: $button-danger-background-color;
+    }
+  }
+
   &--large {
     width: 100%;
     height: 50px;