chore: auto merge branches (#52103)

chore: sync master to feature
2025-01-23 01:45:05 +08:00 · 2024-12-23 14:38:21 +00:00 · 2024-12-23 14:38:21 +00:00 · a4f0ea3047
commit a4f0ea3047
parent bc17268ff9 e034a33f22
25 changed files with 424 additions and 197 deletions
--- a/.dumi/theme/builtins/DemoWrapper/index.tsx
+++ b/.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
-            items={demos}
-            demoRender={(item) => (
-              <Suspense>
-                <DumiDemo key={item.demo.id} {...item} />
-              </Suspense>
-            )}
-          />
-        </Suspense>
+        <DumiDemoGrid
+          items={demos}
+          demoRender={(item) => (
+            <Suspense fallback={<DemoFallback />}>
+              <DumiDemo key={item.demo.id} {...item} />
+            </Suspense>
+          )}
+        />
      </ConfigProvider>
    </div>
  );
--- a/.dumi/theme/builtins/Previewer/DemoFallback.tsx
+++ b/.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;
--- a/.dumi/theme/builtins/Previewer/index.tsx
+++ b/.dumi/theme/builtins/Previewer/index.tsx
@ -1,39 +1,17 @@
 import React, { Suspense } from 'react';
-import { Alert, Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
+import { Alert } from 'antd';
 import Previewer from './Previewer';
+import DemoFallback from './DemoFallback';
 import type { IPreviewerProps } from 'dumi';

 const { ErrorBoundary } = Alert;

-const useStyle = createStyles(({ token, css }) => ({
-  skeletonWrapper: css`
-    width: 100% !important;
-    height: 250px;
-    margin-bottom: ${token.margin}px;
-    border-radius: ${token.borderRadiusLG}px;
-  `,
-}));
-
-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>
-  );
-};
+const PreviewerSuspense: React.FC<IPreviewerProps> = (props) => (
+  <ErrorBoundary>
+    <Suspense fallback={<DemoFallback />}>
+      <Previewer {...props} />
+    </Suspense>
+  </ErrorBoundary>
+);

 export default PreviewerSuspense;
--- a/CHANGELOG.en-US.md
+++ b/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`
--- a/CHANGELOG.zh-CN.md
+++ b/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`
--- a/components/button/DefaultLoadingIcon.tsx
+++ b/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>) => (
-        <InnerLoadingIcon
-          prefixCls={prefixCls}
-          className={className}
-          style={{ ...style, ...motionStyle }}
-          ref={ref}
-          iconClassName={motionCls}
-        />
-      )}
+      {({ className: motionCls, style: motionStyle }, ref: React.Ref<HTMLSpanElement>) => {
+        const mergedStyle = { ...style, ...motionStyle };
+
+        return (
+          <InnerLoadingIcon
+            prefixCls={prefixCls}
+            className={classNames(className, motionCls)}
+            style={mergedStyle}
+            ref={ref}
+          />
+        );
+      }}
    </CSSMotion>
  );
 };
--- a/components/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/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
--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/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
--- a/components/button/tests/snapshots/index.test.tsx.snap
+++ b/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
--- a/components/button/button.tsx
+++ b/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 =
--- a/components/button/demo/chinese-space.md
+++ b/components/button/demo/chinese-space.md
--- a/components/button/demo/chinese-space.tsx
+++ b/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>
--- a/components/button/demo/color-variant.tsx
+++ b/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 gap="middle" wrap>
+      <Flex vertical gap="small">
+        <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>
--- a/components/button/demo/debug-color-variant.tsx
+++ b/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' } }}>
--- a/components/button/demo/debug-icon.tsx
+++ b/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',
            }}
--- a/components/button/demo/linear-gradient.tsx
+++ b/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;
--- a/components/button/demo/loading.tsx
+++ b/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]}
-          onClick={() => enterLoading(2)}
+          loading={loadings[3]}
+          onClick={() => enterLoading(3)}
        />
        <Button
          type="primary"
--- a/components/button/index.zh-CN.md
+++ b/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

--- a/components/button/style/index.ts
+++ b/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)': {
-        ...genFocusStyle(token),
-      },
+      '&:not(:disabled)': 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
--- a/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
+++ b/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
--- a/components/input/tests/snapshots/demo-extend.test.ts.snap
+++ b/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
--- a/components/input/style/index.ts
+++ b/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',
--- a/components/splitter/style/index.ts
+++ b/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,
--- a/docs/spec/introduce.en-US.md
+++ b/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)
--- a/package.json
+++ b/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",