From 7b2fdd905188b5f6994049137f4f6e240f8e8101 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sun, 9 Feb 2020 11:09:30 +0800
Subject: [PATCH] feat: update button

---
 build/config.js                               |  2 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 16 +++++---
 components/button/__tests__/index.test.js     | 41 ++++++++++++++++++-
 components/button/button-group.jsx            |  1 +
 components/button/button.jsx                  | 18 ++++++--
 components/button/demo/icon.md                |  1 +
 components/button/demo/loading.md             |  2 +-
 components/button/demo/size.md                |  4 +-
 components/button/index.en-US.md              | 30 +++++++-------
 components/button/index.zh-CN.md              | 30 +++++++-------
 tests/shared/mountTest.js                     | 13 ++++++
 11 files changed, 115 insertions(+), 43 deletions(-)
 create mode 100644 tests/shared/mountTest.js

diff --git a/build/config.js b/build/config.js
index ddbb5d3d1..954463dbe 100644
--- a/build/config.js
+++ b/build/config.js
@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'badge', // dev components
+    componentName: 'button', // dev components
   },
 };
diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
index ee4445e74..1a1bf58c4 100644
--- a/components/button/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.js.snap
@@ -36,7 +36,7 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `<div style="
 exports[`renders ./components/button/demo/icon.md correctly 1`] = `
 <div><button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
-      </svg></i></button> <button type="button" class="ant-btn ant-btn-primary"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle"><span>A</span></button> <button type="button" class="ant-btn ant-btn-primary"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
       </svg></i><span>Search</span></button> <button type="button" class="ant-btn ant-btn-circle ant-btn-icon-only"><i aria-label="icon: search" class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
@@ -62,10 +62,10 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
         <path d="M705.6 124.9a8 8 0 0 0-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0 1 62.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0 1 27.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 0 1-76.3 113.3 353.06 353.06 0 0 1-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 0 1-113.2-76.4A355.92 355.92 0 0 1 184 650.4a355 355 0 0 1-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path>
       </svg></i><span>延迟1s</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin">
         <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
-      </svg></i></button> <button type="button" class="ant-btn ant-btn-circle ant-btn-icon-only ant-btn-loading"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin">
-        <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
       </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only ant-btn-loading"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin">
         <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-round ant-btn-icon-only ant-btn-loading"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin">
+        <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
       </svg></i></button></div>
 `;
 
@@ -77,11 +77,15 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
 
 exports[`renders ./components/button/demo/size.md correctly 1`] = `
 <div>
-  <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <br><br> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-lg"><span>Normal</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-lg"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-lg"><span>Danger</span></button> <button type="button" class="ant-btn ant-btn-link ant-btn-lg"><span>Link</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+  <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <br><br> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-lg"><span>Normal</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-lg"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-lg"><span>Danger</span></button> <button type="button" class="ant-btn ant-btn-link ant-btn-lg"><span>Link</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
-      </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
-      </svg></i><span>Download</span></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+        <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
+      </svg></i></button>Download <button type="button" class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+        <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><i aria-label="icon: download" class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
       </svg></i><span>Download</span></button> <br>
   <div class="ant-btn-group ant-btn-group-lg"><button type="button" class="ant-btn ant-btn-primary"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js
index b359e593a..ed93a0e69 100644
--- a/components/button/__tests__/index.test.js
+++ b/components/button/__tests__/index.test.js
@@ -3,8 +3,12 @@ import Icon from '../../icon';
 import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import { asyncExpect } from '@/tests/utils';
