Merge remote-tracking branch 'origin/feature' into fix-status

.dumi/pages/index/components/Theme/index.tsx

@@ -483,6 +483,7 @@ export default function Theme() {
                 openKeys={['Design']}
                 style={{ height: '100%', borderRight: 0 }}
                 items={sideMenuItems}
+                expandIcon={false}
               />
             </Sider>
             <Layout className={styles.transBg} style={{ padding: '0 24px 24px' }}>

.dumi/theme/common/styles/Markdown.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
 import { css, Global } from '@emotion/react';
-import React from 'react';
 import { useTheme } from 'antd-style';
 
 const GlobalStyle: React.FC = () => {
@@ -26,6 +26,8 @@ const GlobalStyle: React.FC = () => {
         .markdown img {
           max-width: calc(100% - 32px);
           max-height: 100%;
+          display: block;
+          margin: 0 auto;
         }
 
         .markdown p > img {

.gitignore

@@ -68,3 +68,4 @@ __image_snapshots__/
 .husky/prepare-commit-msg
 
 .eslintcache
+.node-version

components/_util/responsiveObserver.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import type { GlobalToken } from '../theme/interface';
 import { useToken } from '../theme/internal';
 
@@ -124,3 +125,14 @@ export default function useResponsiveObserver() {
     };
   }, [token]);
 }
+
+export const matchScreen = (screens: ScreenMap, screenSizes?: ScreenSizeMap) => {
+  if (screenSizes && typeof screenSizes === 'object') {
+    for (let i = 0; i < responsiveArray.length; i++) {
+      const breakpoint: Breakpoint = responsiveArray[i];
+      if (screens[breakpoint] && screenSizes[breakpoint] !== undefined) {
+        return screenSizes[breakpoint];
+      }
+    }
+  }
+};

components/_util/wave/useWave.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useEvent from 'rc-util/lib/hooks/useEvent';
+import { useEvent } from 'rc-util';
 import raf from 'rc-util/lib/raf';
 import showWaveEffect from './WaveEffect';
 import { ConfigContext } from '../../config-provider';

components/alert/__tests__/demo-extend.test.ts

@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('alert', { skip: ['loop-banner.tsx'] });
+extendTest('alert', { skip: ['loop-banner.tsx', 'component-token.tsx'] });

components/alert/__tests__/demo.test.ts

@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('alert', { skip: ['loop-banner.tsx'] });
+demoTest('alert', { skip: ['loop-banner.tsx', 'component-token.tsx'] });

components/alert/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+自定义组件 Token。
+
+## en-US
+
+Custom component token.

components/alert/demo/component-token.tsx

@@ -0,0 +1,28 @@
+import { SmileOutlined } from '@ant-design/icons';
+import React from 'react';
+import { Alert, ConfigProvider } from 'antd';
+
+const icon = <SmileOutlined />;
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Alert: {
+          withDescriptionIconSize: 32,
+          withDescriptionPadding: 16,
+        },
+      },
+    }}
+  >
+    <Alert
+      icon={icon}
+      message="Success Tips"
+      description="Detailed description and advices about successful copywriting."
+      type="success"
+      showIcon
+    />
+  </ConfigProvider>
+);
+
+export default App;

components/alert/index.en-US.md

@@ -31,6 +31,7 @@ Alert component for feedback.
 <code src="./demo/error-boundary.tsx">ErrorBoundary</code>
 <code src="./demo/custom-icon.tsx" debug>Custom Icon</code>
 <code src="./demo/action.tsx">Custom action</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

components/alert/index.zh-CN.md

@@ -32,6 +32,7 @@ group:
 <code src="./demo/error-boundary.tsx">React 错误处理</code>
 <code src="./demo/custom-icon.tsx" debug>自定义图标</code>
 <code src="./demo/action.tsx">操作</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

components/alert/style/index.ts

@@ -1,13 +1,30 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import type { CSSProperties } from 'react';
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-
-export interface ComponentToken {}
+import { genComponentStyleHook } from '../../theme/internal';
+
+export interface ComponentToken {
+  // Component token here
+  /**
+   * @desc 默认内间距
+   * @descEN Default padding
+   */
+  defaultPadding: CSSProperties['padding'];
+  /**
+   * @desc 带有描述的内间距
+   * @descEN Padding with description
+   */
+  withDescriptionPadding: CSSProperties['padding'];
+  /**
+   * @desc 带有描述时的图标尺寸
+   * @descEN Icon size with description
+   */
+  withDescriptionIconSize: number;
+}
 
 type AlertToken = FullToken<'Alert'> & {
-  alertIconSizeLG: number;
-  alertPaddingHorizontal: number;
+  // Custom token here
 };
 
 const genAlertTypeStyle = (
@@ -35,13 +52,11 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
     lineHeight,
     borderRadiusLG: borderRadius,
     motionEaseInOutCirc,
-    alertIconSizeLG,
+    withDescriptionIconSize,
     colorText,
-    paddingContentVerticalSM,
-    alertPaddingHorizontal,
-    paddingMD,
-    paddingContentHorizontalLG,
     colorTextHeading,
+    withDescriptionPadding,
+    defaultPadding,
   } = token;
 
   return {
@@ -50,7 +65,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
-      padding: `${paddingContentVerticalSM}px ${alertPaddingHorizontal}px`, // Fixed horizontal padding here.
+      padding: defaultPadding,
       wordWrap: 'break-word',
       borderRadius,
 
@@ -75,7 +90,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
       },
 
       '&-message': {
-        color: colorText,
+        color: colorTextHeading,
       },
 
       [`&${componentCls}-motion-leave`]: {
@@ -97,12 +112,11 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
 
     [`${componentCls}-with-description`]: {
       alignItems: 'flex-start',
-      paddingInline: paddingContentHorizontalLG,
-      paddingBlock: paddingMD,
+      padding: withDescriptionPadding,
 
       [`${componentCls}-icon`]: {
         marginInlineEnd: marginSM,
-        fontSize: alertIconSizeLG,
+        fontSize: withDescriptionIconSize,
         lineHeight: 0,
       },
 
@@ -115,6 +129,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
 
       [`${componentCls}-description`]: {
         display: 'block',
+        color: colorText,
       },
     },
 
@@ -229,13 +244,16 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
   genActionStyle(token),
 ];
 
