refactor(Tag): refactor closeIcon (#43109)

* refactor: refactor closeIcon

* feat: optimize code

* feat: optimize code

components/drawer/DrawerPanel.tsx

@@ -10,7 +10,7 @@ export interface DrawerPanelProps {
   footer?: React.ReactNode;
   extra?: React.ReactNode;
   /**
-   * advised to use closeIcon instead
+   * Recommend to use closeIcon instead
    *
    * e.g.
    *

components/modal/interface.ts

@@ -8,7 +8,7 @@ export interface ModalProps {
   confirmLoading?: boolean;
   /** The modal dialog's title */
   title?: React.ReactNode;
-  /** Whether a close (x) button is visible on top right of the modal dialog or not. Advised to use closeIcon instead. */
+  /** Whether a close (x) button is visible on top right of the modal dialog or not. Recommend to use closeIcon instead. */
   closable?: boolean;
   /** Specify a function that will be called when a user clicks the OK button */
   onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;

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

@@ -165,7 +165,7 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
     <span
       class="ant-tag"
     >
-      Tag 2
+      Prevent Default
       <span
         aria-label="close"
         class="anticon anticon-close ant-tag-close-icon"
@@ -195,16 +195,18 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
     <span
       class="ant-tag"
     >
-      Prevent Default
+      Tag 2
       <span
-        aria-label="close"
-        class="anticon anticon-close ant-tag-close-icon"
+        class="ant-tag-close-icon"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
           role="img"
-        tabindex="-1"
         >
           <svg
             aria-hidden="true"
-          data-icon="close"
+            data-icon="close-circle"
             fill="currentColor"
             focusable="false"
             height="1em"
@@ -212,11 +214,15 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
             width="1em"
           >
             <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
+            />
+            <path
+              d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
             />
           </svg>
         </span>
       </span>
+    </span>
   </div>
 </div>
 `;

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

@@ -165,7 +165,7 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
     <span
       class="ant-tag"
     >
-      Tag 2
+      Prevent Default
       <span
         aria-label="close"
         class="anticon anticon-close ant-tag-close-icon"
@@ -195,16 +195,18 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
     <span
       class="ant-tag"
     >
-      Prevent Default
+      Tag 2
       <span
-        aria-label="close"
-        class="anticon anticon-close ant-tag-close-icon"
+        class="ant-tag-close-icon"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
           role="img"
-        tabindex="-1"
         >
           <svg
             aria-hidden="true"
-          data-icon="close"
+            data-icon="close-circle"
             fill="currentColor"
             focusable="false"
             height="1em"
@@ -212,11 +214,15 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
             width="1em"
           >
             <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
+            />
+            <path
+              d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
             />
           </svg>
         </span>
       </span>
+    </span>
   </div>
 </div>
 `;

components/tag/__tests__/index.test.tsx

@@ -62,6 +62,33 @@ describe('Tag', () => {
     expect(container.querySelectorAll('.ant-tag:not(.ant-tag-hidden)').length).toBe(1);
   });
 
+  it('show close button by closeIcon', () => {
+    const { container } = render(
+      <>
+        <Tag className="tag1" closable closeIcon="close" />
+        <Tag className="tag2" closable closeIcon />
+        <Tag className="tag3" closable closeIcon={false} />
+        <Tag className="tag4" closable closeIcon={null} />
+        <Tag className="tag5" closable={false} closeIcon="close" />
+        <Tag className="tag6" closable={false} closeIcon />
+        <Tag className="tag7" closable={false} closeIcon={false} />
+        <Tag className="tag8" closable={false} closeIcon={null} />
+        <Tag className="tag9" closeIcon="close" />
+        <Tag className="tag10" closeIcon />
+        <Tag className="tag11" closeIcon={false} />
+        <Tag className="tag12" closeIcon={null} />
+      </>,
+    );
+
+    expect(container.querySelectorAll('.ant-tag-close-icon').length).toBe(6);
+    ['tag1', 'tag2', 'tag3', 'tag4', 'tag9', 'tag10'].forEach((tag) => {
+      expect(container.querySelector(`.${tag} .ant-tag-close-icon`)).toBeTruthy();
+    });
+    ['tag5', 'tag6', 'tag7', 'tag8', 'tag11', 'tag12'].forEach((tag) => {
+      expect(container.querySelector(`.${tag} .ant-tag-close-icon`)).toBeFalsy();
+    });
+  });
+
   it('should trigger onClick', () => {
     const onClick = jest.fn();
     const { container } = render(<Tag onClick={onClick} />);

components/tag/demo/basic.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` 事件。
+基本标签的用法，可以通过设置 `closeIcon` 变为可关闭标签并自定义关闭按钮，设置为 `true` 时将使用默认关闭按钮。可关闭标签具有 `onClose` 事件。
 
 ## en-US
 
-Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` events.
+Usage of basic Tag, and it could be closable and customize close button by set `closeIcon` property, will display default close button when `closeIcon` is setting to `true`. Closable Tag supports `onClose` events.

components/tag/demo/basic.tsx

@@ -1,3 +1,4 @@
+import { CloseCircleOutlined } from '@ant-design/icons';
 import { Space, Tag } from 'antd';
 import React from 'react';
 
@@ -16,12 +17,12 @@ const App: React.FC = () => (
     <Tag>
       <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
     </Tag>
-    <Tag closable onClose={log}>
-      Tag 2
-    </Tag>
-    <Tag closable onClose={preventDefault}>
+    <Tag closeIcon onClose={preventDefault}>
       Prevent Default
     </Tag>
+    <Tag closeIcon={<CloseCircleOutlined />} onClose={log}>
+      Tag 2
+    </Tag>
   </Space>
 );
 

components/tag/index.en-US.md

@@ -38,9 +38,8 @@ 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   |
+| --- | --- | --- | --- | --- |
+| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | false | 4.4.0 |
 | color | Color of the Tag | string | - |  |
 | icon | Set the icon of tag | ReactNode | - |  |
 | bordered | Whether has border style | boolean | true | 5.4.0 |

components/tag/index.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
 import { isPresetColor, isPresetStatusColor } from '../_util/colors';
+import useClosable from '../_util/hooks/useClosable';
 import type { LiteralUnion } from '../_util/type';
 import warning from '../_util/warning';
 import Wave from '../_util/wave';
@@ -18,7 +19,8 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
   rootClassName?: string;
   color?: LiteralUnion<PresetColorType | PresetStatusColorType>;
   closable?: boolean;
-  closeIcon?: React.ReactNode;
+  /** Advised to use closeIcon instead. */
+  closeIcon?: boolean | React.ReactNode;
   /** @deprecated `visible` will be removed in next major version. */
   visible?: boolean;
   onClose?: (e: React.MouseEvent<HTMLElement>) => void;
@@ -43,7 +45,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
     color,
     onClose,
     closeIcon,
-    closable = false,
+    closable,
     bordered = true,
     ...props
   } = tagProps;
@@ -100,18 +102,20 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
     setVisible(false);
   };
 
-  const closeIconNode = React.useMemo<React.ReactNode>(() => {
-    if (closable) {
-      return closeIcon ? (
+  const [, mergedCloseIcon] = useClosable(
+    closable,
+    closeIcon,
+    (iconNode: React.ReactNode) =>
+      iconNode === null ? (
+        <CloseOutlined className={`${prefixCls}-close-icon`} onClick={handleCloseClick} />
+      ) : (
         <span className={`${prefixCls}-close-icon`} onClick={handleCloseClick}>
-          {closeIcon}
+          {iconNode}
         </span>
-      ) : (
-        <CloseOutlined className={`${prefixCls}-close-icon`} onClick={handleCloseClick} />
+      ),
+    null,
+    false,
   );
-    }
-    return null;
-  }, [closable, closeIcon, prefixCls, handleCloseClick]);
 
   const isNeedWave =
     typeof props.onClick === 'function' ||
@@ -131,7 +135,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
   const tagNode = (
     <span {...props} ref={ref} className={tagClassName} style={tagStyle}>
       {kids}
-      {closeIconNode}
+      {mergedCloseIcon}
     </span>
   );
 

components/tag/index.zh-CN.md

@@ -39,8 +39,7 @@ demo:
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| closable | 标签是否可以关闭（点击默认关闭） | boolean | false |  |
-| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |
+| closeIcon | 自定义关闭按钮。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | false | 4.4.0 |
 | color | 标签色 | string | - |  |
 | icon | 设置图标 | ReactNode | - |  |
 | bordered | 是否有边框 | boolean | true | 5.4.0 |