+import { sleep } from '../../../tests/utils';
+import mountTest from '../../../tests/shared/mountTest';
 
 describe('Button', () => {
+  mountTest(Button);
+  mountTest(Button.Group);
   it('renders correctly', () => {
     const wrapper = mount({
       render() {
@@ -148,7 +152,20 @@ describe('Button', () => {
       expect(wrapper.contains('.ant-btn-loading')).toBe(false);
     });
   });
-
+  it('should not clickable when button is loading', () => {
+    const onClick = jest.fn();
+    const wrapper = mount({
+      render() {
+        return (
+          <Button loading onClick={onClick}>
+            button
+          </Button>
+        );
+      },
+    });
+    wrapper.trigger('click');
+    expect(onClick).not.toHaveBeenCalledWith();
+  });
   it('should support link button', () => {
     const wrapper = mount({
       render() {
@@ -197,4 +214,26 @@ describe('Button', () => {
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
+
+  it('should support to change loading', async () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: ['button'],
+      },
+    });
+    wrapper.setProps({ loading: true });
+    expect(wrapper.findAll('.ant-btn-loading').length).toBe(1);
+    wrapper.setProps({ loading: false });
+    expect(wrapper.findAll('.ant-btn-loading').length).toBe(0);
+    wrapper.setProps({ loading: { delay: 50 } });
+    expect(wrapper.findAll('.ant-btn-loading').length).toBe(0);
+    await sleep(50);
+    expect(wrapper.findAll('.ant-btn-loading').length).toBe(1);
+    wrapper.setProps({ loading: false });
+    await sleep(50);
+    expect(wrapper.findAll('.ant-btn-loading').length).toBe(0);
+    expect(() => {
+      wrapper.destroy();
+    }).not.toThrow();
+  });
 });
diff --git a/components/button/button-group.jsx b/components/button/button-group.jsx
index 676f798e9..41df76fb3 100644
--- a/components/button/button-group.jsx
+++ b/components/button/button-group.jsx
@@ -39,6 +39,7 @@ export default {
         break;
       case 'small':
         sizeCls = 'sm';
+        break;
       default:
         break;
     }
diff --git a/components/button/button.jsx b/components/button/button.jsx
index 06a39a143..d7db6d847 100644
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@@ -44,7 +44,19 @@ export default {
       const prefixCls = getPrefixCls('btn', customizePrefixCls);
       const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
 
-      const sizeCls = sizeMap[size] || '';
+      // large => lg
+      // small => sm
+      let sizeCls = '';
+      switch (size) {
+        case 'large':
+          sizeCls = 'lg';
+          break;
+        case 'small':
+          sizeCls = 'sm';
+          break;
+        default:
+          break;
+      }
       const iconType = sLoading ? 'loading' : icon;
       const children = filterEmpty($slots.default);
       return {
@@ -123,8 +135,8 @@ export default {
       return child;
     },
     isNeedInserted() {
-      const { icon, $slots } = this;
-      return $slots.default && $slots.default.length === 1 && !icon;
+      const { icon, $slots, type } = this;
+      return $slots.default && $slots.default.length === 1 && !icon && type !== 'link';
     },
   },
   render() {
diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
index e8a2ee495..a6f12741a 100644
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@@ -14,6 +14,7 @@ If you want specific control over the positioning and placement of the `Icon`, t
 <template>
   <div>
     <a-button type="primary" shape="circle" icon="search"></a-button>
+    <a-button type="primary" shape="circle">A</a-button>
     <a-button type="primary" icon="search">Search</a-button>
     <a-button shape="circle" icon="search" />
     <a-button icon="search">Search</a-button>
diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
index c02768ece..67d2d8d66 100644
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@@ -26,8 +26,8 @@ A loading indicator can be added to a button by setting the `loading` property o
     </a-button>
     <br />
     <a-button type="primary" loading />
-    <a-button shape="circle" loading />
     <a-button type="primary" shape="circle" loading />
+    <a-button type="danger" shape="round" loading />
   </div>
 </template>
 <script>
diff --git a/components/button/demo/size.md b/components/button/demo/size.md
index 87929ab2d..fd149fa11 100644
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@@ -25,8 +25,10 @@ If a large or small button is desired, set the `size` property to either `large`
     <a-button type="danger" :size="size">Danger</a-button>
     <a-button type="link" :size="size">Link</a-button>
     <br />
+    <a-button type="primary" icon="download" :size="size" />
     <a-button type="primary" shape="circle" icon="download" :size="size" />
-    <a-button type="primary" shape="round" icon="download" :size="size">Download</a-button>
+    <a-button type="primary" shape="round" icon="download" :size="size" />Download</a-button>
+    <a-button type="primary" shape="round" icon="download" :size="size" />
     <a-button type="primary" icon="download" :size="size">Download</a-button>
     <br />
     <a-button-group :size="size">
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index dee7dfc81..7e1a13308 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -2,25 +2,25 @@
 
 To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| disabled | disabled state of button | boolean | `false` |
-| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false |
-| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
-| icon | set the icon of button, see: Icon component | string | - |
-| loading | set the loading status of button | boolean \| { delay: number } | false |
-| shape | can be set to `circle`, `round` or omitted | string | - |
-| size | can be set to `small` `large` or omitted | string | `default` |
-| type | can be set to `primary` `ghost` `dashed` `danger` `link` or omitted (meaning `default`) | string | `default` |
-| block | option to fit button width to its parent width | boolean | `false` |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| disabled | disabled state of button | boolean | `false` |  |
+| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false |  |
+| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
+| icon | set the icon of button, see: Icon component | string | - |  |
+| loading | set the loading status of button | boolean \| { delay: number } | false |  |
+| shape | can be set to `circle`, `round` or omitted | string | - |  |
+| size | can be set to `small` `large` or omitted | string | `default` |  |
+| type | can be set to `primary` `ghost` `dashed` `danger` `link` or omitted (meaning `default`) | string | `default` |  |
+| block | option to fit button width to its parent width | boolean | `false` |  |
 
 ### events
 
-| Events Name | Description                             | Arguments       |
-| ----------- | --------------------------------------- | --------------- |
-| click       | set the handler to handle `click` event | (event) => void |
+| Events Name | Description                             | Arguments       | Version |
+| ----------- | --------------------------------------- | --------------- | ------- |
+| click       | set the handler to handle `click` event | (event) => void |         |
 
-`<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag. `<Button href="http://example.com">Hello world!</Button>` will be rendered into `<a href="http://example.com"><span>Hello world!</span></a>`.
+It accepts all props which native buttons support.
 
 ## FAQ
 
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index f61819d1c..dce399379 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -4,25 +4,25 @@
 
 按钮的属性说明如下：
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| disabled | 按钮失效状态 | boolean | `false` |
-| ghost | 幽灵属性，使按钮背景透明 | boolean | false |
-| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
-| icon | 设置按钮的图标类型 | string | - |
-| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
-| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |
-| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
-| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设 | string | `default` |
-| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| disabled | 按钮失效状态 | boolean | `false` |  |
+| ghost | 幽灵属性，使按钮背景透明 | boolean | false |  |
+| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
+| icon | 设置按钮的图标类型 | string | - |  |
+| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |  |
+| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |  |
+| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |  |
+| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设 | string | `default` |  |
+| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |  |
 
 ### 事件
 
-| 事件名称 | 说明             | 回调参数        |
-| -------- | ---------------- | --------------- |
-| click    | 点击按钮时的回调 | (event) => void |
+| 事件名称 | 说明             | 回调参数        | 版本 |
+| -------- | ---------------- | --------------- | ---- |
+| click    | 点击按钮时的回调 | (event) => void |      |
 
-`<a-button>Hello world!</a-button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到原生 button 上。 `<Button href="http://example.com">Hello world!</Button>` 则会渲染为 `<a href="http://example.com"><span>Hello world!</span></a>`。
+支持原生 button 的其他所有属性。
 
 ## FAQ
 
diff --git a/tests/shared/mountTest.js b/tests/shared/mountTest.js
new file mode 100644
index 000000000..15bc32464
--- /dev/null
+++ b/tests/shared/mountTest.js
@@ -0,0 +1,13 @@
+import { mount } from '@vue/test-utils';
+export default function mountTest(Component) {
+  describe(`mount and unmount`, () => {
+    // https://github.com/ant-design/ant-design/pull/18441
+    it(`component could be updated and unmounted without errors`, () => {
+      const wrapper = mount(Component);
+      expect(() => {
+        wrapper.setProps({});
+        wrapper.destroy();
+      }).not.toThrow();
+    });
+  });
+}