-export default genComponentStyleHook('Alert', (token) => {
-  const { fontSizeHeading3 } = token;
-
-  const alertToken = mergeToken<AlertToken>(token, {
-    alertIconSizeLG: fontSizeHeading3,
-    alertPaddingHorizontal: 12, // Fixed value here.
-  });
-
-  return [genAlertStyle(alertToken)];
-});
+export default genComponentStyleHook(
+  'Alert',
+  (token) => [genAlertStyle(token)],
+  (token) => {
+    const paddingHorizontal = 12; // Fixed value here.
+
+    return {
+      withDescriptionIconSize: token.fontSizeHeading3,
+      defaultPadding: `${token.paddingContentVerticalSM}px ${paddingHorizontal}px`,
+      withDescriptionPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
+    };
+  },
+);

components/anchor/Anchor.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import useEvent from 'rc-util/lib/hooks/useEvent';
+import { useEvent } from 'rc-util';
 import * as React from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 

components/auto-complete/__tests__/demo.test.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
+
+demoTest('auto-complete', {
+  testRootProps: false,
+});
+
+rootPropsTest(
+  'auto-complete',
+  (AutoComplete, props) => <AutoComplete {...props} options={[{ value: 'ddd' }]} />,
+  {
+    findRootElements: () => document.querySelectorAll('.ant-select, .ant-select-dropdown'),
+    expectCount: 2,
+  },
+);

components/avatar/AvatarContext.ts

@@ -8,6 +8,6 @@ export interface AvatarContextType {
   shape?: 'circle' | 'square';
 }
 
-const AvatarContext = React.createContext<AvatarContextType>({ size: 'default', shape: undefined });
+const AvatarContext = React.createContext<AvatarContextType>({});
 
 export default AvatarContext;

components/avatar/__tests__/Avatar.test.tsx

@@ -4,6 +4,7 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
 import useBreakpoint from '../../grid/hooks/useBreakpoint';
+import ConfigProvider from '../../config-provider';
 
 jest.mock('../../grid/hooks/useBreakpoint');
 
@@ -205,4 +206,19 @@ describe('Avatar Render', () => {
     expect(avatars?.[2]).toHaveClass('ant-avatar-square');
     expect(avatars?.[3]).toHaveClass('ant-avatar-circle');
   });
+
+  it('should apply the componentSize of CP', () => {
+    const { container } = render(
+      <>
+        <ConfigProvider componentSize="small">
+          <Avatar>test</Avatar>
+        </ConfigProvider>
+        <ConfigProvider componentSize="large">
+          <Avatar>test</Avatar>
+        </ConfigProvider>
+      </>,
+    );
+    expect(container.querySelector('.ant-avatar-sm')).toBeTruthy();
+    expect(container.querySelector('.ant-avatar-lg')).toBeTruthy();
+  });
 });

components/avatar/avatar.tsx

@@ -10,6 +10,7 @@ import useBreakpoint from '../grid/hooks/useBreakpoint';
 import type { AvatarContextType, AvatarSize } from './AvatarContext';
 import AvatarContext from './AvatarContext';
 import useStyle from './style';
+import useSize from '../config-provider/hooks/useSize';
 
 export interface AvatarProps {
   /** Shape of avatar, options: `circle`, `square` */
@@ -93,7 +94,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
   const {
     prefixCls: customizePrefixCls,
     shape,
-    size: customSize = 'default',
+    size: customSize,
     src,
     srcSet,
     icon,
@@ -106,7 +107,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
     ...others
   } = props;
 
-  const size = customSize === 'default' ? avatarCtx?.size : customSize;
+  const size = useSize((ctxSize) => customSize ?? avatarCtx?.size ?? ctxSize ?? 'default');
 
   const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some((key) =>
     ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),

components/badge/Ribbon.tsx

@@ -17,6 +17,7 @@ export interface RibbonProps {
   color?: LiteralUnion<PresetColorType>;
   children?: React.ReactNode;
   placement?: RibbonPlacement;
+  rootClassName?: string;
 }
 
 const Ribbon: React.FC<RibbonProps> = (props) => {
@@ -28,6 +29,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     children,
     text,
     placement = 'end',
+    rootClassName,
   } = props;
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
@@ -49,7 +51,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     cornerColorStyle.color = color;
   }
   return wrapSSR(
-    <div className={classNames(`${prefixCls}-wrapper`, hashId)}>
+    <div className={classNames(`${prefixCls}-wrapper`, rootClassName, hashId)}>
       {children}
       <div className={classNames(ribbonCls, hashId)} style={{ ...colorStyle, ...style }}>
         <span className={`${prefixCls}-text`}>{text}</span>