feat: CP support Upload className and style (#43325)

* feat: CP support Tabs className and style

* revert

* test: update snap

* fix

* test: fix test case

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

@@ -32,6 +32,7 @@ import Table from '../../table';
 import Tabs from '../../tabs';
 import Tag from '../../tag';
 import Typography from '../../typography';
+import Upload from '../../upload';
 
 describe('ConfigProvider support style and className props', () => {
   it('Should Space classNames works', () => {
@@ -665,4 +666,15 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-tabs');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
+
+  it('Should Upload className & style works', () => {
+    const { container } = render(
+      <ConfigProvider upload={{ className: 'cp-upload', style: { color: 'blue' } }}>
+        <Upload type="drag">upload</Upload>
+      </ConfigProvider>,
+    );
+    const element = container?.querySelector<HTMLSpanElement>('.ant-upload-wrapper');
+    expect(element).toHaveClass('cp-upload');
+    expect(element?.querySelector<HTMLDivElement>('.ant-upload')).toHaveStyle({ color: 'blue' });
+  });
 });

components/config-provider/context.ts

@@ -121,6 +121,7 @@ export interface ConfigConsumerProps {
   table?: ComponentStyleConfig;
   card?: ComponentStyleConfig;
   tabs?: ComponentStyleConfig;
+  upload?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -133,6 +133,7 @@ const {
 | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| upload | Set Upload common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 
 ## FAQ
 

components/config-provider/index.tsx

@@ -165,6 +165,7 @@ export interface ConfigProviderProps {
   table?: ComponentStyleConfig;
   card?: ComponentStyleConfig;
   tabs?: ComponentStyleConfig;
+  upload?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -282,6 +283,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     table,
     card,
     tabs,
+    upload,
   } = props;
 
   // =================================== Warning ===================================
@@ -361,6 +363,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     table,
     card,
     tabs,
+    upload,
   };
 
   const config = {

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

@@ -135,6 +135,7 @@ const {
 | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| upload | 设置 Upload 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 
 ## FAQ
 

components/upload/Upload.tsx

@@ -329,7 +329,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     upload: upload.current,
   }));
 
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, upload: ctxUpload } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('upload', customizePrefixCls);
 
@@ -405,30 +405,30 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     );
   };
 
-  const rtlCls = {
+  const wrapperCls = classNames(`${prefixCls}-wrapper`, className, hashId, ctxUpload?.className, {
     [`${prefixCls}-rtl`]: direction === 'rtl',
-  };
+    [`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card',
+    [`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle',
+  });
+
+  const mergedStyle: React.CSSProperties = { ...ctxUpload?.style, ...style };
 
   if (type === 'drag') {
-    const dragCls = classNames(
-      prefixCls,
-      {
-        [`${prefixCls}-drag`]: true,
-        [`${prefixCls}-drag-uploading`]: mergedFileList.some((file) => file.status === 'uploading'),
-        [`${prefixCls}-drag-hover`]: dragState === 'dragover',
-        [`${prefixCls}-disabled`]: mergedDisabled,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      },
-      hashId,
-    );
+    const dragCls = classNames(hashId, prefixCls, `${prefixCls}-drag`, {
+      [`${prefixCls}-drag-uploading`]: mergedFileList.some((file) => file.status === 'uploading'),
+      [`${prefixCls}-drag-hover`]: dragState === 'dragover',
+      [`${prefixCls}-disabled`]: mergedDisabled,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    });
+
     return wrapSSR(
-      <span className={classNames(`${prefixCls}-wrapper`, rtlCls, className, hashId)}>
+      <span className={wrapperCls}>
         <div
           className={dragCls}
+          style={mergedStyle}
           onDrop={onFileDrop}
           onDragOver={onFileDrop}
           onDragLeave={onFileDrop}
-          style={style}
         >
           <RcUpload {...rcUploadProps} ref={upload} className={`${prefixCls}-btn`}>
             <div className={`${prefixCls}-drag-container`}>{children}</div>
@@ -453,25 +453,12 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
 
   if (listType === 'picture-card' || listType === 'picture-circle') {
     return wrapSSR(
-      <span
-        className={classNames(
-          `${prefixCls}-wrapper`,
-          {
-            [`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card',
-            [`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle',
-          },
-          rtlCls,
-          className,
-          hashId,
-        )}
-      >
-        {renderUploadList(uploadButton, !!children)}
-      </span>,
+      <span className={wrapperCls}>{renderUploadList(uploadButton, !!children)}</span>,
     );
   }
 
   return wrapSSR(
-    <span className={classNames(`${prefixCls}-wrapper`, rtlCls, className, hashId)}>
+    <span className={wrapperCls}>
       {uploadButton}
       {renderUploadList()}
     </span>,

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

@@ -3,7 +3,7 @@
 exports[`renders components/upload/demo/avatar.tsx extend context correctly 1`] = `
 Array [
   <span
-    class="ant-upload-wrapper ant-upload-picture-card-wrapper avatar-uploader"
+    class="ant-upload-wrapper avatar-uploader ant-upload-picture-card-wrapper"
   >
     <div
       class="ant-upload ant-upload-select"
@@ -54,7 +54,7 @@ Array [
     </div>
   </span>,
   <span
-    class="ant-upload-wrapper ant-upload-picture-circle-wrapper avatar-uploader"
+    class="ant-upload-wrapper avatar-uploader ant-upload-picture-circle-wrapper"
   >
     <div
       class="ant-upload ant-upload-select"

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

@@ -3,7 +3,7 @@
 exports[`renders components/upload/demo/avatar.tsx correctly 1`] = `
 Array [
   <span
-    class="ant-upload-wrapper ant-upload-picture-card-wrapper avatar-uploader"
+    class="ant-upload-wrapper avatar-uploader ant-upload-picture-card-wrapper"
   >
     <div
       class="ant-upload ant-upload-select"
@@ -54,7 +54,7 @@ Array [
     </div>
   </span>,
   <span
-    class="ant-upload-wrapper ant-upload-picture-circle-wrapper avatar-uploader"
+    class="ant-upload-wrapper avatar-uploader ant-upload-picture-circle-wrapper"
   >
     <div
       class="ant-upload ant-upload-select"