feat: CP support Alert closeIcon (#47235)

ant-design · Jan 30, 2024 · aa36678 · aa36678
1 parent 6ed0254
commit aa36678
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 12 deletions.
diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx
@@ -84,7 +84,7 @@ interface CloseIconProps {
   handleClose: AlertProps['onClose'];
 }
 
-const CloseIcon: React.FC<CloseIconProps> = (props) => {
+const CloseIconNode: React.FC<CloseIconProps> = (props) => {
   const { isClosable, prefixCls, closeIcon, handleClose } = props;
   const mergedCloseIcon =
     closeIcon === true || closeIcon === undefined ? <CloseOutlined /> : closeIcon;
@@ -143,7 +143,7 @@ const Alert: React.FC<AlertProps> = (props) => {
   }, [props.type, banner]);
 
   // closeable when closeText or closeIcon is assigned
-  const isClosable = React.useMemo(() => {
+  const isClosable = React.useMemo<boolean>(() => {
     if (closeText) {
       return true;
     }
@@ -209,10 +209,10 @@ const Alert: React.FC<AlertProps> = (props) => {
             {description ? <div className={`${prefixCls}-description`}>{description}</div> : null}
           </div>
           {action ? <div className={`${prefixCls}-action`}>{action}</div> : null}
-          <CloseIcon
+          <CloseIconNode
             isClosable={isClosable}
             prefixCls={prefixCls}
-            closeIcon={closeText || closeIcon}
+            closeIcon={closeText || (closeIcon ?? alert?.closeIcon)}
             handleClose={handleClose}
           />
         </div>

diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
@@ -706,13 +706,14 @@ describe('ConfigProvider support style and className props', () => {
       <ConfigProvider
         alert={{
           className: 'test-class',
+          closeIcon: <span className="cp-test-icon">cp-test-icon</span>,
         }}
       >
-        <Alert message="Test Message" />
+        <Alert closable message="Test Message" />
       </ConfigProvider>,
     );
-
-    expect(container.querySelector('.ant-alert')).toHaveClass('test-class');
+    expect(container.querySelector<HTMLDivElement>('.ant-alert')).toHaveClass('test-class');
+    expect(container.querySelector<HTMLSpanElement>('.ant-alert .cp-test-icon')).toBeTruthy();
   });
 
   it('Should Alert style works', () => {

diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
@@ -2,8 +2,10 @@ import * as React from 'react';
 
 import type { WarningContextProps } from '../_util/warning';
 import type { ShowWaveEffect } from '../_util/wave/interface';
+import type { AlertProps } from '../alert';
 import type { BadgeProps } from '../badge';
 import type { ButtonProps } from '../button';
+import type { CardProps } from '../card';
 import type { DrawerProps } from '../drawer';
 import type { FlexProps } from '../flex/interface';
 import type { FormProps } from '../form/Form';
@@ -15,7 +17,6 @@ import type { SelectProps } from '../select';
 import type { SpaceProps } from '../space';
 import type { TableProps } from '../table';
 import type { TabsProps } from '../tabs';
-import type { CardProps } from '../card';
 import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
 import type { TourProps } from '../tour/interface';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
@@ -79,6 +80,8 @@ export type TourConfig = Pick<TourProps, 'closeIcon'>;
 export type ModalConfig = ComponentStyleConfig &
   Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon'>;
 
+export type AlertConfig = ComponentStyleConfig & Pick<AlertProps, 'closeIcon'>;
+
 export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' | 'styles'>;
 
 export type ButtonConfig = ComponentStyleConfig & Pick<ButtonProps, 'classNames' | 'styles'>;
@@ -121,7 +124,7 @@ export interface ConfigConsumerProps {
     Pick<FormProps, 'requiredMark' | 'colon' | 'scrollToFirstError' | 'validateMessages'>;
   theme?: ThemeConfig;
   select?: ComponentStyleConfig & Pick<SelectProps, 'showSearch'>;
-  alert?: ComponentStyleConfig;
+  alert?: AlertConfig;
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;

diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
@@ -101,7 +101,7 @@ const {
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| alert | Set Alert common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| alert | Set Alert common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
 | anchor | Set Anchor common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | avatar | Set Avatar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | badge | Set Badge common props | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -21,6 +21,7 @@ import type { TabsProps } from '../tabs';
 import { defaultTheme, DesignTokenContext } from '../theme/context';
 import defaultSeedToken from '../theme/themes/seed';
 import type {
+  AlertConfig,
   BadgeConfig,
   ButtonConfig,
   CardConfig,
@@ -131,7 +132,7 @@ export interface ConfigProviderProps {
   popupOverflow?: PopupOverflow;
   theme?: ThemeConfig;
   warning?: WarningContextProps;
-  alert?: ComponentStyleConfig;
+  alert?: AlertConfig;
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   calendar?: ComponentStyleConfig;

diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
@@ -103,7 +103,7 @@ const {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| alert | 设置 Alert 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| alert | 设置 Alert 组件的通用属性 | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
 | anchor | 设置 Anchor 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | avatar | 设置 Avatar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |