feat: change slide tooltip api (#37043)

* feat: change slide tooltip api

* fix

* fix

* fix: Slider test in config-provider

* fix: Slider test

* chore: adjust prosp pass

Co-authored-by: 二货机器人 <smith3816@gmail.com>

components/config-provider/__tests__/components.test.js

@@ -456,15 +456,14 @@ describe('ConfigProvider', () => {
     // Slider
     testPair('Slider', props => {
       const myProps = { ...props };
+      const tooltip = {
+        open: true,
+      };
+
       if (myProps.prefixCls) {
-        return (
-          <Slider
-            tooltip={{ open: true, prefixCls: `${myProps.prefixCls}-tooltip` }}
-            {...myProps}
-          />
-        );
+        tooltip.prefixCls = `${myProps.prefixCls}-tooltip`;
       }
-      return <Slider tooltip={{ open: true }} {...myProps} />;
+      return <Slider tooltip={tooltip} {...myProps} />;
     });
 
     // Spin

components/slider/__tests__/index.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Slider from '..';
-import type { SliderSingleProps } from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -8,6 +7,7 @@ import { render, fireEvent, act } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import SliderTooltip from '../SliderTooltip';
 import type { TooltipProps } from '../../tooltip';
+import { resetWarned } from '../../_util/warning';
 
 function tooltipProps(): TooltipProps {
   return (global as any).tooltipProps;
@@ -48,58 +48,35 @@ describe('Slider', () => {
     expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
   });
 
-  describe('should show correct placement tooltip when set tooltipPlacement', () => {
-    function test(name: string, props: Partial<SliderSingleProps>) {
-      it(name, () => {
-        const { container } = render(<Slider vertical defaultValue={30} {...props} />);
+  it('should show correct placement tooltip when set tooltipPlacement', () => {
+    const { container } = render(
+      <Slider vertical defaultValue={30} tooltip={{ placement: 'left' }} />,
+    );
 
     fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
     expect(tooltipProps().placement).toEqual('left');
   });
-    }
 
-    test('new', { tooltip: { placement: 'left' } });
-    test('legacy', { tooltipPlacement: 'left' });
-  });
-
-  describe('when tooltip.open is true, tooltip should show always, or should never show', () => {
-    function test(
-      name: string,
-      showProps: Partial<SliderSingleProps>,
-      hideProps: Partial<SliderSingleProps>,
-    ) {
-      it(name, () => {
-        const { container, rerender } = render(<Slider defaultValue={30} {...showProps} />);
+  it('when tooltip.open is true, tooltip should show always, or should never show', () => {
+    const { container: container1 } = render(<Slider defaultValue={30} tooltip={{ open: true }} />);
     expect(
-          container.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
+      container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
     ).toBeFalsy();
 
-        fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
+    fireEvent.mouseEnter(container1.querySelector('.ant-slider-handle')!);
     expect(
-          container.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
+      container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
     ).toBeFalsy();
 
-        fireEvent.click(container.querySelector('.ant-slider-handle')!);
+    fireEvent.click(container1.querySelector('.ant-slider-handle')!);
     expect(
-          container.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
+      container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
     ).toBeFalsy();
 
-        // Force hide
-        rerender(<Slider defaultValue={30} {...hideProps} />);
-
-        act(() => {
-          jest.runAllTimers();
-        });
-        if (container.querySelector('.ant-zoom-down-leave-active')) {
-          fireEvent.animationEnd(container.querySelector('.ant-zoom-down-leave-active')!);
-        }
-
-        expect(container.querySelector('.ant-tooltip-hidden')!).toBeTruthy();
-      });
-    }
-
-    test('new', { tooltip: { open: true } }, { tooltip: { open: false } });
-    test('legacy', { tooltipVisible: true }, { tooltipVisible: false });
+    const { container: container2 } = render(
+      <Slider defaultValue={30} tooltip={{ open: false }} />,
+    );
+    expect(container2.querySelector('.ant-tooltip-content')!).toBeNull();
   });
 
   it('when step is null, thumb can only be slided to the specific mark', () => {
@@ -185,27 +162,31 @@ describe('Slider', () => {
     });
   });
   it('deprecated warning', () => {
+    resetWarned();
+
+    const TSSlider = Slider as any;
+
     const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-    const { rerender } = render(<Slider tooltipPrefixCls="xxx" />);
+    const { rerender } = render(<TSSlider tooltipPrefixCls="xxx" />);
     expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Slider] `tooltipPrefixCls` is deprecated which will be removed in next major version, please use `tooltip.prefixCls` instead.',
+      'Warning: [antd: Slider] `tooltipPrefixCls` is removed in v5, please use `tooltip.prefixCls` instead.',
     );
-    rerender(<Slider getTooltipPopupContainer={() => document.body} />);
+    rerender(<TSSlider getTooltipPopupContainer={() => document.body} />);
     expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Slider] `getTooltipPopupContainer` is deprecated which will be removed in next major version, please use `tooltip.getPopupContainer` instead.',
+      'Warning: [antd: Slider] `getTooltipPopupContainer` is removed in v5, please use `tooltip.getPopupContainer` instead.',
     );
-    rerender(<Slider tipFormatter={v => v} />);
+    rerender(<TSSlider tipFormatter={(v: any) => v} />);
     expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Slider] `tipFormatter` is deprecated which will be removed in next major version, please use `tooltip.formatter` instead.',
+      'Warning: [antd: Slider] `tipFormatter` is removed in v5, please use `tooltip.formatter` instead.',
     );
-    rerender(<Slider tooltipVisible />);
+    rerender(<TSSlider tooltipVisible />);
     expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Slider] `tooltipVisible` is deprecated which will be removed in next major version, please use `tooltip.open` instead.',
+      'Warning: [antd: Slider] `tooltipVisible` is removed in v5, please use `tooltip.open` instead.',
     );
-    rerender(<Slider tooltipPlacement="left" />);
+    rerender(<TSSlider tooltipPlacement="left" />);
     expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Slider] `tooltipPlacement` is deprecated which will be removed in next major version, please use `tooltip.placement` instead.',
+      'Warning: [antd: Slider] `tooltipPlacement` is removed in v5, please use `tooltip.placement` instead.',
     );
 
     errSpy.mockRestore();

