fix: Button icon order and margin in rtl mode (#48821)

* fix: Button icon order and margin in rtl mode * demo: default iconPosition should be end * fix: test case
ant-design · May 8, 2024 · 766ae3b · 766ae3b
1 parent e2d7e68
commit 766ae3b
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 58 deletions.
diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1532,13 +1532,12 @@ Array [
         class="ant-radio-group ant-radio-group-outline"
       >
         <label
-          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+          class="ant-radio-button-wrapper"
         >
           <span
-            class="ant-radio-button ant-radio-button-checked"
+            class="ant-radio-button"
           >
             <input
-              checked=""
               class="ant-radio-button-input"
               type="radio"
               value="start"
@@ -1552,12 +1551,13 @@ Array [
           </span>
         </label>
         <label
-          class="ant-radio-button-wrapper"
+          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
         >
           <span
-            class="ant-radio-button"
+            class="ant-radio-button ant-radio-button-checked"
           >
             <input
+              checked=""
               class="ant-radio-button-input"
               type="radio"
               value="end"
@@ -1648,8 +1648,11 @@ Array [
         class="ant-btn ant-btn-primary"
         type="button"
       >
+        <span>
+          Search
+        </span>
         <span
-          class="ant-btn-icon"
+          class="ant-btn-icon ant-btn-icon-end"
         >
           <span
             aria-label="search"
@@ -1671,9 +1674,6 @@ Array [
             </svg>
           </span>
         </span>
-        <span>
-          Search
-        </span>
       </button>
       <button
         class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only"
@@ -1726,8 +1726,11 @@ Array [
         class="ant-btn ant-btn-default"
         type="button"
       >
+        <span>
+          Search
+        </span>
         <span
-          class="ant-btn-icon"
+          class="ant-btn-icon ant-btn-icon-end"
         >
           <span
             aria-label="search"
@@ -1749,9 +1752,6 @@ Array [
             </svg>
           </span>
         </span>
-        <span>
-          Search
-        </span>
       </button>
     </div>
     <div
@@ -1808,8 +1808,11 @@ Array [
         class="ant-btn ant-btn-text"
         type="button"
       >
+        <span>
+          Search
+        </span>
         <span
-          class="ant-btn-icon"
+          class="ant-btn-icon ant-btn-icon-end"
         >
           <span
             aria-label="search"
@@ -1831,9 +1834,6 @@ Array [
             </svg>
           </span>
         </span>
-        <span>
-          Search
-        </span>
       </button>
       <button
         class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only"
@@ -1886,8 +1886,11 @@ Array [
         class="ant-btn ant-btn-dashed"
         type="button"
       >
+        <span>
+          Search
+        </span>
         <span
-          class="ant-btn-icon"
+          class="ant-btn-icon ant-btn-icon-end"
         >
           <span
             aria-label="search"
@@ -1909,9 +1912,6 @@ Array [
             </svg>
           </span>
         </span>
-        <span>
-          Search
-        </span>
       </button>
       <a
         class="ant-btn ant-btn-default ant-btn-icon-only"
@@ -1946,8 +1946,11 @@ Array [
         class="ant-btn ant-btn-primary ant-btn-loading"
         type="button"
       >
+        <span>
+          Loading
+        </span>
         <span
-          class="ant-btn-icon ant-btn-loading-icon"
+          class="ant-btn-icon ant-btn-loading-icon-end"
           style="width: 0px; opacity: 0; transform: scale(0);"
         >
           <span
@@ -1970,9 +1973,6 @@ Array [
             </svg>
           </span>
         </span>
-        <span>
-          Loading
-        </span>
       </button>
     </div>
   </div>,

diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -1357,13 +1357,12 @@ Array [
         class="ant-radio-group ant-radio-group-outline"
       >
         <label
-          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+          class="ant-radio-button-wrapper"
         >
           <span
-            class="ant-radio-button ant-radio-button-checked"
+            class="ant-radio-button"
           >
             <input
-              checked=""
               class="ant-radio-button-input"
               type="radio"
               value="start"
@@ -1377,12 +1376,13 @@ Array [
           </span>
         </label>
         <label
-          class="ant-radio-button-wrapper"
+          class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
         >
           <span
-            class="ant-radio-button"
+            class="ant-radio-button ant-radio-button-checked"
           >
             <input
+              checked=""
               class="ant-radio-button-input"
               type="radio"
               value="end"
@@ -1454,8 +1454,11 @@ Array [
         class="ant-btn ant-btn-primary"
         type="button"
       >
+        <span>
+          Search
+        </span>
         <span
-          class="ant-btn-icon"
+          class="ant-btn-icon ant-btn-icon-end"
         >
           <span
             aria-label="search"
@@ -1477,9 +1480,6 @@ Array [
             </svg>
           </span>
         </span>
-        <span>
-          Search
-        </span>
       </button>
       <button
         class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only"
@@ -1513,8 +1513,11 @@ Array [
         class="ant-btn ant-btn-default"
         type="button"
       >
+        <span>
+          Search
+        </span>
         <span
-          class="ant-btn-icon"
+          class="ant-btn-icon ant-btn-icon-end"
         >
           <span
             aria-label="search"
@@ -1536,9 +1539,6 @@ Array [
             </svg>
           </span>
         </span>
-        <span>
-          Search
-        </span>
       </button>
     </div>
     <div
@@ -1576,8 +1576,11 @@ Array [
         class="ant-btn ant-btn-text"
         type="button"
       >
+        <span>
+          Search
+        </span>
         <span
-          class="ant-btn-icon"
+          class="ant-btn-icon ant-btn-icon-end"
         >
           <span
             aria-label="search"
@@ -1599,9 +1602,6 @@ Array [
             </svg>
           </span>
         </span>
-        <span>
-          Search
-        </span>
       </button>
       <button
         class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only"
@@ -1635,8 +1635,11 @@ Array [
         class="ant-btn ant-btn-dashed"
         type="button"
       >
+        <span>
+          Search
+        </span>
         <span
-          class="ant-btn-icon"
+          class="ant-btn-icon ant-btn-icon-end"
         >
           <span
             aria-label="search"
@@ -1658,9 +1661,6 @@ Array [
             </svg>
           </span>
         </span>
-        <span>
-          Search
-        </span>
       </button>
       <a
         class="ant-btn ant-btn-default ant-btn-icon-only"
@@ -1695,8 +1695,11 @@ Array [
         class="ant-btn ant-btn-primary ant-btn-loading"
         type="button"
       >
+        <span>
+          Loading
+        </span>
         <span
-          class="ant-btn-icon ant-btn-loading-icon"
+          class="ant-btn-icon ant-btn-loading-icon-end"
         >
           <span
             aria-label="loading"
@@ -1718,9 +1721,6 @@ Array [
             </svg>
           </span>
         </span>
-        <span>
-          Loading
-        </span>
       </button>
     </div>
   </div>,

diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -258,16 +258,18 @@ const InternalCompoundedButton = React.forwardRef<
   const kids =
     children || children === 0 ? spaceChildren(children, needInserted && mergedInsertSpace) : null;
 
-  const genButtonContent = (iconComponent: React.ReactNode, kidsComponent: React.ReactNode) => {
-    const isRTL = direction === 'rtl';
-    const iconFirst = (iconPosition === 'start' && !isRTL) || (iconPosition === 'end' && isRTL);
-    return (
+  const genButtonContent = (iconComponent: React.ReactNode, kidsComponent: React.ReactNode) =>
+    iconPosition === 'start' ? (
       <>
-        {iconFirst ? iconComponent : kidsComponent}
-        {iconFirst ? kidsComponent : iconComponent}
+        {iconComponent}
+        {kidsComponent}
+      </>
+    ) : (
+      <>
+        {kidsComponent}
+        {iconComponent}
       </>
     );
-  };
 
   if (linkButtonRestProps.href !== undefined) {
     return wrapCSSVar(

diff --git a/components/button/demo/icon-position.tsx b/components/button/demo/icon-position.tsx
@@ -3,7 +3,7 @@ import { SearchOutlined } from '@ant-design/icons';
 import { Button, Divider, Flex, Radio, Space, Tooltip } from 'antd';
 
 const App: React.FC = () => {
-  const [position, setPosition] = useState<'start' | 'end'>('start');
+  const [position, setPosition] = useState<'start' | 'end'>('end');
 
   return (
     <>