fix: loading icon not center #1337

vueComponent · Oct 25, 2019 · 7c9fc40 · 7c9fc40
1 parent 1208649
commit 7c9fc40
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 121 deletions.
diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
diff --git a/components/button/button.jsx b/components/button/button.jsx
@@ -45,13 +45,14 @@ export default {
       const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
 
       const sizeCls = sizeMap[size] || '';
+      const iconType = sLoading ? 'loading' : icon;
       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}-icon-only`]: children.length === 0 && iconType,
         [`${prefixCls}-loading`]: sLoading,
         [`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
         [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,

diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
@@ -25,6 +25,7 @@ A loading indicator can be added to a button by setting the `loading` property o
       延迟1s
     </a-button>
     <br />
+    <a-button type="primary" loading />
     <a-button shape="circle" loading />
     <a-button type="primary" shape="circle" loading />
   </div>

diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -10,10 +10,10 @@ exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `<sp
 
 exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
 <div>
-  <div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+  <div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
         </svg></i></button></div>
-  <div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button disabled="disabled" type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+  <div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button disabled="disabled" type="button" class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
         </svg></i></button></div> <button type="button" class="ant-btn ant-dropdown-trigger" style="margin-left: 8px;"><span>Button</span><i aria-label="icon: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
         <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>

diff --git a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownButton should support href like Button 1`] = `
-<div class="ant-btn-group ant-dropdown-button"><a href="https://ant.design" class="ant-btn ant-btn-default"></a><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+<div class="ant-btn-group ant-dropdown-button"><a href="https://ant.design" class="ant-btn ant-btn-default"></a><button type="button" class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
         <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
       </svg></i></button></div>
 `;
diff --git a/components/empty/__tests__/__snapshots__/demo.test.js.snap b/components/empty/__tests__/__snapshots__/demo.test.js.snap
@@ -34,9 +34,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="ant-transfer-operation"><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm"><i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+      <div class="ant-transfer-operation"><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"><i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
               <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
-            </svg></i></button><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm"><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" class="">
+            </svg></i></button><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"><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" class="">
               <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
             </svg></i></button></div>
       <div class="ant-transfer-list">

diff --git a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
@@ -60,9 +60,9 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
             </div>
           </div>
         </div>
-        <div class="ant-transfer-operation"><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm"><i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <div class="ant-transfer-operation"><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"><i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
                 <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
-              </svg></i></button><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm"><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" class="">
+              </svg></i></button><button disabled="disabled" type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"><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" class="">
                 <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
               </svg></i></button></div>
         <div class="ant-transfer-list">