chore: auto merge branches (#41067)

chore: merge feature into master

components/_util/placements.ts

@@ -1,17 +1,6 @@
-import { placements } from 'rc-tooltip/lib/placements';
-import type { BuildInPlacements } from 'rc-trigger';
-
-const autoAdjustOverflowEnabled = {
-  adjustX: 1,
-  adjustY: 1,
-};
-
-const autoAdjustOverflowDisabled = {
-  adjustX: 0,
-  adjustY: 0,
-};
-
-const targetOffset = [0, 0];
+/* eslint-disable default-case */
+import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
+import { getArrowOffset } from '../style/placementArrow';
 
 export interface AdjustOverflow {
   adjustX?: 0 | 1;
@@ -20,135 +9,218 @@ export interface AdjustOverflow {
 
 export interface PlacementsConfig {
   arrowWidth: number;
-  horizontalArrowShift?: number;
-  verticalArrowShift?: number;
   arrowPointAtCenter?: boolean;
   autoAdjustOverflow?: boolean | AdjustOverflow;
   offset: number;
+  borderRadius: number;
 }
 
-export function getOverflowOptions(autoAdjustOverflow?: boolean | AdjustOverflow) {
-  if (typeof autoAdjustOverflow === 'boolean') {
-    return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled;
+export function getOverflowOptions(
+  placement: string,
+  arrowOffset: ReturnType<typeof getArrowOffset>,
+  arrowWidth: number,
+  autoAdjustOverflow?: boolean | AdjustOverflow,
+) {
+  if (autoAdjustOverflow === false) {
+    return {
+      adjustX: false,
+      adjustY: false,
+    };
   }
-  return {
-    ...autoAdjustOverflowDisabled,
-    ...autoAdjustOverflow,
+
+  const overflow =
+    autoAdjustOverflow && typeof autoAdjustOverflow === 'object' ? autoAdjustOverflow : {};
+
+  const baseOverflow: AlignType['overflow'] = {};
+
+  switch (placement) {
+    case 'top':
+    case 'bottom':
+      baseOverflow.shiftX = arrowOffset.dropdownArrowOffset * 2 + arrowWidth;
+      break;
+
+    case 'left':
+    case 'right':
+      baseOverflow.shiftY = arrowOffset.dropdownArrowOffsetVertical * 2 + arrowWidth;
+      break;
+  }
+
+  const mergedOverflow = {
+    ...baseOverflow,
+    ...overflow,
   };
+
+  // Support auto shift
+  if (!mergedOverflow.shiftX) {
+    mergedOverflow.adjustX = true;
+  }
+  if (!mergedOverflow.shiftY) {
+    mergedOverflow.adjustY = true;
+  }
+
+  return mergedOverflow;
 }
 
 type PlacementType = keyof BuildInPlacements;
 
-function getArrowOffset(type: PlacementType, arrowWidth: number, offset: number): number[] {
-  switch (type) {
-    case 'top':
-    case 'topLeft':
-    case 'topRight':
-      return [0, -(arrowWidth / 2 + offset)];
-    case 'bottom':
-    case 'bottomLeft':
-    case 'bottomRight':
-      return [0, arrowWidth / 2 + offset];
-    case 'left':
-    case 'leftTop':
-    case 'leftBottom':
-      return [-(arrowWidth / 2 + offset), 0];
-    case 'right':
-    case 'rightTop':
-    case 'rightBottom':
-      return [arrowWidth / 2 + offset, 0];
-    /* istanbul ignore next */
-    default:
-      return [0, 0];
-  }
-}
+const PlacementAlignMap: BuildInPlacements = {
+  left: {
+    points: ['cr', 'cl'],
+  },
+  right: {
+    points: ['cl', 'cr'],
+  },
+  top: {
+    points: ['bc', 'tc'],
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+  },
+  leftTop: {
+    points: ['tr', 'tl'],
+  },
+  topRight: {
+    points: ['br', 'tr'],
+  },
+  rightTop: {
+    points: ['tl', 'tr'],
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+  },
+  rightBottom: {
+    points: ['bl', 'br'],
+  },
+  bottomLeft: {
+    points: ['tl', 'bl'],
+  },
+  leftBottom: {
+    points: ['br', 'bl'],
+  },
+};
 
-function vertexCalc(point1: number[], point2: number[]): number[] {
-  return [point1[0] + point2[0], point1[1] + point2[1]];
-}
+const ArrowCenterPlacementAlignMap: BuildInPlacements = {
+  topLeft: {
+    points: ['bl', 'tc'],
+  },
+  leftTop: {
+    points: ['tr', 'cl'],
+  },
+  topRight: {
+    points: ['br', 'tc'],
+  },
+  rightTop: {
+    points: ['tl', 'cr'],
+  },
+  bottomRight: {
+    points: ['tr', 'bc'],
+  },
+  rightBottom: {
+    points: ['bl', 'cr'],
+  },
+  bottomLeft: {
+    points: ['tl', 'bc'],
+  },
+  leftBottom: {
+    points: ['br', 'cl'],
+  },
+};
+
+const DisableAutoArrowList: Set<keyof BuildInPlacements> = new Set([
+  'topLeft',
+  'topRight',
+  'bottomLeft',
+  'bottomRight',
+  'leftTop',
+  'leftBottom',
+  'rightTop',
+  'rightBottom',
+]);
 
 export default function getPlacements(config: PlacementsConfig) {
-  const {
-    arrowWidth,
-    horizontalArrowShift = 16,
-    verticalArrowShift = 8,
-    autoAdjustOverflow,
-    arrowPointAtCenter,
-    offset,
-  } = config;
+  const { arrowWidth, autoAdjustOverflow, arrowPointAtCenter, offset, borderRadius } = config;
   const halfArrowWidth = arrowWidth / 2;
 
-  const placementMap: BuildInPlacements = {
-    left: {
-      points: ['cr', 'cl'],
-      offset: [-offset, 0],
-    },
-    right: {
-      points: ['cl', 'cr'],
-      offset: [offset, 0],
-    },
-    top: {
-      points: ['bc', 'tc'],
-      offset: [0, -offset],
-    },
-    bottom: {
-      points: ['tc', 'bc'],
-      offset: [0, offset],
-    },
-    topLeft: {
-      points: ['bl', 'tc'],
-      offset: [-(horizontalArrowShift + halfArrowWidth), -offset],
-    },
-    leftTop: {
-      points: ['tr', 'cl'],
-      offset: [-offset, -(verticalArrowShift + halfArrowWidth)],
-    },
-    topRight: {
-      points: ['br', 'tc'],
-      offset: [horizontalArrowShift + halfArrowWidth, -offset],
-    },
-    rightTop: {
-      points: ['tl', 'cr'],
-      offset: [offset, -(verticalArrowShift + halfArrowWidth)],
-    },
-    bottomRight: {
-      points: ['tr', 'bc'],
-      offset: [horizontalArrowShift + halfArrowWidth, offset],
-    },
-    rightBottom: {
-      points: ['bl', 'cr'],
-      offset: [offset, verticalArrowShift + halfArrowWidth],
-    },
-    bottomLeft: {
-      points: ['tl', 'bc'],
-      offset: [-(horizontalArrowShift + halfArrowWidth), offset],
-    },
-    leftBottom: {
-      points: ['br', 'cl'],
-      offset: [-offset, verticalArrowShift + halfArrowWidth],
-    },
-  };
-  Object.keys(placementMap).forEach((key) => {
-    placementMap[key] = arrowPointAtCenter
-      ? {
-          ...placementMap[key],
-          offset: vertexCalc(
-            placementMap[key].offset!,
-            getArrowOffset(key as PlacementType, arrowWidth, offset),
-          ),
-          overflow: getOverflowOptions(autoAdjustOverflow),
-          targetOffset,
-        }
-      : {
-          ...placements[key],
-          offset: vertexCalc(
-            placements[key].offset!,
-            getArrowOffset(key as PlacementType, arrowWidth, offset),
-          ),
-          overflow: getOverflowOptions(autoAdjustOverflow),
-        };
+  const placementMap: BuildInPlacements = {};
 
-    placementMap[key].ignoreShake = true;
+  Object.keys(PlacementAlignMap).forEach((key: PlacementType) => {
+    const template =
+      (arrowPointAtCenter && ArrowCenterPlacementAlignMap[key]) || PlacementAlignMap[key];
+
+    const placementInfo = {
+      ...template,
+      offset: [0, 0],
+    };
+    placementMap[key] = placementInfo;
+
+    // Disable autoArrow since design is fixed position
+    if (DisableAutoArrowList.has(key)) {
+      placementInfo.autoArrow = false;
+    }
+
+    // Static offset
+    switch (key) {
+      case 'top':
+      case 'topLeft':
+      case 'topRight':
+        placementInfo.offset[1] = -halfArrowWidth - offset;
+        break;
+
+      case 'bottom':
+      case 'bottomLeft':
+      case 'bottomRight':
+        placementInfo.offset[1] = halfArrowWidth + offset;
+        break;
+
+      case 'left':
+      case 'leftTop':
+      case 'leftBottom':
+        placementInfo.offset[0] = -halfArrowWidth - offset;
+        break;
+
+      case 'right':
+      case 'rightTop':
+      case 'rightBottom':
+        placementInfo.offset[0] = halfArrowWidth + offset;
+        break;
+    }
+
+    // Dynamic offset
+    const arrowOffset = getArrowOffset({
+      contentRadius: borderRadius,
+      limitVerticalRadius: true,
+    });
+
+    if (arrowPointAtCenter) {
+      switch (key) {
+        case 'topLeft':
+        case 'bottomLeft':
+          placementInfo.offset[0] = -arrowOffset.dropdownArrowOffset - halfArrowWidth;
+          break;
+
+        case 'topRight':
+        case 'bottomRight':
+          placementInfo.offset[0] = arrowOffset.dropdownArrowOffset + halfArrowWidth;
+          break;
+
+        case 'leftTop':
+        case 'rightTop':
+          placementInfo.offset[1] = -arrowOffset.dropdownArrowOffset - halfArrowWidth;
+          break;
+
+        case 'leftBottom':
+        case 'rightBottom':
+          placementInfo.offset[1] = arrowOffset.dropdownArrowOffset + halfArrowWidth;
+          break;
+      }
+    }
+
+    // Overflow
+    placementInfo.overflow = getOverflowOptions(key, arrowOffset, arrowWidth, autoAdjustOverflow);
   });
+
   return placementMap;
 }

components/app/__tests__/index.test.tsx

@@ -1,16 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import App from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render } from '../../../tests/utils';
+import { render, waitFakeTimer } from '../../../tests/utils';
+import type { AppConfig } from '../context';
+import { AppConfigContext } from '../context';
 
 describe('App', () => {
   mountTest(App);
   rtlTest(App);
 
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
   it('single', () => {
     // Sub page
-    const MyPage = () => {
+    const MyPage: React.FC = () => {
       const { message } = App.useApp();
       React.useEffect(() => {
         message.success('Good!');
@@ -20,7 +31,7 @@ describe('App', () => {
     };
 
     // Entry component
-    const MyApp = () => (
+    const MyApp: React.FC = () => (
       <App>
         <MyPage />
       </App>
@@ -30,4 +41,103 @@ describe('App', () => {
     expect(getByText('Hello World')).toBeTruthy();
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('should work as message and notification config configured in app', async () => {
+    let consumedConfig: AppConfig | undefined;
+    const Consumer = () => {
+      const { message, notification } = App.useApp();
+      consumedConfig = React.useContext(AppConfigContext);
+
+      useEffect(() => {
+        message.success('Message 1');
+        message.success('Message 2');
+        notification.success({ message: 'Notification 1' });
+        notification.success({ message: 'Notification 2' });
+        notification.success({ message: 'Notification 3' });
+      }, [message, notification]);
+
+      return <div />;
+    };
+    const Wrapper = () => (
+      <App message={{ maxCount: 1 }} notification={{ maxCount: 2 }}>
+        <Consumer />
+      </App>
+    );
+
+    render(<Wrapper />);
+
+    await waitFakeTimer();
+
+    expect(consumedConfig?.message).toStrictEqual({ maxCount: 1 });
+    expect(consumedConfig?.notification).toStrictEqual({ maxCount: 2 });
+
+    expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(1);
+    expect(document.querySelectorAll('.ant-notification-notice')).toHaveLength(2);
+  });
+
+  it('should be a merged config configured in nested app', async () => {
+    let offsetConsumedConfig: AppConfig | undefined;
+    let maxCountConsumedConfig: AppConfig | undefined;
+    const OffsetConsumer = () => {
+      offsetConsumedConfig = React.useContext(AppConfigContext);
+      return <div />;
+    };
+    const MaxCountConsumer = () => {
+      maxCountConsumedConfig = React.useContext(AppConfigContext);
+      return <div />;
+    };
+    const Wrapper = () => (
+      <App message={{ maxCount: 1 }} notification={{ maxCount: 2 }}>
+        <App message={{ top: 32 }} notification={{ top: 96 }}>
+          <OffsetConsumer />
+        </App>
+        <MaxCountConsumer />
+      </App>
+    );
+
+    render(<Wrapper />);
+
+    expect(offsetConsumedConfig?.message).toStrictEqual({ maxCount: 1, top: 32 });
+    expect(offsetConsumedConfig?.notification).toStrictEqual({ maxCount: 2, top: 96 });
+    expect(maxCountConsumedConfig?.message).toStrictEqual({ maxCount: 1 });
+    expect(maxCountConsumedConfig?.notification).toStrictEqual({ maxCount: 2 });
+  });
+
+  it('should respect config from props in priority', async () => {
+    let config: AppConfig | undefined;
+    const Consumer = () => {
+      config = React.useContext(AppConfigContext);
+      return <div />;
+    };
+    const Wrapper = () => (
+      <App message={{ maxCount: 10, top: 20 }} notification={{ maxCount: 30, bottom: 40 }}>
+        <App message={{ maxCount: 11 }} notification={{ bottom: 41 }}>
+          <Consumer />
+        </App>
+      </App>
+    );
+
+    render(<Wrapper />);
+
+    expect(config?.message).toStrictEqual({ maxCount: 11, top: 20 });
+    expect(config?.notification).toStrictEqual({ maxCount: 30, bottom: 41 });
+  });
+
+  it('support className', () => {
+    const { container } = render(
+      <App className="test-class">
+        <div>test</div>
+      </App>,
+    );
+    expect(container.querySelector<HTMLDivElement>('.ant-app')).toHaveClass('test-class');
+  });
+
+  it('support style', () => {
+    const { container } = render(
+      <App style={{ color: 'blue' }}>
+        <div>test</div>
+      </App>,
+    );
+    expect(container.querySelector<HTMLDivElement>('.ant-app')).toHaveStyle('color: blue;');
+  });
 });

components/app/context.ts

@@ -1,8 +1,15 @@
 import React from 'react';
-import type { MessageInstance } from '../message/interface';
-import type { NotificationInstance } from '../notification/interface';
+import type { MessageInstance, ConfigOptions as MessageConfig } from '../message/interface';
+import type { NotificationInstance, NotificationConfig } from '../notification/interface';
 import type { ModalStaticFunctions } from '../modal/confirm';
 
+export type AppConfig = {
+  message?: MessageConfig;
+  notification?: NotificationConfig;
+};
+
+export const AppConfigContext = React.createContext<AppConfig>({});
+
 type ModalType = Omit<ModalStaticFunctions, 'warn'>;
 export interface useAppProps {
   message: MessageInstance;

components/app/index.en-US.md

@@ -26,8 +26,8 @@ Static function in React 18 concurrent mode will not well support. In v5, we rec
 App provides upstream and downstream method calls through `Context`, because useApp needs to be used as a subcomponent, we recommend encapsulating App at the top level in the application.
 
 ```tsx
-import React from 'react';
 import { App } from 'antd';
+import React from 'react';
 
 const MyPage: React.FC = () => {
   const { message, notification, modal } = App.useApp();
@@ -77,11 +77,10 @@ The App component can only use the token in the `ConfigProvider`, if you need to
 
 ```tsx
 // Entry component
-import React, { useEffect } from 'react';
 import { App } from 'antd';
 import type { MessageInstance } from 'antd/es/message/interface';
-import type { NotificationInstance } from 'antd/es/notification/interface';
 import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import type { NotificationInstance } from 'antd/es/notification/interface';
 
 let message: MessageInstance;
 let notification: NotificationInstance;
@@ -100,9 +99,9 @@ export { message, notification, modal };
 
 ```tsx
 // sub page
-import React from 'react';
 import { Button, Space } from 'antd';
-import { message, modal, notification } from './store';
+import React from 'react';
+import { message } from './store';
 
 export default () => {
   const showMessage = () => {
@@ -118,3 +117,12 @@ export default () => {
   );
 };
 ```
+
+## API
+
+### App
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| message | Global config for Message | [MessageConfig](/components/message/#messageconfig) | - | 5.3.0 |
+| notification | Global config for Notification | [NotificationConfig](/components/notification/#notificationconfig) | - | 5.3.0 |

components/app/index.tsx

@@ -6,28 +6,49 @@ import { ConfigContext } from '../config-provider';
 import useMessage from '../message/useMessage';
 import useModal from '../modal/useModal';
 import useNotification from '../notification/useNotification';
-import type { useAppProps } from './context';
-import AppContext from './context';
+import type { AppConfig, useAppProps } from './context';
+import AppContext, { AppConfigContext } from './context';
 import useStyle from './style';
 
-export type AppProps = {
+export interface AppProps extends AppConfig {
+  style?: React.CSSProperties;
   className?: string;
   rootClassName?: string;
   prefixCls?: string;
   children?: ReactNode;
-};
+}
 
 const useApp = () => React.useContext<useAppProps>(AppContext);
 
-const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
-  const { prefixCls: customizePrefixCls, children, className, rootClassName } = props;
+const App: React.FC<AppProps> & { useApp: typeof useApp } = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    children,
+    className,
+    rootClassName,
+    message,
+    notification,
+    style,
+  } = props;
   const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('app', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const customClassName = classNames(hashId, prefixCls, className, rootClassName);
 
-  const [messageApi, messageContextHolder] = useMessage();
-  const [notificationApi, notificationContextHolder] = useNotification();
+  const appConfig = useContext<AppConfig>(AppConfigContext);
+
+  const mergedAppConfig = React.useMemo<AppConfig>(
+    () => ({
+      message: { ...appConfig.message, ...message },
+      notification: { ...appConfig.notification, ...notification },
+    }),
+    [message, notification, appConfig.message, appConfig.message],
+  );
+
+  const [messageApi, messageContextHolder] = useMessage(mergedAppConfig.message);
+  const [notificationApi, notificationContextHolder] = useNotification(
+    mergedAppConfig.notification,
+  );
   const [ModalApi, ModalContextHolder] = useModal();
 
   const memoizedContextValue = React.useMemo<useAppProps>(
@@ -41,12 +62,14 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
 
   return wrapSSR(
     <AppContext.Provider value={memoizedContextValue}>
-      <div className={customClassName}>
-        {ModalContextHolder}
-        {messageContextHolder}
-        {notificationContextHolder}
-        {children}
-      </div>
+      <AppConfigContext.Provider value={mergedAppConfig}>
+        <div className={customClassName} style={style}>
+          {ModalContextHolder}
+          {messageContextHolder}
+          {notificationContextHolder}
+          {children}
+        </div>
+      </AppConfigContext.Provider>
     </AppContext.Provider>,
   );
 };

components/app/index.zh-CN.md

@@ -119,3 +119,12 @@ export default () => {
   );
 };
 ```
+
+## API
+
+### App
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 5.3.0 |
+| notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 5.3.0 |

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

@@ -457,27 +457,22 @@ Array [
         </svg>
       </span>
     </span>
-    <div>
+    <div
+      class="ant-tooltip ant-tooltip-placement-top"
+      style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+    >
       <div
-        class="ant-tooltip"
-        style="opacity:0"
+        class="ant-tooltip-arrow"
+        style="position:absolute;bottom:0;left:0"
+      />
+      <div
+        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-content"
+          class="ant-tooltip-inner"
+          role="tooltip"
         >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            Ant User
-          </div>
+          Ant User
         </div>
       </div>
     </div>
@@ -542,101 +537,91 @@ Array [
         +2
       </span>
     </span>
-    <div>
+    <div
+      class="ant-popover ant-avatar-group-popover ant-popover-placement-top"
+      style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+    >
       <div
-        class="ant-popover ant-avatar-group-popover"
-        style="opacity:0"
+        class="ant-popover-arrow"
+        style="position:absolute;bottom:0;left:0"
+      />
+      <div
+        class="ant-popover-content"
       >
         <div
-          class="ant-popover-content"
+          class="ant-popover-inner"
+          role="tooltip"
         >
           <div
-            class="ant-popover-arrow"
+            class="ant-popover-inner-content"
           >
             <span
-              class="ant-popover-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-popover-inner"
-            role="tooltip"
-          >
-            <div
-              class="ant-popover-inner-content"
+              class="ant-avatar ant-avatar-circle ant-avatar-icon"
+              style="background-color:#87d068"
             >
               <span
-                class="ant-avatar ant-avatar-circle ant-avatar-icon"
-                style="background-color:#87d068"
+                aria-label="user"
+                class="anticon anticon-user"
+                role="img"
               >
-                <span
-                  aria-label="user"
-                  class="anticon anticon-user"
-                  role="img"
+                <svg
+                  aria-hidden="true"
+                  data-icon="user"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="user"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                    />
-                  </svg>
-                </span>
+                  <path
+                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                  />
+                </svg>
               </span>
-              <div>
+            </span>
+            <div
+              class="ant-tooltip ant-tooltip-placement-top"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position:absolute;bottom:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-inner"
+                  role="tooltip"
                 >
-                  <div
-                    class="ant-tooltip-content"
-                  >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      Ant User
-                    </div>
-                  </div>
+                  Ant User
                 </div>
               </div>
-              <span
-                class="ant-avatar ant-avatar-circle ant-avatar-icon"
-                style="background-color:#1890ff"
-              >
-                <span
-                  aria-label="ant-design"
-                  class="anticon anticon-ant-design"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="ant-design"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"
-                    />
-                  </svg>
-                </span>
-              </span>
             </div>
+            <span
+              class="ant-avatar ant-avatar-circle ant-avatar-icon"
+              style="background-color:#1890ff"
+            >
+              <span
+                aria-label="ant-design"
+                class="anticon anticon-ant-design"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="ant-design"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"
+                  />
+                </svg>
+              </span>
+            </span>
           </div>
         </div>
       </div>
@@ -678,101 +663,91 @@ Array [
         +2
       </span>
     </span>
-    <div>
+    <div
+      class="ant-popover ant-avatar-group-popover ant-popover-placement-top"
+      style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+    >
       <div
-        class="ant-popover ant-avatar-group-popover"
-        style="opacity:0"
+        class="ant-popover-arrow"
+        style="position:absolute;bottom:0;left:0"
+      />
+      <div
+        class="ant-popover-content"
       >
         <div
-          class="ant-popover-content"
+          class="ant-popover-inner"
+          role="tooltip"
         >
           <div
-            class="ant-popover-arrow"
+            class="ant-popover-inner-content"
           >
             <span
-              class="ant-popover-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-popover-inner"
-            role="tooltip"
-          >
-            <div
-              class="ant-popover-inner-content"
+              class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
+              style="background-color:#87d068"
             >
               <span
-                class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
-                style="background-color:#87d068"
+                aria-label="user"
+                class="anticon anticon-user"
+                role="img"
               >
-                <span
-                  aria-label="user"
-                  class="anticon anticon-user"
-                  role="img"
+                <svg
+                  aria-hidden="true"
+                  data-icon="user"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="user"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                    />
-                  </svg>
-                </span>
+                  <path
+                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                  />
+                </svg>
               </span>
-              <div>
+            </span>
+            <div
+              class="ant-tooltip ant-tooltip-placement-top"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position:absolute;bottom:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-inner"
+                  role="tooltip"
                 >
-                  <div
-                    class="ant-tooltip-content"
-                  >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      Ant User
-                    </div>
-                  </div>
+                  Ant User
                 </div>
               </div>
-              <span
-                class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
-                style="background-color:#1890ff"
-              >
-                <span
-                  aria-label="ant-design"
-                  class="anticon anticon-ant-design"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="ant-design"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"
-                    />
-                  </svg>
-                </span>
-              </span>
             </div>
+            <span
+              class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
+              style="background-color:#1890ff"
+            >
+              <span
+                aria-label="ant-design"
+                class="anticon anticon-ant-design"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="ant-design"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"
+                  />
+                </svg>
+              </span>
+            </span>
           </div>
         </div>
       </div>
@@ -814,101 +789,91 @@ Array [
         +2
       </span>
     </span>
-    <div>
+    <div
+      class="ant-popover ant-avatar-group-popover ant-popover-placement-top"
+      style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+    >
       <div
-        class="ant-popover ant-avatar-group-popover"
-        style="opacity:0"
+        class="ant-popover-arrow"
+        style="position:absolute;bottom:0;left:0"
+      />
+      <div
+        class="ant-popover-content"
       >
         <div
-          class="ant-popover-content"
+          class="ant-popover-inner"
+          role="tooltip"
         >
           <div
-            class="ant-popover-arrow"
+            class="ant-popover-inner-content"
           >
             <span
-              class="ant-popover-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-popover-inner"
-            role="tooltip"
-          >
-            <div
-              class="ant-popover-inner-content"
+              class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
+              style="background-color:#87d068"
             >
               <span
-                class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
-                style="background-color:#87d068"
+                aria-label="user"
+                class="anticon anticon-user"
+                role="img"
               >
-                <span
-                  aria-label="user"
-                  class="anticon anticon-user"
-                  role="img"
+                <svg
+                  aria-hidden="true"
+                  data-icon="user"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="user"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                    />
-                  </svg>
-                </span>
+                  <path
+                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                  />
+                </svg>
               </span>
-              <div>
+            </span>
+            <div
+              class="ant-tooltip ant-tooltip-placement-top"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position:absolute;bottom:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-inner"
+                  role="tooltip"
                 >
-                  <div
-                    class="ant-tooltip-content"
-                  >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      Ant User
-                    </div>
-                  </div>
+                  Ant User
                 </div>
               </div>
-              <span
-                class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
-                style="background-color:#1890ff"
-              >
-                <span
-                  aria-label="ant-design"
-                  class="anticon anticon-ant-design"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="ant-design"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"
-                    />
-                  </svg>
-                </span>
-              </span>
             </div>
+            <span
+              class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
+              style="background-color:#1890ff"
+            >
+              <span
+                aria-label="ant-design"
+                class="anticon anticon-ant-design"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="ant-design"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"
+                  />
+                </svg>
+              </span>
+            </span>
           </div>
         </div>
       </div>

components/badge/__tests__/index.test.tsx

@@ -85,7 +85,7 @@ describe('Badge', () => {
       fireEvent.mouseEnter(container.querySelector('.ant-badge')!);
       jest.runAllTimers();
     });
-    expect((container.firstChild! as HTMLElement).classList).toContain('ant-tooltip-open');
+    expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
   });
 
   it('should render when count is changed', () => {

components/breadcrumb/Breadcrumb.tsx

@@ -128,6 +128,7 @@ const Breadcrumb: CompoundedComponent = ({
       );
     });
   } else if (children) {
+    const childrenLength = toArray(children).length;
     crumbs = toArray(children).map((element: any, index) => {
       if (!element) {
         return element;
@@ -140,9 +141,9 @@ const Breadcrumb: CompoundedComponent = ({
         'Breadcrumb',
         "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
       );
-
+      const isLastItem = index === childrenLength - 1;
       return cloneElement(element, {
-        separator,
+        separator: isLastItem ? '' : separator,
         key: index,
       });
     });

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,9 +1,10 @@
-import DownOutlined from '@ant-design/icons/DownOutlined';
 import * as React from 'react';
+import DownOutlined from '@ant-design/icons/DownOutlined';
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { DropdownProps } from '../dropdown/dropdown';
 import Dropdown from '../dropdown/dropdown';
+import BreadcrumbSeparator from './BreadcrumbSeparator';
 
 export interface BreadcrumbItemProps {
   prefixCls?: string;
@@ -22,7 +23,7 @@ export interface BreadcrumbItemProps {
 type CompoundedComponent = React.FC<BreadcrumbItemProps> & {
   __ANT_BREADCRUMB_ITEM: boolean;
 };
-const BreadcrumbItem: CompoundedComponent = (props) => {
+const BreadcrumbItem: CompoundedComponent = (props: BreadcrumbItemProps) => {
   const {
     prefixCls: customizePrefixCls,
     separator = '/',
@@ -85,10 +86,10 @@ const BreadcrumbItem: CompoundedComponent = (props) => {
   link = renderBreadcrumbNode(link);
   if (children !== undefined && children !== null) {
     return (
-      <li>
-        {link}
-        {separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
-      </li>
+      <>
+        <li>{link}</li>
+        {separator && <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>}
+      </>
     );
   }
   return null;

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -12,7 +12,7 @@ const BreadcrumbSeparator: CompoundedComponent = ({ children }) => {
 
   return (
     <li className={`${prefixCls}-separator`} aria-hidden="true">
-      {children || '/'}
+      {children === '' ? children : children || '/'}
     </li>
   );
 };

components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -63,11 +63,6 @@ exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
       >
         Home
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -84,11 +79,12 @@ exports[`Breadcrumb should not display Breadcrumb Item when its children is fals
       >
         xxx
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -96,11 +92,6 @@ exports[`Breadcrumb should not display Breadcrumb Item when its children is fals
       >
         yyy
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -121,11 +112,12 @@ exports[`Breadcrumb should render a menu 1`] = `
           home
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -160,11 +152,12 @@ exports[`Breadcrumb should render a menu 1`] = `
           </svg>
         </span>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -176,11 +169,12 @@ exports[`Breadcrumb should render a menu 1`] = `
           second
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -188,11 +182,12 @@ exports[`Breadcrumb should render a menu 1`] = `
       >
         <span />
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
   </ol>
 </nav>
@@ -209,11 +204,12 @@ exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
       >
         Location
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <span>
       <li>
@@ -222,11 +218,12 @@ exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
         >
           Mock Node
         </span>
-        <span
-          class="ant-breadcrumb-separator"
-        >
-          /
-        </span>
+      </li>
+      <li
+        aria-hidden="true"
+        class="ant-breadcrumb-separator"
+      >
+        /
       </li>
     </span>
     <li>
@@ -235,11 +232,6 @@ exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
       >
         Application Center
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -256,11 +248,12 @@ exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
       >
         yyy
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -268,11 +261,12 @@ exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
       >
         yyy
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -280,11 +274,12 @@ exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
       >
         yyy
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     0
   </ol>
@@ -304,11 +299,12 @@ exports[`Breadcrumb should support custom attribute 1`] = `
       >
         xxx
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -316,11 +312,6 @@ exports[`Breadcrumb should support custom attribute 1`] = `
       >
         yyy
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -337,11 +328,12 @@ exports[`Breadcrumb should support string \`0\` and number \`0\` 1`] = `
       >
         0
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -349,11 +341,6 @@ exports[`Breadcrumb should support string \`0\` and number \`0\` 1`] = `
       >
         0
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>

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

@@ -11,11 +11,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly
       >
         Home
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -27,11 +28,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly
           Application Center
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -43,11 +45,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly
           Application List
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -55,11 +58,6 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx extend context correctly
       >
         An Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -76,11 +74,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
       >
         Ant Design
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -92,11 +91,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
           Component
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -159,26 +159,21 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
                 </a>
               </span>
             </li>
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
             <li
@@ -198,26 +193,21 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
                 </a>
               </span>
             </li>
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
             <li
@@ -237,26 +227,21 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
                 </a>
               </span>
             </li>
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
           </ul>
@@ -264,80 +249,66 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
             aria-hidden="true"
             style="display:none"
           >
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
           </div>
         </div>
       </div>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -345,11 +316,6 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx extend context correct
       >
         Button
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -366,11 +332,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx extend context corre
       >
         Home
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <a
@@ -379,11 +346,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx extend context corre
       >
         Application Center
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <a
@@ -392,11 +360,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx extend context corre
       >
         Application List
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <span
@@ -404,11 +373,6 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx extend context corre
       >
         An Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
     </li>
   </ol>
 </nav>
@@ -501,11 +465,12 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx extend context correc
           </svg>
         </span>
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <a
@@ -535,11 +500,12 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx extend context correc
           Application List
         </span>
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -547,11 +513,6 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx extend context correc
       >
         Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>

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

@@ -11,11 +11,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
       >
         Home
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -27,11 +28,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
           Application Center
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -43,11 +45,12 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
           Application List
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -55,11 +58,6 @@ exports[`renders ./components/breadcrumb/demo/basic.tsx correctly 1`] = `
       >
         An Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -76,11 +74,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
       >
         Ant Design
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -92,11 +91,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
           Component
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -131,11 +131,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
           </svg>
         </span>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -143,11 +144,6 @@ exports[`renders ./components/breadcrumb/demo/overlay.tsx correctly 1`] = `
       >
         Button
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>
@@ -164,11 +160,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx correctly 1`] = `
       >
         Home
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <a
@@ -177,11 +174,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx correctly 1`] = `
       >
         Application Center
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <a
@@ -190,11 +188,12 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx correctly 1`] = `
       >
         Application List
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
     </li>
     <li>
       <span
@@ -202,11 +201,6 @@ exports[`renders ./components/breadcrumb/demo/separator.tsx correctly 1`] = `
       >
         An Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        &gt;
-      </span>
     </li>
   </ol>
 </nav>
@@ -299,11 +293,12 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
           </svg>
         </span>
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <a
@@ -333,11 +328,12 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
           Application List
         </span>
       </a>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -345,11 +341,6 @@ exports[`renders ./components/breadcrumb/demo/withIcon.tsx correctly 1`] = `
       >
         Application
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
     </li>
   </ol>
 </nav>

components/breadcrumb/__tests__/__snapshots__/router.test.tsx.snap

@@ -15,11 +15,12 @@ exports[`react router react router 3 1`] = `
           Home
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -31,11 +32,12 @@ exports[`react router react router 3 1`] = `
           Application List
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -47,11 +49,12 @@ exports[`react router react router 3 1`] = `
           Application1
         </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
     <li>
       <span
@@ -61,11 +64,12 @@ exports[`react router react router 3 1`] = `
           Detail
         </span>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      /
     </li>
   </ol>
 </nav>

components/breadcrumb/style/index.ts

@@ -54,10 +54,6 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
 
       [`li:last-child`]: {
         color: token.breadcrumbLastItemColor,
-
-        [`& > ${componentCls}-separator`]: {
-          display: 'none',
-        },
       },
 
       [`${componentCls}-separator`]: {

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

@@ -619,27 +619,22 @@ Array [
               </svg>
             </span>
           </button>
-          <div>
+          <div
+            class="ant-tooltip ant-tooltip-placement-top"
+            style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+          >
             <div
-              class="ant-tooltip"
-              style="opacity:0"
+              class="ant-tooltip-arrow"
+              style="position:absolute;bottom:0;left:0"
+            />
+            <div
+              class="ant-tooltip-content"
             >
               <div
-                class="ant-tooltip-content"
+                class="ant-tooltip-inner"
+                role="tooltip"
               >
-                <div
-                  class="ant-tooltip-arrow"
-                >
-                  <span
-                    class="ant-tooltip-arrow-content"
-                  />
-                </div>
-                <div
-                  class="ant-tooltip-inner"
-                  role="tooltip"
-                >
-                  search
-                </div>
+                search
               </div>
             </div>
           </div>
@@ -717,27 +712,22 @@ Array [
               </svg>
             </span>
           </button>
-          <div>
+          <div
+            class="ant-tooltip ant-tooltip-placement-top"
+            style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+          >
             <div
-              class="ant-tooltip"
-              style="opacity:0"
+              class="ant-tooltip-arrow"
+              style="position:absolute;bottom:0;left:0"
+            />
+            <div
+              class="ant-tooltip-content"
             >
               <div
-                class="ant-tooltip-content"
+                class="ant-tooltip-inner"
+                role="tooltip"
               >
-                <div
-                  class="ant-tooltip-arrow"
-                >
-                  <span
-                    class="ant-tooltip-arrow-content"
-                  />
-                </div>
-                <div
-                  class="ant-tooltip-inner"
-                  role="tooltip"
-                >
-                  search
-                </div>
+                search
               </div>
             </div>
           </div>
@@ -811,27 +801,22 @@ Array [
               </svg>
             </span>
           </button>
-          <div>
+          <div
+            class="ant-tooltip ant-tooltip-placement-top"
+            style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+          >
             <div
-              class="ant-tooltip"
-              style="opacity:0"
+              class="ant-tooltip-arrow"
+              style="position:absolute;bottom:0;left:0"
+            />
+            <div
+              class="ant-tooltip-content"
             >
               <div
-                class="ant-tooltip-content"
+                class="ant-tooltip-inner"
+                role="tooltip"
               >
-                <div
-                  class="ant-tooltip-arrow"
-                >
-                  <span
-                    class="ant-tooltip-arrow-content"
-                  />
-                </div>
-                <div
-                  class="ant-tooltip-inner"
-                  role="tooltip"
-                >
-                  search
-                </div>
+                search
               </div>
             </div>
           </div>
@@ -896,27 +881,22 @@ Array [
               </svg>
             </span>
           </button>
-          <div>
+          <div
+            class="ant-tooltip ant-tooltip-placement-top"
+            style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+          >
             <div
-              class="ant-tooltip"
-              style="opacity:0"
+              class="ant-tooltip-arrow"
+              style="position:absolute;bottom:0;left:0"
+            />
+            <div
+              class="ant-tooltip-content"
             >
               <div
-                class="ant-tooltip-content"
+                class="ant-tooltip-inner"
+                role="tooltip"
               >
-                <div
-                  class="ant-tooltip-arrow"
-                >
-                  <span
-                    class="ant-tooltip-arrow-content"
-                  />
-                </div>
-                <div
-                  class="ant-tooltip-inner"
-                  role="tooltip"
-                >
-                  search
-                </div>
+                search
               </div>
             </div>
           </div>
@@ -1443,27 +1423,22 @@ exports[`renders ./components/button/demo/icon.tsx extend context correctly 1`]
             </svg>
           </span>
         </button>
-        <div>
+        <div
+          class="ant-tooltip ant-tooltip-placement-top"
+          style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+        >
           <div
-            class="ant-tooltip"
-            style="opacity:0"
+            class="ant-tooltip-arrow"
+            style="position:absolute;bottom:0;left:0"
+          />
+          <div
+            class="ant-tooltip-content"
           >
             <div
-              class="ant-tooltip-content"
+              class="ant-tooltip-inner"
+              role="tooltip"
             >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              >
-                search
-              </div>
+              search
             </div>
           </div>
         </div>
@@ -1541,27 +1516,22 @@ exports[`renders ./components/button/demo/icon.tsx extend context correctly 1`]
             </svg>
           </span>
         </button>
-        <div>
+        <div
+          class="ant-tooltip ant-tooltip-placement-top"
+          style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+        >
           <div
-            class="ant-tooltip"
-            style="opacity:0"
+            class="ant-tooltip-arrow"
+            style="position:absolute;bottom:0;left:0"
+          />
+          <div
+            class="ant-tooltip-content"
           >
             <div
-              class="ant-tooltip-content"
+              class="ant-tooltip-inner"
+              role="tooltip"
             >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              >
-                search
-              </div>
+              search
             </div>
           </div>
         </div>
@@ -1635,27 +1605,22 @@ exports[`renders ./components/button/demo/icon.tsx extend context correctly 1`]
             </svg>
           </span>
         </button>
-        <div>
+        <div
+          class="ant-tooltip ant-tooltip-placement-top"
+          style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+        >
           <div
-            class="ant-tooltip"
-            style="opacity:0"
+            class="ant-tooltip-arrow"
+            style="position:absolute;bottom:0;left:0"
+          />
+          <div
+            class="ant-tooltip-content"
           >
             <div
-              class="ant-tooltip-content"
+              class="ant-tooltip-inner"
+              role="tooltip"
             >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              >
-                search
-              </div>
+              search
             </div>
           </div>
         </div>
@@ -1720,27 +1685,22 @@ exports[`renders ./components/button/demo/icon.tsx extend context correctly 1`]
             </svg>
           </span>
         </button>
-        <div>
+        <div
+          class="ant-tooltip ant-tooltip-placement-top"
+          style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+        >
           <div
-            class="ant-tooltip"
-            style="opacity:0"
+            class="ant-tooltip-arrow"
+            style="position:absolute;bottom:0;left:0"
+          />
+          <div
+            class="ant-tooltip-content"
           >
             <div
-              class="ant-tooltip-content"
+              class="ant-tooltip-inner"
+              role="tooltip"
             >
-              <div
-                class="ant-tooltip-arrow"
-              >
-                <span
-                  class="ant-tooltip-arrow-content"
-                />
-              </div>
-              <div
-                class="ant-tooltip-inner"
-                role="tooltip"
-              >
-                search
-              </div>
+              search
             </div>
           </div>
         </div>
@@ -1864,27 +1824,22 @@ Array [
           </span>
         </button>
       </span>
-      <div>
+      <div
+        class="ant-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              Tooltip
-            </div>
+            Tooltip
           </div>
         </div>
       </div>
@@ -1912,27 +1867,22 @@ Array [
           </svg>
         </span>
       </button>
-      <div>
+      <div
+        class="ant-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              Tooltip
-            </div>
+            Tooltip
           </div>
         </div>
       </div>
@@ -1990,27 +1940,22 @@ Array [
           </span>
         </button>
       </span>
-      <div>
+      <div
+        class="ant-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              Tooltip
-            </div>
+            Tooltip
           </div>
         </div>
       </div>
@@ -2038,27 +1983,22 @@ Array [
           </svg>
         </span>
       </button>
-      <div>
+      <div
+        class="ant-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              Tooltip
-            </div>
+            Tooltip
           </div>
         </div>
       </div>
@@ -2116,27 +2056,22 @@ Array [
           </span>
         </button>
       </span>
-      <div>
+      <div
+        class="ant-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              Tooltip
-            </div>
+            Tooltip
           </div>
         </div>
       </div>
@@ -2164,27 +2099,22 @@ Array [
           </svg>
         </span>
       </button>
-      <div>
+      <div
+        class="ant-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              Tooltip
-            </div>
+            Tooltip
           </div>
         </div>
       </div>
@@ -2488,26 +2418,21 @@ exports[`renders ./components/button/demo/multiple.tsx extend context correctly
                 1st item
               </span>
             </li>
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
             <li
@@ -2521,26 +2446,21 @@ exports[`renders ./components/button/demo/multiple.tsx extend context correctly
                 2nd item
               </span>
             </li>
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
             <li
@@ -2554,26 +2474,21 @@ exports[`renders ./components/button/demo/multiple.tsx extend context correctly
                 3rd item
               </span>
             </li>
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
           </ul>
@@ -2581,70 +2496,55 @@ exports[`renders ./components/button/demo/multiple.tsx extend context correctly
             aria-hidden="true"
             style="display:none"
           >
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
-            <div>
+            <div
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
               <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip-arrow"
+                style="position:absolute;top:0;left:0"
+              />
+              <div
+                class="ant-tooltip-content"
               >
                 <div
-                  class="ant-tooltip-content"
-                >
-                  <div
-                    class="ant-tooltip-arrow"
-                  >
-                    <span
-                      class="ant-tooltip-arrow-content"
-                    />
-                  </div>
-                  <div
-                    class="ant-tooltip-inner"
-                    role="tooltip"
-                  />
-                </div>
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
               </div>
             </div>
           </div>

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

@@ -2,8 +2,8 @@
 
 exports[`Cascader can be selected 1`] = `
 <div
-  class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-  style="opacity: 0; min-width: auto;"
+  class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
+  style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
 >
   <div>
     <div
@@ -134,8 +134,8 @@ exports[`Cascader can be selected 1`] = `
 
 exports[`Cascader can be selected 2`] = `
 <div
-  class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-  style="opacity: 0; min-width: auto;"
+  class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
+  style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
 >
   <div>
     <div
@@ -284,8 +284,8 @@ exports[`Cascader can be selected 2`] = `
 
 exports[`Cascader can be selected 3`] = `
 <div
-  class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-leave ant-slide-up-leave-start ant-slide-up"
-  style="min-width: auto; pointer-events: none;"
+  class="ant-select-dropdown ant-slide-up-leave ant-slide-up-leave-start ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
+  style="left: 0px; top: 0px; box-sizing: border-box; min-width: auto; pointer-events: none;"
 >
   <div>
     <div
@@ -434,8 +434,8 @@ exports[`Cascader can be selected 3`] = `
 
 exports[`Cascader can be selected in RTL direction 1`] = `
 <div
-  class="ant-select-dropdown ant-cascader-dropdown ant-cascader-dropdown-rtl ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-  style="opacity: 0; min-width: auto;"
+  class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight"
+  style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
 >
   <div>
     <div
@@ -566,8 +566,8 @@ exports[`Cascader can be selected in RTL direction 1`] = `
 
 exports[`Cascader can be selected in RTL direction 2`] = `
 <div
-  class="ant-select-dropdown ant-cascader-dropdown ant-cascader-dropdown-rtl ant-slide-up-leave ant-slide-up-leave-start ant-slide-up"
-  style="min-width: auto; pointer-events: none;"
+  class="ant-select-dropdown ant-slide-up-leave ant-slide-up-leave-start ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight"
+  style="left: 0px; top: 0px; box-sizing: border-box; min-width: auto; pointer-events: none;"
 >
   <div>
     <div
@@ -716,8 +716,8 @@ exports[`Cascader can be selected in RTL direction 2`] = `
 
 exports[`Cascader can be selected in RTL direction 3`] = `
 <div
-  class="ant-select-dropdown ant-cascader-dropdown ant-cascader-dropdown-rtl ant-slide-up-leave ant-slide-up-leave-start ant-slide-up"
-  style="min-width: auto; pointer-events: none;"
+  class="ant-select-dropdown ant-slide-up-leave ant-slide-up-leave-start ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight"
+  style="left: 0px; top: 0px; box-sizing: border-box; min-width: auto; pointer-events: none;"
 >
   <div>
     <div
@@ -910,107 +910,105 @@ exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
       class="ant-select-selection-placeholder"
     />
   </div>
-  <div>
-    <div
-      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-      style="opacity: 0; min-width: auto;"
-    >
-      <div>
-        <div
-          class="ant-cascader-menus"
+  <div
+    class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
+    style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
+  >
+    <div>
+      <div
+        class="ant-cascader-menus"
+      >
+        <ul
+          class="ant-cascader-menu"
+          role="menu"
         >
-          <ul
-            class="ant-cascader-menu"
-            role="menu"
+          <li
+            aria-checked="false"
+            class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+            data-path-key="zhejiang"
+            role="menuitemcheckbox"
+            title="Zhejiang"
           >
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-              data-path-key="zhejiang"
-              role="menuitemcheckbox"
-              title="Zhejiang"
+            <span
+              class="ant-cascader-checkbox"
             >
               <span
-                class="ant-cascader-checkbox"
-              >
-                <span
-                  class="ant-cascader-checkbox-inner"
-                />
-              </span>
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                Zhejiang
-              </div>
-              <div
-                class="ant-cascader-menu-item-expand-icon"
-              >
-                <span
-                  aria-label="right"
-                  class="anticon anticon-right"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-              data-path-key="jiangsu"
-              role="menuitemcheckbox"
-              title="Jiangsu"
+                class="ant-cascader-checkbox-inner"
+              />
+            </span>
+            <div
+              class="ant-cascader-menu-item-content"
+            >
+              Zhejiang
+            </div>
+            <div
+              class="ant-cascader-menu-item-expand-icon"
             >
               <span
-                class="ant-cascader-checkbox"
+                aria-label="right"
+                class="anticon anticon-right"
+                role="img"
               >
-                <span
-                  class="ant-cascader-checkbox-inner"
-                />
-              </span>
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                Jiangsu
-              </div>
-              <div
-                class="ant-cascader-menu-item-expand-icon"
-              >
-                <span
-                  aria-label="right"
-                  class="anticon anticon-right"
-                  role="img"
+                <svg
+                  aria-hidden="true"
+                  data-icon="right"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </li>
-          </ul>
-        </div>
+                  <path
+                    d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-checked="false"
+            class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+            data-path-key="jiangsu"
+            role="menuitemcheckbox"
+            title="Jiangsu"
+          >
+            <span
+              class="ant-cascader-checkbox"
+            >
+              <span
+                class="ant-cascader-checkbox-inner"
+              />
+            </span>
+            <div
+              class="ant-cascader-menu-item-content"
+            >
+              Jiangsu
+            </div>
+            <div
+              class="ant-cascader-menu-item-expand-icon"
+            >
+              <span
+                aria-label="right"
+                class="anticon anticon-right"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="right"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </li>
+        </ul>
       </div>
     </div>
   </div>
@@ -1063,107 +1061,105 @@ exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
       class="ant-select-selection-placeholder"
     />
   </div>
-  <div>
-    <div
-      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-      style="opacity: 0; min-width: auto;"
-    >
-      <div>
-        <div
-          class="ant-cascader-menus"
+  <div
+    class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
+    style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
+  >
+    <div>
+      <div
+        class="ant-cascader-menus"
+      >
+        <ul
+          class="ant-cascader-menu"
+          role="menu"
         >
-          <ul
-            class="ant-cascader-menu"
-            role="menu"
+          <li
+            aria-checked="false"
+            class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+            data-path-key="zhejiang"
+            role="menuitemcheckbox"
+            title="Zhejiang"
           >
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-              data-path-key="zhejiang"
-              role="menuitemcheckbox"
-              title="Zhejiang"
+            <span
+              class="ant-cascader-checkbox"
             >
               <span
-                class="ant-cascader-checkbox"
-              >
-                <span
-                  class="ant-cascader-checkbox-inner"
-                />
-              </span>
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                Zhejiang
-              </div>
-              <div
-                class="ant-cascader-menu-item-expand-icon"
-              >
-                <span
-                  aria-label="right"
-                  class="anticon anticon-right"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-              data-path-key="jiangsu"
-              role="menuitemcheckbox"
-              title="Jiangsu"
+                class="ant-cascader-checkbox-inner"
+              />
+            </span>
+            <div
+              class="ant-cascader-menu-item-content"
+            >
+              Zhejiang
+            </div>
+            <div
+              class="ant-cascader-menu-item-expand-icon"
             >
               <span
-                class="ant-cascader-checkbox"
+                aria-label="right"
+                class="anticon anticon-right"
+                role="img"
               >
-                <span
-                  class="ant-cascader-checkbox-inner"
-                />
-              </span>
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                Jiangsu
-              </div>
-              <div
-                class="ant-cascader-menu-item-expand-icon"
-              >
-                <span
-                  aria-label="right"
-                  class="anticon anticon-right"
-                  role="img"
+                <svg
+                  aria-hidden="true"
+                  data-icon="right"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="right"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </li>
-          </ul>
-        </div>
+                  <path
+                    d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-checked="false"
+            class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+            data-path-key="jiangsu"
+            role="menuitemcheckbox"
+            title="Jiangsu"
+          >
+            <span
+              class="ant-cascader-checkbox"
+            >
+              <span
+                class="ant-cascader-checkbox-inner"
+              />
+            </span>
+            <div
+              class="ant-cascader-menu-item-content"
+            >
+              Jiangsu
+            </div>
+            <div
+              class="ant-cascader-menu-item-expand-icon"
+            >
+              <span
+                aria-label="right"
+                class="anticon anticon-right"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="right"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </li>
+        </ul>
       </div>
     </div>
   </div>
@@ -1172,8 +1168,8 @@ exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
 
 exports[`Cascader popup correctly with defaultValue 1`] = `
 <div
-  class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-  style="opacity: 0; min-width: auto;"
+  class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
+  style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
 >
   <div>
     <div
@@ -1354,152 +1350,150 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
       Zhejiang / Hangzhou
     </span>
   </div>
-  <div>
-    <div
-      class="ant-select-dropdown ant-cascader-dropdown ant-cascader-dropdown-rtl ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-      style="opacity: 0; min-width: auto;"
-    >
-      <div>
-        <div
-          class="ant-cascader-menus ant-cascader-rtl"
+  <div
+    class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight"
+    style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
+  >
+    <div>
+      <div
+        class="ant-cascader-menus ant-cascader-rtl"
+      >
+        <ul
+          class="ant-cascader-menu"
+          role="menu"
         >
-          <ul
-            class="ant-cascader-menu"
-            role="menu"
+          <li
+            aria-checked="false"
+            class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+            data-path-key="zhejiang"
+            role="menuitemcheckbox"
+            title="Zhejiang"
           >
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
-              data-path-key="zhejiang"
-              role="menuitemcheckbox"
-              title="Zhejiang"
+            <div
+              class="ant-cascader-menu-item-content"
             >
-              <div
-                class="ant-cascader-menu-item-content"
-              >
-                Zhejiang
-              </div>
-              <div
-                class="ant-cascader-menu-item-expand-icon"
-              >
-                <span
-                  aria-label="left"
-                  class="anticon anticon-left"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="left"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </li>
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-              data-path-key="jiangsu"
-              role="menuitemcheckbox"
-              title="Jiangsu"
+              Zhejiang
+            </div>
+            <div
+              class="ant-cascader-menu-item-expand-icon"
             >
-              <div
-                class="ant-cascader-menu-item-content"
+              <span
+                aria-label="left"
+                class="anticon anticon-left"
+                role="img"
               >
-                Jiangsu
-              </div>
-              <div
-                class="ant-cascader-menu-item-expand-icon"
-              >
-                <span
-                  aria-label="left"
-                  class="anticon anticon-left"
-                  role="img"
+                <svg
+                  aria-hidden="true"
+                  data-icon="left"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="left"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </li>
-          </ul>
-          <ul
-            class="ant-cascader-menu"
-            role="menu"
+                  <path
+                    d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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"
+                  />
+                </svg>
+              </span>
+            </div>
+          </li>
+          <li
+            aria-checked="false"
+            class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+            data-path-key="jiangsu"
+            role="menuitemcheckbox"
+            title="Jiangsu"
           >
-            <li
-              aria-checked="true"
-              class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
-              data-path-key="zhejiang__RC_CASCADER_SPLIT__hangzhou"
-              role="menuitemcheckbox"
-              title="Hangzhou"
+            <div
+              class="ant-cascader-menu-item-content"
             >
-              <div
-                class="ant-cascader-menu-item-content"
+              Jiangsu
+            </div>
+            <div
+              class="ant-cascader-menu-item-expand-icon"
+            >
+              <span
+                aria-label="left"
+                class="anticon anticon-left"
+                role="img"
               >
-                Hangzhou
-              </div>
-              <div
-                class="ant-cascader-menu-item-expand-icon"
-              >
-                <span
-                  aria-label="left"
-                  class="anticon anticon-left"
-                  role="img"
+                <svg
+                  aria-hidden="true"
+                  data-icon="left"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="left"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </li>
-          </ul>
-          <ul
-            class="ant-cascader-menu"
-            role="menu"
+                  <path
+                    d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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"
+                  />
+                </svg>
+              </span>
+            </div>
+          </li>
+        </ul>
+        <ul
+          class="ant-cascader-menu"
+          role="menu"
+        >
+          <li
+            aria-checked="true"
+            class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+            data-path-key="zhejiang__RC_CASCADER_SPLIT__hangzhou"
+            role="menuitemcheckbox"
+            title="Hangzhou"
           >
-            <li
-              aria-checked="false"
-              class="ant-cascader-menu-item"
-              data-path-key="zhejiang__RC_CASCADER_SPLIT__hangzhou__RC_CASCADER_SPLIT__xihu"
-              role="menuitemcheckbox"
-              title="West Lake"
+            <div
+              class="ant-cascader-menu-item-content"
             >
-              <div
-                class="ant-cascader-menu-item-content"
+              Hangzhou
+            </div>
+            <div
+              class="ant-cascader-menu-item-expand-icon"
+            >
+              <span
+                aria-label="left"
+                class="anticon anticon-left"
+                role="img"
               >
-                West Lake
-              </div>
-            </li>
-          </ul>
-        </div>
+                <svg
+                  aria-hidden="true"
+                  data-icon="left"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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"
+                  />
+                </svg>
+              </span>
+            </div>
+          </li>
+        </ul>
+        <ul
+          class="ant-cascader-menu"
+          role="menu"
+        >
+          <li
+            aria-checked="false"
+            class="ant-cascader-menu-item"
+            data-path-key="zhejiang__RC_CASCADER_SPLIT__hangzhou__RC_CASCADER_SPLIT__xihu"
+            role="menuitemcheckbox"
+            title="West Lake"
+          >
+            <div
+              class="ant-cascader-menu-item-content"
+            >
+              West Lake
+            </div>
+          </li>
+        </ul>
       </div>
     </div>
   </div>
@@ -1623,8 +1617,8 @@ exports[`Cascader should highlight keyword and filter when search in Cascader wi
 
 exports[`Cascader should render not found content 1`] = `
 <div
-  class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-  style="opacity: 0; min-width: 0;"
+  class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
+  style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;"
 >
   <div>
     <div
@@ -1698,8 +1692,8 @@ exports[`Cascader should render not found content 1`] = `
 
 exports[`Cascader should show not found content when options.length is 0 1`] = `
 <div
-  class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-  style="opacity: 0; min-width: 0;"
+  class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
+  style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;"
 >
   <div>
     <div

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

@@ -180,30 +180,25 @@ exports[`renders ./components/checkbox/demo/debug-disable-popover.tsx extend con
       />
     </span>
   </label>
-  <div>
+  <div
+    class="ant-popover ant-popover-placement-top"
+    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+  >
     <div
-      class="ant-popover"
-      style="opacity:0"
+      class="ant-popover-arrow"
+      style="position:absolute;bottom:0;left:0"
+    />
+    <div
+      class="ant-popover-content"
     >
       <div
-        class="ant-popover-content"
+        class="ant-popover-inner"
+        role="tooltip"
       >
         <div
-          class="ant-popover-arrow"
+          class="ant-popover-inner-content"
         >
-          <span
-            class="ant-popover-arrow-content"
-          />
-        </div>
-        <div
-          class="ant-popover-inner"
-          role="tooltip"
-        >
-          <div
-            class="ant-popover-inner-content"
-          >
-            xxxx
-          </div>
+          xxxx
         </div>
       </div>
     </div>

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

@@ -981,81 +981,79 @@ Array [
         start
       </span>
     </div>
-    <div>
-      <div
-        class="ant-select-dropdown"
-        style="opacity:0"
-      >
-        <div>
+    <div
+      class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
+      style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+    >
+      <div>
+        <div
+          id="undefined_list"
+          role="listbox"
+          style="height:0;width:0;overflow:hidden"
+        >
           <div
-            id="undefined_list"
-            role="listbox"
-            style="height:0;width:0;overflow:hidden"
+            aria-label="start"
+            aria-selected="true"
+            id="undefined_list_0"
+            role="option"
           >
-            <div
-              aria-label="start"
-              aria-selected="true"
-              id="undefined_list_0"
-              role="option"
-            >
-              start
-            </div>
-            <div
-              aria-label="end"
-              aria-selected="false"
-              id="undefined_list_1"
-              role="option"
-            >
-              end
-            </div>
+            start
           </div>
           <div
-            class="rc-virtual-list"
-            style="position:relative"
+            aria-label="end"
+            aria-selected="false"
+            id="undefined_list_1"
+            role="option"
           >
-            <div
-              class="rc-virtual-list-holder"
-              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-            >
-              <div>
+            end
+          </div>
+        </div>
+        <div
+          class="rc-virtual-list"
+          style="position:relative"
+        >
+          <div
+            class="rc-virtual-list-holder"
+            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+          >
+            <div>
+              <div
+                class="rc-virtual-list-holder-inner"
+                style="display:flex;flex-direction:column"
+              >
                 <div
-                  class="rc-virtual-list-holder-inner"
-                  style="display:flex;flex-direction:column"
+                  aria-selected="true"
+                  class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                  title="start"
                 >
                   <div
-                    aria-selected="true"
-                    class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                    title="start"
+                    class="ant-select-item-option-content"
                   >
-                    <div
-                      class="ant-select-item-option-content"
-                    >
-                      start
-                    </div>
-                    <span
-                      aria-hidden="true"
-                      class="ant-select-item-option-state"
-                      style="user-select:none;-webkit-user-select:none"
-                      unselectable="on"
-                    />
+                    start
                   </div>
+                  <span
+                    aria-hidden="true"
+                    class="ant-select-item-option-state"
+                    style="user-select:none;-webkit-user-select:none"
+                    unselectable="on"
+                  />
+                </div>
+                <div
+                  aria-selected="false"
+                  class="ant-select-item ant-select-item-option"
+                  title="end"
+                >
                   <div
-                    aria-selected="false"
-                    class="ant-select-item ant-select-item-option"
-                    title="end"
+                    class="ant-select-item-option-content"
                   >
-                    <div
-                      class="ant-select-item-option-content"
-                    >
-                      end
-                    </div>
-                    <span
-                      aria-hidden="true"
-                      class="ant-select-item-option-state"
-                      style="user-select:none;-webkit-user-select:none"
-                      unselectable="on"
-                    />
+                    end
                   </div>
+                  <span
+                    aria-hidden="true"
+                    class="ant-select-item-option-state"
+                    style="user-select:none;-webkit-user-select:none"
+                    unselectable="on"
+                  />
                 </div>
               </div>
             </div>

components/config-provider/__tests__/memo.test.tsx

@@ -46,11 +46,12 @@ describe('ConfigProvider', () => {
 
     const { container } = pureRender(<App />);
 
+    const startCalledTimes = spy.mock.calls.length;
     fireEvent.click(container.querySelector('.render')!);
-    expect(spy.mock.calls.length).toEqual(1);
+    expect(spy.mock.calls.length).toEqual(startCalledTimes);
 
     fireEvent.click(container.querySelector('.setState')!);
-    expect(spy.mock.calls.length).toEqual(2);
+    expect(spy.mock.calls.length).toEqual(startCalledTimes + 1);
   });
 
   it('should not generate new context config in nested ConfigProvider when render', () => {
@@ -81,10 +82,11 @@ describe('ConfigProvider', () => {
 
     const { container } = pureRender(<App />);
 
+    const startCalledTimes = spy.mock.calls.length;
     fireEvent.click(container.querySelector('.render')!);
-    expect(spy.mock.calls.length).toEqual(1);
+    expect(spy.mock.calls.length).toEqual(startCalledTimes);
 
     fireEvent.click(container.querySelector('.setState')!);
-    expect(spy.mock.calls.length).toEqual(2);
+    expect(spy.mock.calls.length).toEqual(startCalledTimes + 1);
   });
 });

components/config-provider/__tests__/useConfig.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import ConfigProvider from '..';
+import Form from '../../form';
+import { render } from '../../../tests/utils';
+import { resetWarned } from '../../_util/warning';
+
+describe('ConfigProvider.useConfig', () => {
+  it('useConfig - componentSize', () => {
+    let size;
+
+    const App: React.FC = () => {
+      const { componentSize } = ConfigProvider.useConfig();
+      size = componentSize;
+
+      return null;
+    };
+
+    render(
+      <ConfigProvider componentSize='small'>
+        <App />
+      </ConfigProvider>,
+    );
+
+    expect(size).toBe('small');
+  });
+
+  it('useConfig - componentDisabled', () => {
+    let disabled;
+    const App: React.FC = () => {
+      const { componentDisabled } = ConfigProvider.useConfig();
+      disabled = componentDisabled;
+      return null;
+    };
+
+    render(
+      <Form disabled>
+        <App />
+      </Form>,
+    );
+
+    expect(disabled).toBe(true);
+  });
+
+  it('deprecated SizeContext', () => {
+    resetWarned();
+
+    const App: React.FC = () => {
+      const { SizeContext } = ConfigProvider;
+      const ctx = React.useContext(SizeContext);
+
+      return <div>{ctx}</div>;
+    };
+
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(<App />);
+
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: ConfigProvider] ConfigProvider.SizeContext is deprecated. Please use `ConfigProvider.useConfig().componentSize` instead.',
+    );
+    errSpy.mockRestore();
+  });
+});

components/config-provider/demo/useConfig.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+获取父级 `Provider` 的值。如 `DisabledContextProvider`、`SizeContextProvider`。
+
+## en-US
+
+Get the value of the parent `Provider`. Such as `DisabledContextProvider`, `SizeContextProvider`.

components/config-provider/demo/useConfig.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Checkbox, ConfigProvider, Divider, Form, Input, Radio, Space } from 'antd';
+import type { SizeType } from 'antd/es/config-provider/SizeContext';
+
+const ConfigDisplay = () => {
+  const { componentDisabled, componentSize } = ConfigProvider.useConfig();
+
+  return (
+    <>
+      <Form.Item label="componentSize value">
+        <Input value={componentSize} />
+      </Form.Item>
+      <Form.Item label="componentDisabled value">
+        <Input value={String(componentDisabled)} disabled={componentDisabled} />
+      </Form.Item>
+    </>
+  );
+};
+
+const App: React.FC = () => {
+  const [componentSize, setComponentSize] = useState<SizeType>('small');
+  const [disabled, setDisabled] = useState<boolean>(true);
+
+  return (
+    <div>
+      <Space>
+        <Radio.Group
+          value={componentSize}
+          onChange={(e) => {
+            setComponentSize(e.target.value);
+          }}
+        >
+          <Radio.Button value="small">Small</Radio.Button>
+          <Radio.Button value="middle">Middle</Radio.Button>
+          <Radio.Button value="large">Large</Radio.Button>
+        </Radio.Group>
+        <Checkbox checked={disabled} onChange={(e) => setDisabled(e.target.checked)}>
+          Form disabled
+        </Checkbox>
+      </Space>
+      <Divider />
+      <ConfigProvider componentSize={componentSize}>
+        <div className="example">
+          <Form disabled={disabled}>
+            <ConfigDisplay />
+          </Form>
+        </div>
+      </ConfigProvider>
+    </div>
+  );
+};
+
+export default App;

components/config-provider/hooks/useConfig.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import DisabledContext from '../DisabledContext';
+import SizeContext from '../SizeContext';
+
+function useConfig() {
+  const componentDisabled = useContext(DisabledContext);
+  const componentSize = useContext(SizeContext);
+
+  return {
+    componentDisabled,
+    componentSize,
+  };
+}
+
+export default useConfig;

components/config-provider/index.en-US.md

@@ -44,6 +44,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 <code src="./demo/size.tsx">Component size</code>
 <code src="./demo/theme.tsx">Theme</code>
 <code src="./demo/prefixCls.tsx" debug>prefixCls</code>
+<code src="./demo/useConfig.tsx" debug>useConfig</code>
 
 ## API
 
@@ -79,6 +80,22 @@ ConfigProvider.config({
 });
 ```
 
+### ConfigProvider.useConfig() `5.3.0+`
+
+Available since `5.2.0`. Get the value of the parent `Provider`. Such as `DisabledContextProvider`, `SizeContextProvider`.
+
+```jsx
+const {
+  componentDisabled, // 5.3.0+
+  componentSize, // 5.3.0+
+} = ConfigProvider.useConfig();
+```
+
+| 返回值 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| componentDisabled | antd component disabled state | boolean | - | 5.3.0 |
+| componentSize | antd component size state | `small` \| `middle` \| `large` | - | 5.3.0 |
+
 ## FAQ
 
 #### How to contribute a new language?

components/config-provider/index.tsx

@@ -15,11 +15,13 @@ import LocaleContext from '../locale/context';
 import defaultLocale from '../locale/en_US';
 import { DesignTokenContext } from '../theme/internal';
 import defaultSeedToken from '../theme/themes/seed';
+import warning from '../_util/warning';
 import type { ConfigConsumerProps, CSPConfig, DirectionType, Theme, ThemeConfig } from './context';
 import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';
 import { registerTheme } from './cssVariables';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import { DisabledContextProvider } from './DisabledContext';
+import useConfig from './hooks/useConfig';
 import useTheme from './hooks/useTheme';
 import type { SizeType } from './SizeContext';
 import SizeContext, { SizeContextProvider } from './SizeContext';
@@ -314,8 +316,10 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
 const ConfigProvider: React.FC<ConfigProviderProps> & {
   /** @private internal Usage. do not use in your production */
   ConfigContext: typeof ConfigContext;
+  /** @deprecated Please use `ConfigProvider.useConfig().componentSize` instead */
   SizeContext: typeof SizeContext;
   config: typeof setGlobalConfig;
+  useConfig: typeof useConfig;
 } = (props) => {
   const context = React.useContext<ConfigConsumerProps>(ConfigContext);
   const antLocale = React.useContext<LocaleContextProps | undefined>(LocaleContext);
@@ -325,6 +329,18 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
 ConfigProvider.ConfigContext = ConfigContext;
 ConfigProvider.SizeContext = SizeContext;
 ConfigProvider.config = setGlobalConfig;
+ConfigProvider.useConfig = useConfig;
+
+Object.defineProperty(ConfigProvider, 'SizeContext', {
+  get: () => {
+    warning(
+      false,
+      'ConfigProvider',
+      'ConfigProvider.SizeContext is deprecated. Please use `ConfigProvider.useConfig().componentSize` instead.',
+    );
+    return SizeContext;
+  },
+});
 
 if (process.env.NODE_ENV !== 'production') {
   ConfigProvider.displayName = 'ConfigProvider';

components/config-provider/index.zh-CN.md

@@ -45,6 +45,7 @@ export default Demo;
 <code src="./demo/size.tsx">组件尺寸</code>
 <code src="./demo/theme.tsx">主题</code>
 <code src="./demo/prefixCls.tsx" debug>前缀</code>
+<code src="./demo/useConfig.tsx" debug>useConfig</code>
 
 ## API
 
@@ -80,6 +81,23 @@ ConfigProvider.config({
 });
 ```
 
+### ConfigProvider.useConfig() `5.3.0+`
+
+`5.2.0` 版本后可用。获取父级 `Provider` 的值。如 `DisabledContextProvider`、`SizeContextProvider`。
+
+```jsx
+const {
+  componentDisabled, // 5.3.0+
+  componentSize, // 5.3.0+
+} = ConfigProvider.useConfig();
+```
+
+<!-- prettier-ignore -->
+| 返回值 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| componentDisabled | antd 组件禁用状态 | boolean | - | 5.3.0 |
+| componentSize | antd 组件大小状态 | `small` \| `middle` \| `large` | - | 5.3.0 |
+
 ## FAQ
 
 #### 如何增加一个新的语言包？

components/date-picker/__tests__/__snapshots__/other.test.tsx.snap

@@ -315,7 +315,11 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
                     <td
                       class="ant-picker-cell ant-picker-cell-week"
                     >
-                      1
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        1
+                      </div>
                     </td>
                     <td
                       class="ant-picker-cell"
@@ -378,7 +382,7 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
                       </div>
                     </td>
                     <td
-                      class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view ant-picker-cell-selected"
+                      class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
                       title="2000-01-01"
                     >
                       <div
@@ -394,7 +398,11 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
                     <td
                       class="ant-picker-cell ant-picker-cell-week"
                     >
-                      2
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        2
+                      </div>
                     </td>
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
@@ -473,7 +481,11 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
                     <td
                       class="ant-picker-cell ant-picker-cell-week"
                     >
-                      3
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        3
+                      </div>
                     </td>
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
@@ -552,7 +564,11 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
                     <td
                       class="ant-picker-cell ant-picker-cell-week"
                     >
-                      4
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        4
+                      </div>
                     </td>
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
@@ -631,7 +647,11 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
                     <td
                       class="ant-picker-cell ant-picker-cell-week"
                     >
-                      5
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        5
+                      </div>
                     </td>
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"
@@ -710,7 +730,11 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
                     <td
                       class="ant-picker-cell ant-picker-cell-week"
                     >
-                      6
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        6
+                      </div>
                     </td>
                     <td
                       class="ant-picker-cell ant-picker-cell-in-view"

components/date-picker/demo/basic.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import type { DatePickerProps } from 'antd';
 import { DatePicker, Space } from 'antd';
+import React from 'react';
 
 const onChange: DatePickerProps['onChange'] = (date, dateString) => {
   console.log(date, dateString);

components/date-picker/style/index.ts

@@ -7,20 +7,20 @@ import {
   genHoverStyle,
   initInputToken,
 } from '../../input/style';
+import { resetComponent, roundedArrow, textEllipsis } from '../../style';
+import { genCompactItemStyle } from '../../style/compact-item';
 import {
-  initSlideMotion,
   initMoveMotion,
+  initSlideMotion,
   slideDownIn,
   slideDownOut,
   slideUpIn,
   slideUpOut,
 } from '../../style/motion';
+import type { GlobalToken } from '../../theme/interface';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import type { GlobalToken } from '../../theme/interface';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
-import { resetComponent, roundedArrow, textEllipsis } from '../../style';
-import { genCompactItemStyle } from '../../style/compact-item';
 
 export interface ComponentToken {
   presetsWidth: number;
@@ -289,6 +289,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
 export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
   const {
     componentCls,
+    pickerCellCls,
     pickerCellInnerCls,
     pickerYearMonthCellWidth,
     pickerControlIconSize,
@@ -731,38 +732,48 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
 
         '&-row': {
           td: {
-            transition: `background ${motionDurationMid}`,
+            '&:before': {
+              transition: `background ${motionDurationMid}`,
+            },
 
-            '&:first-child': {
+            '&:first-child:before': {
               borderStartStartRadius: borderRadiusSM,
               borderEndStartRadius: borderRadiusSM,
             },
 
-            '&:last-child': {
+            '&:last-child:before': {
               borderStartEndRadius: borderRadiusSM,
               borderEndEndRadius: borderRadiusSM,
             },
           },
 
-          '&:hover td': {
-            background: controlItemBgHover,
+          [`&:hover td`]: {
+            '&:before': {
+              background: controlItemBgHover,
+            },
           },
 
-          [`&-selected td,
-            &-selected:hover td`]: {
-            background: colorPrimary,
+          [`&-range-start td,
+            &-range-end td,
+            &-selected td`]: {
+            // Rise priority to override hover style
+            [`&${pickerCellCls}`]: {
+              '&:before': {
+                background: colorPrimary,
+              },
 
-            [`&${componentCls}-cell-week`]: {
-              color: new TinyColor(colorTextLightSolid).setAlpha(0.5).toHexString(),
-            },
+              [`&${componentCls}-cell-week`]: {
+                color: new TinyColor(colorTextLightSolid).setAlpha(0.5).toHexString(),
+              },
 
-            [`&${componentCls}-cell-today ${pickerCellInnerCls}::before`]: {
-              borderColor: colorTextLightSolid,
+              [pickerCellInnerCls]: {
+                color: colorTextLightSolid,
+              },
             },
+          },
 
-            [pickerCellInnerCls]: {
-              color: colorTextLightSolid,
-            },
+          [`&-range-hover td:before`]: {
+            background: controlItemBgActive,
           },
         },
       },

components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap

@@ -745,81 +745,79 @@ Array [
                                   Please select an owner
                                 </span>
                               </div>
-                              <div>
-                                <div
-                                  class="ant-select-dropdown"
-                                  style="opacity:0"
-                                >
-                                  <div>
+                              <div
+                                class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
+                                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                              >
+                                <div>
+                                  <div
+                                    id="owner_list"
+                                    role="listbox"
+                                    style="height:0;width:0;overflow:hidden"
+                                  >
                                     <div
-                                      id="owner_list"
-                                      role="listbox"
-                                      style="height:0;width:0;overflow:hidden"
+                                      aria-label="Xiaoxiao Fu"
+                                      aria-selected="false"
+                                      id="owner_list_0"
+                                      role="option"
                                     >
-                                      <div
-                                        aria-label="Xiaoxiao Fu"
-                                        aria-selected="false"
-                                        id="owner_list_0"
-                                        role="option"
-                                      >
-                                        xiao
-                                      </div>
-                                      <div
-                                        aria-label="Maomao Zhou"
-                                        aria-selected="false"
-                                        id="owner_list_1"
-                                        role="option"
-                                      >
-                                        mao
-                                      </div>
+                                      xiao
                                     </div>
                                     <div
-                                      class="rc-virtual-list"
-                                      style="position:relative"
+                                      aria-label="Maomao Zhou"
+                                      aria-selected="false"
+                                      id="owner_list_1"
+                                      role="option"
                                     >
-                                      <div
-                                        class="rc-virtual-list-holder"
-                                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                                      >
-                                        <div>
+                                      mao
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="rc-virtual-list"
+                                    style="position:relative"
+                                  >
+                                    <div
+                                      class="rc-virtual-list-holder"
+                                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                                    >
+                                      <div>
+                                        <div
+                                          class="rc-virtual-list-holder-inner"
+                                          style="display:flex;flex-direction:column"
+                                        >
                                           <div
-                                            class="rc-virtual-list-holder-inner"
-                                            style="display:flex;flex-direction:column"
+                                            aria-selected="false"
+                                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                                            title="Xiaoxiao Fu"
                                           >
                                             <div
-                                              aria-selected="false"
-                                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                                              title="Xiaoxiao Fu"
+                                              class="ant-select-item-option-content"
                                             >
-                                              <div
-                                                class="ant-select-item-option-content"
-                                              >
-                                                Xiaoxiao Fu
-                                              </div>
-                                              <span
-                                                aria-hidden="true"
-                                                class="ant-select-item-option-state"
-                                                style="user-select:none;-webkit-user-select:none"
-                                                unselectable="on"
-                                              />
+                                              Xiaoxiao Fu
                                             </div>
+                                            <span
+                                              aria-hidden="true"
+                                              class="ant-select-item-option-state"
+                                              style="user-select:none;-webkit-user-select:none"
+                                              unselectable="on"
+                                            />
+                                          </div>
+                                          <div
+                                            aria-selected="false"
+                                            class="ant-select-item ant-select-item-option"
+                                            title="Maomao Zhou"
+                                          >
                                             <div
-                                              aria-selected="false"
-                                              class="ant-select-item ant-select-item-option"
-                                              title="Maomao Zhou"
+                                              class="ant-select-item-option-content"
                                             >
-                                              <div
-                                                class="ant-select-item-option-content"
-                                              >
-                                                Maomao Zhou
-                                              </div>
-                                              <span
-                                                aria-hidden="true"
-                                                class="ant-select-item-option-state"
-                                                style="user-select:none;-webkit-user-select:none"
-                                                unselectable="on"
-                                              />
+                                              Maomao Zhou
                                             </div>
+                                            <span
+                                              aria-hidden="true"
+                                              class="ant-select-item-option-state"
+                                              style="user-select:none;-webkit-user-select:none"
+                                              unselectable="on"
+                                            />
                                           </div>
                                         </div>
                                       </div>
@@ -924,81 +922,79 @@ Array [
                                   Please choose the type
                                 </span>
                               </div>
-                              <div>
-                                <div
-                                  class="ant-select-dropdown"
-                                  style="opacity:0"
-                                >
-                                  <div>
+                              <div
+                                class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
+                                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                              >
+                                <div>
+                                  <div
+                                    id="type_list"
+                                    role="listbox"
+                                    style="height:0;width:0;overflow:hidden"
+                                  >
                                     <div
-                                      id="type_list"
-                                      role="listbox"
-                                      style="height:0;width:0;overflow:hidden"
+                                      aria-label="Private"
+                                      aria-selected="false"
+                                      id="type_list_0"
+                                      role="option"
                                     >
-                                      <div
-                                        aria-label="Private"
-                                        aria-selected="false"
-                                        id="type_list_0"
-                                        role="option"
-                                      >
-                                        private
-                                      </div>
-                                      <div
-                                        aria-label="Public"
-                                        aria-selected="false"
-                                        id="type_list_1"
-                                        role="option"
-                                      >
-                                        public
-                                      </div>
+                                      private
                                     </div>
                                     <div
-                                      class="rc-virtual-list"
-                                      style="position:relative"
+                                      aria-label="Public"
+                                      aria-selected="false"
+                                      id="type_list_1"
+                                      role="option"
                                     >
-                                      <div
-                                        class="rc-virtual-list-holder"
-                                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                                      >
-                                        <div>
+                                      public
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="rc-virtual-list"
+                                    style="position:relative"
+                                  >
+                                    <div
+                                      class="rc-virtual-list-holder"
+                                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                                    >
+                                      <div>
+                                        <div
+                                          class="rc-virtual-list-holder-inner"
+                                          style="display:flex;flex-direction:column"
+                                        >
                                           <div
-                                            class="rc-virtual-list-holder-inner"
-                                            style="display:flex;flex-direction:column"
+                                            aria-selected="false"
+                                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                                            title="Private"
                                           >
                                             <div
-                                              aria-selected="false"
-                                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                                              title="Private"
+                                              class="ant-select-item-option-content"
                                             >
-                                              <div
-                                                class="ant-select-item-option-content"
-                                              >
-                                                Private
-                                              </div>
-                                              <span
-                                                aria-hidden="true"
-                                                class="ant-select-item-option-state"
-                                                style="user-select:none;-webkit-user-select:none"
-                                                unselectable="on"
-                                              />
+                                              Private
                                             </div>
+                                            <span
+                                              aria-hidden="true"
+                                              class="ant-select-item-option-state"
+                                              style="user-select:none;-webkit-user-select:none"
+                                              unselectable="on"
+                                            />
+                                          </div>
+                                          <div
+                                            aria-selected="false"
+                                            class="ant-select-item ant-select-item-option"
+                                            title="Public"
+                                          >
                                             <div
-                                              aria-selected="false"
-                                              class="ant-select-item ant-select-item-option"
-                                              title="Public"
+                                              class="ant-select-item-option-content"
                                             >
-                                              <div
-                                                class="ant-select-item-option-content"
-                                              >
-                                                Public
-                                              </div>
-                                              <span
-                                                aria-hidden="true"
-                                                class="ant-select-item-option-state"
-                                                style="user-select:none;-webkit-user-select:none"
-                                                unselectable="on"
-                                              />
+                                              Public
                                             </div>
+                                            <span
+                                              aria-hidden="true"
+                                              class="ant-select-item-option-state"
+                                              style="user-select:none;-webkit-user-select:none"
+                                              unselectable="on"
+                                            />
                                           </div>
                                         </div>
                                       </div>
@@ -1108,81 +1104,79 @@ Array [
                                   Please choose the approver
                                 </span>
                               </div>
-                              <div>
-                                <div
-                                  class="ant-select-dropdown"
-                                  style="opacity:0"
-                                >
-                                  <div>
+                              <div
+                                class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
+                                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                              >
+                                <div>
+                                  <div
+                                    id="approver_list"
+                                    role="listbox"
+                                    style="height:0;width:0;overflow:hidden"
+                                  >
                                     <div
-                                      id="approver_list"
-                                      role="listbox"
-                                      style="height:0;width:0;overflow:hidden"
+                                      aria-label="Jack Ma"
+                                      aria-selected="false"
+                                      id="approver_list_0"
+                                      role="option"
                                     >
-                                      <div
-                                        aria-label="Jack Ma"
-                                        aria-selected="false"
-                                        id="approver_list_0"
-                                        role="option"
-                                      >
-                                        jack
-                                      </div>
-                                      <div
-                                        aria-label="Tom Liu"
-                                        aria-selected="false"
-                                        id="approver_list_1"
-                                        role="option"
-                                      >
-                                        tom
-                                      </div>
+                                      jack
                                     </div>
                                     <div
-                                      class="rc-virtual-list"
-                                      style="position:relative"
+                                      aria-label="Tom Liu"
+                                      aria-selected="false"
+                                      id="approver_list_1"
+                                      role="option"
                                     >
-                                      <div
-                                        class="rc-virtual-list-holder"
-                                        style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                                      >
-                                        <div>
+                                      tom
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="rc-virtual-list"
+                                    style="position:relative"
+                                  >
+                                    <div
+                                      class="rc-virtual-list-holder"
+                                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                                    >
+                                      <div>
+                                        <div
+                                          class="rc-virtual-list-holder-inner"
+                                          style="display:flex;flex-direction:column"
+                                        >
                                           <div
-                                            class="rc-virtual-list-holder-inner"
-                                            style="display:flex;flex-direction:column"
+                                            aria-selected="false"
+                                            class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                                            title="Jack Ma"
                                           >
                                             <div
-                                              aria-selected="false"
-                                              class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                                              title="Jack Ma"
+                                              class="ant-select-item-option-content"
                                             >
-                                              <div
-                                                class="ant-select-item-option-content"
-                                              >
-                                                Jack Ma
-                                              </div>
-                                              <span
-                                                aria-hidden="true"
-                                                class="ant-select-item-option-state"
-                                                style="user-select:none;-webkit-user-select:none"
-                                                unselectable="on"
-                                              />
+                                              Jack Ma
                                             </div>
+                                            <span
+                                              aria-hidden="true"
+                                              class="ant-select-item-option-state"
+                                              style="user-select:none;-webkit-user-select:none"
+                                              unselectable="on"
+                                            />
+                                          </div>
+                                          <div
+                                            aria-selected="false"
+                                            class="ant-select-item ant-select-item-option"
+                                            title="Tom Liu"
+                                          >
                                             <div
-                                              aria-selected="false"
-                                              class="ant-select-item ant-select-item-option"
-                                              title="Tom Liu"
+                                              class="ant-select-item-option-content"
                                             >
-                                              <div
-                                                class="ant-select-item-option-content"
-                                              >
-                                                Tom Liu
-                                              </div>
-                                              <span
-                                                aria-hidden="true"
-                                                class="ant-select-item-option-state"
-                                                style="user-select:none;-webkit-user-select:none"
-                                                unselectable="on"
-                                              />
+                                              Tom Liu
                                             </div>
+                                            <span
+                                              aria-hidden="true"
+                                              class="ant-select-item-option-state"
+                                              style="user-select:none;-webkit-user-select:none"
+                                              unselectable="on"
+                                            />
                                           </div>
                                         </div>
                                       </div>

components/dropdown/__tests__/dropdown-button.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import DropdownButton from '../dropdown-button';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import type { DropdownProps } from '../dropdown';
 import { render } from '../../../tests/utils';
+import type { DropdownProps } from '../dropdown';
+import DropdownButton from '../dropdown-button';
 
 let dropdownProps: DropdownProps;
 
@@ -15,7 +15,12 @@ jest.mock('../dropdown', () => {
   const MockedDropdown: React.FC<DropdownProps> & {
     Button: typeof ActualDropdownComponent.Button;
   } = (props) => {
-    dropdownProps = props;
+    const clone: Record<string, any> = {};
+    Object.keys(props).forEach((key: keyof typeof props) => {
+      clone[key] = props[key];
+    });
+
+    dropdownProps = clone;
     const { children, ...restProps } = props;
     return h.createElement(ActualDropdownComponent, { ...restProps }, children);
   };

components/dropdown/__tests__/index.test.tsx

@@ -148,8 +148,8 @@ describe('Dropdown', () => {
       expect.objectContaining({
         bottomLeft: expect.objectContaining({
           overflow: {
-            adjustX: 1,
-            adjustY: 1,
+            adjustX: true,
+            adjustY: true,
           },
         }),
       }),

components/dropdown/dropdown.tsx

@@ -229,6 +229,7 @@ const Dropdown: CompoundedComponent = (props) => {
     autoAdjustOverflow,
     offset: token.marginXXS,
     arrowWidth: arrow ? token.sizePopupArrow : 0,
+    borderRadius: token.borderRadius,
   });
 
   const onMenuClick = React.useCallback(() => {

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

@@ -151,61 +151,59 @@ Array [
             class="ant-select-selection-placeholder"
           />
         </div>
-        <div>
-          <div
-            class="ant-select-dropdown ant-select-dropdown-empty"
-            style="opacity:0"
-          >
-            <div>
+        <div
+          class="ant-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
+          style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+        >
+          <div>
+            <div
+              class="ant-select-item-empty"
+              id="undefined_list"
+              role="listbox"
+            >
               <div
-                class="ant-select-item-empty"
-                id="undefined_list"
-                role="listbox"
+                class="ant-empty ant-empty-normal ant-empty-small"
               >
                 <div
-                  class="ant-empty ant-empty-normal ant-empty-small"
+                  class="ant-empty-image"
                 >
-                  <div
-                    class="ant-empty-image"
+                  <svg
+                    height="41"
+                    viewBox="0 0 64 41"
+                    width="64"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <svg
-                      height="41"
-                      viewBox="0 0 64 41"
-                      width="64"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      transform="translate(0 1)"
                     >
+                      <ellipse
+                        cx="32"
+                        cy="33"
+                        fill="#f5f5f5"
+                        rx="32"
+                        ry="7"
+                      />
                       <g
-                        fill="none"
-                        fill-rule="evenodd"
-                        transform="translate(0 1)"
+                        fill-rule="nonzero"
+                        stroke="#d9d9d9"
                       >
-                        <ellipse
-                          cx="32"
-                          cy="33"
-                          fill="#f5f5f5"
-                          rx="32"
-                          ry="7"
+                        <path
+                          d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                        />
+                        <path
+                          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                          fill="#fafafa"
                         />
-                        <g
-                          fill-rule="nonzero"
-                          stroke="#d9d9d9"
-                        >
-                          <path
-                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                          />
-                          <path
-                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                            fill="#fafafa"
-                          />
-                        </g>
                       </g>
-                    </svg>
-                  </div>
-                  <div
-                    class="ant-empty-description"
-                  >
-                    No data
-                  </div>
+                    </g>
+                  </svg>
+                </div>
+                <div
+                  class="ant-empty-description"
+                >
+                  No data
                 </div>
               </div>
             </div>
@@ -280,60 +278,58 @@ Array [
             class="ant-select-selection-placeholder"
           />
         </div>
-        <div>
-          <div
-            class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
-            style="opacity:0"
-          >
-            <div>
+        <div
+          class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
+          style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+        >
+          <div>
+            <div
+              class="ant-select-empty"
+              role="listbox"
+            >
               <div
-                class="ant-select-empty"
-                role="listbox"
+                class="ant-empty ant-empty-normal ant-empty-small"
               >
                 <div
-                  class="ant-empty ant-empty-normal ant-empty-small"
+                  class="ant-empty-image"
                 >
-                  <div
-                    class="ant-empty-image"
+                  <svg
+                    height="41"
+                    viewBox="0 0 64 41"
+                    width="64"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <svg
-                      height="41"
-                      viewBox="0 0 64 41"
-                      width="64"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <g
+                      fill="none"
+                      fill-rule="evenodd"
+                      transform="translate(0 1)"
                     >
+                      <ellipse
+                        cx="32"
+                        cy="33"
+                        fill="#f5f5f5"
+                        rx="32"
+                        ry="7"
+                      />
                       <g
-                        fill="none"
-                        fill-rule="evenodd"
-                        transform="translate(0 1)"
+                        fill-rule="nonzero"
+                        stroke="#d9d9d9"
                       >
-                        <ellipse
-                          cx="32"
-                          cy="33"
-                          fill="#f5f5f5"
-                          rx="32"
-                          ry="7"
+                        <path
+                          d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                        />
+                        <path
+                          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                          fill="#fafafa"
                         />
-                        <g
-                          fill-rule="nonzero"
-                          stroke="#d9d9d9"
-                        >
-                          <path
-                            d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                          />
-                          <path
-                            d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                            fill="#fafafa"
-                          />
-                        </g>
                       </g>
-                    </svg>
-                  </div>
-                  <div
-                    class="ant-empty-description"
-                  >
-                    No data
-                  </div>
+                    </g>
+                  </svg>
+                </div>
+                <div
+                  class="ant-empty-description"
+                >
+                  No data
                 </div>
               </div>
             </div>
@@ -405,77 +401,75 @@ Array [
             class="ant-select-selection-placeholder"
           />
         </div>
-        <div>
-          <div
-            class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty"
-            style="opacity:0"
-          >
-            <div>
-              <div
-                class="ant-cascader-menus ant-cascader-menu-empty"
+        <div
+          class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
+          style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+        >
+          <div>
+            <div
+              class="ant-cascader-menus ant-cascader-menu-empty"
+            >
+              <ul
+                class="ant-cascader-menu"
+                role="menu"
               >
-                <ul
-                  class="ant-cascader-menu"
-                  role="menu"
+                <li
+                  aria-checked="false"
+                  class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
+                  data-path-key="__EMPTY__"
+                  role="menuitemcheckbox"
                 >
-                  <li
-                    aria-checked="false"
-                    class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
-                    data-path-key="__EMPTY__"
-                    role="menuitemcheckbox"
+                  <div
+                    class="ant-cascader-menu-item-content"
                   >
                     <div
-                      class="ant-cascader-menu-item-content"
+                      class="ant-empty ant-empty-normal ant-empty-small"
                     >
                       <div
-                        class="ant-empty ant-empty-normal ant-empty-small"
+                        class="ant-empty-image"
                       >
-                        <div
-                          class="ant-empty-image"
+                        <svg
+                          height="41"
+                          viewBox="0 0 64 41"
+                          width="64"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <svg
-                            height="41"
-                            viewBox="0 0 64 41"
-                            width="64"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <g
+                            fill="none"
+                            fill-rule="evenodd"
+                            transform="translate(0 1)"
                           >
+                            <ellipse
+                              cx="32"
+                              cy="33"
+                              fill="#f5f5f5"
+                              rx="32"
+                              ry="7"
+                            />
                             <g
-                              fill="none"
-                              fill-rule="evenodd"
-                              transform="translate(0 1)"
+                              fill-rule="nonzero"
+                              stroke="#d9d9d9"
                             >
-                              <ellipse
-                                cx="32"
-                                cy="33"
-                                fill="#f5f5f5"
-                                rx="32"
-                                ry="7"
+                              <path
+                                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                              />
+                              <path
+                                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                                fill="#fafafa"
                               />
-                              <g
-                                fill-rule="nonzero"
-                                stroke="#d9d9d9"
-                              >
-                                <path
-                                  d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                                />
-                                <path
-                                  d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                                  fill="#fafafa"
-                                />
-                              </g>
                             </g>
-                          </svg>
-                        </div>
-                        <div
-                          class="ant-empty-description"
-                        >
-                          No data
-                        </div>
+                          </g>
+                        </svg>
+                      </div>
+                      <div
+                        class="ant-empty-description"
+                      >
+                        No data
                       </div>
                     </div>
-                  </li>
-                </ul>
-              </div>
+                  </div>
+                </li>
+              </ul>
             </div>
           </div>
         </div>
@@ -585,26 +579,21 @@ Array [
                       Select all data
                     </span>
                   </li>
-                  <div>
+                  <div
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                  >
                     <div
-                      class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                      style="opacity:0"
+                      class="ant-tooltip-arrow"
+                      style="position:absolute;top:0;left:0"
+                    />
+                    <div
+                      class="ant-tooltip-content"
                     >
                       <div
-                        class="ant-tooltip-content"
-                      >
-                        <div
-                          class="ant-tooltip-arrow"
-                        >
-                          <span
-                            class="ant-tooltip-arrow-content"
-                          />
-                        </div>
-                        <div
-                          class="ant-tooltip-inner"
-                          role="tooltip"
-                        />
-                      </div>
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
                     </div>
                   </div>
                   <li
@@ -618,26 +607,21 @@ Array [
                       Invert current page
                     </span>
                   </li>
-                  <div>
+                  <div
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                  >
                     <div
-                      class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                      style="opacity:0"
+                      class="ant-tooltip-arrow"
+                      style="position:absolute;top:0;left:0"
+                    />
+                    <div
+                      class="ant-tooltip-content"
                     >
                       <div
-                        class="ant-tooltip-content"
-                      >
-                        <div
-                          class="ant-tooltip-arrow"
-                        >
-                          <span
-                            class="ant-tooltip-arrow-content"
-                          />
-                        </div>
-                        <div
-                          class="ant-tooltip-inner"
-                          role="tooltip"
-                        />
-                      </div>
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
                     </div>
                   </div>
                 </ul>
@@ -645,48 +629,38 @@ Array [
                   aria-hidden="true"
                   style="display:none"
                 >
-                  <div>
+                  <div
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                  >
                     <div
-                      class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                      style="opacity:0"
+                      class="ant-tooltip-arrow"
+                      style="position:absolute;top:0;left:0"
+                    />
+                    <div
+                      class="ant-tooltip-content"
                     >
                       <div
-                        class="ant-tooltip-content"
-                      >
-                        <div
-                          class="ant-tooltip-arrow"
-                        >
-                          <span
-                            class="ant-tooltip-arrow-content"
-                          />
-                        </div>
-                        <div
-                          class="ant-tooltip-inner"
-                          role="tooltip"
-                        />
-                      </div>
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
                     </div>
                   </div>
-                  <div>
+                  <div
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                  >
                     <div
-                      class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                      style="opacity:0"
+                      class="ant-tooltip-arrow"
+                      style="position:absolute;top:0;left:0"
+                    />
+                    <div
+                      class="ant-tooltip-content"
                     >
                       <div
-                        class="ant-tooltip-content"
-                      >
-                        <div
-                          class="ant-tooltip-arrow"
-                        >
-                          <span
-                            class="ant-tooltip-arrow-content"
-                          />
-                        </div>
-                        <div
-                          class="ant-tooltip-inner"
-                          role="tooltip"
-                        />
-                      </div>
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
                     </div>
                   </div>
                 </div>
@@ -875,26 +849,21 @@ Array [
                       Select all data
                     </span>
                   </li>
-                  <div>
+                  <div
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                  >
                     <div
-                      class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                      style="opacity:0"
+                      class="ant-tooltip-arrow"
+                      style="position:absolute;top:0;left:0"
+                    />
+                    <div
+                      class="ant-tooltip-content"
                     >
                       <div
-                        class="ant-tooltip-content"
-                      >
-                        <div
-                          class="ant-tooltip-arrow"
-                        >
-                          <span
-                            class="ant-tooltip-arrow-content"
-                          />
-                        </div>
-                        <div
-                          class="ant-tooltip-inner"
-                          role="tooltip"
-                        />
-                      </div>
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
                     </div>
                   </div>
                   <li
@@ -908,26 +877,21 @@ Array [
                       Invert current page
                     </span>
                   </li>
-                  <div>
+                  <div
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                  >
                     <div
-                      class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                      style="opacity:0"
+                      class="ant-tooltip-arrow"
+                      style="position:absolute;top:0;left:0"
+                    />
+                    <div
+                      class="ant-tooltip-content"
                     >
                       <div
-                        class="ant-tooltip-content"
-                      >
-                        <div
-                          class="ant-tooltip-arrow"
-                        >
-                          <span
-                            class="ant-tooltip-arrow-content"
-                          />
-                        </div>
-                        <div
-                          class="ant-tooltip-inner"
-                          role="tooltip"
-                        />
-                      </div>
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
                     </div>
                   </div>
                 </ul>
@@ -935,48 +899,38 @@ Array [
                   aria-hidden="true"
                   style="display:none"
                 >
-                  <div>
+                  <div
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                  >
                     <div
-                      class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                      style="opacity:0"
+                      class="ant-tooltip-arrow"
+                      style="position:absolute;top:0;left:0"
+                    />
+                    <div
+                      class="ant-tooltip-content"
                     >
                       <div
-                        class="ant-tooltip-content"
-                      >
-                        <div
-                          class="ant-tooltip-arrow"
-                        >
-                          <span
-                            class="ant-tooltip-arrow-content"
-                          />
-                        </div>
-                        <div
-                          class="ant-tooltip-inner"
-                          role="tooltip"
-                        />
-                      </div>
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
                     </div>
                   </div>
-                  <div>
+                  <div
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+                  >
                     <div
-                      class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                      style="opacity:0"
+                      class="ant-tooltip-arrow"
+                      style="position:absolute;top:0;left:0"
+                    />
+                    <div
+                      class="ant-tooltip-content"
                     >
                       <div
-                        class="ant-tooltip-content"
-                      >
-                        <div
-                          class="ant-tooltip-arrow"
-                        >
-                          <span
-                            class="ant-tooltip-arrow-content"
-                          />
-                        </div>
-                        <div
-                          class="ant-tooltip-inner"
-                          role="tooltip"
-                        />
-                      </div>
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
                     </div>
                   </div>
                 </div>

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

@@ -919,27 +919,22 @@ Array [
         style="left:20%;transform:translateX(-50%)"
         tabindex="0"
       />
-      <div>
+      <div
+        class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip ant-slider-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              16
-            </div>
+            16
           </div>
         </div>
       </div>
@@ -1039,27 +1034,22 @@ Array [
         style="left:20%;transform:translateX(-50%)"
         tabindex="0"
       />
-      <div>
+      <div
+        class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip ant-slider-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              16
-            </div>
+            16
           </div>
         </div>
       </div>
@@ -1159,27 +1149,22 @@ Array [
         style="left:40%;transform:translateX(-50%)"
         tabindex="0"
       />
-      <div>
+      <div
+        class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip ant-slider-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              4
-            </div>
+            4
           </div>
         </div>
       </div>

components/image/PreviewGroup.tsx

@@ -3,6 +3,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import RotateLeftOutlined from '@ant-design/icons/RotateLeftOutlined';
 import RotateRightOutlined from '@ant-design/icons/RotateRightOutlined';
+import SwapOutlined from '@ant-design/icons/SwapOutlined';
 import ZoomInOutlined from '@ant-design/icons/ZoomInOutlined';
 import ZoomOutOutlined from '@ant-design/icons/ZoomOutOutlined';
 import RcImage from 'rc-image';
@@ -22,6 +23,8 @@ export const icons = {
   close: <CloseOutlined />,
   left: <LeftOutlined />,
   right: <RightOutlined />,
+  flipX: <SwapOutlined />,
+  flipY: <SwapOutlined rotate={90} />,
 };
 
 const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({

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

@@ -178,6 +178,53 @@ exports[`Image Default Group preview props 1`] = `
           </svg>
         </span>
       </li>
+      <li
+        class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipX"
+      >
+        <span
+          aria-label="swap"
+          class="anticon anticon-swap ant-image-preview-operations-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="swap"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </li>
+      <li
+        class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipY"
+      >
+        <span
+          aria-label="swap"
+          class="anticon anticon-swap ant-image-preview-operations-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="swap"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            style="transform: rotate(90deg);"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </li>
     </ul>
   </div>
   <div>

components/image/demo/preview-group.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { Image } from 'antd';
 
 const App: React.FC = () => (
-  <Image.PreviewGroup>
+  <Image.PreviewGroup
+    preview={{
+      onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`),
+    }}
+  >
     <Image width={200} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
     <Image
       width={200}

components/image/index.en-US.md

@@ -43,10 +43,10 @@ Previewable image.
 
 ### previewType
 
-```js
+```typescript
 {
   visible?: boolean;
-  onVisibleChange?: (visible, prevVisible) => void;
+  onVisibleChange?: (visible, prevVisible, current: number) => void; // `current` only support after v5.3.0
   getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0
   src?: string; // v4.10.0
   mask?: ReactNode; // v4.9.0
@@ -54,6 +54,7 @@ Previewable image.
   current?: number; // v4.12.0 Only support PreviewGroup
   countRender?: (current: number, total: number) => string  // v4.20.0 Only support PreviewGroup
   scaleStep?: number;
+  onChange?: (current: number, prevCurrent: number) => void; // only support after v5.3.0
 }
 ```
 

components/image/index.zh-CN.md

@@ -44,10 +44,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
 
 ### previewType
 
-```js
+```typescript
 {
   visible?: boolean;
-  onVisibleChange?: (visible, prevVisible) => void;
+  onVisibleChange?: (visible, prevVisible, current: number) => void; // current 参数v5.3.0后支持
   getContainer?: string | HTMLElement | (() => HTMLElement); // v4.8.0
   src?: string; // v4.10.0
   mask?: ReactNode; // v4.9.0
@@ -56,6 +56,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
   countRender?: (current: number, total: number) => string  // v4.20.0 仅支持 PreviewGroup
   scaleStep?: number;
   forceRender?: boolean;
+  onChange?: (current: number, prevCurrent: number) => void; // v5.3.0后支持
 }
 ```
 

components/index.ts

@@ -1,16 +1,15 @@
-export type { Breakpoint } from './_util/responsiveObserver';
 export { default as Affix } from './affix';
 export type { AffixProps } from './affix';
 export { default as Alert } from './alert';
 export type { AlertProps } from './alert';
 export { default as Anchor } from './anchor';
 export type { AnchorLinkProps, AnchorProps } from './anchor';
+export { default as App } from './app';
+export type { AppProps } from './app';
 export { default as AutoComplete } from './auto-complete';
 export type { AutoCompleteProps } from './auto-complete';
 export { default as Avatar } from './avatar';
 export type { AvatarProps } from './avatar';
-export { default as FloatButton } from './float-button';
-export type { FloatButtonProps, FloatButtonGroupProps } from './float-button/interface';
 export { default as BackTop } from './back-top';
 export type { BackTopProps } from './back-top';
 export { default as Badge } from './badge';
@@ -52,6 +51,8 @@ export type {
 } from './dropdown';
 export { default as Empty } from './empty';
 export type { EmptyProps } from './empty';
+export { default as FloatButton } from './float-button';
+export type { FloatButtonGroupProps, FloatButtonProps } from './float-button/interface';
 export { default as Form } from './form';
 export type {
   FormInstance,
@@ -75,7 +76,7 @@ export type { ListProps } from './list';
 export { default as Mentions } from './mentions';
 export type { MentionProps } from './mentions';
 export { default as Menu } from './menu';
-export type { MenuItemProps, MenuProps, MenuTheme, SubMenuProps, MenuRef } from './menu';
+export type { MenuItemProps, MenuProps, MenuRef, MenuTheme, SubMenuProps } from './menu';
 export { default as message } from './message';
 export type { ArgsProps as MessageArgsProps } from './message';
 export { default as Modal } from './modal';
@@ -89,6 +90,8 @@ export { default as Popover } from './popover';
 export type { PopoverProps } from './popover';
 export { default as Progress } from './progress';
 export type { ProgressProps } from './progress';
+export { default as QRCode } from './qrcode';
+export type { QRCodeProps, QRPropsCanvas } from './qrcode/interface';
 export { default as Radio } from './radio';
 export type { RadioChangeEvent, RadioGroupProps, RadioProps } from './radio';
 export { default as Rate } from './rate';
@@ -138,7 +141,6 @@ export { default as Tooltip } from './tooltip';
 export type { TooltipProps } from './tooltip';
 export { default as Tour } from './tour';
 export type { TourProps, TourStepProps } from './tour/interface';
-export { default as App } from './app';
 export { default as Transfer } from './transfer';
 export type { TransferProps } from './transfer';
 export { default as Tree } from './tree';
@@ -153,8 +155,7 @@ export { default as Typography } from './typography';
 export type { TypographyProps } from './typography';
 export { default as Upload } from './upload';
 export type { UploadFile, UploadProps } from './upload';
+export { default as version } from './version';
 export { default as Watermark } from './watermark';
 export type { WatermarkProps } from './watermark';
-export { default as QRCode } from './qrcode';
-export type { QRCodeProps, QRPropsCanvas } from './qrcode/interface';
-export { default as version } from './version';
+export type { Breakpoint } from './_util/responsiveObserver';

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

@@ -147,81 +147,79 @@ exports[`renders ./components/input-number/demo/addon.tsx extend context correct
                 +
               </span>
             </div>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
+            <div
+              class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
+              <div>
+                <div
+                  id="undefined_list"
+                  role="listbox"
+                  style="height:0;width:0;overflow:hidden"
+                >
                   <div
-                    id="undefined_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
+                    aria-label="+"
+                    aria-selected="true"
+                    id="undefined_list_0"
+                    role="option"
                   >
-                    <div
-                      aria-label="+"
-                      aria-selected="true"
-                      id="undefined_list_0"
-                      role="option"
-                    >
-                      add
-                    </div>
-                    <div
-                      aria-label="-"
-                      aria-selected="false"
-                      id="undefined_list_1"
-                      role="option"
-                    >
-                      minus
-                    </div>
+                    add
                   </div>
                   <div
-                    class="rc-virtual-list"
-                    style="position:relative"
+                    aria-label="-"
+                    aria-selected="false"
+                    id="undefined_list_1"
+                    role="option"
                   >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
+                    minus
+                  </div>
+                </div>
+                <div
+                  class="rc-virtual-list"
+                  style="position:relative"
+                >
+                  <div
+                    class="rc-virtual-list-holder"
+                    style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                  >
+                    <div>
+                      <div
+                        class="rc-virtual-list-holder-inner"
+                        style="display:flex;flex-direction:column"
+                      >
                         <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
+                          aria-selected="true"
+                          class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                          title="+"
                         >
                           <div
-                            aria-selected="true"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                            title="+"
+                            class="ant-select-item-option-content"
                           >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              +
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
+                            +
                           </div>
+                          <span
+                            aria-hidden="true"
+                            class="ant-select-item-option-state"
+                            style="user-select:none;-webkit-user-select:none"
+                            unselectable="on"
+                          />
+                        </div>
+                        <div
+                          aria-selected="false"
+                          class="ant-select-item ant-select-item-option"
+                          title="-"
+                        >
                           <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="-"
+                            class="ant-select-item-option-content"
                           >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              -
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
+                            -
                           </div>
+                          <span
+                            aria-hidden="true"
+                            class="ant-select-item-option-state"
+                            style="user-select:none;-webkit-user-select:none"
+                            unselectable="on"
+                          />
                         </div>
                       </div>
                     </div>
@@ -367,115 +365,113 @@ exports[`renders ./components/input-number/demo/addon.tsx extend context correct
                 $
               </span>
             </div>
-            <div>
-              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
-              >
-                <div>
+            <div
+              class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
+              <div>
+                <div
+                  id="undefined_list"
+                  role="listbox"
+                  style="height:0;width:0;overflow:hidden"
+                >
                   <div
-                    id="undefined_list"
-                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
+                    aria-label="$"
+                    aria-selected="true"
+                    id="undefined_list_0"
+                    role="option"
                   >
-                    <div
-                      aria-label="$"
-                      aria-selected="true"
-                      id="undefined_list_0"
-                      role="option"
-                    >
-                      USD
-                    </div>
-                    <div
-                      aria-label="€"
-                      aria-selected="false"
-                      id="undefined_list_1"
-                      role="option"
-                    >
-                      EUR
-                    </div>
+                    USD
                   </div>
                   <div
-                    class="rc-virtual-list"
-                    style="position:relative"
+                    aria-label="€"
+                    aria-selected="false"
+                    id="undefined_list_1"
+                    role="option"
                   >
-                    <div
-                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                    >
-                      <div>
+                    EUR
+                  </div>
+                </div>
+                <div
+                  class="rc-virtual-list"
+                  style="position:relative"
+                >
+                  <div
+                    class="rc-virtual-list-holder"
+                    style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                  >
+                    <div>
+                      <div
+                        class="rc-virtual-list-holder-inner"
+                        style="display:flex;flex-direction:column"
+                      >
                         <div
-                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
+                          aria-selected="true"
+                          class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                          title="$"
                         >
                           <div
-                            aria-selected="true"
-                            class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                            title="$"
+                            class="ant-select-item-option-content"
                           >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              $
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
+                            $
                           </div>
+                          <span
+                            aria-hidden="true"
+                            class="ant-select-item-option-state"
+                            style="user-select:none;-webkit-user-select:none"
+                            unselectable="on"
+                          />
+                        </div>
+                        <div
+                          aria-selected="false"
+                          class="ant-select-item ant-select-item-option"
+                          title="€"
+                        >
                           <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="€"
+                            class="ant-select-item-option-content"
                           >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              €
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
+                            €
                           </div>
+                          <span
+                            aria-hidden="true"
+                            class="ant-select-item-option-state"
+                            style="user-select:none;-webkit-user-select:none"
+                            unselectable="on"
+                          />
+                        </div>
+                        <div
+                          aria-selected="false"
+                          class="ant-select-item ant-select-item-option"
+                          title="£"
+                        >
                           <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="£"
+                            class="ant-select-item-option-content"
                           >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              £
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
+                            £
                           </div>
+                          <span
+                            aria-hidden="true"
+                            class="ant-select-item-option-state"
+                            style="user-select:none;-webkit-user-select:none"
+                            unselectable="on"
+                          />
+                        </div>
+                        <div
+                          aria-selected="false"
+                          class="ant-select-item ant-select-item-option"
+                          title="¥"
+                        >
                           <div
-                            aria-selected="false"
-                            class="ant-select-item ant-select-item-option"
-                            title="¥"
+                            class="ant-select-item-option-content"
                           >
-                            <div
-                              class="ant-select-item-option-content"
-                            >
-                              ¥
-                            </div>
-                            <span
-                              aria-hidden="true"
-                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
-                              unselectable="on"
-                            />
+                            ¥
                           </div>
+                          <span
+                            aria-hidden="true"
+                            class="ant-select-item-option-state"
+                            style="user-select:none;-webkit-user-select:none"
+                            unselectable="on"
+                          />
                         </div>
                       </div>
                     </div>
@@ -667,77 +663,75 @@ exports[`renders ./components/input-number/demo/addon.tsx extend context correct
                 cascader
               </span>
             </div>
-            <div>
-              <div
-                class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty"
-                style="opacity:0"
-              >
-                <div>
-                  <div
-                    class="ant-cascader-menus ant-cascader-menu-empty"
+            <div
+              class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
+              style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+            >
+              <div>
+                <div
+                  class="ant-cascader-menus ant-cascader-menu-empty"
+                >
+                  <ul
+                    class="ant-cascader-menu"
+                    role="menu"
                   >
-                    <ul
-                      class="ant-cascader-menu"
-                      role="menu"
+                    <li
+                      aria-checked="false"
+                      class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
+                      data-path-key="__EMPTY__"
+                      role="menuitemcheckbox"
                     >
-                      <li
-                        aria-checked="false"
-                        class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
-                        data-path-key="__EMPTY__"
-                        role="menuitemcheckbox"
+                      <div
+                        class="ant-cascader-menu-item-content"
                       >
                         <div
-                          class="ant-cascader-menu-item-content"
+                          class="ant-empty ant-empty-normal ant-empty-small"
                         >
                           <div
-                            class="ant-empty ant-empty-normal ant-empty-small"
+                            class="ant-empty-image"
                           >
-                            <div
-                              class="ant-empty-image"
+                            <svg
+                              height="41"
+                              viewBox="0 0 64 41"
+                              width="64"
+                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <svg
-                                height="41"
-                                viewBox="0 0 64 41"
-                                width="64"
-                                xmlns="http://www.w3.org/2000/svg"
+                              <g
+                                fill="none"
+                                fill-rule="evenodd"
+                                transform="translate(0 1)"
                               >
+                                <ellipse
+                                  cx="32"
+                                  cy="33"
+                                  fill="#f5f5f5"
+                                  rx="32"
+                                  ry="7"
+                                />
                                 <g
-                                  fill="none"
-                                  fill-rule="evenodd"
-                                  transform="translate(0 1)"
+                                  fill-rule="nonzero"
+                                  stroke="#d9d9d9"
                                 >
-                                  <ellipse
-                                    cx="32"
-                                    cy="33"
-                                    fill="#f5f5f5"
-                                    rx="32"
-                                    ry="7"
+                                  <path
+                                    d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+                                  />
+                                  <path
+                                    d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+                                    fill="#fafafa"
                                   />
-                                  <g
-                                    fill-rule="nonzero"
-                                    stroke="#d9d9d9"
-                                  >
-                                    <path
-                                      d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                                    />
-                                    <path
-                                      d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                                      fill="#fafafa"
-                                    />
-                                  </g>
                                 </g>
-                              </svg>
-                            </div>
-                            <div
-                              class="ant-empty-description"
-                            >
-                              No data
-                            </div>
+                              </g>
+                            </svg>
+                          </div>
+                          <div
+                            class="ant-empty-description"
+                          >
+                            No data
                           </div>
                         </div>
-                      </li>
-                    </ul>
-                  </div>
+                      </div>
+                    </li>
+                  </ul>
                 </div>
               </div>
             </div>

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

@@ -426,11 +426,12 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
           >
             Home
           </span>
-          <span
-            class="ant-breadcrumb-separator"
-          >
-            /
-          </span>
+        </li>
+        <li
+          aria-hidden="true"
+          class="ant-breadcrumb-separator"
+        >
+          /
         </li>
         <li>
           <span
@@ -438,11 +439,12 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
           >
             List
           </span>
-          <span
-            class="ant-breadcrumb-separator"
-          >
-            /
-          </span>
+        </li>
+        <li
+          aria-hidden="true"
+          class="ant-breadcrumb-separator"
+        >
+          /
         </li>
         <li>
           <span
@@ -450,11 +452,6 @@ exports[`renders ./components/layout/demo/fixed.tsx correctly 1`] = `
           >
             App
           </span>
-          <span
-            class="ant-breadcrumb-separator"
-          >
-            /
-          </span>
         </li>
       </ol>
     </nav>
@@ -1405,11 +1402,12 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
             >
               User
             </span>
-            <span
-              class="ant-breadcrumb-separator"
-            >
-              /
-            </span>
+          </li>
+          <li
+            aria-hidden="true"
+            class="ant-breadcrumb-separator"
+          >
+            /
           </li>
           <li>
             <span
@@ -1417,11 +1415,6 @@ exports[`renders ./components/layout/demo/side.tsx correctly 1`] = `
             >
               Bill
             </span>
-            <span
-              class="ant-breadcrumb-separator"
-            >
-              /
-            </span>
           </li>
         </ol>
       </nav>
@@ -1695,11 +1688,12 @@ exports[`renders ./components/layout/demo/top.tsx correctly 1`] = `
           >
             Home
           </span>
-          <span
-            class="ant-breadcrumb-separator"
-          >
-            /
-          </span>
+        </li>
+        <li
+          aria-hidden="true"
+          class="ant-breadcrumb-separator"
+        >
+          /
         </li>
         <li>
           <span
@@ -1707,11 +1701,12 @@ exports[`renders ./components/layout/demo/top.tsx correctly 1`] = `
           >
             List
           </span>
-          <span
-            class="ant-breadcrumb-separator"
-          >
-            /
-          </span>
+        </li>
+        <li
+          aria-hidden="true"
+          class="ant-breadcrumb-separator"
+        >
+          /
         </li>
         <li>
           <span
@@ -1719,11 +1714,6 @@ exports[`renders ./components/layout/demo/top.tsx correctly 1`] = `
           >
             App
           </span>
-          <span
-            class="ant-breadcrumb-separator"
-          >
-            /
-          </span>
         </li>
       </ol>
     </nav>
@@ -1853,11 +1843,12 @@ exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
           >
             Home
           </span>
-          <span
-            class="ant-breadcrumb-separator"
-          >
-            /
-          </span>
+        </li>
+        <li
+          aria-hidden="true"
+          class="ant-breadcrumb-separator"
+        >
+          /
         </li>
         <li>
           <span
@@ -1865,11 +1856,12 @@ exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
           >
             List
           </span>
-          <span
-            class="ant-breadcrumb-separator"
-          >
-            /
-          </span>
+        </li>
+        <li
+          aria-hidden="true"
+          class="ant-breadcrumb-separator"
+        >
+          /
         </li>
         <li>
           <span
@@ -1877,11 +1869,6 @@ exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
           >
             App
           </span>
-          <span
-            class="ant-breadcrumb-separator"
-          >
-            /
-          </span>
         </li>
       </ol>
     </nav>
@@ -2415,11 +2402,12 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
             >
               Home
             </span>
-            <span
-              class="ant-breadcrumb-separator"
-            >
-              /
-            </span>
+          </li>
+          <li
+            aria-hidden="true"
+            class="ant-breadcrumb-separator"
+          >
+            /
           </li>
           <li>
             <span
@@ -2427,11 +2415,12 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
             >
               List
             </span>
-            <span
-              class="ant-breadcrumb-separator"
-            >
-              /
-            </span>
+          </li>
+          <li
+            aria-hidden="true"
+            class="ant-breadcrumb-separator"
+          >
+            /
           </li>
           <li>
             <span
@@ -2439,11 +2428,6 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
             >
               App
             </span>
-            <span
-              class="ant-breadcrumb-separator"
-            >
-              /
-            </span>
           </li>
         </ol>
       </nav>

components/list/__tests__/__snapshots__/pagination.test.tsx.snap

@@ -483,103 +483,101 @@ exports[`List.pagination should change page size work 2`] = `
           50 / page
         </span>
       </div>
-      <div>
-        <div
-          class="ant-select-dropdown ant-slide-up-enter ant-slide-up-enter-prepare ant-slide-up"
-          style="min-width: 0; opacity: 0;"
-        >
-          <div>
+      <div
+        class="ant-select-dropdown ant-slide-up-enter ant-slide-up-enter-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
+        style="left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;"
+      >
+        <div>
+          <div
+            class="rc-virtual-list"
+            style="position: relative;"
+          >
             <div
-              class="rc-virtual-list"
-              style="position: relative;"
+              class="rc-virtual-list-holder"
+              style="max-height: 256px; overflow-y: auto;"
             >
-              <div
-                class="rc-virtual-list-holder"
-                style="max-height: 256px; overflow-y: auto;"
-              >
-                <div>
+              <div>
+                <div
+                  class="rc-virtual-list-holder-inner"
+                  id="rc_select_TEST_OR_SSR_list"
+                  role="listbox"
+                  style="display: flex; flex-direction: column;"
+                >
                   <div
-                    class="rc-virtual-list-holder-inner"
-                    id="rc_select_TEST_OR_SSR_list"
-                    role="listbox"
-                    style="display: flex; flex-direction: column;"
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                    id="rc_select_TEST_OR_SSR_list_0"
+                    role="option"
+                    title="10 / page"
                   >
                     <div
-                      aria-selected="false"
-                      class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                      id="rc_select_TEST_OR_SSR_list_0"
-                      role="option"
-                      title="10 / page"
+                      class="ant-select-item-option-content"
                     >
-                      <div
-                        class="ant-select-item-option-content"
-                      >
-                        10 / page
-                      </div>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-item-option-state"
-                        style="user-select: none;"
-                        unselectable="on"
-                      />
+                      10 / page
                     </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                    id="rc_select_TEST_OR_SSR_list_1"
+                    role="option"
+                    title="20 / page"
+                  >
                     <div
-                      aria-selected="false"
-                      class="ant-select-item ant-select-item-option"
-                      id="rc_select_TEST_OR_SSR_list_1"
-                      role="option"
-                      title="20 / page"
+                      class="ant-select-item-option-content"
                     >
-                      <div
-                        class="ant-select-item-option-content"
-                      >
-                        20 / page
-                      </div>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-item-option-state"
-                        style="user-select: none;"
-                        unselectable="on"
-                      />
+                      20 / page
                     </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="true"
+                    class="ant-select-item ant-select-item-option ant-select-item-option-selected"
+                    id="rc_select_TEST_OR_SSR_list_2"
+                    role="option"
+                    title="50 / page"
+                  >
                     <div
-                      aria-selected="true"
-                      class="ant-select-item ant-select-item-option ant-select-item-option-selected"
-                      id="rc_select_TEST_OR_SSR_list_2"
-                      role="option"
-                      title="50 / page"
+                      class="ant-select-item-option-content"
                     >
-                      <div
-                        class="ant-select-item-option-content"
-                      >
-                        50 / page
-                      </div>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-item-option-state"
-                        style="user-select: none;"
-                        unselectable="on"
-                      />
+                      50 / page
                     </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                    id="rc_select_TEST_OR_SSR_list_3"
+                    role="option"
+                    title="100 / page"
+                  >
                     <div
-                      aria-selected="false"
-                      class="ant-select-item ant-select-item-option"
-                      id="rc_select_TEST_OR_SSR_list_3"
-                      role="option"
-                      title="100 / page"
+                      class="ant-select-item-option-content"
                     >
-                      <div
-                        class="ant-select-item-option-content"
-                      >
-                        100 / page
-                      </div>
-                      <span
-                        aria-hidden="true"
-                        class="ant-select-item-option-state"
-                        style="user-select: none;"
-                        unselectable="on"
-                      />
+                      100 / page
                     </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
                   </div>
                 </div>
               </div>
@@ -613,9 +611,6 @@ exports[`List.pagination should change page size work 2`] = `
           </svg>
         </span>
       </span>
-      <div
-        style="position: absolute; top: 0px; left: 0px; width: 100%;"
-      />
     </div>
   </li>
 </ul>

components/notification/index.en-US.md

@@ -65,11 +65,15 @@ The properties of config are as follows:
 
 `notification` also provides a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.
 
-- `notification.config(options)`
+### Global configuration
 
-  > When you use `ConfigProvider` for global configuration, the system will automatically start RTL mode by default.(4.3.0+)
-  >
-  > When you want to use it alone, you can start the RTL mode through the following settings.
+`notification.config(options)`
+
+> When you use `ConfigProvider` for global configuration, the system will automatically start RTL mode by default.(4.3.0+)
+>
+> When you want to use it alone, you can start the RTL mode through the following settings.
+
+#### notification.config
 
 ```js
 notification.config({

components/notification/index.zh-CN.md

@@ -63,13 +63,15 @@ config 参数如下：
 | onClick | 点击通知时触发的回调函数 | function | - |
 | onClose | 当通知关闭时触发 | function | - |
 
+### 全局配置
+
 还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
 
-- `notification.config(options)`
+`notification.config(options)`
 
-  > 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)
-  >
-  > 当你想单独使用，可通过如下设置开启 RTL 模式。
+> 当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)
+>
+> 当你想单独使用，可通过如下设置开启 RTL 模式。
 
 ```js
 notification.config({
@@ -80,6 +82,8 @@ notification.config({
 });
 ```
 
+#### notification.config
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |  |

components/notification/useNotification.tsx

@@ -105,15 +105,7 @@ export function useInternalNotification(
       const { open: originOpen, prefixCls, hashId } = holderRef.current;
       const noticePrefixCls = `${prefixCls}-notice`;
 
-      const {
-        message,
-        description,
-        icon,
-        type,
-        btn,
-        className,
-        ...restConfig
-      } = config;
+      const { message, description, icon, type, btn, className, ...restConfig } = config;
 
       return originOpen({
         placement: 'topRight',

components/popconfirm/__tests__/__snapshots__/demo.test.tsx.snap

@@ -201,12 +201,12 @@ Array [
   <div
     class="ant-popover ant-popover-pure ant-popover-placement-top ant-popconfirm"
   >
+    <div
+      class="ant-popover-arrow"
+    />
     <div
       class="ant-popover-content"
     >
-      <div
-        class="ant-popover-arrow"
-      />
       <div
         class="ant-popover-inner"
         role="tooltip"
@@ -283,13 +283,13 @@ Array [
     class="ant-popover ant-popover-pure ant-popover-placement-bottomRight ant-popconfirm"
     style="width:250px"
   >
+    <div
+      class="ant-popover-arrow"
+    />
     <div
       class="ant-popover-content"
       style="width:250px"
     >
-      <div
-        class="ant-popover-arrow"
-      />
       <div
         class="ant-popover-inner"
         role="tooltip"
@@ -370,12 +370,12 @@ Array [
   <div
     class="ant-popover ant-popover-pure ant-popover-placement-top ant-popconfirm"
   >
+    <div
+      class="ant-popover-arrow"
+    />
     <div
       class="ant-popover-content"
     >
-      <div
-        class="ant-popover-arrow"
-      />
       <div
         class="ant-popover-inner"
         role="tooltip"
@@ -447,13 +447,13 @@ Array [
     class="ant-popover ant-popover-pure ant-popover-placement-bottomRight ant-popconfirm"
     style="width:250px"
   >
+    <div
+      class="ant-popover-arrow"
+    />
     <div
       class="ant-popover-content"
       style="width:250px"
     >
-      <div
-        class="ant-popover-arrow"
-      />
       <div
         class="ant-popover-inner"
         role="tooltip"

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

@@ -2,8 +2,8 @@
 
 exports[`Popconfirm rtl render component should be rendered correctly in RTL direction 1`] = `<span />`;
 
-exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class="ant-popover-content"><div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">code</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
+exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class="ant-popover-arrow" style="position: absolute; bottom: 0px; left: 0px;"></div><div class="ant-popover-content"><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">code</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
 
-exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class="ant-popover-content"><div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">code</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
+exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class="ant-popover-arrow" style="position: absolute; bottom: 0px; left: 0px;"></div><div class="ant-popover-content"><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">code</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
 
-exports[`Popconfirm shows content for render functions 1`] = `"<div class="ant-popover-content"><div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">some-title</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
+exports[`Popconfirm shows content for render functions 1`] = `"<div class="ant-popover-arrow" style="position: absolute; left: 0px; top: 0px;"></div><div class="ant-popover-content"><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">some-title</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;

components/popconfirm/__tests__/index.test.tsx

@@ -57,7 +57,7 @@ describe('Popconfirm', () => {
 
   it('should show overlay when trigger is clicked', async () => {
     const popconfirm = render(
-      <Popconfirm title="code">
+      <Popconfirm title="code" autoAdjustOverflow={false}>
         <span>show me your code</span>
       </Popconfirm>,
     );

components/popover/PurePanel.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import { Popup } from 'rc-tooltip';
+import * as React from 'react';
 import type { PopoverProps } from '.';
 import { ConfigContext } from '../config-provider';
 
-import useStyle from './style';
 import { getRenderPropValue } from '../_util/getRenderPropValue';
+import useStyle from './style';
 
 export const getOverlay = (
   prefixCls: string,
@@ -48,6 +48,7 @@ export function RawPurePanel(props: any) {
       )}
       style={style}
     >
+      <div className={`${prefixCls}-arrow`} />
       <Popup {...props} className={hashId} prefixCls={prefixCls}>
         {children || getOverlay(prefixCls, title, content)}
       </Popup>

components/popover/__tests__/__snapshots__/demo.test.tsx.snap

@@ -369,12 +369,12 @@ Array [
   <div
     class="ant-popover ant-popover-pure ant-popover-placement-top"
   >
+    <div
+      class="ant-popover-arrow"
+    />
     <div
       class="ant-popover-content"
     >
-      <div
-        class="ant-popover-arrow"
-      />
       <div
         class="ant-popover-inner"
         role="tooltip"
@@ -403,13 +403,13 @@ Array [
     class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
     style="width:250px"
   >
+    <div
+      class="ant-popover-arrow"
+    />
     <div
       class="ant-popover-content"
       style="width:250px"
     >
-      <div
-        class="ant-popover-arrow"
-      />
       <div
         class="ant-popover-inner"
         role="tooltip"
@@ -489,12 +489,12 @@ Array [
   <div
     class="ant-popover ant-popover-pure ant-popover-placement-top"
   >
+    <div
+      class="ant-popover-arrow"
+    />
     <div
       class="ant-popover-content"
     >
-      <div
-        class="ant-popover-arrow"
-      />
       <div
         class="ant-popover-inner"
         role="tooltip"
@@ -523,13 +523,13 @@ Array [
     class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
     style="width:250px"
   >
+    <div
+      class="ant-popover-arrow"
+    />
     <div
       class="ant-popover-content"
       style="width:250px"
     >
-      <div
-        class="ant-popover-arrow"
-      />
       <div
         class="ant-popover-inner"
         role="tooltip"

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

@@ -7,38 +7,33 @@ Array [
   >
     show me your Rtl demo
   </span>,
-  <div>
+  <div
+    class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-rtl ant-popover-placement-top"
+    style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+  >
     <div
-      class="ant-popover ant-popover-rtl ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
-      style="opacity: 0;"
+      class="ant-popover-arrow"
+      style="position: absolute; bottom: 0px; left: 0px;"
+    />
+    <div
+      class="ant-popover-content"
     >
       <div
-        class="ant-popover-content"
+        class="ant-popover-inner"
+        role="tooltip"
       >
         <div
-          class="ant-popover-arrow"
+          class="ant-popover-title"
         >
-          <span
-            class="ant-popover-arrow-content"
-          />
+          RTL
         </div>
         <div
-          class="ant-popover-inner"
-          role="tooltip"
-        >
-          <div
-            class="ant-popover-title"
-          >
-            RTL
-          </div>
-          <div
-            class="ant-popover-inner-content"
-          />
-        </div>
+          class="ant-popover-inner-content"
+        />
       </div>
     </div>
   </div>,
 ]
 `;
 
-exports[`Popover shows content for render functions 1`] = `"<div class="ant-popover-content"><div class="ant-popover-arrow"><span class="ant-popover-arrow-content"></span></div><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-title">some-title</div><div class="ant-popover-inner-content">some-content</div></div></div>"`;
+exports[`Popover shows content for render functions 1`] = `"<div class="ant-popover-arrow" style="position: absolute; bottom: 0px; left: 0px;"></div><div class="ant-popover-content"><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-title">some-title</div><div class="ant-popover-inner-content">some-content</div></div></div>"`;

components/popover/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Popover from '..';
 import mountTest from '../../../tests/shared/mountTest';
-import { render, fireEvent } from '../../../tests/utils';
+import { fireEvent, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 
 describe('Popover', () => {
@@ -16,7 +16,6 @@ describe('Popover', () => {
       </Popover>,
     );
 
-    expect(ref.current.getPopupDomNode()).toBe(null);
     expect(popover.container.querySelector('.ant-popover-inner-content')).toBeFalsy();
     fireEvent.click(popover.container.querySelector('span')!);
     expect(popover.container.querySelector('.ant-popover-inner-content')).toBeTruthy();
@@ -35,7 +34,7 @@ describe('Popover', () => {
 
     fireEvent.click(popover.container.querySelector('span')!);
 
-    const popup = ref.current.getPopupDomNode();
+    const popup = document.querySelector('.ant-popover')!;
     expect(popup).not.toBe(null);
     expect(popup.innerHTML).toContain('some-title');
     expect(popup.innerHTML).toContain('some-content');

components/popover/demo/arrow.tsx

@@ -16,7 +16,7 @@ const App: React.FC = () => {
   const [arrowAtCenter, setArrowAtCenter] = useState(false);
 
   const mergedArrow = useMemo(() => {
-    if (arrowAtCenter) return { arrowPointAtCenter: true };
+    if (arrowAtCenter) return { pointAtCenter: true };
     return showArrow;
   }, [showArrow, arrowAtCenter]);
 

components/popover/index.tsx

@@ -44,8 +44,6 @@ const Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => {
     mouseEnterDelay = 0.1,
     mouseLeaveDelay = 0.1,
     overlayStyle = {},
-    arrowPointAtCenter,
-    arrow,
     ...otherProps
   } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
@@ -56,14 +54,9 @@ const Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => {
 
   const overlayCls = classNames(overlayClassName, hashId);
 
-  const mergedArrowPointAtCenter =
-    (typeof arrow !== 'boolean' && arrow?.arrowPointAtCenter) ?? arrowPointAtCenter ?? false;
-  const mergedArrow = arrow ?? { arrowPointAtCenter: mergedArrowPointAtCenter };
-
   return wrapSSR(
     <Tooltip
       placement={placement}
-      arrow={mergedArrow}
       trigger={trigger}
       mouseEnterDelay={mouseEnterDelay}
       mouseLeaveDelay={mouseLeaveDelay}

components/popover/style/index.tsx

@@ -1,8 +1,8 @@
+import { resetComponent } from '../../style';
 import { initZoomMotion } from '../../style/motion';
+import getArrowStyle from '../../style/placementArrow';
 import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
-import { resetComponent } from '../../style';
-import getArrowStyle from '../../style/placementArrow';
 
 export interface ComponentToken {
   zIndexPopup: number;
@@ -93,6 +93,8 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
       [`${componentCls}-pure`]: {
         position: 'relative',
         maxWidth: 'none',
+        margin: token.sizePopupArrow,
+        display: 'inline-block',
 
         [`${componentCls}-content`]: {
           display: 'inline-block',

components/progress/Circle.tsx

@@ -4,7 +4,7 @@ import { Circle as RCCircle } from 'rc-progress';
 import * as React from 'react';
 import Tooltip from '../tooltip';
 import type { ProgressGradient, ProgressProps } from './progress';
-import { getPercentage, getStrokeColor } from './utils';
+import { getPercentage, getSize, getStrokeColor } from './utils';
 
 const CIRCLE_MIN_STROKE_WIDTH = 3;
 
@@ -20,18 +20,27 @@ export interface CircleProps extends ProgressProps {
 const Circle: React.FC<CircleProps> = (props) => {
   const {
     prefixCls,
-    width = 120,
-    strokeWidth = Math.max(getMinPercent(width), 6),
     trailColor = null as unknown as string,
     strokeLinecap = 'round',
     gapPosition,
     gapDegree,
+    width: originWidth = 120,
     type,
     children,
     success,
+    size,
   } = props;
 
-  const circleStyle: React.CSSProperties = { width, height: width, fontSize: width * 0.15 + 6 };
+  const mergedSize = size ?? [originWidth, originWidth];
+
+  const [width, height] = getSize(mergedSize, 'circle');
+
+  let { strokeWidth } = props;
+  if (strokeWidth === undefined) {
+    strokeWidth = Math.max(getMinPercent(width), 6);
+  }
+
+  const circleStyle: React.CSSProperties = { width, height, fontSize: width * 0.15 + 6 };
 
   const realGapDegree = React.useMemo<RcProgressProps['gapDegree']>(() => {
     // Support gapDeg = 0 when type = 'dashboard'
@@ -71,7 +80,9 @@ const Circle: React.FC<CircleProps> = (props) => {
   return (
     <div className={wrapperClassName} style={circleStyle}>
       {width <= 20 ? (
-        <Tooltip title={children}>{circleContent}</Tooltip>
+        <Tooltip title={children}>
+          <span>{circleContent}</span>
+        </Tooltip>
       ) : (
         <>
           {circleContent}

components/progress/Line.tsx

@@ -1,8 +1,9 @@
 import { presetPrimaryColors } from '@ant-design/colors';
 import * as React from 'react';
 import type { DirectionType } from '../config-provider';
+import warning from '../_util/warning';
 import type { ProgressGradient, ProgressProps, StringGradients } from './progress';
-import { getSuccessPercent, validProgress } from './utils';
+import { getSize, getSuccessPercent, validProgress } from './utils';
 
 interface LineProps extends ProgressProps {
   prefixCls: string;
@@ -71,8 +72,8 @@ const Line: React.FC<LineProps> = (props) => {
     prefixCls,
     direction: directionConfig,
     percent,
-    strokeWidth,
     size,
+    strokeWidth,
     strokeColor,
     strokeLinecap = 'round',
     children,
@@ -92,9 +93,21 @@ const Line: React.FC<LineProps> = (props) => {
     borderRadius,
   };
 
+  const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)];
+
+  const [width, height] = getSize(mergedSize, 'line', { strokeWidth });
+
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      !('strokeWidth' in props),
+      'Progress',
+      '`strokeWidth` is deprecated. Please use `size` instead.',
+    );
+  }
+
   const percentStyle: React.CSSProperties = {
     width: `${validProgress(percent)}%`,
-    height: strokeWidth || (size === 'small' ? 6 : 8),
+    height,
     borderRadius,
     ...backgroundProps,
   };
@@ -103,14 +116,19 @@ const Line: React.FC<LineProps> = (props) => {
 
   const successPercentStyle: React.CSSProperties = {
     width: `${validProgress(successPercent)}%`,
-    height: strokeWidth || (size === 'small' ? 6 : 8),
+    height,
     borderRadius,
     backgroundColor: success?.strokeColor,
   };
 
+  const outerStyle: React.CSSProperties = {
+    width: width < 0 ? '100%' : width,
+    height,
+  };
+
   return (
     <>
-      <div className={`${prefixCls}-outer`}>
+      <div className={`${prefixCls}-outer`} style={outerStyle}>
         <div className={`${prefixCls}-inner`} style={trailStyle}>
           <div className={`${prefixCls}-bg`} style={percentStyle} />
           {successPercent !== undefined ? (

components/progress/Steps.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import type { ProgressProps, ProgressSize } from './progress';
+import type { ProgressProps } from './progress';
+import { getSize } from './utils';
 
 interface ProgressStepsProps extends ProgressProps {
   steps: number;
-  size?: ProgressSize;
   strokeColor?: string | string[];
   trailColor?: string;
 }
@@ -22,6 +22,9 @@ const Steps: React.FC<ProgressStepsProps> = (props) => {
   } = props;
   const current = Math.round(steps * (percent / 100));
   const stepWidth = size === 'small' ? 2 : 14;
+  const mergedSize = size ?? [stepWidth, strokeWidth];
+  const [width, height] = getSize(mergedSize, 'step', { steps, strokeWidth });
+  const unitWidth = width / steps;
   const styledSteps: React.ReactNode[] = new Array(steps);
   for (let i = 0; i < steps; i++) {
     const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
@@ -33,8 +36,8 @@ const Steps: React.FC<ProgressStepsProps> = (props) => {
         })}
         style={{
           backgroundColor: i <= current - 1 ? color : trailColor,
-          width: stepWidth,
-          height: strokeWidth,
+          width: unitWidth,
+          height,
         }}
       />
     );

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

@@ -328,75 +328,72 @@ Array [
 exports[`renders ./components/progress/demo/circle-micro.tsx extend context correctly 1`] = `
 Array [
   <div
-    class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+    class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
     role="progressbar"
   >
     <div
       class="ant-progress-inner"
       style="width:14px;height:14px;font-size:8.1px"
     >
-      <svg
-        class="ant-progress-circle"
-        role="presentation"
-        viewBox="-50 -50 100 100"
+      <span>
+        <svg
+          class="ant-progress-circle"
+          role="presentation"
+          viewBox="-50 -50 100 100"
+        >
+          <circle
+            class="ant-progress-circle-trail"
+            cx="0"
+            cy="0"
+            r="40"
+            stroke="#e6f4ff"
+            stroke-linecap="round"
+            stroke-width="20"
+            style="stroke:#e6f4ff;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="0"
+            cy="0"
+            opacity="1"
+            r="40"
+            stroke-linecap="round"
+            stroke-width="20"
+            style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:110.53096491487338;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="0"
+            cy="0"
+            opacity="0"
+            r="40"
+            stroke-linecap="round"
+            stroke-width="20"
+            style="stroke:#52C41A;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:251.31741228718346;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+        </svg>
+      </span>
+      <div
+        class="ant-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
       >
-        <circle
-          class="ant-progress-circle-trail"
-          cx="0"
-          cy="0"
-          r="40"
-          stroke="#e6f4ff"
-          stroke-linecap="round"
-          stroke-width="20"
-          style="stroke:#e6f4ff;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
-        />
-        <circle
-          class="ant-progress-circle-path"
-          cx="0"
-          cy="0"
-          opacity="1"
-          r="40"
-          stroke-linecap="round"
-          stroke-width="20"
-          style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:110.53096491487338;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
-        />
-        <circle
-          class="ant-progress-circle-path"
-          cx="0"
-          cy="0"
-          opacity="0"
-          r="40"
-          stroke-linecap="round"
-          stroke-width="20"
-          style="stroke:#52C41A;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:251.31741228718346;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
-        />
-      </svg>
-      <div>
         <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
+            <span
+              class="ant-progress-text"
+              title="进行中，已完成60%"
             >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              <span
-                class="ant-progress-text"
-                title="进行中，已完成60%"
-              >
-                进行中，已完成60%
-              </span>
-            </div>
+              进行中，已完成60%
+            </span>
           </div>
         </div>
       </div>
@@ -420,7 +417,7 @@ exports[`renders ./components/progress/demo/circle-mini.tsx extend context corre
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
       role="progressbar"
     >
       <div
@@ -476,7 +473,7 @@ exports[`renders ./components/progress/demo/circle-mini.tsx extend context corre
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
+      class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info"
       role="progressbar"
     >
       <div
@@ -549,7 +546,7 @@ exports[`renders ./components/progress/demo/circle-mini.tsx extend context corre
     style="padding-bottom:8px"
   >
     <div
-      class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
+      class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info"
       role="progressbar"
     >
       <div
@@ -748,6 +745,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -954,6 +952,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -977,6 +976,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1177,6 +1177,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1200,6 +1201,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1223,6 +1225,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1263,6 +1266,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1303,6 +1307,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1327,6 +1332,7 @@ exports[`renders ./components/progress/demo/line-mini.tsx extend context correct
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:6px"
     >
       <div
         class="ant-progress-inner"
@@ -1350,6 +1356,7 @@ exports[`renders ./components/progress/demo/line-mini.tsx extend context correct
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:6px"
     >
       <div
         class="ant-progress-inner"
@@ -1373,6 +1380,7 @@ exports[`renders ./components/progress/demo/line-mini.tsx extend context correct
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:6px"
     >
       <div
         class="ant-progress-inner"
@@ -1413,6 +1421,7 @@ exports[`renders ./components/progress/demo/line-mini.tsx extend context correct
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:6px"
     >
       <div
         class="ant-progress-inner"
@@ -1458,6 +1467,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1604,6 +1614,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1625,27 +1636,22 @@ Array [
       60%
     </span>
   </div>,
-  <div>
+  <div
+    class="ant-tooltip ant-tooltip-placement-top"
+    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+  >
     <div
-      class="ant-tooltip"
-      style="opacity:0"
+      class="ant-tooltip-arrow"
+      style="position:absolute;bottom:0;left:0"
+    />
+    <div
+      class="ant-tooltip-content"
     >
       <div
-        class="ant-tooltip-content"
+        class="ant-tooltip-inner"
+        role="tooltip"
       >
-        <div
-          class="ant-tooltip-arrow"
-        >
-          <span
-            class="ant-tooltip-arrow-content"
-          />
-        </div>
-        <div
-          class="ant-tooltip-inner"
-          role="tooltip"
-        >
-          3 done / 3 in progress / 4 to do
-        </div>
+        3 done / 3 in progress / 4 to do
       </div>
     </div>
   </div>,
@@ -1708,27 +1714,22 @@ Array [
           </span>
         </div>
       </div>
-      <div>
+      <div
+        class="ant-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
           >
-            <div
-              class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
-            <div
-              class="ant-tooltip-inner"
-              role="tooltip"
-            >
-              3 done / 3 in progress / 4 to do
-            </div>
+            3 done / 3 in progress / 4 to do
           </div>
         </div>
       </div>
@@ -1788,32 +1789,643 @@ Array [
           </span>
         </div>
       </div>
-      <div>
+      <div
+        class="ant-tooltip ant-tooltip-placement-top"
+        style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+      >
         <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip-arrow"
+          style="position:absolute;bottom:0;left:0"
+        />
+        <div
+          class="ant-tooltip-content"
         >
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            3 done / 3 in progress / 4 to do
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders ./components/progress/demo/size.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-vertical"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-bottom:8px"
+    >
+      <div
+        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width:100%;height:8px"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width:50%;height:8px"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-bottom:8px"
+    >
+      <div
+        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width:100%;height:6px"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width:50%;height:6px"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width:300px;height:20px"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width:50%;height:20px"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:120px;height:120px;font-size:24px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:60px;height:60px;font-size:15px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:20px;height:20px;font-size:9px"
+        >
+          <span>
+            <svg
+              class="ant-progress-circle"
+              role="presentation"
+              viewBox="-50 -50 100 100"
+            >
+              <circle
+                class="ant-progress-circle-trail"
+                cx="0"
+                cy="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="1"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </svg>
+          </span>
+          <div
+            class="ant-tooltip ant-tooltip-placement-top"
+            style="left:-1000vw;top:-1000vh;box-sizing:border-box"
           >
             <div
               class="ant-tooltip-arrow"
-            >
-              <span
-                class="ant-tooltip-arrow-content"
-              />
-            </div>
+              style="position:absolute;bottom:0;left:0"
+            />
             <div
-              class="ant-tooltip-inner"
-              role="tooltip"
+              class="ant-tooltip-content"
             >
-              3 done / 3 in progress / 4 to do
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              >
+                <span
+                  class="ant-progress-text"
+                  title="50%"
+                >
+                  50%
+                </span>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:120px;height:120px;font-size:24px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:60px;height:60px;font-size:15px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:20px;height:20px;font-size:9px"
+        >
+          <span>
+            <svg
+              class="ant-progress-circle"
+              role="presentation"
+              viewBox="-50 -50 100 100"
+            >
+              <circle
+                class="ant-progress-circle-trail"
+                cx="0"
+                cy="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="1"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </svg>
+          </span>
+          <div
+            class="ant-tooltip ant-tooltip-placement-top"
+            style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position:absolute;bottom:0;left:0"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              >
+                <span
+                  class="ant-progress-text"
+                  title="50%"
+                >
+                  50%
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-30px"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:30px;padding-bottom:30px"
+    >
+      <div
+        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:14px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:14px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:14px;height:8px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px;padding-bottom:30px"
+    >
+      <div
+        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:2px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:2px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:2px;height:8px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px;padding-bottom:30px"
+    >
+      <div
+        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:20px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:20px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:20px;height:20px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:30px"
+    >
+      <div
+        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:30px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:30px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:20px;height:30px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>,
 ]
 `;
 

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

@@ -328,49 +328,51 @@ Array [
 exports[`renders ./components/progress/demo/circle-micro.tsx correctly 1`] = `
 Array [
   <div
-    class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+    class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
     role="progressbar"
   >
     <div
       class="ant-progress-inner"
       style="width:14px;height:14px;font-size:8.1px"
     >
-      <svg
-        class="ant-progress-circle"
-        role="presentation"
-        viewBox="-50 -50 100 100"
-      >
-        <circle
-          class="ant-progress-circle-trail"
-          cx="0"
-          cy="0"
-          r="40"
-          stroke="#e6f4ff"
-          stroke-linecap="round"
-          stroke-width="20"
-          style="stroke:#e6f4ff;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
-        />
-        <circle
-          class="ant-progress-circle-path"
-          cx="0"
-          cy="0"
-          opacity="1"
-          r="40"
-          stroke-linecap="round"
-          stroke-width="20"
-          style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:110.53096491487338;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
-        />
-        <circle
-          class="ant-progress-circle-path"
-          cx="0"
-          cy="0"
-          opacity="0"
-          r="40"
-          stroke-linecap="round"
-          stroke-width="20"
-          style="stroke:#52C41A;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:251.31741228718346;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
-        />
-      </svg>
+      <span>
+        <svg
+          class="ant-progress-circle"
+          role="presentation"
+          viewBox="-50 -50 100 100"
+        >
+          <circle
+            class="ant-progress-circle-trail"
+            cx="0"
+            cy="0"
+            r="40"
+            stroke="#e6f4ff"
+            stroke-linecap="round"
+            stroke-width="20"
+            style="stroke:#e6f4ff;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="0"
+            cy="0"
+            opacity="1"
+            r="40"
+            stroke-linecap="round"
+            stroke-width="20"
+            style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:110.53096491487338;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+          <circle
+            class="ant-progress-circle-path"
+            cx="0"
+            cy="0"
+            opacity="0"
+            r="40"
+            stroke-linecap="round"
+            stroke-width="20"
+            style="stroke:#52C41A;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:251.31741228718346;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+          />
+        </svg>
+      </span>
     </div>
   </div>,
   <span
@@ -391,7 +393,7 @@ exports[`renders ./components/progress/demo/circle-mini.tsx correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+      class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
       role="progressbar"
     >
       <div
@@ -447,7 +449,7 @@ exports[`renders ./components/progress/demo/circle-mini.tsx correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <div
-      class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
+      class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info"
       role="progressbar"
     >
       <div
@@ -520,7 +522,7 @@ exports[`renders ./components/progress/demo/circle-mini.tsx correctly 1`] = `
     style="padding-bottom:8px"
   >
     <div
-      class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
+      class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info"
       role="progressbar"
     >
       <div
@@ -719,6 +721,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -925,6 +928,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -948,6 +952,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1148,6 +1153,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1171,6 +1177,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1194,6 +1201,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1234,6 +1242,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1274,6 +1283,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1298,6 +1308,7 @@ exports[`renders ./components/progress/demo/line-mini.tsx correctly 1`] = `
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:6px"
     >
       <div
         class="ant-progress-inner"
@@ -1321,6 +1332,7 @@ exports[`renders ./components/progress/demo/line-mini.tsx correctly 1`] = `
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:6px"
     >
       <div
         class="ant-progress-inner"
@@ -1344,6 +1356,7 @@ exports[`renders ./components/progress/demo/line-mini.tsx correctly 1`] = `
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:6px"
     >
       <div
         class="ant-progress-inner"
@@ -1384,6 +1397,7 @@ exports[`renders ./components/progress/demo/line-mini.tsx correctly 1`] = `
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:6px"
     >
       <div
         class="ant-progress-inner"
@@ -1429,6 +1443,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1575,6 +1590,7 @@ Array [
   >
     <div
       class="ant-progress-outer"
+      style="width:100%;height:8px"
     >
       <div
         class="ant-progress-inner"
@@ -1716,6 +1732,574 @@ Array [
 ]
 `;
 
+exports[`renders ./components/progress/demo/size.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-vertical"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-bottom:8px"
+    >
+      <div
+        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width:100%;height:8px"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width:50%;height:8px"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-bottom:8px"
+    >
+      <div
+        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width:100%;height:6px"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width:50%;height:6px"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-outer"
+          style="width:300px;height:20px"
+        >
+          <div
+            class="ant-progress-inner"
+          >
+            <div
+              class="ant-progress-bg"
+              style="width:50%;height:20px"
+            />
+          </div>
+        </div>
+        <span
+          class="ant-progress-text"
+          title="50%"
+        >
+          50%
+        </span>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:120px;height:120px;font-size:24px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:60px;height:60px;font-size:15px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:20px;height:20px;font-size:9px"
+        >
+          <span>
+            <svg
+              class="ant-progress-circle"
+              role="presentation"
+              viewBox="-50 -50 100 100"
+            >
+              <circle
+                class="ant-progress-circle-trail"
+                cx="0"
+                cy="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="1"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:120px;height:120px;font-size:24px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px"
+    >
+      <div
+        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:60px;height:60px;font-size:15px"
+        >
+          <svg
+            class="ant-progress-circle"
+            role="presentation"
+            viewBox="-50 -50 100 100"
+          >
+            <circle
+              class="ant-progress-circle-trail"
+              cx="0"
+              cy="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="1"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+            <circle
+              class="ant-progress-circle-path"
+              cx="0"
+              cy="0"
+              opacity="0"
+              r="47"
+              stroke-linecap="round"
+              stroke-width="6"
+              style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+            />
+          </svg>
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-inner"
+          style="width:20px;height:20px;font-size:9px"
+        >
+          <span>
+            <svg
+              class="ant-progress-circle"
+              role="presentation"
+              viewBox="-50 -50 100 100"
+            >
+              <circle
+                class="ant-progress-circle-trail"
+                cx="0"
+                cy="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="1"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+              <circle
+                class="ant-progress-circle-path"
+                cx="0"
+                cy="0"
+                opacity="0"
+                r="42.5"
+                stroke-linecap="round"
+                stroke-width="15"
+                style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-30px"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:30px;padding-bottom:30px"
+    >
+      <div
+        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:14px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:14px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:14px;height:8px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px;padding-bottom:30px"
+    >
+      <div
+        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-small"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:2px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:2px;height:8px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:2px;height:8px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:30px;padding-bottom:30px"
+    >
+      <div
+        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:20px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:20px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:20px;height:20px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:30px"
+    >
+      <div
+        class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info"
+        role="progressbar"
+      >
+        <div
+          class="ant-progress-steps-outer"
+        >
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:30px"
+          />
+          <div
+            class="ant-progress-steps-item ant-progress-steps-item-active"
+            style="width:20px;height:30px"
+          />
+          <div
+            class="ant-progress-steps-item"
+            style="width:20px;height:30px"
+          />
+          <span
+            class="ant-progress-text"
+            title="50%"
+          >
+            50%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/progress/demo/steps.tsx correctly 1`] = `
 Array [
   <div

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

@@ -169,6 +169,7 @@ exports[`Progress render format 1`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -199,6 +200,7 @@ exports[`Progress render negative progress 1`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -225,6 +227,7 @@ exports[`Progress render negative successPercent 1`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -255,6 +258,7 @@ exports[`Progress render normal progress 1`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -281,6 +285,7 @@ exports[`Progress render out-of-range progress 1`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -324,6 +329,7 @@ exports[`Progress render out-of-range progress with info 1`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -421,6 +427,7 @@ exports[`Progress render strokeColor 2`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -447,6 +454,7 @@ exports[`Progress render strokeColor 3`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -529,6 +537,7 @@ exports[`Progress render successColor progress 1`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -667,6 +676,7 @@ exports[`Progress render trailColor progress 1`] = `
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
@@ -694,6 +704,7 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
 >
   <div
     class="ant-progress-outer"
+    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"

components/progress/__tests__/index.test.tsx

@@ -232,6 +232,21 @@ describe('Progress', () => {
       'Warning: [antd: Progress] `success.progress` is deprecated. Please use `success.percent` instead.',
     );
   });
+  it('should warnning if use `width` prop', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<Progress percent={60} width={100} />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Progress] `width` is deprecated. Please use `size` instead.',
+    );
+  });
+
+  it('should warnning if use `strokeWidth` prop in type Line', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<Progress percent={60} strokeWidth={10} />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Progress] `strokeWidth` is deprecated. Please use `size` instead.',
+    );
+  });
 
   it('should warning if use `progress` in success in type Circle', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
@@ -241,6 +256,22 @@ describe('Progress', () => {
     );
   });
 
+  it('should warnning if pass number[] into `size` in type Circle', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<Progress size={[60, 20]} type="circle" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Progress] Type "circle" and "dashbord" do not accept array as `size`, please use number or preset size instead.',
+    );
+  });
+
+  it('should warnning if pass number[] into `size` in type dashboard', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<Progress size={[60, 20]} type="dashboard" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Progress] Type "circle" and "dashbord" do not accept array as `size`, please use number or preset size instead.',
+    );
+  });
+
   it('should update the percentage based on the value of percent', () => {
     const Content: React.FC = () => {
       const [percent, setPercent] = useState(0);
@@ -282,4 +313,51 @@ describe('Progress', () => {
       }).not.toThrow();
     });
   });
+
+  describe('progress size', () => {
+    const App = (props: { size: ProgressProps['size'] }) => (
+      <>
+        <Progress size={props.size} />
+        <Progress size={props.size} steps={3} />
+        <Progress type="circle" size={props.size} />
+        <Progress type="dashboard" size={props.size} />
+      </>
+    );
+
+    const { container, rerender } = render(<App size={30} />);
+    expect(container.querySelector('.ant-progress-line .ant-progress-outer')).toHaveStyle({
+      width: '30px',
+    });
+    expect(container.querySelector('.ant-progress-steps .ant-progress-steps-item')).toHaveStyle({
+      width: '30px',
+      height: '30px',
+    });
+    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[0]).toHaveStyle({
+      width: '30px',
+      height: '30px',
+    });
+    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[1]).toHaveStyle({
+      width: '30px',
+      height: '30px',
+    });
+
+    rerender(<App size={[60, 20]} />);
+
+    expect(container.querySelector('.ant-progress-line .ant-progress-outer')).toHaveStyle({
+      width: '60px',
+      height: '20px',
+    });
+    expect(container.querySelector('.ant-progress-steps .ant-progress-steps-item')).toHaveStyle({
+      width: '60px',
+      height: '20px',
+    });
+    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[0]).toHaveStyle({
+      width: '60px',
+      height: '60px',
+    });
+    expect(container.querySelectorAll('.ant-progress-circle .ant-progress-inner')[1]).toHaveStyle({
+      width: '60px',
+      height: '60px',
+    });
+  });
 });

components/progress/demo/circle-micro.tsx

@@ -8,7 +8,7 @@ const App: React.FC = () => (
       trailColor="#e6f4ff"
       percent={60}
       strokeWidth={20}
-      width={14}
+      size={14}
       format={(number) => `进行中，已完成${number}%`}
     />
     <span style={{ marginLeft: 8 }}>代码发布</span>

components/progress/demo/circle-mini.tsx

@@ -3,9 +3,9 @@ import { Progress, Space } from 'antd';
 
 const App: React.FC = () => (
   <Space wrap>
-    <Progress type="circle" percent={30} width={80} />
-    <Progress type="circle" percent={70} width={80} status="exception" />
-    <Progress type="circle" percent={100} width={80} />
+    <Progress type="circle" percent={30} size={80} />
+    <Progress type="circle" percent={70} size={80} status="exception" />
+    <Progress type="circle" percent={100} size={80} />
   </Space>
 );
 

components/progress/demo/size.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+进度条尺寸。
+
+## en-US
+
+The size of progress.

components/progress/demo/size.tsx

@@ -0,0 +1,36 @@
+import { Progress, Space } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <>
+    <Space direction="vertical">
+      <Progress percent={50} />
+      <Progress percent={50} size="small" />
+      <Progress percent={50} size={[300, 20]} />
+    </Space>
+    <br />
+    <br />
+    <Space size={30}>
+      <Progress type="circle" percent={50} />
+      <Progress type="circle" percent={50} size="small" />
+      <Progress type="circle" percent={50} size={20} />
+    </Space>
+    <br />
+    <br />
+    <Space size={30}>
+      <Progress type="dashboard" percent={50} />
+      <Progress type="dashboard" percent={50} size="small" />
+      <Progress type="dashboard" percent={50} size={20} />
+    </Space>
+    <br />
+    <br />
+    <Space size={30} wrap>
+      <Progress steps={3} percent={50} />
+      <Progress steps={3} percent={50} size="small" />
+      <Progress steps={3} percent={50} size={20} />
+      <Progress steps={3} percent={50} size={[20, 30]} />
+    </Space>
+  </>
+);
+
+export default App;

components/progress/index.en-US.md

@@ -33,22 +33,24 @@ If it will take a long time to complete an operation, you can use `Progress` to
 <code src="./demo/linecap.tsx">Stroke Linecap</code>
 <code src="./demo/gradient-line.tsx">Custom line gradient</code>
 <code src="./demo/steps.tsx">Progress bar with steps</code>
+<code src="./demo/size.tsx">Progress size</code>
 
 ## API
 
 Properties that shared by all types.
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` |
-| percent | To set the completion percentage | number | 0 |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` | - |
+| percent | To set the completion percentage | number | 0 | - |
 | showInfo | Whether to display the progress value and the status icon | boolean | true |
 | status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
-| strokeColor | The color of progress bar | string | - |
-| strokeLinecap | To set the style of the progress linecap | `round` \| `butt` \| `square`, see [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` |
-| success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - |
-| trailColor | The color of unfilled part | string | - |
+| strokeColor | The color of progress bar | string | - | - |
+| strokeLinecap | To set the style of the progress linecap | `round` \| `butt` \| `square`, see [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` | - |
+| success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - | - |
+| trailColor | The color of unfilled part | string | - | - |
 | type | To set the type, options: `line` `circle` `dashboard` | string | `line` |
+| size | Progress size | number \| \[number, number] \| "small" \| "default" | "default" | v5.3.0 |
 
 ### `type="line"`
 
@@ -56,15 +58,13 @@ Properties that shared by all types.
 | --- | --- | --- | --- | --- |
 | steps | The total step count | number | - | - |
 | strokeColor | The color of progress bar, render `linear-gradient` when passing an object, could accept `string[]` when has `steps`. | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: `string[]` |
-| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 | - |
 
 ### `type="circle"`
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - |
-| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
-| width | To set the canvas width of the circular progress, unit: `px` | number | 132 |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - | - |
+| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - |
 
 ### `type="dashboard"`
 
@@ -73,4 +73,3 @@ Properties that shared by all types.
 | gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 |
 | gapPosition | The gap position, options: `top` `bottom` `left` `right` | string | `bottom` |
 | strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
-| width | To set the canvas width of the dashboard progress, unit: `px` | number | 132 |

components/progress/index.zh-CN.md

@@ -34,22 +34,24 @@ demo:
 <code src="./demo/linecap.tsx">边缘形状</code>
 <code src="./demo/gradient-line.tsx">自定义进度条渐变色</code>
 <code src="./demo/steps.tsx">步骤进度条</code>
+<code src="./demo/size.tsx">尺寸</code>
 
 ## API
 
 各类型共用的属性。
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` |
-| percent | 百分比 | number | 0 |
-| showInfo | 是否显示进度数值或状态图标 | boolean | true |
-| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
-| strokeColor | 进度条的色彩 | string | - |
-| strokeLinecap | 进度条的样式 | `round` \| `butt` \| `square`，区别详见 [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` |
-| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - |
-| trailColor | 未完成的分段的颜色 | string | - |
-| type | 类型，可选 `line` `circle` `dashboard` | string | `line` |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` | - |
+| percent | 百分比 | number | 0 | - |
+| showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
+| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - | - |
+| strokeColor | 进度条的色彩 | string | - | - |
+| strokeLinecap | 进度条的样式 | `round` \| `butt` \| `square`，区别详见 [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` | - |
+| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
+| trailColor | 未完成的分段的颜色 | string | - | - |
+| type | 类型，可选 `line` `circle` `dashboard` | string | `line` | - |
+| size | 进度条的尺寸 | number \| \[number, number] \| "small" \| "default" | "default" | v5.3.0 |
 
 ### `type="line"`
 
@@ -57,21 +59,18 @@ demo:
 | --- | --- | --- | --- | --- |
 | steps | 进度条总共步数 | number | - | - |
 | strokeColor | 进度条的色彩，传入 object 时为渐变。当有 `steps` 时支持传入一个数组。 | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: `string[]` |
-| strokeWidth | 进度条线的宽度，单位 px | number | 10 | - |
 
 ### `type="circle"`
 
-| 属性        | 说明                                             | 类型             | 默认值 |
-| ----------- | ------------------------------------------------ | ---------------- | ------ |
-| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变         | string \| object | -      |
-| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number           | 6      |
-| width       | 圆形进度条画布宽度，单位 px                      | number           | 132    |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | - |
+| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
 
 ### `type="dashboard"`
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 |
-| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` |
-| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
-| width | 仪表盘进度条画布宽度，单位 px | number | 132 |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - |
+| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - |
+| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |

components/progress/progress.tsx

@@ -12,7 +12,7 @@ import Circle from './Circle';
 import Line from './Line';
 import Steps from './Steps';
 import useStyle from './style';
-import { getSuccessPercent, validProgress } from './utils';
+import { getSize, getSuccessPercent, validProgress } from './utils';
 
 export const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
 export type ProgressType = typeof ProgressTypes[number];
@@ -42,12 +42,13 @@ export interface ProgressProps {
   strokeLinecap?: 'butt' | 'square' | 'round';
   strokeColor?: string | string[] | ProgressGradient;
   trailColor?: string;
+  /** @deprecated Use `size` instead */
   width?: number;
   success?: SuccessProps;
   style?: React.CSSProperties;
   gapDegree?: number;
   gapPosition?: 'top' | 'bottom' | 'left' | 'right';
-  size?: ProgressSize;
+  size?: number | [number, number] | ProgressSize;
   steps?: number;
   /** @deprecated Use `success` instead */
   successPercent?: number;
@@ -112,11 +113,14 @@ const Progress: React.FC<ProgressProps> = (props) => {
     );
   }, [showInfo, percent, percentNumber, progressStatus, type, prefixCls, format]);
 
-  warning(
-    !('successPercent' in props),
-    'Progress',
-    '`successPercent` is deprecated. Please use `success.percent` instead.',
-  );
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      !('successPercent' in props),
+      'Progress',
+      '`successPercent` is deprecated. Please use `success.percent` instead.',
+    );
+    warning(!('width' in props), 'Progress', '`width` is deprecated. Please use `size` instead.');
+  }
 
   const strokeColorNotArray = Array.isArray(strokeColor) ? strokeColor[0] : strokeColor;
   const strokeColorNotGradient =
@@ -154,11 +158,11 @@ const Progress: React.FC<ProgressProps> = (props) => {
   const classString = classNames(
     prefixCls,
     {
-      [`${prefixCls}-inline-circle`]: type === 'circle' && props.width! <= 20,
+      [`${prefixCls}-inline-circle`]: type === 'circle' && getSize(size, 'circle')[0] <= 20,
       [`${prefixCls}-${(type === 'dashboard' && 'circle') || (steps && 'steps') || type}`]: true,
       [`${prefixCls}-status-${progressStatus}`]: true,
       [`${prefixCls}-show-info`]: showInfo,
-      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-${size}`]: typeof size === 'string',
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,

components/progress/utils.ts

@@ -35,10 +35,62 @@ export const getPercentage = ({ percent, success, successPercent }: ProgressProp
   return [realSuccessPercent, validProgress(validProgress(percent) - realSuccessPercent)];
 };
 
-export const getStrokeColor = ({
-  success = {},
-  strokeColor,
-}: Partial<CircleProps>): (string | Record<PropertyKey, string>)[] => {
+export const getStrokeColor = ({ success = {}, strokeColor }: Partial<CircleProps>): (
+  | string
+  | Record<PropertyKey, string>
+)[] => {
   const { strokeColor: successColor } = success;
   return [successColor || presetPrimaryColors.green, strokeColor || null!];
 };
+
+export const getSize = (
+  size: ProgressProps['size'],
+  type: ProgressProps['type'] | 'step',
+  extra?: {
+    steps?: number;
+    strokeWidth?: number;
+  },
+): [number, number] => {
+  let width: number = -1;
+  let height: number = -1;
+  if (type === 'step') {
+    const steps = extra!.steps!;
+    const strokeWidth = extra!.strokeWidth!;
+    if (typeof size === 'string' || typeof size === 'undefined') {
+      width = size === 'small' ? 2 : 14;
+      height = strokeWidth ?? 8;
+    } else if (typeof size === 'number') {
+      [width, height] = [size, size];
+    } else {
+      [width = 14, height = 8] = size;
+    }
+    width *= steps;
+  } else if (type === 'line') {
+    const strokeWidth = extra?.strokeWidth;
+    if (typeof size === 'string' || typeof size === 'undefined') {
+      height = strokeWidth || (size === 'small' ? 6 : 8);
+    } else if (typeof size === 'number') {
+      [width, height] = [size, size];
+    } else {
+      [width = -1, height = 8] = size;
+    }
+  } else if (type === 'circle' || type === 'dashboard') {
+    if (typeof size === 'string' || typeof size === 'undefined') {
+      [width, height] = size === 'small' ? [60, 60] : [120, 120];
+    } else if (typeof size === 'number') {
+      [width, height] = [size, size];
+    } else {
+      if (process.env.NODE_ENV !== 'production') {
+        warning(
+          false,
+          'Progress',
+          'Type "circle" and "dashbord" do not accept array as `size`, please use number or preset size instead.',
+        );
+      }
+
+      width = size[0] ?? size[1] ?? 120;
+      height = size[0] ?? size[1] ?? 120;
+    }
+  }
+  return [width, height];
+};

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

@@ -8,39 +8,34 @@ Array [
     src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
     width="100"
   />,
-  <div>
+  <div
+    class="ant-popover ant-popover-placement-top"
+    style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+  >
     <div
-      class="ant-popover"
-      style="opacity:0"
+      class="ant-popover-arrow"
+      style="position:absolute;bottom:0;left:0"
+    />
+    <div
+      class="ant-popover-content"
     >
       <div
-        class="ant-popover-content"
+        class="ant-popover-inner"
+        role="tooltip"
+        style="padding:0"
       >
         <div
-          class="ant-popover-arrow"
-        >
-          <span
-            class="ant-popover-arrow-content"
-          />
-        </div>
-        <div
-          class="ant-popover-inner"
-          role="tooltip"
-          style="padding:0"
+          class="ant-popover-inner-content"
         >
           <div
-            class="ant-popover-inner-content"
+            class="ant-qrcode ant-qrcode-borderless"
+            style="width:160px;height:160px"
           >
-            <div
-              class="ant-qrcode ant-qrcode-borderless"
-              style="width:160px;height:160px"
-            >
-              <canvas
-                height="134"
-                style="height:134px;width:134px"
-                width="134"
-              />
-            </div>
+            <canvas
+              height="134"
+              style="height:134px;width:134px"
+              width="134"
+            />
           </div>
         </div>
       </div>

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

@@ -2524,27 +2524,22 @@ exports[`renders ./components/rate/demo/text.tsx extend context correctly 1`] =
         </div>
       </div>
     </li>
-    <div>
+    <div
+      class="ant-tooltip ant-tooltip-placement-top"
+      style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+    >
       <div
-        class="ant-tooltip"
-        style="opacity:0"
+        class="ant-tooltip-arrow"
+        style="position:absolute;bottom:0;left:0"
+      />
+      <div
+        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-content"
+          class="ant-tooltip-inner"
+          role="tooltip"
         >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            terrible
-          </div>
+          terrible
         </div>
       </div>
     </div>
@@ -2606,27 +2601,22 @@ exports[`renders ./components/rate/demo/text.tsx extend context correctly 1`] =
         </div>
       </div>
     </li>
-    <div>
+    <div
+      class="ant-tooltip ant-tooltip-placement-top"
+      style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+    >
       <div
-        class="ant-tooltip"
-        style="opacity:0"
+        class="ant-tooltip-arrow"
+        style="position:absolute;bottom:0;left:0"
+      />
+      <div
+        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-content"
+          class="ant-tooltip-inner"
+          role="tooltip"
         >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            bad
-          </div>
+          bad
         </div>
       </div>
     </div>
@@ -2688,27 +2678,22 @@ exports[`renders ./components/rate/demo/text.tsx extend context correctly 1`] =
         </div>
       </div>
     </li>
-    <div>
+    <div
+      class="ant-tooltip ant-tooltip-placement-top"
+      style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+    >
       <div
-        class="ant-tooltip"
-        style="opacity:0"
+        class="ant-tooltip-arrow"
+        style="position:absolute;bottom:0;left:0"
+      />
+      <div
+        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-content"
+          class="ant-tooltip-inner"
+          role="tooltip"
         >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            normal
-          </div>
+          normal
         </div>
       </div>
     </div>
@@ -2770,27 +2755,22 @@ exports[`renders ./components/rate/demo/text.tsx extend context correctly 1`] =
         </div>
       </div>
     </li>
-    <div>
+    <div
+      class="ant-tooltip ant-tooltip-placement-top"
+      style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+    >
       <div
-        class="ant-tooltip"
-        style="opacity:0"
+        class="ant-tooltip-arrow"
+        style="position:absolute;bottom:0;left:0"
+      />
+      <div
+        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-content"
+          class="ant-tooltip-inner"
+          role="tooltip"
         >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            good
-          </div>
+          good
         </div>
       </div>
     </div>
@@ -2852,27 +2832,22 @@ exports[`renders ./components/rate/demo/text.tsx extend context correctly 1`] =
         </div>
       </div>
     </li>
-    <div>
+    <div
+      class="ant-tooltip ant-tooltip-placement-top"
+      style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+    >
       <div
-        class="ant-tooltip"
-        style="opacity:0"
+        class="ant-tooltip-arrow"
+        style="position:absolute;bottom:0;left:0"
+      />
+      <div
+        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-content"
+          class="ant-tooltip-inner"
+          role="tooltip"
         >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            wonderful
-          </div>
+          wonderful
         </div>
       </div>
     </div>

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

@@ -1311,56 +1311,54 @@ exports[`renders ./components/segmented/demo/size-consistent.tsx extend context
             Lucy
           </span>
         </div>
-        <div>
-          <div
-            class="ant-select-dropdown"
-            style="opacity:0"
-          >
-            <div>
+        <div
+          class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
+          style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+        >
+          <div>
+            <div
+              id="undefined_list"
+              role="listbox"
+              style="height:0;width:0;overflow:hidden"
+            >
               <div
-                id="undefined_list"
-                role="listbox"
-                style="height:0;width:0;overflow:hidden"
+                aria-label="Lucy"
+                aria-selected="true"
+                id="undefined_list_0"
+                role="option"
               >
-                <div
-                  aria-label="Lucy"
-                  aria-selected="true"
-                  id="undefined_list_0"
-                  role="option"
-                >
-                  lucy
-                </div>
+                lucy
               </div>
+            </div>
+            <div
+              class="rc-virtual-list"
+              style="position:relative"
+            >
               <div
-                class="rc-virtual-list"
-                style="position:relative"
+                class="rc-virtual-list-holder"
+                style="max-height:256px;overflow-y:auto;overflow-anchor:none"
               >
-                <div
-                  class="rc-virtual-list-holder"
-                  style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                >
-                  <div>
+                <div>
+                  <div
+                    class="rc-virtual-list-holder-inner"
+                    style="display:flex;flex-direction:column"
+                  >
                     <div
-                      class="rc-virtual-list-holder-inner"
-                      style="display:flex;flex-direction:column"
+                      aria-selected="true"
+                      class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                      title="Lucy"
                     >
                       <div
-                        aria-selected="true"
-                        class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                        title="Lucy"
+                        class="ant-select-item-option-content"
                       >
-                        <div
-                          class="ant-select-item-option-content"
-                        >
-                          Lucy
-                        </div>
-                        <span
-                          aria-hidden="true"
-                          class="ant-select-item-option-state"
-                          style="user-select:none;-webkit-user-select:none"
-                          unselectable="on"
-                        />
+                        Lucy
                       </div>
+                      <span
+                        aria-hidden="true"
+                        class="ant-select-item-option-state"
+                        style="user-select:none;-webkit-user-select:none"
+                        unselectable="on"
+                      />
                     </div>
                   </div>
                 </div>

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

@@ -52,27 +52,22 @@ exports[`Slider should render in RTL direction 1`] = `
       style="right: 30%; transform: translateX(50%);"
       tabindex="0"
     />
-    <div>
+    <div
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-rtl ant-tooltip-placement-top"
+      style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
+    >
       <div
-        class="ant-tooltip ant-slider-tooltip ant-tooltip-rtl ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-        style="opacity: 0;"
+        class="ant-tooltip-arrow"
+        style="position: absolute; bottom: 0px; left: 0px;"
+      />
+      <div
+        class="ant-tooltip-content"
       >
         <div
-          class="ant-tooltip-content"
+          class="ant-tooltip-inner"
+          role="tooltip"
         >
-          <div
-            class="ant-tooltip-arrow"
-          >
-            <span
-              class="ant-tooltip-arrow-content"
-            />
-          </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          >
-            30
-          </div>
+          30
         </div>
       </div>
     </div>
@@ -82,19 +77,16 @@ exports[`Slider should render in RTL direction 1`] = `
 
 exports[`Slider should show tooltip when hovering slider handler 1`] = `
 <div
-  class="ant-tooltip ant-slider-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-  style="opacity: 0;"
+  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
+  style="left: -1000vw; top: -1000vh; box-sizing: border-box;"
 >
+  <div
+    class="ant-tooltip-arrow"
+    style="position: absolute; bottom: 0px; left: 0px;"
+  />
   <div
     class="ant-tooltip-content"
   >
-    <div
-      class="ant-tooltip-arrow"
-    >
-      <span
-        class="ant-tooltip-arrow-content"
-      />
-    </div>
     <div
       class="ant-tooltip-inner"
       role="tooltip"
@@ -107,19 +99,16 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
 
 exports[`Slider should show tooltip when hovering slider handler 2`] = `
 <div
-  class="ant-tooltip ant-slider-tooltip ant-zoom-big-fast-leave ant-zoom-big-fast-leave-start ant-zoom-big-fast"
-  style="pointer-events: none;"
+  class="ant-tooltip ant-zoom-big-fast-leave ant-zoom-big-fast-leave-start ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
+  style="left: 0px; top: 0px; box-sizing: border-box; pointer-events: none;"
 >
+  <div
+    class="ant-tooltip-arrow"
+    style="position: absolute; bottom: 0px; left: 0px;"
+  />
   <div
     class="ant-tooltip-content"
   >
-    <div
-      class="ant-tooltip-arrow"
-    >
-      <span
-        class="ant-tooltip-arrow-content"
-      />
-    </div>
     <div
       class="ant-tooltip-inner"
       role="tooltip"

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

@@ -255,38 +255,33 @@ exports[`renders ./components/steps/demo/customized-progress-dot.tsx extend cont
           <span
             class="ant-steps-icon-dot"
           />
-          <div>
+          <div
+            class="ant-popover ant-popover-placement-top"
+            style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+          >
             <div
-              class="ant-popover"
-              style="opacity:0"
+              class="ant-popover-arrow"
+              style="position:absolute;bottom:0;left:0"
+            />
+            <div
+              class="ant-popover-content"
             >
               <div
-                class="ant-popover-content"
+                class="ant-popover-inner"
+                role="tooltip"
               >
                 <div
-                  class="ant-popover-arrow"
+                  class="ant-popover-inner-content"
                 >
-                  <span
-                    class="ant-popover-arrow-content"
-                  />
-                </div>
-                <div
-                  class="ant-popover-inner"
-                  role="tooltip"
-                >
-                  <div
-                    class="ant-popover-inner-content"
-                  >
-                    <span>
-                      step
-                      <!-- -->
-                      0
-                      <!-- -->
-                       status:
-                      <!-- -->
-                      finish
-                    </span>
-                  </div>
+                  <span>
+                    step
+                    <!-- -->
+                    0
+                    <!-- -->
+                     status:
+                    <!-- -->
+                    finish
+                  </span>
                 </div>
               </div>
             </div>
@@ -327,38 +322,33 @@ exports[`renders ./components/steps/demo/customized-progress-dot.tsx extend cont
           <span
             class="ant-steps-icon-dot"
           />
-          <div>
+          <div
+            class="ant-popover ant-popover-placement-top"
+            style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+          >
             <div
-              class="ant-popover"
-              style="opacity:0"
+              class="ant-popover-arrow"
+              style="position:absolute;bottom:0;left:0"
+            />
+            <div
+              class="ant-popover-content"
             >
               <div
-                class="ant-popover-content"
+                class="ant-popover-inner"
+                role="tooltip"
               >
                 <div
-                  class="ant-popover-arrow"
+                  class="ant-popover-inner-content"
                 >
-                  <span
-                    class="ant-popover-arrow-content"
-                  />
-                </div>
-                <div
-                  class="ant-popover-inner"
-                  role="tooltip"
-                >
-                  <div
-                    class="ant-popover-inner-content"
-                  >
-                    <span>
-                      step
-                      <!-- -->
-                      1
-                      <!-- -->
-                       status:
-                      <!-- -->
-                      process
-                    </span>
-                  </div>
+                  <span>
+                    step
+                    <!-- -->
+                    1
+                    <!-- -->
+                     status:
+                    <!-- -->
+                    process
+                  </span>
                 </div>
               </div>
             </div>
@@ -399,38 +389,33 @@ exports[`renders ./components/steps/demo/customized-progress-dot.tsx extend cont
           <span
             class="ant-steps-icon-dot"
           />
-          <div>
+          <div
+            class="ant-popover ant-popover-placement-top"
+            style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+          >
             <div
-              class="ant-popover"
-              style="opacity:0"
+              class="ant-popover-arrow"
+              style="position:absolute;bottom:0;left:0"
+            />
+            <div
+              class="ant-popover-content"
             >
               <div
-                class="ant-popover-content"
+                class="ant-popover-inner"
+                role="tooltip"
               >
                 <div
-                  class="ant-popover-arrow"
+                  class="ant-popover-inner-content"
                 >
-                  <span
-                    class="ant-popover-arrow-content"
-                  />
-                </div>
-                <div
-                  class="ant-popover-inner"
-                  role="tooltip"
-                >
-                  <div
-                    class="ant-popover-inner-content"
-                  >
-                    <span>
-                      step
-                      <!-- -->
-                      2
-                      <!-- -->
-                       status:
-                      <!-- -->
-                      wait
-                    </span>
-                  </div>
+                  <span>
+                    step
+                    <!-- -->
+                    2
+                    <!-- -->
+                     status:
+                    <!-- -->
+                    wait
+                  </span>
                 </div>
               </div>
             </div>
@@ -471,38 +456,33 @@ exports[`renders ./components/steps/demo/customized-progress-dot.tsx extend cont
           <span
             class="ant-steps-icon-dot"
           />
-          <div>
+          <div
+            class="ant-popover ant-popover-placement-top"
+            style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+          >
             <div
-              class="ant-popover"
-              style="opacity:0"
+              class="ant-popover-arrow"
+              style="position:absolute;bottom:0;left:0"
+            />
+            <div
+              class="ant-popover-content"
             >
               <div
-                class="ant-popover-content"
+                class="ant-popover-inner"
+                role="tooltip"
               >
                 <div
-                  class="ant-popover-arrow"
+                  class="ant-popover-inner-content"
                 >
-                  <span
-                    class="ant-popover-arrow-content"
-                  />
-                </div>
-                <div
-                  class="ant-popover-inner"
-                  role="tooltip"
-                >
-                  <div
-                    class="ant-popover-inner-content"
-                  >
-                    <span>
-                      step
-                      <!-- -->
-                      3
-                      <!-- -->
-                       status:
-                      <!-- -->
-                      wait
-                    </span>
-                  </div>
+                  <span>
+                    step
+                    <!-- -->
+                    3
+                    <!-- -->
+                     status:
+                    <!-- -->
+                    wait
+                  </span>
                 </div>
               </div>
             </div>
@@ -958,27 +938,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 1.
-                    </div>
+                    This is a Step 1.
                   </div>
                 </div>
               </div>
@@ -1018,27 +993,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 2.
-                    </div>
+                    This is a Step 2.
                   </div>
                 </div>
               </div>
@@ -1078,27 +1048,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 3.
-                    </div>
+                    This is a Step 3.
                   </div>
                 </div>
               </div>
@@ -1180,27 +1145,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 1.
-                    </div>
+                    This is a Step 1.
                   </div>
                 </div>
               </div>
@@ -1240,27 +1200,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 2.
-                    </div>
+                    This is a Step 2.
                   </div>
                 </div>
               </div>
@@ -1300,27 +1255,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 3.
-                    </div>
+                    This is a Step 3.
                   </div>
                 </div>
               </div>
@@ -1402,27 +1352,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 1.
-                    </div>
+                    This is a Step 1.
                   </div>
                 </div>
               </div>
@@ -1462,27 +1407,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 2.
-                    </div>
+                    This is a Step 2.
                   </div>
                 </div>
               </div>
@@ -1522,27 +1462,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 3.
-                    </div>
+                    This is a Step 3.
                   </div>
                 </div>
               </div>
@@ -1624,27 +1559,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 1.
-                    </div>
+                    This is a Step 1.
                   </div>
                 </div>
               </div>
@@ -1684,27 +1614,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 2.
-                    </div>
+                    This is a Step 2.
                   </div>
                 </div>
               </div>
@@ -1744,27 +1669,22 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                class="ant-tooltip ant-tooltip-placement-top"
+                style="left:-1000vw;top:-1000vh;box-sizing:border-box"
+              >
                 <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip-arrow"
+                  style="position:absolute;bottom:0;left:0"
+                />
+                <div
+                  class="ant-tooltip-content"
                 >
                   <div
-                    class="ant-tooltip-content"
+                    class="ant-tooltip-inner"
+                    role="tooltip"
                   >
-                    <div
-                      class="ant-tooltip-arrow"
-                    >
-                      <span
-                        class="ant-tooltip-arrow-content"
-                      />
-                    </div>
-                    <div
-                      class="ant-tooltip-inner"
-                      role="tooltip"
-                    >
-                      This is a Step 3.
-                    </div>
+                    This is a Step 3.
                   </div>
                 </div>
               </div>
@@ -1975,7 +1895,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
-              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
               <div
@@ -2741,7 +2661,7 @@ exports[`renders ./components/steps/demo/progress.tsx extend context correctly 1
           class="ant-steps-progress-icon"
         >
           <div
-            class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+            class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
             role="progressbar"
           >
             <div
@@ -2988,7 +2908,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
-              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
               <div
@@ -3170,7 +3090,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
-              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
               <div
@@ -3352,7 +3272,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
-              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
               <div
@@ -3534,7 +3454,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
-              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
               <div

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

@@ -1543,7 +1543,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
-              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
               <div
@@ -2309,7 +2309,7 @@ exports[`renders ./components/steps/demo/progress.tsx correctly 1`] = `
           class="ant-steps-progress-icon"
         >
           <div
-            class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+            class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
             role="progressbar"
           >
             <div
@@ -2556,7 +2556,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
-              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
               <div
@@ -2738,7 +2738,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
-              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
               <div
@@ -2920,7 +2920,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
-              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
               <div
@@ -3102,7 +3102,7 @@ Array [
             class="ant-steps-progress-icon"
           >
             <div
-              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
+              class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info"
               role="progressbar"
             >
               <div

components/steps/index.tsx

@@ -106,7 +106,7 @@ const Steps: CompoundedComponent = (props) => {
           <Progress
             type="circle"
             percent={mergedPercent}
-            width={progressWidth}
+            size={progressWidth}
             strokeWidth={4}
             format={() => null}
           />

components/style/index.ts

@@ -1,10 +1,10 @@
 /* eslint-disable import/prefer-default-export */
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../theme/internal';
+import type { AliasToken, DerivativeToken } from '../theme/internal';
 
 export { operationUnit } from './operationUnit';
-export { roundedArrow } from './roundedArrow';
 export { genPresetColor } from './presetColor';
+export { roundedArrow } from './roundedArrow';
 
 export const textEllipsis: CSSObject = {
   overflow: 'hidden',
@@ -126,8 +126,8 @@ export const genCommonStyle = (token: DerivativeToken, componentPrefixCls: strin
   };
 };
 
-export const genFocusOutline = (token: DerivativeToken): CSSObject => ({
-  outline: `${token.lineWidth * 4}px solid ${token.colorPrimaryBorder}`,
+export const genFocusOutline = (token: AliasToken): CSSObject => ({
+  outline: `${token.lineWidthFocus}px solid ${token.colorPrimaryBorder}`,
   outlineOffset: 1,
   transition: 'outline-offset 0s, outline 0s',
 });