feat: CP support Notification closeIcon (#47244)

* feat: CP support Notification closeIcon

* fix: fix

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

@@ -1127,11 +1127,17 @@ describe('ConfigProvider support style and className props', () => {
     expect(element?.querySelector<HTMLDivElement>('.ant-upload')).toHaveStyle({ color: 'blue' });
   });
 
-  it('Should notification className & style works', () => {
+  it('Should notification className & style & closeIcon works', () => {
     const Demo: React.FC = () => {
       const [api, holder] = notification.useNotification();
       return (
-        <ConfigProvider notification={{ className: 'cp-notification', style: { color: 'blue' } }}>
+        <ConfigProvider
+          notification={{
+            className: 'cp-notification',
+            style: { color: 'blue' },
+            closeIcon: <span className="cp-test-icon">cp-test-icon</span>,
+          }}
+        >
           <button type="button" onClick={() => api.open({ message: 'test', duration: 0 })}>
             test
           </button>
@@ -1146,6 +1152,7 @@ describe('ConfigProvider support style and className props', () => {
       ?.querySelector<HTMLDivElement>('.ant-notification-notice');
     expect(element).toHaveClass('cp-notification');
     expect(element).toHaveStyle({ color: 'blue' });
+    expect(element?.querySelector<HTMLSpanElement>('.ant-notification .cp-test-icon')).toBeTruthy();
   });
 
   it('Should Timeline className works', () => {

components/config-provider/context.ts

@@ -12,6 +12,7 @@ import type { FormProps } from '../form/Form';
 import type { InputProps } from '../input';
 import type { Locale } from '../locale';
 import type { ModalProps } from '../modal';
+import type { ArgsProps } from '../notification/interface';
 import type { PaginationProps } from '../pagination';
 import type { SelectProps } from '../select';
 import type { SpaceProps } from '../space';
@@ -86,6 +87,8 @@ export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' |
 
 export type ButtonConfig = ComponentStyleConfig & Pick<ButtonProps, 'classNames' | 'styles'>;
 
+export type NotificationConfig = ComponentStyleConfig & Pick<ArgsProps, 'closeIcon'>;
+
 export interface CardConfig extends ComponentStyleConfig {
   classNames?: CardProps['classNames'];
   styles: CardProps['styles'];
@@ -167,7 +170,7 @@ export interface ConfigConsumerProps {
   timePicker?: ComponentStyleConfig;
   tour?: TourConfig;
   upload?: ComponentStyleConfig;
-  notification?: ComponentStyleConfig;
+  notification?: NotificationConfig;
   tree?: ComponentStyleConfig;
   colorPicker?: ComponentStyleConfig;
   datePicker?: ComponentStyleConfig;

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

@@ -131,7 +131,7 @@ const {
 | mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | message | Set Message common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 |
-| notification | Set Notification common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| notification | Set Notification common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, `closeIcon`: 5.14.0 |
 | pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | progress | Set Progress common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -32,6 +32,7 @@ import type {
   DrawerConfig,
   FlexConfig,
   ModalConfig,
+  NotificationConfig,
   PopupOverflow,
   TableConfig,
   Theme,
@@ -174,7 +175,7 @@ export interface ConfigProviderProps {
   timeline?: ComponentStyleConfig;
   timePicker?: ComponentStyleConfig;
   upload?: ComponentStyleConfig;
-  notification?: ComponentStyleConfig;
+  notification?: NotificationConfig;
   tree?: ComponentStyleConfig;
   colorPicker?: ComponentStyleConfig;
   datePicker?: ComponentStyleConfig;

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

@@ -133,7 +133,7 @@ const {
 | mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | message | 设置 Message 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0, `closeIcon`: 5.14.0 |
-| notification | 设置 Notification 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| notification | 设置 Notification 组件的通用属性 | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, `closeIcon`: 5.14.0 |
 | pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | progress | 设置 Progress 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/notification/useNotification.tsx

@@ -6,7 +6,7 @@ import type { NotificationAPI, NotificationConfig as RcNotificationConfig } from
 
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
-import type { ComponentStyleConfig } from '../config-provider/context';
+import type { NotificationConfig as CPNotificationConfig } from '../config-provider/context';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import { useToken } from '../theme/internal';
 import type {
@@ -32,7 +32,7 @@ type HolderProps = NotificationConfig & {
 
 interface HolderRef extends NotificationAPI {
   prefixCls: string;
-  notification?: ComponentStyleConfig;
+  notification?: CPNotificationConfig;
 }
 
 const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
@@ -104,11 +104,7 @@ const Holder = React.forwardRef<HolderRef, HolderProps>((props, ref) => {
   });
 
   // ================================ Ref ================================
-  React.useImperativeHandle(ref, () => ({
-    ...api,
-    prefixCls,
-    notification,
-  }));
+  React.useImperativeHandle(ref, () => ({ ...api, prefixCls, notification }));
 
   return holder;
 });
@@ -155,7 +151,10 @@ export function useInternalNotification(
         ...restConfig
       } = config;
 
-      const realCloseIcon = getCloseIcon(noticePrefixCls, closeIcon);
+      const realCloseIcon = getCloseIcon(
+        noticePrefixCls,
+        typeof closeIcon !== 'undefined' ? closeIcon : notification?.closeIcon,
+      );
 
       return originOpen({
         // use placement from props instead of hard-coding "topRight"