components/slider/index.tsx

@@ -33,11 +33,6 @@ export interface SliderTooltipProps {
 
 export interface SliderBaseProps {
   prefixCls?: string;
-  /**
-   * @deprecated `tooltipPrefixCls` is deprecated which will be removed in next major version.
-   *   Please use `tooltip.prefixCls` instead.
-   */
-  tooltipPrefixCls?: string;
   reverse?: boolean;
   min?: number;
   max?: number;
@@ -47,30 +42,10 @@ export interface SliderBaseProps {
   included?: boolean;
   disabled?: boolean;
   vertical?: boolean;
-  /**
-   * @deprecated `tipFormatter` is deprecated which will be removed in next major version. Please
-   *   use `tooltip.formatter` instead.
-   */
-  tipFormatter?: null | ((value?: number) => React.ReactNode);
   className?: string;
   id?: string;
   style?: React.CSSProperties;
-  /**
-   * @deprecated `tooltipVisible` is deprecated which will be removed in next major version. Please
-   *   use `tooltip.open` instead.
-   */
-  tooltipVisible?: boolean;
-  /**
-   * @deprecated `tooltipPlacement` is deprecated which will be removed in next major version.
-   *   Please use `tooltip.placement` instead.
-   */
-  tooltipPlacement?: TooltipPlacement;
   tooltip?: SliderTooltipProps;
-  /**
-   * @deprecated `getTooltipPopupContainer` is deprecated which will be removed in next major
-   *   version. Please use `tooltip.getPopupContainer` instead.
-   */
-  getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   autoFocus?: boolean;
 }
 
@@ -158,7 +133,7 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
         warning(
           !(deprecatedName in props),
           'Slider',
-          `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`tooltip.${newName}\` instead.`,
+          `\`${deprecatedName}\` is removed in v5, please use \`tooltip.${newName}\` instead.`,
         );
       });
     }
@@ -170,18 +145,11 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
       const { tooltip = {}, vertical } = props;
 
       const tooltipProps: SliderTooltipProps = {
-        formatter:
-          props.tipFormatter ??
-          // eslint-disable-next-line func-names
-          function (value) {
+        formatter(value) {
           return typeof value === 'number' ? value.toString() : '';
         },
-        open: props.tooltipVisible,
-        placement: props.tooltipPlacement,
-        getPopupContainer: props.getTooltipPopupContainer,
         ...tooltip,
       };
-
       const {
         open: tooltipOpen,
         placement: tooltipPlacement,

components/slider/index.zh-CN.md

@@ -20,7 +20,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
 | defaultValue | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | 0 \| \[0, 0] |  |
 | disabled | 值为 true 时，滑块为禁用状态 | boolean | false |  |
 | dots | 是否只能拖拽到刻度上 | boolean | false |  |
-| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body |  |
 | included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true |  |
 | marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } |  |
 | max | 最大值 | number | 100 |  |