feat: adapt semantic close

Author: divyeshagrawal

src/Notice.tsx

@@ -33,6 +33,8 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     onNoticeClose,
     times,
     hovering: forcedHovering,
+    classNames,
+    styles,
   } = props;
   const [hovering, setHovering] = React.useState(false);
   const [percent, setPercent] = React.useState(0);
@@ -138,7 +140,8 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
       {/* Close Icon */}
       {closable && (
         <button
-          className={`${noticePrefixCls}-close`}
+          className={clsx(`${noticePrefixCls}-close`, classNames?.close)}
+          style={{ ...styles?.close }}
           onKeyDown={onCloseKeyDown}
           aria-label="Close"
           {...ariaProps}

src/interface.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 
 export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
 
-type NoticeSemanticProps = 'wrapper';
+type NoticeSemanticProps = 'wrapper' | 'close';
 
 export interface NoticeConfig {
   content?: React.ReactNode;

tests/index.test.tsx

@@ -623,13 +623,18 @@ describe('Notification.Basic', () => {
 
     act(() => {
       instance.open({
+        closable: true,
         styles: {
           wrapper: {
             content: 'little',
           },
+          close: {
+            color: 'red',
+          },
         },
         classNames: {
           wrapper: 'bamboo',
+          close: 'custom-close',
         },
       });
     });
@@ -638,6 +643,11 @@ describe('Notification.Basic', () => {
       content: 'little',
     });
     expect(document.querySelector('.rc-notification-notice-wrapper')).toHaveClass('bamboo');
+
+    expect(document.querySelector('.rc-notification-notice-close')).toHaveClass('custom-close');
+    expect(document.querySelector('.rc-notification-notice-close')).toHaveStyle({
+      color: 'rgb(255, 0, 0)',
+    });
   });
 
   it('should className work', () => {