🐛 Fix Button loading style of icon-only

close #23610
ant-design · Apr 26, 2020 · b214b80 · b214b80
1 parent 3ddc99c
commit b214b80
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 27 deletions.
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -754,7 +754,7 @@ exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
 `;
 
 exports[`renders ./components/button/demo/loading.md correctly 1`] = `
-<div>
+Array [
   <button
     class="ant-btn ant-btn-primary ant-btn-loading"
     type="button"
@@ -786,7 +786,7 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
     <span>
       Loading
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
     type="button"
@@ -818,16 +818,45 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
     <span>
       Loading
     </span>
-  </button>
-  <br />
+  </button>,
+  <button
+    class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"
+    type="button"
+  >
+    <span
+      class="ant-btn-loading-icon"
+    >
+      <span
+        aria-label="loading"
+        class="anticon anticon-loading"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class="anticon-spin"
+          data-icon="loading"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="0 0 1024 1024"
+          width="1em"
+        >
+          <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 00-94.3-139.9 437.71 437.71 0 00-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"
+          />
+        </svg>
+      </span>
+    </span>
+  </button>,
+  <br />,
   <button
     class="ant-btn ant-btn-primary"
     type="button"
   >
     <span>
       Click me!
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-primary"
     type="button"
@@ -855,8 +884,33 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
     <span>
       Click me!
     </span>
-  </button>
-</div>
+  </button>,
+  <button
+    class="ant-btn ant-btn-primary ant-btn-icon-only"
+    type="button"
+  >
+    <span
+      aria-label="poweroff"
+      class="anticon anticon-poweroff"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="poweroff"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-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 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-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"
+        />
+      </svg>
+    </span>
+  </button>,
+]
 `;
 
 exports[`renders ./components/button/demo/multiple.md correctly 1`] = `

diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
@@ -19,46 +19,51 @@ import { PoweroffOutlined } from '@ant-design/icons';
 
 class App extends React.Component {
   state = {
-    loading: false,
-    iconLoading: false,
+    loadings: [],
   };
 
-  enterLoading = () => {
-    this.setState({ loading: true });
+  enterLoading = index => {
+    const newLoadings = [...this.state.loadings];
+    newLoadings[index] = true;
+    this.setState({
+      loadings: newLoadings,
+    });
     setTimeout(() => {
-      this.setState({ loading: false });
-    }, 8000);
-  };
-
-  enterIconLoading = () => {
-    this.setState({ iconLoading: true });
-    setTimeout(() => {
-      this.setState({ iconLoading: false });
-    }, 8000);
+      newLoadings[index] = false;
+      this.setState({ loadings: newLoadings });
+    }, 6000);
   };
 
   render() {
+    const { loadings } = this.state;
     return (
-      <div>
+      <>
         <Button type="primary" loading>
           Loading
         </Button>
         <Button type="primary" size="small" loading>
           Loading
         </Button>
+        <Button type="primary" icon={<PoweroffOutlined />} loading />
         <br />
-        <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
+        <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
           Click me!
         </Button>
         <Button
           type="primary"
           icon={<PoweroffOutlined />}
-          loading={this.state.iconLoading}
-          onClick={this.enterIconLoading}
+          loading={loadings[1]}
+          onClick={() => this.enterLoading(1)}
         >
           Click me!
         </Button>
-      </div>
+        <Button
+          type="primary"
+          icon={<PoweroffOutlined />}
+          loading={loadings[2]}
+          onClick={() => this.enterLoading(2)}
+        />
+      </>
     );
   }
 }

diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -154,9 +154,10 @@
 
   & > &-loading-icon {
     transition: all 0.3s @ease-in-out;
+    padding-right: @margin-xs;
 
-    .@{iconfont-css-prefix} {
-      padding-right: @margin-xs;
+    &:only-child {
+      padding-right: 0;
     }
   }