[new feature] Button: add hairline prop (#3031)

packages/button/demo/index.vue

@@ -23,6 +23,21 @@
       />
     </demo-block>
 
+    <demo-block :title="$t('hairline')">
+      <van-button
+        plain
+        hairline
+        type="primary"
+        :text="$t('hairlineButton')"
+      />
+      <van-button
+        plain
+        hairline
+        type="danger"
+        :text="$t('hairlineButton')"
+      />
+    </demo-block>
+
     <demo-block :title="$t('disabled')">
       <van-button
         disabled
@@ -90,6 +105,8 @@ export default {
       plain: '朴素按钮',
       square: '方形按钮',
       round: '圆形按钮',
+      hairline: '细边框',
+      hairlineButton: '细边框按钮',
       loadingText: '加载中...'
     },
     'en-US': {
@@ -109,6 +126,8 @@ export default {
       plain: 'Plain',
       square: 'Square',
       round: 'Round',
+      hairline: 'Hairline',
+      hairlineButton: 'Hairline',
       loadingText: 'Loading...'
     }
   }

packages/button/en-US.md

@@ -26,6 +26,13 @@ Vue.use(Button);
 <van-button plain type="danger">Danger</van-button>
 ```
 
+#### Hairline
+
+```html
+<van-button plain hairline type="primary">Hairline</van-button>
+<van-button plain hairline type="danger">Hairline</van-button>
+```
+
 #### Disabled
 
 ```html

packages/button/index.less

@@ -6,10 +6,10 @@
   display: inline-block;
   height: 44px;
   line-height: 42px;
-  border-radius: 2px;
-  box-sizing: border-box;
   font-size: 16px;
   text-align: center;
+  box-sizing: border-box;
+  border-radius: @button-border-radius;
   -webkit-appearance: none;
   -webkit-text-size-adjust: 100%;
 
@@ -132,12 +132,12 @@
   }
 
   &--bottom-action {
+    border: 0;
     width: 100%;
     height: 50px;
-    line-height: 50px;
-    border: 0;
-    border-radius: 0;
     font-size: 16px;
+    line-height: 50px;
+    border-radius: 0;
     color: @button-bottom-action-default-color;
     background-color: @button-bottom-action-default-background-color;
 
@@ -151,7 +151,7 @@
   }
 
   &--round {
-    border-radius: 10em;
+    border-radius: @button-round-border-radius;
   }
 
   &--square {
@@ -163,4 +163,17 @@
     display: inline-block;
     vertical-align: middle;
   }
+
+  &--hairline {
+    border-width: 0;
+
+    &::after {
+      border-color: inherit;
+      border-radius: @button-border-radius * 2;
+    }
+
+    &.van-button--round::after {
+      border-radius: @button-round-border-radius;
+    }
+  }
 }

packages/button/index.tsx

@@ -10,13 +10,14 @@ import { DefaultSlots } from '../utils/use/sfc';
 export type ButtonProps = RouteProps & {
   tag: keyof HTMLElementTagNameMap | string;
   type: 'default' | 'primary' | 'info' | 'warning' | 'danger';
-  size: 'large' | 'normal' | 'small' | 'mini'
+  size: 'large' | 'normal' | 'small' | 'mini';
   text?: string;
   block?: boolean;
   plain?: boolean;
   round?: boolean;
   square?: boolean;
   loading?: boolean;
+  hairline?: boolean;
   disabled?: boolean;
   nativeType?: string;
   loadingSize: string;
@@ -36,7 +37,7 @@ function Button(
   slots: DefaultSlots,
   ctx: RenderContext<ButtonProps>
 ) {
-  const { tag, type, disabled, loading, loadingText } = props;
+  const { tag, type, disabled, loading, hairline, loadingText } = props;
 
   const onClick = (event: Event) => {
     if (!loading && !disabled) {
@@ -49,31 +50,36 @@ function Button(
     <tag
       type={props.nativeType}
       disabled={disabled}
-      class={bem([
-        type,
-        props.size,
-        {
-          loading,
-          disabled,
-          block: props.block,
-          plain: props.plain,
-          round: props.round,
-          square: props.square,
-          'bottom-action': props.bottomAction
-        }
-      ])}
+      class={[
+        bem([
+          type,
+          props.size,
+          {
+            loading,
+            disabled,
+            hairline,
+            block: props.block,
+            plain: props.plain,
+            round: props.round,
+            square: props.square,
+            'bottom-action': props.bottomAction
+          }
+        ]),
+        { 'van-hairline--surround': hairline }
+      ]}
       onClick={onClick}
       {...inherit(ctx)}
     >
       {loading ? (
         [
-          <Loading size={props.loadingSize} color={type === 'default' ? undefined : ''} />,
+          <Loading
+            size={props.loadingSize}
+            color={type === 'default' ? undefined : ''}
+          />,
           loadingText && <span class={bem('loading-text')}>{loadingText}</span>
         ]
       ) : (
-        <span class={bem('text')}>
-          {slots.default ? slots.default() : props.text}
-        </span>
+        <span class={bem('text')}>{slots.default ? slots.default() : props.text}</span>
       )}
     </tag>
   );
@@ -87,6 +93,7 @@ Button.props = {
   round: Boolean,
   square: Boolean,
   loading: Boolean,
+  hairline: Boolean,
   disabled: Boolean,
   nativeType: String,
   loadingText: String,

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

@@ -6,6 +6,7 @@ exports[`renders demo correctly 1`] = `
     <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 class="van-button van-button--primary van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--hairline van-button--plain van-hairline--surround"><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>
   <div><button class="van-button van-button--primary van-button--normal van-button--loading">
       <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>

packages/button/zh-CN.md

@@ -23,11 +23,22 @@ Vue.use(Button);
 
 #### 朴素按钮
 
+通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
+
 ```html
 <van-button plain type="primary">朴素按钮</van-button>
 <van-button plain type="danger">朴素按钮</van-button>
 ```
 
+#### 细边框
+
+设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
+
+```html
+<van-button plain hairline type="primary">细边框按钮</van-button>
+<van-button plain hairline type="danger">细边框按钮</van-button>
+```
+
 #### 禁用状态
 
 通过`disabled`属性来禁用按钮，此时按钮不可点击
@@ -76,6 +87,7 @@ Vue.use(Button);
 | square | 是否为方形按钮 | `Boolean` | `false` | 1.2.0 |
 | round | 是否为圆形按钮 | `Boolean` | `false` | 1.3.4 |
 | disabled | 是否禁用按钮 | `Boolean` | `false` | - |
+| hairline | 是否使用 0.5px 边框 | `Boolean` | `false` | 1.6.11 |
 | loading | 是否显示为加载状态 | `Boolean` | `false` | - |
 | loading-text | 加载状态提示文字 | `String` | - | 1.6.3 |
 | loading-size | 加载图标大小 | `String` | `20px` | 1.6.7 |

packages/style/var.less

@@ -39,6 +39,8 @@
 @button-bottom-action-default-background-color: @orange;
 @button-bottom-action-primary-color: @white;
 @button-bottom-action-primary-background-color: @red;
+@button-border-radius: 2px;
+@button-round-border-radius: 10em;
 
 // Checkbox
 @checkbox-size: 20px;