fix: Fix popupClassName prop in timepicker (#23214)

* fix(time-picker): combine dropdownClassName and popupClassName prop

* test(time-picker): add test for popupClassName and dropdownClassName prop

* chore(time-picker): add demo for popupClassName prop

* test(time-picker): remove rc-picker dependency

* doc(time-picker): change default prop of popupClassName to undefined

* fix(time-picker): remove the use of dropdownClassName

* Apply suggestions from code review

Co-authored-by: 偏右 <afc163@gmail.com>

components/time-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -222,6 +222,51 @@ exports[`renders ./components/time-picker/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/time-picker/demo/colored-popup.md correctly 1`] = `
+<div
+  class="ant-picker"
+>
+  <div
+    class="ant-picker-input"
+  >
+    <input
+      placeholder="Select time"
+      readonly=""
+      size="10"
+      title=""
+      value=""
+    />
+    <span
+      class="ant-picker-suffix"
+    >
+      <span
+        aria-label="clock-circle"
+        class="anticon anticon-clock-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="clock-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+          />
+          <path
+            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/time-picker/demo/disabled.md correctly 1`] = `
 <div
   class="ant-picker ant-picker-disabled"

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

@@ -61,4 +61,15 @@ describe('TimePicker', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('should pass popupClassName prop to Picker as dropdownClassName prop', () => {
+    const popupClassName = 'myCustomClassName';
+    const wrapper = mount(
+      <TimePicker
+        defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+        popupClassName={popupClassName}
+      />,
+    );
+    expect(wrapper.find('Picker').prop('dropdownClassName')).toEqual(popupClassName);
+  });
 });

components/time-picker/demo/colored-popup.md

@@ -0,0 +1,39 @@
+---
+order: 9
+title:
+  zh-CN: 色付きポップアップ
+  en-US: Colored Popup
+debug: true
+---
+
+## zh-CN
+
+カスタムクラスを `TimePicker`ポップアップに渡す
+
+## en-US
+
+Passing custom class to `TimePicker` popup
+
+```jsx
+import { TimePicker } from 'antd';
+import moment from 'moment';
+
+const onChange = (time, timeString) => {
+  console.log(time, timeString);
+};
+
+ReactDOM.render(
+  <TimePicker
+    onChange={onChange}
+    defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+    popupClassName="myCustomClassName"
+  />,
+  mountNode,
+);
+```
+
+```css
+.myCustomClassName .ant-picker-time-panel-cell-inner {
+  color: red !important;
+}
+```

components/time-picker/index.en-US.md

@@ -41,7 +41,7 @@ import moment from 'moment';
 | minuteStep | interval between minutes in picker | number | 1 |  |
 | open | whether to popup panel | boolean | false |  |
 | placeholder | display when there's no value | string | "Select a time" |  |
-| popupClassName | className of panel | string | '' |  |
+| popupClassName | className of panel | string | - |  |
 | popupStyle | style of panel | object | - |  |
 | secondStep | interval between seconds in picker | number | 1 |  |
 | suffixIcon | The custom suffix icon | ReactNode | - |  |

components/time-picker/index.tsx

@@ -20,10 +20,11 @@ const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) =>
 
 export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {
   addon?: () => React.ReactNode;
+  popupClassName?: string;
 }
 
 const TimePicker = React.forwardRef<any, TimePickerProps>(
-  ({ addon, renderExtraFooter, ...restProps }, ref) => {
+  ({ addon, renderExtraFooter, popupClassName, ...restProps }, ref) => {
     const internalRenderExtraFooter = React.useMemo(() => {
       if (renderExtraFooter) {
         return renderExtraFooter;
@@ -42,6 +43,7 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
     return (
       <InternalTimePicker
         {...restProps}
+        dropdownClassName={popupClassName}
         mode={undefined}
         ref={ref}
         renderExtraFooter={internalRenderExtraFooter}

components/time-picker/index.zh-CN.md

@@ -42,7 +42,7 @@ import moment from 'moment';
 | minuteStep | 分钟选项间隔 | number | 1 |  |
 | open | 面板是否打开 | boolean | false |  |
 | placeholder | 没有值的时候显示的内容 | string | "请选择时间" |  |
-| popupClassName | 弹出层类名 | string | '' |  |
+| popupClassName | 弹出层类名 | string | - |  |
 | popupStyle | 弹出层样式对象 | object | - |  |
 | secondStep | 秒选项间隔 | number | 1 |  |
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |