[new feature] Button: add icon prop

packages/button/demo/index.vue

@@ -77,6 +77,18 @@
       />
     </demo-block>
 
+    <demo-block :title="$t('icon')">
+      <van-button
+        type="primary"
+        icon="star-o"
+      />
+      <van-button
+        type="danger"
+        icon="star-o"
+        :text="$t('button')"
+      />
+    </demo-block>
+
     <demo-block :title="$t('size')">
       <van-button
         type="primary"
@@ -112,6 +124,7 @@ export default {
     'zh-CN': {
       type: '按钮类型',
       size: '按钮尺寸',
+      icon: '图标按钮',
       loading: '加载状态',
       shape: '按钮形状',
       default: '默认按钮',
@@ -133,6 +146,7 @@ export default {
     'en-US': {
       type: 'Type',
       size: 'Size',
+      icon: 'Icon',
       loading: 'Loading',
       shape: 'Shape',
       default: 'Default',
@@ -158,8 +172,6 @@ export default {
 <style lang="less">
 .demo-button {
   .van-button {
-    user-select: none;
-
     &--large {
       margin-bottom: 15px;
     }

packages/button/en-US.md

@@ -60,6 +60,13 @@ Vue.use(Button);
 <van-button round type="danger">Round</van-button>
 ```
 
+### Icon
+
+```html 
+<van-button icon="star-o" type="primary" />
+<van-button icon="star-o" type="danger">Button</van-button>
+```
+
 ### Size
 
 ```html 
@@ -78,6 +85,7 @@ Vue.use(Button);
 | type | Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
 | size | Can be set to `large` `small` `mini` | `String` | `normal` |
 | text | Text | `String` | - |
+| icon | Left Icon | `String` | - |
 | tag | HTML Tag | `String` | `button` |
 | native-type | Native Type Attribute | `String` | `''` |
 | plain | Whether to be plain button | `Boolean` | `false` |

packages/button/index.less

@@ -108,10 +108,9 @@
     line-height: @button-small-line-height;
   }
 
-  &--loading {
+  &__loading {
-    .van-loading {
+    display: inline-block;
-      display: inline-block;
+    vertical-align: top;
-    }
   }
 
   &--mini {
@@ -143,10 +142,18 @@
     border-radius: 0;
   }
 
-  &__loading-text {
+  &__icon {
+    min-width: 1em;
+    font-size: 1.2em;
+    line-height: inherit;
+    vertical-align: top;
+  }
+
+  &__icon + &__text,
+  &__loading + &__text {
     display: inline-block;
     margin-left: 5px;
-    vertical-align: middle;
+    vertical-align: top;
   }
 
   &--hairline {

packages/button/index.tsx

@@ -1,6 +1,7 @@
 import { use } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import { routeProps, RouteProps, functionalRoute } from '../utils/router';
+import Icon from '../icon';
 import Loading, { LoadingType } from '../loading';
 
 // Types
@@ -16,6 +17,7 @@ export type ButtonProps = RouteProps & {
   type: ButtonType;
   size: ButtonSize;
   text?: string;
+  icon?: string;
   block?: boolean;
   plain?: boolean;
   round?: boolean;
@@ -41,7 +43,7 @@ function Button(
   slots: DefaultSlots,
   ctx: RenderContext<ButtonProps>
 ) {
-  const { tag, type, disabled, loading, hairline, loadingText } = props;
+  const { tag, icon, type, disabled, loading, hairline, loadingText } = props;
 
   function onClick(event: Event) {
     if (!loading && !disabled) {
@@ -59,7 +61,6 @@ function Button(
       type,
       props.size,
       {
-        loading,
         disabled,
         hairline,
         block: props.block,
@@ -71,6 +72,36 @@ function Button(
     { 'van-hairline--surround': hairline }
   ];
 
+  function Content() {
+    const content = [];
+
+    if (loading) {
+      content.push(
+        <Loading
+          class={bem('loading')}
+          size={props.loadingSize}
+          type={props.loadingType}
+          color={type === 'default' ? undefined : ''}
+        />
+      );
+    } else if (icon) {
+      content.push(<Icon name={icon} class={bem('icon')} />);
+    }
+
+    let text;
+    if (loading) {
+      text = loadingText;
+    } else {
+      text = slots.default ? slots.default() : props.text;
+    }
+
+    if (text) {
+      content.push(<span class={bem('text')}>{text}</span>);
+    }
+
+    return content;
+  }
+
   return (
     <tag
       class={classes}
@@ -80,18 +111,7 @@ function Button(
       onTouchstart={onTouchstart}
       {...inherit(ctx)}
     >
-      {loading ? (
+      {Content()}
-        [
-          <Loading
-            size={props.loadingSize}
-            type={props.loadingType}
-            color={type === 'default' ? undefined : ''}
-          />,
-          loadingText && <span class={bem('loading-text')}>{loadingText}</span>
-        ]
-      ) : (
-        <span class={bem('text')}>{slots.default ? slots.default() : props.text}</span>
-      )}
     </tag>
   );
 }
@@ -99,6 +119,7 @@ function Button(
 Button.props = {
   ...routeProps,
   text: String,
+  icon: String,
   block: Boolean,
   plain: Boolean,
   round: Boolean,

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

@@ -8,12 +8,15 @@ exports[`renders demo correctly 1`] = `
   <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><button class="van-button van-button--primary van-button--normal">
-      <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+      <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-    </button> <button class="van-button van-button--danger van-button--normal van-button--loading">
+    </button> <button class="van-button van-button--danger van-button--normal">
-      <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__loading-text">加载中...</span>
+      <div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__text">加载中...</span>
     </button></div>
   <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
+        <!----></i></button> <button class="van-button van-button--danger van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
+        <!----></i><span class="van-button__text">按钮</span></button></div>
   <div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">
       大号按钮
     </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loading size 1`] = `
-<button class="van-button van-button--default van-button--normal van-button--loading">
+<button class="van-button van-button--default van-button--normal">
-  <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+  <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
 </button>
 `;

packages/button/zh-CN.md

@@ -68,6 +68,13 @@ Vue.use(Button);
 <van-button round type="danger">圆形按钮</van-button>
 ```
 
+### 图标按钮
+
+```html 
+<van-button icon="star-o" type="primary" />
+<van-button icon="star-o" type="danger">按钮</van-button>
+```
+
 ### 按钮尺寸
 
 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
@@ -87,9 +94,10 @@ Vue.use(Button);
 |------|------|------|------|------|
 | type | 类型，可选值为 `primary` `info` `warning` `danger` | `String` | `default` | 1.6.6 |
 | size | 尺寸，可选值为 `large` `small` `mini` | `String` | `normal` | - |
-| text | 文字 | `String` | - | - |
+| text | 按钮文字 | `String` | - | - |
+| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 2.0.0 |
 | tag | HTML 标签 | `String` | `button` | - |
-| native-type | 原生 type 属性 | `String` | - | - |
+| native-type | 原生 button 标签 type 属性 | `String` | - | - |
 | block | 是否为块级元素 | `Boolean` | `false` | - |
 | plain | 是否为朴素按钮 | `Boolean` | `false` | 1.1.13 |
 | square | 是否为方形按钮 | `Boolean` | `false` | 1.2.0 |

packages/submit-bar/test/__snapshots__/demo.spec.js.snap

@@ -21,8 +21,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-submit-bar">
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--loading van-button--square van-submit-bar__button">
+        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button">
-          <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+          <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
         </button>
       </div>
     </div>

packages/submit-bar/test/__snapshots__/index.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`decimal-length prop 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 1.1</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text"></span></button>
+    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 1.1</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"></button>
   </div>
 </div>
 `;
@@ -11,7 +11,7 @@ exports[`decimal-length prop 1`] = `
 exports[`disable submit 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 0.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square van-submit-bar__button"><span class="van-button__text"></span></button>
+    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 0.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square van-submit-bar__button"></button>
   </div>
 </div>
 `;
@@ -19,18 +19,18 @@ exports[`disable submit 1`] = `
 exports[`suffix-label prop 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥ 1.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text"></span></button>
+    <div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥ 1.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"></button>
   </div>
 </div>
 `;
 
 exports[`top slot 1`] = `
-<div class="van-submit-bar">top<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text"></span></button></div>
+<div class="van-submit-bar">top<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"></button></div>
 </div>
 `;
 
 exports[`without price 1`] = `
 <div class="van-submit-bar">
-  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"><span class="van-button__text"></span></button></div>
+  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--large van-button--square van-submit-bar__button"></button></div>
 </div>
 `;