feat: add closeIcon customize tag close (#24885)

* feat: add closeIcon customize tag close * docs fix * update snap * fix: css name
ant-design · Jun 10, 2020 · 312e4b2 · 312e4b2
1 parent 8957d37
commit 312e4b2
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 19 deletions.
diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -476,6 +476,53 @@ Array [
 ]
 `;
 
+exports[`renders ./components/tag/demo/customize.md correctly 1`] = `
+Array [
+  <span
+    class="ant-tag"
+  >
+    Tag1
+    <div
+      class="ant-tag-customize-close"
+    >
+      关 闭
+    </div>
+  </span>,
+  <span
+    class="ant-tag"
+  >
+    Tag2
+    <div
+      class="ant-tag-customize-close"
+    >
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="close-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            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>
+    </div>
+  </span>,
+]
+`;
+
 exports[`renders ./components/tag/demo/icon.md correctly 1`] = `
 Array [
   <span

diff --git a/components/tag/demo/customize.md b/components/tag/demo/customize.md
@@ -0,0 +1,32 @@
+---
+order: 8
+debug: true
+title:
+  zh-CN: 自定义关闭按钮
+  en-US: Customize close
+---
+
+## zh-CN
+
+可用 `closeIcon` 自定义关闭按钮。
+
+## en-US
+
+The close icon can be customized using `closeIcon`.
+
+```jsx
+import { Tag } from 'antd';
+import { CloseCircleOutlined } from '@ant-design/icons';
+
+ReactDOM.render(
+  <>
+    <Tag closable closeIcon="关 闭">
+      Tag1
+    </Tag>
+    <Tag closable closeIcon={<CloseCircleOutlined />}>
+      Tag2
+    </Tag>
+  </>,
+  mountNode,
+);
+```
diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md
@@ -17,13 +17,14 @@ Tag for categorizing or markup.
 
 ### Tag
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| closable | Whether the Tag can be closed | boolean | `false` |
-| color | Color of the Tag | string | - |
-| onClose | Callback executed when tag is closed | (e) => void | - |
-| visible | Whether the Tag is closed or not | boolean | `true` |
-| icon | Set the icon of tag | ReactNode | - |  |
+| Property  | Description                          | Type        | Default | Version |
+| --------- | ------------------------------------ | ----------- | ------- | ------- |
+| closable  | Whether the Tag can be closed        | boolean     | `false` |         |
+| color     | Color of the Tag                     | string      | -       |         |
+| closeIcon | custom close icon                    | ReactNode   | -       | 4.4.0   |
+| onClose   | Callback executed when tag is closed | (e) => void | -       |         |
+| visible   | Whether the Tag is closed or not     | boolean     | `true`  |         |
+| icon      | Set the icon of tag                  | ReactNode   | -       |         |
 
 ### Tag.CheckableTag
 

diff --git a/components/tag/index.tsx b/components/tag/index.tsx
@@ -21,6 +21,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
   className?: string;
   color?: LiteralUnion<PresetColorType | PresetStatusColorType, string>;
   closable?: boolean;
+  closeIcon?: React.ReactNode;
   visible?: boolean;
   onClose?: Function;
   style?: React.CSSProperties;
@@ -44,6 +45,7 @@ const InternalTag: React.ForwardRefRenderFunction<unknown, TagProps> = (
     icon,
     color,
     onClose,
+    closeIcon,
     closable = false,
     ...props
   },
@@ -98,7 +100,16 @@ const InternalTag: React.ForwardRefRenderFunction<unknown, TagProps> = (
   };
 
   const renderCloseIcon = () => {
-    return closable ? <CloseOutlined onClick={handleCloseClick} /> : null;
+    if (closable) {
+      return closeIcon ? (
+        <div className={`${prefixCls}-close-icon`} onClick={handleCloseClick}>
+          {closeIcon}
+        </div>
+      ) : (
+        <CloseOutlined className={`${prefixCls}-close-icon`} onClick={handleCloseClick} />
+      );
+    }
+    return null;
   };
 
   const isNeedWave =

diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md
@@ -17,13 +17,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
 
 ### Tag
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| closable | 标签是否可以关闭 | boolean | false |
-| color | 标签色 | string | - |
-| onClose | 关闭时的回调 | (e) => void | - |
-| visible | 是否显示标签 | boolean | `true` |
-| icon | 设置图标 | ReactNode | - |  |
+| 参数      | 说明             | 类型        | 默认值 | 版本  |
+| --------- | ---------------- | ----------- | ------ | ----- |
+| closable  | 标签是否可以关闭 | boolean     | false  |       |
+| color     | 标签色           | string      | -      |       |
+| closeIcon | 自定义关闭按钮   | ReactNode   | -      | 4.4.0 |
+| onClose   | 关闭时的回调     | (e) => void | -      |       |
+| visible   | 是否显示标签     | boolean     | `true` |       |
+| icon      | 设置图标         | ReactNode   | -      |       |
 
 ### Tag.CheckableTag
 

diff --git a/components/tag/style/index.less b/components/tag/style/index.less
@@ -36,12 +36,11 @@
     padding: 0 8px;
   }
 
-  .@{iconfont-css-prefix}-close {
+  &-close-icon {
     .iconfont-size-under-12px(10px);
 
     margin-left: 3px;
     color: @text-color-secondary;
-    font-weight: bold;
     cursor: pointer;
     transition: all 0.3s @ease-in-out-circ;
 

diff --git a/components/tag/style/rtl.less b/components/tag/style/rtl.less
@@ -11,8 +11,8 @@
     text-align: right;
   }
 
-  .@{iconfont-css-prefix}-close {
-    .@{tag-prefix-cls}-rtl& {
+  &-close-icon {
+    .@{tag-prefix-cls}-rtl & {
       margin-right: 3px;
       margin-left: 0;
     }