feat: CP support Tag closeIcon (#47250)

components/config-provider/__tests__/style.test.tsx

@@ -940,9 +940,15 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
   });
 
-  it('Should Tag className & style works', () => {
+  it('Should Tag className & style & closeIcon works', () => {
     const { container } = render(
-      <ConfigProvider tag={{ className: 'cp-tag', style: { backgroundColor: 'blue' } }}>
+      <ConfigProvider
+        tag={{
+          className: 'cp-tag',
+          style: { backgroundColor: 'blue' },
+          closeIcon: <span className="cp-test-closeIcon">cp-test-closeIcon</span>,
+        }}
+      >
         <Tag>Test</Tag>
         <Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>
       </ConfigProvider>,
@@ -954,6 +960,7 @@ describe('ConfigProvider support style and className props', () => {
     const checkableElement = container.querySelector<HTMLSpanElement>('.ant-tag-checkable');
     expect(checkableElement).toHaveClass('cp-tag');
     expect(checkableElement).toHaveStyle({ backgroundColor: 'blue' });
+    expect(element?.querySelector<HTMLSpanElement>('.cp-test-closeIcon')).toBeTruthy();
   });
 
   it('Should Table className & style works', () => {

components/config-provider/context.ts

@@ -18,6 +18,7 @@ import type { SelectProps } from '../select';
 import type { SpaceProps } from '../space';
 import type { TableProps } from '../table';
 import type { TabsProps } from '../tabs';
+import type { TagProps } from '../tag';
 import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
 import type { TourProps } from '../tour/interface';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
@@ -89,6 +90,8 @@ export type ButtonConfig = ComponentStyleConfig & Pick<ButtonProps, 'classNames'
 
 export type NotificationConfig = ComponentStyleConfig & Pick<ArgsProps, 'closeIcon'>;
 
+export type TagConfig = ComponentStyleConfig & Pick<TagProps, 'closeIcon'>;
+
 export interface CardConfig extends ComponentStyleConfig {
   classNames?: CardProps['classNames'];
   styles: CardProps['styles'];
@@ -162,7 +165,7 @@ export interface ConfigConsumerProps {
   transfer?: ComponentStyleConfig;
   avatar?: ComponentStyleConfig;
   message?: ComponentStyleConfig;
-  tag?: ComponentStyleConfig;
+  tag?: TagConfig;
   table?: TableConfig;
   card?: CardConfig;
   tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;

components/config-provider/index.en-US.md

@@ -148,7 +148,7 @@ const {
 | steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | table | Set Table common props | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
 | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 |
-| tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tag | Set Tag common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
 | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tour | Set Tour common props | { closeIcon?: React.ReactNode } | - | 5.14.0 |

components/config-provider/index.tsx

@@ -35,6 +35,7 @@ import type {
   NotificationConfig,
   PopupOverflow,
   TableConfig,
+  TagConfig,
   Theme,
   ThemeConfig,
   TourConfig,
@@ -168,7 +169,7 @@ export interface ConfigProviderProps {
   transfer?: ComponentStyleConfig;
   avatar?: ComponentStyleConfig;
   message?: ComponentStyleConfig;
-  tag?: ComponentStyleConfig;
+  tag?: TagConfig;
   table?: TableConfig;
   card?: CardConfig;
   tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;

components/config-provider/index.zh-CN.md

@@ -150,7 +150,7 @@ const {
 | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
 | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 |
-| tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
 | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tour | 设置 Tour 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.14.0 |

components/tag/index.tsx

@@ -110,7 +110,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
 
   const [, mergedCloseIcon] = useClosable(
     closable,
-    closeIcon,
+    closeIcon ?? tag?.closeIcon,
     (iconNode: React.ReactNode) =>
       iconNode === null ? (
         <CloseOutlined className={`${prefixCls}-close-icon`} onClick={handleCloseClick} />

components/tag/index.zh-CN.md

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