fix: button

Fixed the issue that when the href property is undefined, the Button will also be rendered as a anchor.
Fixed the issue that Edge throws an error when setting the loading property.

Author: tangjinzhou

components/button/__tests__/__snapshots__/index.test.js.snap

@@ -38,4 +38,6 @@ exports[`Button renders Chinese characters correctly 5`] = `
 
 exports[`Button renders correctly 1`] = `<button type="button" class="ant-btn ant-btn-default"><span>Follow</span></button>`;
 
-exports[`Button should support link button 1`] = `<a target="_blank" href="http://ant.design" type="button" class="ant-btn ant-btn-default"><span>link button</span></a>`;
+exports[`Button should not render as link button when href is undefined 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>button</span></button>`;
+
+exports[`Button should support link button 1`] = `<a target="_blank" href="http://ant.design" class="ant-btn ant-btn-default"><span>link button</span></a>`;

components/button/__tests__/index.test.js

@@ -173,4 +173,15 @@ describe('Button', () => {
     })
     expect(wrapper2.html()).toMatchSnapshot()
   })
+
+  it('should not render as link button when href is undefined', async () => {
+    const wrapper = mount({
+      render () {
+        return (
+          <Button type='primary' href={undefined}>button</Button>
+        )
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })

components/button/button.jsx

@@ -3,13 +3,13 @@ import Icon from '../icon'
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
 import buttonTypes from './buttonTypes'
+import { filterEmpty } from '../_util/props-util'
 const props = buttonTypes()
 export default {
+  inheritAttrs: false,
   name: 'AButton',
   __ANT_BUTTON: true,
-  props: {
-    ...props,
-  },
+  props,
   data () {
     return {
       sizeMap: {
@@ -48,13 +48,15 @@ export default {
   computed: {
     classes () {
       const { prefixCls, type, shape, size, hasTwoCNChar,
-        sLoading, ghost, block, sizeMap } = this
+        sLoading, ghost, block, sizeMap, icon, $slots } = this
       const sizeCls = sizeMap[size] || ''
+      const children = filterEmpty($slots.default)
       return {
         [`${prefixCls}`]: true,
         [`${prefixCls}-${type}`]: type,
         [`${prefixCls}-${shape}`]: shape,
         [`${prefixCls}-${sizeCls}`]: sizeCls,
+        [`${prefixCls}-icon-only`]: !children && children !== 0 && icon,
         [`${prefixCls}-loading`]: sLoading,
         [`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
         [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
@@ -106,11 +108,8 @@ export default {
       disabled, handleClick,
       sLoading, $slots, $attrs, $listeners } = this
     const buttonProps = {
-      props: {
-      },
       attrs: {
         ...$attrs,
-        type: htmlType,
         disabled,
       },
       class: classes,
@@ -123,7 +122,7 @@ export default {
     const iconNode = iconType ? <Icon type={iconType} /> : null
     const kids = $slots.default && $slots.default.length === 1 ? this.insertSpace($slots.default[0], this.isNeedInserted()) : $slots.default
 
-    if ('href' in $attrs) {
+    if ($attrs.href !== undefined) {
       return (
         <a {...buttonProps} ref='buttonNode'>
           {iconNode}{kids}
@@ -132,7 +131,7 @@ export default {
     } else {
       return (
         <Wave>
-          <button {...buttonProps} ref='buttonNode'>
+          <button {...buttonProps} ref='buttonNode' type={htmlType || 'button'}>
             {iconNode}{kids}
           </button>
         </Wave>