chore: Unified variable naming style (#55210)

components/alert/Alert.tsx

@@ -160,7 +160,7 @@ const Alert = React.forwardRef<AlertRef, AlertProps>((props, ref) => {
     action,
     id,
     styles,
-    classNames: alertClassNames,
+    classNames,
     ...otherProps
   } = props;
 
@@ -248,7 +248,7 @@ const Alert = React.forwardRef<AlertRef, AlertProps>((props, ref) => {
     AlertClassNamesType,
     AlertStylesType,
     AlertProps
-  >([contextClassNames, alertClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/calendar/generateCalendar.tsx

@@ -110,7 +110,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
       onPanelChange,
       onSelect,
       styles,
-      classNames: calendarClassNames,
+      classNames,
     } = props;
     const {
       getPrefixCls,
@@ -133,7 +133,7 @@ const generateCalendar = <DateType extends AnyObject>(generateConfig: GenerateCo
       CalendarClassNamesType<DateType>,
       CalendarStylesType<DateType>,
       CalendarProps<DateType>
-    >([contextClassNames, calendarClassNames], [contextStyles, styles], undefined, {
+    >([contextClassNames, classNames], [contextStyles, styles], undefined, {
       props: mergedProps,
     });
 

components/card/Card.tsx

@@ -110,9 +110,9 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     tabBarExtraContent,
     hoverable,
     tabProps = {},
-    classNames: customClassNames,
-    styles: customStyles,
-    ...others
+    classNames,
+    styles,
+    ...rest
   } = props;
   const {
     getPrefixCls,
@@ -138,7 +138,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     CardClassNamesType,
     CardStylesType,
     CardProps
-  >([contextClassNames, customClassNames], [contextStyles, customStyles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 
@@ -249,7 +249,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     />
   ) : null;
 
-  const divProps = omit(others, ['onTabChange']);
+  const divProps = omit(rest, ['onTabChange']);
 
   const classString = clsx(
     prefixCls,

components/collapse/Collapse.tsx

@@ -95,7 +95,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     destroyInactivePanel,
     destroyOnHidden,
     expandIcon,
-    classNames: collapseClassNames,
+    classNames,
     styles,
   } = props;
 
@@ -117,7 +117,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     CollapseClassNamesType,
     CollapseStylesType,
     CollapseProps
-  >([contextClassNames, collapseClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/drawer/index.tsx

@@ -186,7 +186,7 @@ const Drawer: React.FC<DrawerProps> & {
   const [zIndex, contextZIndex] = useZIndex('Drawer', rest.zIndex);
 
   // =========================== Render ===========================
-  const { classNames: propClassNames = {}, styles: propStyles = {}, rootStyle } = rest;
+  const { classNames, styles, rootStyle } = rest;
 
   const [mergedMask, maskBlurClassName] = useMergedMask(drawerMask, contextMask, prefixCls);
 
@@ -203,7 +203,7 @@ const Drawer: React.FC<DrawerProps> & {
     DrawerClassNamesType,
     DrawerStylesType,
     DrawerProps
-  >([contextClassNames, propClassNames], [contextStyles, propStyles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/image/index.tsx

@@ -83,7 +83,7 @@ const Image: CompositionImage<ImageProps> = (props) => {
     rootClassName,
     style,
     styles,
-    classNames: imageClassNames,
+    classNames,
     wrapperStyle,
     fallback,
     ...otherProps
@@ -163,13 +163,8 @@ const Image: CompositionImage<ImageProps> = (props) => {
     [mergedMask, prefixCls, blurClassName],
   );
   const internalClassNames = React.useMemo(
-    () => [
-      contextClassNames,
-      imageClassNames,
-      mergedLegacyClassNames,
-      { popup: mergedPopupClassNames },
-    ],
-    [contextClassNames, imageClassNames, mergedLegacyClassNames, mergedPopupClassNames],
+    () => [contextClassNames, classNames, mergedLegacyClassNames, { popup: mergedPopupClassNames }],
+    [contextClassNames, classNames, mergedLegacyClassNames, mergedPopupClassNames],
   );
 
   const [mergedClassNames, mergedStyles] = useMergeSemantic<

components/mentions/index.tsx

@@ -93,7 +93,7 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
     popupClassName,
     style,
     variant: customVariant,
-    classNames: mentionsClassNames,
+    classNames,
     styles,
     ...restProps
   } = props;
@@ -143,7 +143,7 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
     MentionsClassNamesType,
     MentionsStylesType,
     MentionProps
-  >([contextClassNames, mentionsClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/modal/Modal.tsx

@@ -57,8 +57,8 @@ const Modal: React.FC<ModalProps> = (props) => {
     style,
     width = 520,
     footer,
-    classNames: modalClassNames,
-    styles: modalStyles,
+    classNames,
+    styles,
     children,
     loading,
     confirmLoading,
@@ -187,14 +187,9 @@ const Modal: React.FC<ModalProps> = (props) => {
     ModalClassNamesType,
     ModalStylesType,
     ModalProps
-  >(
-    [contextClassNames, modalClassNames, maskBlurClassName],
-    [contextStyles, modalStyles],
-    undefined,
-    {
-      props: mergedProps,
-    },
-  );
+  >([contextClassNames, classNames, maskBlurClassName], [contextStyles, styles], undefined, {
+    props: mergedProps,
+  });
 
   // =========================== Width ============================
   const [numWidth, responsiveWidth] = React.useMemo<

components/popconfirm/index.tsx

@@ -63,10 +63,10 @@ const InternalPopconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props,
   } = props;
   const {
     getPrefixCls,
-    className: ctxClassName,
-    style: ctxStyle,
-    classNames: ctxClassNames,
-    styles: ctxStyles,
+    className: contextClassName,
+    style: contextStyle,
+    classNames: contextClassNames,
+    styles: contextStyles,
     arrow: contextArrow,
   } = useComponentConfig('popconfirm');
   const [open, setOpen] = useControlledState(props.defaultOpen ?? false, props.open);
@@ -112,11 +112,11 @@ const InternalPopconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props,
     PopconfirmClassNamesType,
     PopconfirmStylesType,
     PopconfirmProps
-  >([ctxClassNames, classNames], [ctxStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 
-  const rootClassNames = clsx(prefixCls, ctxClassName, overlayClassName, mergedClassNames.root);
+  const rootClassNames = clsx(prefixCls, contextClassName, overlayClassName, mergedClassNames.root);
 
   useStyle(prefixCls);
 
@@ -135,7 +135,7 @@ const InternalPopconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props,
         arrow: mergedClassNames.arrow,
       }}
       styles={{
-        root: { ...ctxStyle, ...mergedStyles.root, ...overlayStyle },
+        root: { ...contextStyle, ...mergedStyles.root, ...overlayStyle },
         container: mergedStyles.container,
         arrow: mergedStyles.arrow,
       }}

components/qr-code/index.tsx

@@ -34,7 +34,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     prefixCls: customizePrefixCls,
     bgColor = 'transparent',
     statusRender,
-    classNames: qrcodeClassNames,
+    classNames,
     styles,
     boostLevel /* 👈 5.28.0+ */,
     ...rest
@@ -63,7 +63,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     QRCodeClassNamesType,
     QRCodeStylesType,
     QRCodeProps
-  >([contextClassNames, qrcodeClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/radio/radio.tsx

@@ -51,7 +51,7 @@ const InternalRadio: React.ForwardRefRenderFunction<RadioRef, RadioProps> = (pro
     children,
     style,
     title,
-    classNames: radioClassNames,
+    classNames,
     styles,
     ...restProps
   } = props;
@@ -88,7 +88,7 @@ const InternalRadio: React.ForwardRefRenderFunction<RadioRef, RadioProps> = (pro
     SemanticClassNamesType<RadioProps, 'root' | 'icon' | 'label'>,
     SemanticStylesType<RadioProps, 'root' | 'icon' | 'label'>,
     RadioProps
-  >([contextClassNames, radioClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
   const wrapperClassString = clsx(

components/result/index.tsx

@@ -140,7 +140,7 @@ const Result: ResultType = (props) => {
     icon,
     extra,
     styles,
-    classNames: resultClassNames,
+    classNames,
   } = props;
 
   const {
@@ -162,7 +162,7 @@ const Result: ResultType = (props) => {
     ResultClassNamesType,
     ResultStylesType,
     ResultProps
-  >([contextClassNames, resultClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/segmented/index.tsx

@@ -85,7 +85,7 @@ const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((prop
     shape = 'default',
     name = defaultName,
     styles,
-    classNames: segmentedClassNames,
+    classNames,
     ...restProps
   } = props;
 
@@ -108,7 +108,7 @@ const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((prop
     SegmentedClassNamesType,
     SegmentedStylesType,
     SegmentedProps
-  >([contextClassNames, segmentedClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/skeleton/Avatar.tsx

@@ -14,7 +14,7 @@ const SkeletonAvatar: React.FC<AvatarProps> = (props) => {
   const {
     prefixCls: customizePrefixCls,
     className,
-    classNames: skeletonAvatarClassNames,
+    classNames,
     rootClassName,
     active,
     style,
@@ -33,7 +33,7 @@ const SkeletonAvatar: React.FC<AvatarProps> = (props) => {
     {
       [`${prefixCls}-active`]: active,
     },
-    skeletonAvatarClassNames?.root,
+    classNames?.root,
     className,
     rootClassName,
     hashId,
@@ -44,7 +44,7 @@ const SkeletonAvatar: React.FC<AvatarProps> = (props) => {
     <div className={cls} style={styles?.root}>
       <Element
         prefixCls={`${prefixCls}-avatar`}
-        className={skeletonAvatarClassNames?.content}
+        className={classNames?.content}
         style={{ ...styles?.content, ...style }}
         shape={shape}
         size={size}

components/skeleton/Button.tsx

@@ -16,7 +16,7 @@ const SkeletonButton: React.FC<SkeletonButtonProps> = (props) => {
     prefixCls: customizePrefixCls,
     className,
     rootClassName,
-    classNames: skeletonButtonClassNames,
+    classNames,
     active,
     style,
     styles,
@@ -35,7 +35,7 @@ const SkeletonButton: React.FC<SkeletonButtonProps> = (props) => {
       [`${prefixCls}-active`]: active,
       [`${prefixCls}-block`]: block,
     },
-    skeletonButtonClassNames?.root,
+    classNames?.root,
     className,
     rootClassName,
     hashId,
@@ -46,7 +46,7 @@ const SkeletonButton: React.FC<SkeletonButtonProps> = (props) => {
     <div className={cls} style={styles?.root}>
       <Element
         prefixCls={`${prefixCls}-button`}
-        className={skeletonButtonClassNames?.content}
+        className={classNames?.content}
         style={{ ...styles?.content, ...style }}
         size={size}
         {...rest}

components/skeleton/Input.tsx

@@ -15,7 +15,7 @@ const SkeletonInput: React.FC<SkeletonInputProps> = (props) => {
   const {
     prefixCls: customizePrefixCls,
     className,
-    classNames: skeletonInputClassNames,
+    classNames,
     rootClassName,
     active,
     block,
@@ -35,7 +35,7 @@ const SkeletonInput: React.FC<SkeletonInputProps> = (props) => {
       [`${prefixCls}-active`]: active,
       [`${prefixCls}-block`]: block,
     },
-    skeletonInputClassNames?.root,
+    classNames?.root,
     className,
     rootClassName,
     hashId,
@@ -46,7 +46,7 @@ const SkeletonInput: React.FC<SkeletonInputProps> = (props) => {
     <div className={cls} style={styles?.root}>
       <Element
         prefixCls={`${prefixCls}-input`}
-        className={skeletonInputClassNames?.content}
+        className={classNames?.content}
         style={{ ...styles?.content, ...style }}
         size={size}
         {...rest}

components/skeleton/Node.tsx

@@ -14,7 +14,7 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = (props) => {
   const {
     prefixCls: customizePrefixCls,
     className,
-    classNames: skeletonNodeClassNames,
+    classNames,
     rootClassName,
     internalClassName,
     style,
@@ -31,7 +31,7 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = (props) => {
     `${prefixCls}-element`,
     { [`${prefixCls}-active`]: active },
     hashId,
-    skeletonNodeClassNames?.root,
+    classNames?.root,
     className,
     rootClassName,
     cssVarCls,
@@ -40,7 +40,7 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = (props) => {
   return (
     <div className={cls} style={styles?.root}>
       <div
-        className={clsx(skeletonNodeClassNames?.content, internalClassName || `${prefixCls}-node`)}
+        className={clsx(classNames?.content, internalClassName || `${prefixCls}-node`)}
         style={{ ...styles?.content, ...style }}
       >
         {children}

components/skeleton/Skeleton.tsx

@@ -105,7 +105,7 @@ const Skeleton: React.FC<React.PropsWithChildren<SkeletonProps>> & CompoundedCom
     loading,
     className,
     rootClassName,
-    classNames: skeletonClassNames,
+    classNames,
     style,
     styles,
     children,
@@ -140,7 +140,7 @@ const Skeleton: React.FC<React.PropsWithChildren<SkeletonProps>> & CompoundedCom
     SkeletonClassNamesType,
     SkeletonStylesType,
     SkeletonProps
-  >([contextClassNames, skeletonClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/slider/index.tsx

@@ -140,7 +140,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
     // Deprecated Props
     tooltip = {},
     onChangeComplete,
-    classNames: sliderClassNames,
+    classNames,
     styles,
     vertical,
     orientation,
@@ -171,7 +171,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
     SliderClassNamesType,
     SliderStylesType,
     SliderSingleProps | SliderRangeProps
-  >([contextClassNames, sliderClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/spin/index.tsx

@@ -80,7 +80,7 @@ const Spin: SpinType = (props) => {
     fullscreen = false,
     indicator,
     percent,
-    classNames: spinClassNames,
+    classNames,
     styles,
     ...restProps
   } = props;
@@ -140,7 +140,7 @@ const Spin: SpinType = (props) => {
     SpinClassNamesType,
     SpinStylesType,
     SpinProps
-  >([contextClassNames, spinClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/statistic/Statistic.tsx

@@ -62,7 +62,7 @@ const Statistic = React.forwardRef<StatisticRef, StatisticProps>((props, ref) =>
     onMouseEnter,
     onMouseLeave,
     styles,
-    classNames: statisticClassNames,
+    classNames,
     ...rest
   } = props;
 
@@ -90,7 +90,7 @@ const Statistic = React.forwardRef<StatisticRef, StatisticProps>((props, ref) =>
     StatisticClassNamesType,
     StatisticStylesType,
     StatisticProps
-  >([contextClassNames, statisticClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/switch/index.tsx

@@ -67,7 +67,7 @@ const InternalSwitch = React.forwardRef<HTMLButtonElement, SwitchProps>((props,
     defaultValue,
     onChange,
     styles,
-    classNames: switchClassNames,
+    classNames,
     ...restProps
   } = props;
 
@@ -112,7 +112,7 @@ const InternalSwitch = React.forwardRef<HTMLButtonElement, SwitchProps>((props,
     SwitchClassNamesType,
     SwitchStylesType,
     SwitchProps
-  >([contextClassNames, switchClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/tour/index.tsx

@@ -9,7 +9,7 @@ import getPlacements from '../_util/placements';
 import zIndexContext from '../_util/zindexContext';
 import { useComponentConfig } from '../config-provider/context';
 import { useToken } from '../theme/internal';
-import type { TourProps, TourClassNamesType, TourStylesType } from './interface';
+import type { TourClassNamesType, TourProps, TourStylesType } from './interface';
 import TourPanel from './panelRender';
 import PurePanel from './PurePanel';
 import useStyle from './style';
@@ -25,7 +25,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
     actionsRender,
     steps,
     closeIcon,
-    classNames: tourClassNames,
+    classNames,
     styles,
     className,
     style,
@@ -67,7 +67,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
     TourClassNamesType,
     TourStylesType,
     TourProps
-  >([contextClassNames, tourClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/tree/Tree.tsx

@@ -200,7 +200,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
     motion: customMotion,
     style,
     rootClassName,
-    classNames: treeClassNames,
+    classNames,
     styles,
   } = props;
 
@@ -230,7 +230,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
     TreeClassNamesType,
     TreeStylesType,
     TreeProps
-  >([contextClassNames, treeClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });
 

components/upload/Upload.tsx

@@ -75,7 +75,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     supportServerRender = true,
     rootClassName,
     styles,
-    classNames: uploadClassNames,
+    classNames,
   } = props;
 
   // ===================== Disabled =====================
@@ -368,7 +368,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     UploadClassNamesType,
     UploadStylesType,
     UploadProps
-  >([contextClassNames, uploadClassNames], [contextStyles, styles], undefined, {
+  >([contextClassNames, classNames], [contextStyles, styles], undefined, {
     props: mergedProps,
   });