chore: auto merge branches (#52103)

chore: sync master to feature

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -8,6 +8,7 @@ import { css, Global } from '@emotion/react';
 import useLayoutState from '../../../hooks/useLayoutState';
 import useLocale from '../../../hooks/useLocale';
 import DemoContext from '../../slots/DemoContext';
+import DemoFallback from '../Previewer/DemoFallback';
 
 const locales = {
   cn: {
@@ -113,16 +114,14 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
         </Tooltip>
       </span>
       <ConfigProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}>
-        <Suspense>
+        <DumiDemoGrid
-          <DumiDemoGrid
+          items={demos}
-            items={demos}
+          demoRender={(item) => (
-            demoRender={(item) => (
+            <Suspense fallback={<DemoFallback />}>
-              <Suspense>
+              <DumiDemo key={item.demo.id} {...item} />
-                <DumiDemo key={item.demo.id} {...item} />
+            </Suspense>
-              </Suspense>
+          )}
-            )}
+        />
-          />
-        </Suspense>
       </ConfigProvider>
     </div>
   );

.dumi/theme/builtins/Previewer/DemoFallback.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+
+const useStyle = createStyles(({ token, css }) => ({
+  skeletonWrapper: css`
+    width: 100% !important;
+    height: 250px;
+    margin-bottom: ${token.margin}px;
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+}));
+
+const DemoFallback = () => {
+  const { styles } = useStyle();
+  return (
+    <Skeleton.Node
+      active
+      className={styles.skeletonWrapper}
+      style={{ width: '100%', height: '100%' }}
+    >
+      {' '}
+    </Skeleton.Node>
+  );
+};
+
+export default DemoFallback;

.dumi/theme/builtins/Previewer/index.tsx

@@ -1,39 +1,17 @@
 import React, { Suspense } from 'react';
-import { Alert, Skeleton } from 'antd';
+import { Alert } from 'antd';
-import { createStyles } from 'antd-style';
 import Previewer from './Previewer';
+import DemoFallback from './DemoFallback';
 import type { IPreviewerProps } from 'dumi';
 
 const { ErrorBoundary } = Alert;
 
-const useStyle = createStyles(({ token, css }) => ({
+const PreviewerSuspense: React.FC<IPreviewerProps> = (props) => (
-  skeletonWrapper: css`
+  <ErrorBoundary>
-    width: 100% !important;
+    <Suspense fallback={<DemoFallback />}>
-    height: 250px;
+      <Previewer {...props} />
-    margin-bottom: ${token.margin}px;
+    </Suspense>
-    border-radius: ${token.borderRadiusLG}px;
+  </ErrorBoundary>
-  `,
+);
-}));
-
-const PreviewerSuspense: React.FC<IPreviewerProps> = (props) => {
-  const { styles } = useStyle();
-  return (
-    <ErrorBoundary>
-      <Suspense
-        fallback={
-          <Skeleton.Node
-            active
-            className={styles.skeletonWrapper}
-            style={{ width: '100%', height: '100%' }}
-          >
-            {' '}
-          </Skeleton.Node>
-        }
-      >
-        <Previewer {...props} />
-      </Suspense>
-    </ErrorBoundary>
-  );
-};
 
 export default PreviewerSuspense;

CHANGELOG.en-US.md

@@ -15,6 +15,15 @@ tag: vVERSION
 
 ---
 
+## 5.22.6
+
+`2024-12-23`
+
+- 🐞 Align Button with and without icons consistently. [#52070](https://github.com/ant-design/ant-design/pull/52070)
+- 🐞 Fix Splitter collapsible icon `z-index` too low. [#52065](https://github.com/ant-design/ant-design/pull/52065) [@wanpan11](https://github.com/wanpan11)
+- 🐞 Fix Button motion not smooth when set `loading`. [#52059](https://github.com/ant-design/ant-design/pull/52059) [@zombieJ](https://github.com/zombieJ)
+- 🐞 Fix Button issue where solid default button text disappears on hover in dark mode. [#52024](https://github.com/ant-design/ant-design/pull/52024) [@DDDDD12138](https://github.com/DDDDD12138)
+
 ## 5.22.5
 
 `2024-12-15`

CHANGELOG.zh-CN.md

@@ -15,6 +15,15 @@ tag: vVERSION
 
 ---
 
+## 5.22.6
+
+`2024-12-23`
+
+- 🐞 修复 Button 有图标和无图标按钮对齐差一像素的问题。[#52070](https://github.com/ant-design/ant-design/pull/52070)
+- 🐞 修复 Splitter 组件折叠图标 `z-index` 层级过低问题。[#52065](https://github.com/ant-design/ant-design/pull/52065) [@wanpan11](https://github.com/wanpan11)
+- 🐞 修复 Button 启用 `loading` 时，动画不够顺滑的问题。[#52059](https://github.com/ant-design/ant-design/pull/52059) [@zombieJ](https://github.com/zombieJ)
+- 🐞 修复 Button 暗色模式下默认填充按钮文本在悬停时消失的问题。[#52024](https://github.com/ant-design/ant-design/pull/52024) [@DDDDD12138](https://github.com/DDDDD12138)
+
 ## 5.22.5
 
 `2024-12-15`

components/button/DefaultLoadingIcon.tsx

@@ -29,6 +29,7 @@ export type DefaultLoadingIconProps = {
   loading?: boolean | object;
   className?: string;
   style?: React.CSSProperties;
+  mount: boolean;
 };
 
 const getCollapsedWidth = (): React.CSSProperties => ({
@@ -44,7 +45,7 @@ const getRealWidth = (node: HTMLElement): React.CSSProperties => ({
 });
 
 const DefaultLoadingIcon: React.FC<DefaultLoadingIconProps> = (props) => {
-  const { prefixCls, loading, existIcon, className, style } = props;
+  const { prefixCls, loading, existIcon, className, style, mount } = props;
   const visible = !!loading;
 
   if (existIcon) {
@@ -54,9 +55,11 @@ const DefaultLoadingIcon: React.FC<DefaultLoadingIconProps> = (props) => {
   return (
     <CSSMotion
       visible={visible}
-      // We do not really use this motionName
+      // Used for minus flex gap style only
       motionName={`${prefixCls}-loading-icon-motion`}
-      motionLeave={visible}
+      motionAppear={!mount}
+      motionEnter={!mount}
+      motionLeave={!mount}
       removeOnLeave
       onAppearStart={getCollapsedWidth}
       onAppearActive={getRealWidth}
@@ -65,15 +68,18 @@ const DefaultLoadingIcon: React.FC<DefaultLoadingIconProps> = (props) => {
       onLeaveStart={getRealWidth}
       onLeaveActive={getCollapsedWidth}
     >
-      {({ className: motionCls, style: motionStyle }, ref: React.Ref<HTMLSpanElement>) => (
+      {({ className: motionCls, style: motionStyle }, ref: React.Ref<HTMLSpanElement>) => {
-        <InnerLoadingIcon
+        const mergedStyle = { ...style, ...motionStyle };
-          prefixCls={prefixCls}
+
-          className={className}
+        return (
-          style={{ ...style, ...motionStyle }}
+          <InnerLoadingIcon
-          ref={ref}
+            prefixCls={prefixCls}
-          iconClassName={motionCls}
+            className={classNames(className, motionCls)}
-        />
+            style={mergedStyle}
-      )}
+            ref={ref}
+          />
+        );
+      }}
     </CSSMotion>
   );
 };

components/button/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -128,11 +128,10 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx extend context
   >
     <span
       class="ant-btn-icon ant-btn-loading-icon"
-      style="width: 0px; opacity: 0; transform: scale(0);"
     >
       <span
         aria-label="loading"
-        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
         role="img"
       >
         <svg
@@ -160,11 +159,10 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx extend context
   >
     <span
       class="ant-btn-icon ant-btn-loading-icon"
-      style="width: 0px; opacity: 0; transform: scale(0);"
     >
       <span
         aria-label="loading"
-        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
         role="img"
       >
         <svg
@@ -190,11 +188,10 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx extend context
   >
     <span
       class="ant-btn-icon ant-btn-loading-icon"
-      style="width: 0px; opacity: 0; transform: scale(0);"
     >
       <span
         aria-label="loading"
-        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
         role="img"
       >
         <svg
@@ -222,11 +219,10 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx extend context
   >
     <span
       class="ant-btn-icon ant-btn-loading-icon"
-      style="width: 0px; opacity: 0; transform: scale(0);"
     >
       <span
         aria-label="loading"
-        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
         role="img"
       >
         <svg
@@ -281,11 +277,10 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx extend context
   >
     <span
       class="ant-btn-icon ant-btn-loading-icon"
-      style="width: 0px; opacity: 0; transform: scale(0);"
     >
       <span
         aria-label="loading"
-        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
         role="img"
       >
         <svg
@@ -312,12 +307,37 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx extend context
 
 exports[`renders components/button/demo/chinese-chars-loading.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/button/demo/chinese-space.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      确定
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      确 定
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders components/button/demo/chinese-space.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/button/demo/color-variant.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
   >
     <button
       class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-sm"
@@ -369,7 +389,7 @@ exports[`renders components/button/demo/color-variant.tsx extend context correct
     </button>
   </div>
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
   >
     <button
       class="ant-btn ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
@@ -421,7 +441,7 @@ exports[`renders components/button/demo/color-variant.tsx extend context correct
     </button>
   </div>
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
   >
     <button
       class="ant-btn ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-sm"
@@ -750,7 +770,7 @@ exports[`renders components/button/demo/debug-block.tsx extend context correctly
 
 exports[`renders components/button/demo/debug-color-variant.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
 >
   <div
     class="ant-flex ant-flex-gap-small"
@@ -1330,6 +1350,67 @@ Array [
         </span>
       </button>
     </div>
+    <div
+      class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
+      role="separator"
+    >
+      <span
+        class="ant-divider-inner-text"
+      >
+        👇🏻 https://github.com/ant-design/ant-design/issues/51811 👇🏻
+      </span>
+    </div>
+    <div>
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
+        type="button"
+      >
+        <span>
+          without icon
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <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 0011.6 0l43.6-43.5a8.2 8.2 0 000-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"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          with icon
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
+      role="separator"
+    >
+      <span
+        class="ant-divider-inner-text"
+      >
+        👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻
+      </span>
+    </div>
     <div
       class="ant-flex ant-flex-gap-small"
       style="transform: scale(3); transform-origin: left top;"
@@ -2466,11 +2547,10 @@ Array [
       >
         <span
           class="ant-btn-icon ant-btn-loading-icon"
-          style="width: 0px; opacity: 0; transform: scale(0);"
         >
           <span
             aria-label="loading"
-            class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+            class="anticon anticon-loading anticon-spin"
             role="img"
           >
             <svg
@@ -2861,7 +2941,7 @@ exports[`renders components/button/demo/linear-gradient.tsx extend context corre
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg acss-9mi5l3"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg acss-wkbm77"
       type="button"
     >
       <span
@@ -2896,7 +2976,7 @@ exports[`renders components/button/demo/linear-gradient.tsx extend context corre
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg acss-9mi5l3"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg acss-wkbm77"
       type="button"
     >
       <span>
@@ -2922,11 +3002,10 @@ exports[`renders components/button/demo/loading.tsx extend context correctly 1`]
     >
       <span
         class="ant-btn-icon ant-btn-loading-icon"
-        style="width: 0px; opacity: 0; transform: scale(0);"
       >
         <span
           aria-label="loading"
-          class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+          class="anticon anticon-loading anticon-spin"
           role="img"
         >
           <svg
@@ -2954,11 +3033,10 @@ exports[`renders components/button/demo/loading.tsx extend context correctly 1`]
     >
       <span
         class="ant-btn-icon ant-btn-loading-icon"
-        style="width: 0px; opacity: 0; transform: scale(0);"
       >
         <span
           aria-label="loading"
-          class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+          class="anticon anticon-loading anticon-spin"
           role="img"
         >
           <svg
@@ -3048,7 +3126,15 @@ exports[`renders components/button/demo/loading.tsx extend context correctly 1`]
       type="button"
     >
       <span>
-        Click me!
+        Icon Start
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-end"
+      type="button"
+    >
+      <span>
+        Icon End
       </span>
     </button>
     <button
@@ -3079,7 +3165,7 @@ exports[`renders components/button/demo/loading.tsx extend context correctly 1`]
         </span>
       </span>
       <span>
-        Click me!
+        Icon Replace
       </span>
     </button>
     <button
@@ -3315,31 +3401,6 @@ exports[`renders components/button/demo/multiple.tsx extend context correctly 1`
 
 exports[`renders components/button/demo/multiple.tsx extend context correctly 2`] = `[]`;
 
-exports[`renders components/button/demo/noSpace.tsx extend context correctly 1`] = `
-<div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
->
-  <button
-    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-    type="button"
-  >
-    <span>
-      确定
-    </span>
-  </button>
-  <button
-    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-    type="button"
-  >
-    <span>
-      确 定
-    </span>
-  </button>
-</div>
-`;
-
-exports[`renders components/button/demo/noSpace.tsx extend context correctly 2`] = `[]`;
-
 exports[`renders components/button/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div

components/button/__tests__/__snapshots__/demo.test.ts.snap

@@ -301,12 +301,35 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx correctly 1`]
 </div>
 `;
 
+exports[`renders components/button/demo/chinese-space.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      确定
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
+    type="button"
+  >
+    <span>
+      确 定
+    </span>
+  </button>
+</div>
+`;
+
 exports[`renders components/button/demo/color-variant.tsx correctly 1`] = `
 <div
-  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
 >
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
   >
     <button
       class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-sm"
@@ -358,7 +381,7 @@ exports[`renders components/button/demo/color-variant.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
   >
     <button
       class="ant-btn ant-btn-default ant-btn-color-primary ant-btn-variant-solid ant-btn-sm"
@@ -410,7 +433,7 @@ exports[`renders components/button/demo/color-variant.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+    class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
   >
     <button
       class="ant-btn ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-sm"
@@ -733,7 +756,7 @@ exports[`renders components/button/demo/debug-block.tsx correctly 1`] = `
 
 exports[`renders components/button/demo/debug-color-variant.tsx correctly 1`] = `
 <div
-  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
 >
   <div
     class="ant-flex ant-flex-gap-small"
@@ -1235,6 +1258,67 @@ Array [
         </span>
       </button>
     </div>
+    <div
+      class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
+      role="separator"
+    >
+      <span
+        class="ant-divider-inner-text"
+      >
+        👇🏻 https://github.com/ant-design/ant-design/issues/51811 👇🏻
+      </span>
+    </div>
+    <div>
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
+        type="button"
+      >
+        <span>
+          without icon
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            aria-label="search"
+            class="anticon anticon-search"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="search"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <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 0011.6 0l43.6-43.5a8.2 8.2 0 000-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"
+              />
+            </svg>
+          </span>
+        </span>
+        <span>
+          with icon
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
+      role="separator"
+    >
+      <span
+        class="ant-divider-inner-text"
+      >
+        👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻
+      </span>
+    </div>
     <div
       class="ant-flex ant-flex-gap-small"
       style="transform:scale(3);transform-origin:left top"
@@ -2487,7 +2571,7 @@ exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg acss-9mi5l3"
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg acss-wkbm77"
       type="button"
     >
       <span
@@ -2522,7 +2606,7 @@ exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg acss-9mi5l3"
+      class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-lg acss-wkbm77"
       type="button"
     >
       <span>
@@ -2670,7 +2754,15 @@ exports[`renders components/button/demo/loading.tsx correctly 1`] = `
       type="button"
     >
       <span>
-        Click me!
+        Icon Start
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-end"
+      type="button"
+    >
+      <span>
+        Icon End
       </span>
     </button>
     <button
@@ -2701,7 +2793,7 @@ exports[`renders components/button/demo/loading.tsx correctly 1`] = `
         </span>
       </span>
       <span>
-        Click me!
+        Icon Replace
       </span>
     </button>
     <button
@@ -2830,29 +2922,6 @@ exports[`renders components/button/demo/multiple.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders components/button/demo/noSpace.tsx correctly 1`] = `
-<div
-  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
->
-  <button
-    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-    type="button"
-  >
-    <span>
-      确定
-    </span>
-  </button>
-  <button
-    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
-    type="button"
-  >
-    <span>
-      确 定
-    </span>
-  </button>
-</div>
-`;
-
 exports[`renders components/button/demo/size.tsx correctly 1`] = `
 Array [
   <div

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

@@ -177,11 +177,10 @@ exports[`Button renders Chinese characters correctly 6`] = `
 >
   <span
     class="ant-btn-icon ant-btn-loading-icon"
-    style="width: 0px; opacity: 0; transform: scale(0);"
   >
     <span
       aria-label="loading"
-      class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+      class="anticon anticon-loading anticon-spin"
       role="img"
     >
       <svg

components/button/button.tsx

@@ -170,6 +170,17 @@ const InternalCompoundedButton = React.forwardRef<
   const needInserted =
     Children.count(children) === 1 && !icon && !isUnBorderedButtonVariant(mergedVariant);
 
+  // ========================= Mount ==========================
+  // Record for mount status.
+  // This will help to no to show the animation of loading on the first mount.
+  const isMountRef = useRef(true);
+  React.useEffect(() => {
+    isMountRef.current = false;
+    return () => {
+      isMountRef.current = true;
+    };
+  }, []);
+
   // ========================= Effect =========================
   // Loading
   useEffect(() => {
@@ -304,7 +315,12 @@ const InternalCompoundedButton = React.forwardRef<
         {loading.icon}
       </IconWrapper>
     ) : (
-      <DefaultLoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={innerLoading} />
+      <DefaultLoadingIcon
+        existIcon={!!icon}
+        prefixCls={prefixCls}
+        loading={innerLoading}
+        mount={isMountRef.current}
+      />
     );
 
   const kids =

components/button/demo/chinese-space.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="middle" wrap>
+  <Flex gap="small" wrap>
     <Button type="primary" autoInsertSpace={false}>
       确定
     </Button>

components/button/demo/color-variant.tsx

@@ -7,8 +7,8 @@ const App: React.FC = () => {
 
   return (
     <ConfigProvider componentSize={xxl ? 'middle' : 'small'}>
-      <Flex vertical gap="middle">
+      <Flex vertical gap="small">
-        <Flex gap="middle" wrap>
+        <Flex gap="small" wrap>
           <Button color="default" variant="solid">
             Solid
           </Button>
@@ -28,7 +28,7 @@ const App: React.FC = () => {
             Link
           </Button>
         </Flex>
-        <Flex gap="middle" wrap>
+        <Flex gap="small" wrap>
           <Button color="primary" variant="solid">
             Solid
           </Button>
@@ -48,7 +48,7 @@ const App: React.FC = () => {
             Link
           </Button>
         </Flex>
-        <Flex gap="middle" wrap>
+        <Flex gap="small" wrap>
           <Button color="danger" variant="solid">
             Solid
           </Button>

components/button/demo/debug-color-variant.tsx

@@ -51,7 +51,7 @@ const App: React.FC = () => {
   const { styles: originalClsStyle } = useOriginalClsStyle();
 
   return (
-    <Flex vertical gap="middle">
+    <Flex vertical gap="small">
       {/* link color */}
       <Flex gap="small">
         <ConfigProvider theme={{ token: { colorPrimary: 'red' } }}>

components/button/demo/debug-icon.tsx

@@ -58,10 +58,15 @@ const App: React.FC = () => {
               Search
             </Button>
           </Flex>
+          <Divider plain>👇🏻 https://github.com/ant-design/ant-design/issues/51811 👇🏻</Divider>
+          <div>
+            <Button>without icon</Button>
+            <Button icon={<SearchOutlined />}>with icon</Button>
+          </div>
+          <Divider plain>👇🏻 https://github.com/ant-design/ant-design/issues/51380 👇🏻</Divider>
           <Flex
             gap="small"
             style={{
-              // https://github.com/ant-design/ant-design/issues/51380 // 视觉回归测试
               transform: 'scale(3)',
               transformOrigin: 'left top',
             }}

components/button/demo/linear-gradient.tsx

@@ -6,8 +6,6 @@ import { createStyles } from 'antd-style';
 const useStyle = createStyles(({ prefixCls, css }) => ({
   linearGradientButton: css`
     &.${prefixCls}-btn-primary:not([disabled]):not(.${prefixCls}-btn-dangerous) {
-      border-width: 0;
-
       > span {
         position: relative;
       }
@@ -16,7 +14,7 @@ const useStyle = createStyles(({ prefixCls, css }) => ({
         content: '';
         background: linear-gradient(135deg, #6253e1, #04befe);
         position: absolute;
-        inset: 0;
+        inset: -1px;
         opacity: 1;
         transition: all 0.3s;
         border-radius: inherit;

components/button/demo/loading.tsx

@@ -18,7 +18,7 @@ const App: React.FC = () => {
         newLoadings[index] = false;
         return newLoadings;
       });
-    }, 6000);
+    }, 3000);
   };
 
   return (
@@ -37,7 +37,15 @@ const App: React.FC = () => {
       </Flex>
       <Flex gap="small" wrap>
         <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
-          Click me!
+          Icon Start
+        </Button>
+        <Button
+          type="primary"
+          loading={loadings[2]}
+          onClick={() => enterLoading(2)}
+          iconPosition="end"
+        >
+          Icon End
         </Button>
         <Button
           type="primary"
@@ -45,13 +53,13 @@ const App: React.FC = () => {
           loading={loadings[1]}
           onClick={() => enterLoading(1)}
         >
-          Click me!
+          Icon Replace
         </Button>
         <Button
           type="primary"
           icon={<PoweroffOutlined />}
-          loading={loadings[2]}
+          loading={loadings[3]}
-          onClick={() => enterLoading(2)}
+          onClick={() => enterLoading(3)}
         />
         <Button
           type="primary"

components/button/index.zh-CN.md

@@ -54,7 +54,7 @@ group:
 <code src="./demo/chinese-chars-loading.tsx" debug>加载中状态 bug 还原</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
 <code src="./demo/linear-gradient.tsx">渐变按钮</code>
-<code src="./demo/noSpace.tsx" version="5.17.0">移除两个汉字之间的空格</code>
+<code src="./demo/chinese-space.tsx" version="5.17.0">移除两个汉字之间的空格</code>
 
 ## API
 

components/button/style/index.ts

@@ -14,7 +14,16 @@ export type { ComponentToken };
 
 // ============================== Shared ==============================
 const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
-  const { componentCls, iconCls, fontWeight } = token;
+  const {
+    componentCls,
+    iconCls,
+    fontWeight,
+    opacityLoading,
+    motionDurationSlow,
+    motionEaseInOut,
+    marginXS,
+    calc,
+  } = token;
 
   return {
     [componentCls]: {
@@ -40,17 +49,21 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
         pointerEvents: 'none',
       },
 
-      [`> span, ${componentCls}-icon`]: {
+      '> span:not(:only-child)': {
         display: 'inline-flex',
+        alignSelf: 'baseline',
+      },
+
+      [`> span${componentCls}-icon, > span${iconCls}`]: {
+        display: 'inline-flex',
+        alignSelf: 'center',
       },
 
       '> a': {
         color: 'currentColor',
       },
 
-      '&:not(:disabled)': {
+      '&:not(:disabled)': genFocusStyle(token),
-        ...genFocusStyle(token),
-      },
 
       [`&${componentCls}-two-chinese-chars::first-letter`]: {
         letterSpacing: '0.34em',
@@ -61,9 +74,66 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
         letterSpacing: '0.34em',
       },
 
-      // iconPosition="end"
+      [`&${componentCls}-icon-only`]: {
+        paddingInline: 0,
+
+        // make `btn-icon-only` not too narrow
+        [`&${componentCls}-compact-item`]: {
+          flex: 'none',
+        },
+
+        [`&${componentCls}-round`]: {
+          width: 'auto',
+        },
+      },
+
+      // Loading
+      [`&${componentCls}-loading`]: {
+        opacity: opacityLoading,
+        cursor: 'default',
+      },
+
+      [`${componentCls}-loading-icon`]: {
+        transition: ['width', 'opacity', 'margin']
+          .map((transition) => `${transition} ${motionDurationSlow} ${motionEaseInOut}`)
+          .join(','),
+      },
+
+      // iconPosition
+      [`&:not(${componentCls}-icon-end)`]: {
+        [`${componentCls}-loading-icon-motion`]: {
+          '&-appear-start, &-enter-start': {
+            marginInlineEnd: calc(marginXS).mul(-1).equal(),
+          },
+          '&-appear-active, &-enter-active': {
+            marginInlineEnd: 0,
+          },
+          '&-leave-start': {
+            marginInlineEnd: 0,
+          },
+          '&-leave-active': {
+            marginInlineEnd: calc(marginXS).mul(-1).equal(),
+          },
+        },
+      },
+
       '&-icon-end': {
         flexDirection: 'row-reverse',
+
+        [`${componentCls}-loading-icon-motion`]: {
+          '&-appear-start, &-enter-start': {
+            marginInlineStart: calc(marginXS).mul(-1).equal(),
+          },
+          '&-appear-active, &-enter-active': {
+            marginInlineStart: 0,
+          },
+          '&-leave-start': {
+            marginInlineStart: 0,
+          },
+          '&-leave-active': {
+            marginInlineStart: calc(marginXS).mul(-1).equal(),
+          },
+        },
       },
     },
   };
@@ -620,11 +690,9 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
     buttonPaddingHorizontal,
     iconCls,
     buttonPaddingVertical,
-    motionDurationSlow,
-    motionEaseInOut,
     buttonIconOnlyFontSize,
-    opacityLoading,
   } = token;
+
   return [
     {
       [prefixCls]: {
@@ -636,31 +704,11 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
 
         [`&${componentCls}-icon-only`]: {
           width: controlHeight,
-          paddingInline: 0,
-
-          // make `btn-icon-only` not too narrow
-          [`&${componentCls}-compact-item`]: {
-            flex: 'none',
-          },
-
-          [`&${componentCls}-round`]: {
-            width: 'auto',
-          },
 
           [iconCls]: {
             fontSize: buttonIconOnlyFontSize,
           },
         },
-
-        // Loading
-        [`&${componentCls}-loading`]: {
-          opacity: opacityLoading,
-          cursor: 'default',
-        },
-
-        [`${componentCls}-loading-icon`]: {
-          transition: `width ${motionDurationSlow} ${motionEaseInOut}, opacity ${motionDurationSlow} ${motionEaseInOut}`,
-        },
       },
     },
     // Shape - patch prefixCls again to override solid border radius style

components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -4352,11 +4352,10 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
       >
         <span
           class="ant-btn-icon ant-btn-loading-icon"
-          style="width: 0px; opacity: 0; transform: scale(0);"
         >
           <span
             aria-label="loading"
-            class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+            class="anticon anticon-loading anticon-spin"
             role="img"
           >
             <svg
@@ -4465,11 +4464,10 @@ exports[`renders components/dropdown/demo/loading.tsx extend context correctly 1
       >
         <span
           class="ant-btn-icon ant-btn-loading-icon"
-          style="width: 0px; opacity: 0; transform: scale(0);"
         >
           <span
             aria-label="loading"
-            class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+            class="anticon anticon-loading anticon-spin"
             role="img"
           >
             <svg

components/input/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -11380,11 +11380,10 @@ Array [
         >
           <span
             class="ant-btn-icon ant-btn-loading-icon"
-            style="width: 0px; opacity: 0; transform: scale(0);"
           >
             <span
               aria-label="loading"
-              class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+              class="anticon anticon-loading anticon-spin"
               role="img"
             >
               <svg

components/input/style/index.ts

@@ -677,8 +677,6 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
           [`${searchPrefixCls}-button`]: {
             // Fix https://github.com/ant-design/ant-design/issues/47150
             marginInlineEnd: -1,
-            paddingTop: 0,
-            paddingBottom: 0,
             borderStartStartRadius: 0,
             borderEndStartRadius: 0,
             boxShadow: 'none',

components/splitter/style/index.ts

@@ -174,7 +174,7 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
         // ======================= Collapse =======================
         [`${splitBarCls}-collapse-bar`]: {
           ...centerStyle,
-          zIndex: 1,
+          zIndex: token.zIndexPopupBase,
           background: controlItemBgHover,
           fontSize: token.fontSizeSM,
           borderRadius: token.borderRadiusXS,

docs/spec/introduce.en-US.md

@@ -56,7 +56,7 @@ We provide comprehensive design guidelines, best practices, resources, and tools
 
 ## Words From Community
 
-- Hacknews: [Show HN: Antd – A set of high-quality React components](https://news.ycombinator.com/item?id=13053137)
+- Hacker News: [Show HN: Antd – A set of high-quality React components](https://news.ycombinator.com/item?id=13053137)
 - Alligator: [Crafting Beautiful UIs in React Using Ant Design](https://alligator.io/react/beautiful-uis-ant-design/)
 - [Introduction to Ant Design](https://blog.logrocket.com/introduction-to-ant-design/)
 - [Build a React App with Ant Design Principles](https://developer.okta.com/blog/2020/09/16/ant-design-react-app)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.22.5",
+  "version": "5.22.6",
   "description": "An enterprise-class UI design language and React components implementation",
   "license": "MIT",
   "funding": {
@@ -132,13 +132,13 @@
     "rc-input-number": "~9.3.0",
     "rc-mentions": "~2.18.0",
     "rc-menu": "~9.16.0",
-    "rc-motion": "^2.9.4",
+    "rc-motion": "^2.9.5",
     "rc-notification": "~5.6.2",
     "rc-pagination": "~5.0.0",
     "rc-picker": "~4.8.3",
     "rc-progress": "~4.0.0",
     "rc-rate": "~2.13.0",
-    "rc-resize-observer": "^1.4.1",
+    "rc-resize-observer": "^1.4.3",
     "rc-segmented": "~2.7.0",
     "rc-select": "~14.16.4",
     "rc-slider": "~11.1.7",
@@ -257,7 +257,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-environment-node": "^29.7.0",
     "jest-image-snapshot": "^6.4.0",
-    "jest-puppeteer": "^10.1.4",
+    "jest-puppeteer": "^11.0.0",
     "jquery": "^3.7.1",
     "jsdom": "^25.0.1",
     "jsonml-to-react-element": "^1.1.11",