chore: replace "ant" with defaultPrefixCls (#49985)

* chore: replace ant with defaultPrefixCls

* chore: fix lint

components/_util/motion.ts

@@ -1,6 +1,8 @@
 import type { CSSMotionProps, MotionEndEventHandler, MotionEventHandler } from 'rc-motion';
 import type { MotionEvent } from 'rc-motion/lib/interface';
 
+import { defaultPrefixCls } from '../config-provider';
+
 // ================== Collapse Motion ==================
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = (node) => {
@@ -11,7 +13,7 @@ const getCurrentHeight: MotionEventHandler = (node) => ({ height: node ? node.of
 const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
   event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
 
-const initCollapseMotion = (rootCls = 'ant'): CSSMotionProps => ({
+const initCollapseMotion = (rootCls = defaultPrefixCls): CSSMotionProps => ({
   motionName: `${rootCls}-motion-collapse`,
   onAppearStart: getCollapsedHeight,
   onEnterStart: getCollapsedHeight,

components/config-provider/__tests__/static.test.ts

@@ -1,8 +1,8 @@
-import ConfigProvider, { globalConfig } from '..';
+import ConfigProvider, { defaultPrefixCls, globalConfig } from '..';
 
 describe('ConfigProvider.config', () => {
   it('rootPrefixCls', () => {
-    expect(globalConfig().getRootPrefixCls()).toEqual('ant');
+    expect(globalConfig().getRootPrefixCls()).toEqual(defaultPrefixCls);
 
     ConfigProvider.config({
       prefixCls: 'light',

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

@@ -73,10 +73,18 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 
 Setting `Modal`、`Message`、`Notification` static config. Not work on hooks.
 
-```ts
+```tsx
 ConfigProvider.config({
-// 5.13.0+
-  holderRender: (children) => <ConfigProvider prefixCls="ant" iconPrefixCls='anticon' theme={{token: { colorPrimary: 'red' }}}>{children}</ConfigProvider>
+  // 5.13.0+
+  holderRender: (children) => (
+    <ConfigProvider
+      prefixCls="ant"
+      iconPrefixCls="anticon"
+      theme={{ token: { colorPrimary: 'red' } }}
+    >
+      {children}
+    </ConfigProvider>
+  ),
 });
 ```
 

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

@@ -74,10 +74,18 @@ export default Demo;
 
 设置 `Modal`、`Message`、`Notification` 静态方法配置，只会对非 hooks 的静态方法调用生效。
 
-```ts
+```tsx
 ConfigProvider.config({
   // 5.13.0+
-  holderRender: (children) => <ConfigProvider prefixCls="ant" iconPrefixCls='anticon' theme={{token: { colorPrimary: 'red' }}}>{children}</ConfigProvider>
+  holderRender: (children) => (
+    <ConfigProvider
+      prefixCls="ant"
+      iconPrefixCls="anticon"
+      theme={{ token: { colorPrimary: 'red' } }}
+    >
+      {children}
+    </ConfigProvider>
+  ),
 });
 ```
 

components/message/__tests__/config.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import message, { actDestroy, actWrapper } from '..';
 import { act } from '../../../tests/utils';
 import App from '../../app';
-import ConfigProvider from '../../config-provider';
+import ConfigProvider, { defaultPrefixCls } from '../../config-provider';
 import { awaitPromise, triggerMotionEnd } from './util';
 
 describe('message.config', () => {
@@ -147,7 +147,7 @@ describe('message.config', () => {
     expect(document.querySelectorAll('.ant-message-notice')).toHaveLength(0);
     expect(document.querySelectorAll('.prefix-test-message-notice')).toHaveLength(1);
     expect(document.querySelectorAll('.bamboo-info-circle')).toHaveLength(1);
-    ConfigProvider.config({ prefixCls: 'ant', iconPrefixCls: null! });
+    ConfigProvider.config({ prefixCls: defaultPrefixCls, iconPrefixCls: null! });
   });
 
   it('should be able to config prefixCls', async () => {

components/modal/__tests__/confirm.test.tsx

@@ -8,7 +8,7 @@ import { resetWarned } from 'rc-util/lib/warning';
 import type { ModalFuncProps } from '..';
 import Modal from '..';
 import { act, fireEvent, waitFakeTimer } from '../../../tests/utils';
-import ConfigProvider from '../../config-provider';
+import ConfigProvider, { defaultPrefixCls } from '../../config-provider';
 import type { ModalFunc } from '../confirm';
 import destroyFns from '../destroyFns';
 
@@ -582,7 +582,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     expect(document.querySelectorAll('.my-btn').length).toBe(2);
     expect(document.querySelectorAll('.bamboo-smile').length).toBe(1);
     expect(document.querySelectorAll('.my-modal-confirm').length).toBe(1);
-    ConfigProvider.config({ prefixCls: 'ant', iconPrefixCls: undefined });
+    ConfigProvider.config({ prefixCls: defaultPrefixCls, iconPrefixCls: undefined });
   });
 
   it('should be able to config rootPrefixCls', async () => {

components/notification/__tests__/index.test.tsx

@@ -3,7 +3,7 @@ import { UserOutlined } from '@ant-design/icons';
 
 import notification, { actWrapper } from '..';
 import { act, fireEvent } from '../../../tests/utils';
-import ConfigProvider from '../../config-provider';
+import ConfigProvider, { defaultPrefixCls } from '../../config-provider';
 import { awaitPromise, triggerMotionEnd } from './util';
 
 describe('notification', () => {
@@ -136,7 +136,7 @@ describe('notification', () => {
     expect(document.querySelectorAll('.prefix-test-notification-notice')).toHaveLength(1);
     expect(document.querySelectorAll('.bamboo-check-circle')).toHaveLength(1);
 
-    ConfigProvider.config({ prefixCls: 'ant', iconPrefixCls: null! });
+    ConfigProvider.config({ prefixCls: defaultPrefixCls, iconPrefixCls: null! });
   });
 
   it('should be able to config prefixCls', async () => {

docs/blog/config-provider-style.en-US.md

@@ -81,11 +81,12 @@ const useButtonStyle = () => {
   }))();
 };
 
-function GeekProvider(props: React.PropsWithChildren) {
+const GeekProvider: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
   const { styles } = useButtonStyle();
-
   return <ConfigProvider button={{ className: styles.btn }}>{props.children}</ConfigProvider>;
-}
+};
+
+export default GeekProvider;
 ```
 
 <img alt="Red Button" height="40" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PvYITqIk2_8AAAAAAAAAAAAADrJ8AQ/original" />
@@ -93,16 +94,20 @@ function GeekProvider(props: React.PropsWithChildren) {
 It's also easy to extend for scenarios that need to inherit `className`:
 
 ```tsx
-function GeekProvider(props: React.PropsWithChildren) {
+import React from 'react';
+import { ConfigProvider } from 'antd';
+
+const GeekProvider: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
   const { button } = React.useContext(ConfigProvider.ConfigContext);
   const { styles } = useButtonStyle();
-
   return (
     <ConfigProvider button={{ className: classNames(button?.className, styles.btn) }}>
       {props.children}
     </ConfigProvider>
   );
-}
+};
+
+export default GeekProvider;
 ```
 
 ## Summary

docs/blog/config-provider-style.zh-CN.md

@@ -81,11 +81,12 @@ const useButtonStyle = () => {
   }))();
 };
 
-function GeekProvider(props: { children?: React.ReactNode }) {
+const GeekProvider: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
   const { styles } = useButtonStyle();
-
   return <ConfigProvider button={{ className: styles.btn }}>{props.children}</ConfigProvider>;
-}
+};
+
+export default GeekProvider;
 ```
 
 <img alt="Red Button" height="40" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PvYITqIk2_8AAAAAAAAAAAAADrJ8AQ/original" />
@@ -93,16 +94,20 @@ function GeekProvider(props: { children?: React.ReactNode }) {
 对需要继承 `className` 的场景，拓展也很容易：
 
 ```tsx
-function GeekProvider(props: { children?: React.ReactNode }) {
+import React from 'react';
+import { ConfigProvider } from 'antd';
+
+const GeekProvider: React.FC<Readonly<React.PropsWithChildren>> = (props) => {
   const { button } = React.useContext(ConfigProvider.ConfigContext);
   const { styles } = useButtonStyle();
-
   return (
     <ConfigProvider button={{ className: classNames(button?.className, styles.btn) }}>
       {props.children}
     </ConfigProvider>
   );
-}
+};
+
+export default GeekProvider;
 ```
 
 ## 总结