fix: TimePicker `popupClassName` unexpect warning (#39010)

components/date-picker/__tests__/DatePicker.test.tsx

@@ -227,6 +227,12 @@ describe('DatePicker', () => {
       'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
     );
   });
+  it('DatePicker should show warning when use popupClassName', () => {
+    render(<DatePicker popupClassName="myCustomClassName" />);
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
 
   it('RangePicker should show warning when use dropdownClassName', () => {
     render(<DatePicker.RangePicker dropdownClassName="myCustomClassName" />);
@@ -235,6 +241,13 @@ describe('DatePicker', () => {
     );
   });
 
+  it('RangePicker should show warning when use popupClassName', () => {
+    render(<DatePicker.RangePicker popupClassName="myCustomClassName" />);
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
   it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
     const startDate = moment('1982-02-12');
     const endDate = moment('1982-02-22');

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -109,7 +109,6 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
               }
               disabled={mergedDisabled}
               ref={innerRef}
-              dropdownClassName={popupClassName || dropdownClassName}
               dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
               placeholder={getRangePlaceholder(picker, locale, placeholder)}
               suffixIcon={suffixNode}
@@ -141,6 +140,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
               generateConfig={generateConfig}
               components={Components}
               direction={direction}
+              dropdownClassName={popupClassName || dropdownClassName}
             />
           );
         }}

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -95,7 +95,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
 
         warning(
           !dropdownClassName,
-          'DatePicker',
+          mergedPicker === 'time' ? 'TimePicker' : 'DatePicker',
           '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
         );
         // ===================== Size =====================
@@ -128,7 +128,6 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                   placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
                   suffixIcon={suffixNode}
                   dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                  dropdownClassName={popupClassName || dropdownClassName}
                   clearIcon={<CloseCircleFilled />}
                   prevIcon={<span className={`${prefixCls}-prev-icon`} />}
                   nextIcon={<span className={`${prefixCls}-next-icon`} />}
@@ -159,6 +158,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                   components={Components}
                   direction={direction}
                   disabled={mergedDisabled}
+                  dropdownClassName={popupClassName || dropdownClassName}
                 />
               );
             }}

components/time-picker/__tests__/index.test.tsx

@@ -95,6 +95,13 @@ describe('TimePicker', () => {
     );
   });
 
+  it('RangePicker should show warning when use popupClassName', () => {
+    render(<TimePicker.RangePicker popupClassName="myCustomClassName" />);
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
   it('TimePicker should show warning when use dropdownClassName', () => {
     render(<TimePicker dropdownClassName="myCustomClassName" />);
     expect(errorSpy).toHaveBeenCalledWith(
@@ -102,6 +109,13 @@ describe('TimePicker', () => {
     );
   });
 
+  it('TimePicker should show warning when use popupClassName', () => {
+    render(<TimePicker popupClassName="myCustomClassName" />);
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      'Warning: [antd: TimePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
   it('should support bordered', () => {
     const { container } = render(
       <TimePicker

components/time-picker/index.tsx

@@ -26,7 +26,8 @@ const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) =>
   return (
     <InternalRangePicker
       {...props}
-      dropdownClassName={popupClassName || dropdownClassName}
+      dropdownClassName={dropdownClassName}
+      popupClassName={popupClassName}
       picker="time"
       mode={undefined}
       ref={ref}
@@ -63,15 +64,10 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
       return undefined;
     }, [addon, renderExtraFooter]);
 
-    warning(
-      !dropdownClassName,
-      'TimePicker',
-      '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
-    );
-
     return (
       <InternalTimePicker
-        dropdownClassName={popupClassName || dropdownClassName}
+        dropdownClassName={dropdownClassName}
+        popupClassName={popupClassName}
         {...restProps}
         mode={undefined}
         ref={ref}