chore: next merge feature

components/_util/reactNode.ts

@@ -2,6 +2,10 @@ import * as React from 'react';
 
 export const { isValidElement } = React;
 
+export function isFragment(child: React.ReactElement): boolean {
+  return child && child.type === React.Fragment;
+}
+
 type AnyObject = Record<any, any>;
 
 type RenderProps = undefined | AnyObject | ((originProps: AnyObject) => AnyObject | undefined);

components/tag/__tests__/index.test.js

@@ -2,8 +2,9 @@ import { mount } from 'enzyme';
 import React from 'react';
 import Tag from '..';
 import mountTest from '../../../tests/shared/mountTest';
+import { render, act } from '../../../tests/utils';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { act } from '../../../tests/utils';
+import { resetWarned } from '../../_util/warning';
 
 describe('Tag', () => {
   mountTest(Tag);
@@ -81,6 +82,18 @@ describe('Tag', () => {
     expect(onClick).not.toHaveBeenCalled();
   });
 
+  it('deprecated warning', () => {
+    resetWarned();
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(<Tag visible />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tag] `visible` will be removed in next major version, please use `visible && <Tag />` instead.',
+    );
+
+    errSpy.mockRestore();
+  });
+
   describe('visibility', () => {
     it('can be controlled by visible with visible as initial value', () => {
       const wrapper = mount(<Tag visible />);

components/tag/demo/controlled.md

@@ -1,17 +1,18 @@
 ---
 order: 5
 title:
-  zh-CN: 控制关闭状态
-  en-US: Controlled
+  zh-CN: 控制关闭状态（废弃）
+  en-US: Controlled (Deprecated)
+debug: true
 ---
 
 ## zh-CN
 
-通过 `visible` 属性控制关闭状态。
+废弃，通过 `visible` 属性控制关闭状态。
 
 ## en-US
 
-By using the `visible` prop, you can control the close state of Tag.
+Deprecated. By using the `visible` prop, you can control the close state of Tag.
 
 ```tsx
 import { Button, Tag } from 'antd';

components/tag/index.en-US.md

@@ -17,18 +17,17 @@ Tag for categorizing or markup.
 
 ### Tag
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| closable | Whether the Tag can be closed | boolean | false |  |
-| closeIcon | Custom close icon | ReactNode | - | 4.4.0 |
-| color | Color of the Tag | string | - |  |
-| icon | Set the icon of tag | ReactNode | - |  |
-| visible | Whether the Tag is closed or not | boolean | true |  |
-| onClose | Callback executed when tag is closed | (e) => void | - |  |
+| Property  | Description                          | Type        | Default | Version |
+| --------- | ------------------------------------ | ----------- | ------- | ------- |
+| closable  | Whether the Tag can be closed        | boolean     | false   |         |
+| closeIcon | Custom close icon                    | ReactNode   | -       | 4.4.0   |
+| color     | Color of the Tag                     | string      | -       |         |
+| icon      | Set the icon of tag                  | ReactNode   | -       |         |
+| onClose   | Callback executed when tag is closed | (e) => void | -       |         |
 
 ### Tag.CheckableTag
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| checked | Checked status of Tag | boolean | false |
-| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |
+| Property | Description                                     | Type              | Default |
+| -------- | ----------------------------------------------- | ----------------- | ------- |
+| checked  | Checked status of Tag                           | boolean           | false   |
+| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | -       |

components/tag/index.tsx

@@ -8,6 +8,7 @@ import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
 import { PresetColorTypes, PresetStatusColorTypes } from '../_util/colors';
 import type { LiteralUnion } from '../_util/type';
 import Wave from '../_util/wave';
+import warning from '../_util/warning';
 import CheckableTag from './CheckableTag';
 
 import useStyle from './style';
@@ -20,6 +21,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
   color?: LiteralUnion<PresetColorType | PresetStatusColorType, string>;
   closable?: boolean;
   closeIcon?: React.ReactNode;
+  /** @deprecated `visible` will be removed in next major version. */
   visible?: boolean;
   onClose?: (e: React.MouseEvent<HTMLElement>) => void;
   style?: React.CSSProperties;
@@ -52,6 +54,12 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const [visible, setVisible] = React.useState(true);
 
+  warning(
+    !('visible' in props),
+    'Tag',
+    '`visible` will be removed in next major version, please use `visible && <Tag />` instead.',
+  );
+
   React.useEffect(() => {
     if ('visible' in props) {
       setVisible(props.visible!);

components/tag/index.zh-CN.md

@@ -23,12 +23,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
 | closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |
 | color | 标签色 | string | - |  |
 | icon | 设置图标 | ReactNode | - |  |
-| visible | 是否显示标签 | boolean | true |  |
 | onClose | 关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为） | (e) => void | - |  |
 
 ### Tag.CheckableTag
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| checked | 设置标签的选中状态 | boolean | false |
-| onChange | 点击标签时触发的回调 | (checked) => void | - |
+| 参数     | 说明                 | 类型              | 默认值 |
+| -------- | -------------------- | ----------------- | ------ |
+| checked  | 设置标签的选中状态   | boolean           | false  |
+| onChange | 点击标签时触发的回调 | (checked) => void | -      |

components/tooltip/__tests__/tooltip.test.js

@@ -422,4 +422,35 @@ describe('Tooltip', () => {
     expect(onVisibleChange).toHaveBeenLastCalledWith(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
   });
+
+  it('should work with Fragment children', () => {
+    const onVisibleChange = jest.fn();
+    const ref = React.createRef();
+
+    const { container } = render(
+      <Tooltip
+        title="Have a nice day!"
+        mouseEnterDelay={0}
+        mouseLeaveDelay={0}
+        onVisibleChange={onVisibleChange}
+        ref={ref}
+      >
+        <>
+          <div className="hello">Hello world!</div>
+          <div className="hello">Hello world!</div>
+        </>
+      </Tooltip>,
+    );
+
+    const divElement = container.querySelector('.hello');
+    fireEvent.mouseEnter(divElement);
+    expect(onVisibleChange).toHaveBeenLastCalledWith(true);
+    expect(ref.current.props.visible).toBe(true);
+    expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
+
+    fireEvent.mouseLeave(divElement);
+    expect(onVisibleChange).toHaveBeenLastCalledWith(false);
+    expect(ref.current.props.visible).toBe(false);
+    expect(container.querySelector('.ant-tooltip-open')).toBeNull();
+  });
 });

components/tooltip/index.tsx

@@ -9,7 +9,7 @@ import type { PresetColorType } from '../_util/colors';
 import { PresetColorTypes } from '../_util/colors';
 import { getTransitionName } from '../_util/motion';
 import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
-import { cloneElement, isValidElement } from '../_util/reactNode';
+import { cloneElement, isValidElement, isFragment } from '../_util/reactNode';
 import type { LiteralUnion } from '../_util/type';
 import PurePanel from './PurePanel';
 
@@ -229,7 +229,7 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   }
 
   const child = getDisabledCompatibleChildren(
-    isValidElement(children) ? children : <span>{children}</span>,
+    isValidElement(children) && !isFragment(children) ? children : <span>{children}</span>,
     prefixCls,
   );
   const childProps = child.props;

site/theme/style/themes/default.less

@@ -893,6 +893,7 @@
 @slider-handle-color-tooltip-open: @primary-color;
 @slider-handle-size: 14px;
 @slider-handle-margin-top: -5px;
+@slider-handle-margin-left: -5px;
 @slider-handle-shadow: 0;
 @slider-dot-border-color: @border-color-split;
 @slider-dot-border-color-active: tint(@primary-color, 50%);

site/theme/style/themes/variable.less

@@ -948,6 +948,7 @@
 @slider-handle-color-tooltip-open: @primary-color;
 @slider-handle-size: 14px;
 @slider-handle-margin-top: -5px;
+@slider-handle-margin-left: -5px;
 @slider-handle-shadow: 0;
 @slider-dot-border-color: @border-color-split;
 @slider-dot-border-color-active: ~'var(--@{ant-prefix}-primary-color-deprecated-t-50)';