feat(Alert): Custom closeIcon (#32345)

Co-authored-by: chenjingjie <chenjingjie@coding.net>

components/alert/__tests__/index.test.tsx

@@ -54,6 +54,18 @@ describe('Alert', () => {
     });
   });
 
+  it('support closeIcon', () => {
+    const wrapper = render(
+      <Alert
+        closable
+        closeIcon={<span>close</span>}
+        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
+        type="warning"
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
   describe('data and aria props', () => {
     it('sets data attributes on input', () => {
       const wrapper = mount(<Alert data-test="test-id" data-id="12345" message={null} />);

components/alert/index.en-US.md

@@ -21,6 +21,7 @@ Alert component for feedback.
 | banner | Whether to show as banner | boolean | false |  |
 | closable | Whether Alert can be closed | boolean | - |  |
 | closeText | Close text to show | ReactNode | - |  |
+| closeIcon | Custom close icon | ReactNode | <CloseOutlined /> | 4.17.0 |
 | description | Additional content of Alert | ReactNode | - |  |
 | icon | Custom icon, effective when `showIcon` is true | ReactNode | - |  |
 | message | Content of Alert | ReactNode | - |  |
@@ -30,7 +31,7 @@ Alert component for feedback.
 
 ### Alert.ErrorBoundary
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| description | Custom error description to show | ReactNode | {{ error stack }} |  |
-| message | Custom error message to show | ReactNode | {{ error }} |  |
+| Property    | Description                      | Type      | Default           | Version |
+| ----------- | -------------------------------- | --------- | ----------------- | ------- |
+| description | Custom error description to show | ReactNode | {{ error stack }} |         |
+| message     | Custom error message to show     | ReactNode | {{ error }}       |         |

components/alert/index.tsx

@@ -40,6 +40,8 @@ export interface AlertProps {
   className?: string;
   banner?: boolean;
   icon?: React.ReactNode;
+  /** Custome closeIcon */
+  closeIcon?: React.ReactNode;
   action?: React.ReactNode;
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
@@ -78,6 +80,7 @@ const Alert: AlertInterface = ({
   showIcon,
   closable,
   closeText,
+  closeIcon = <CloseOutlined />,
   action,
   ...props
 }) => {
@@ -127,11 +130,7 @@ const Alert: AlertInterface = ({
         className={`${prefixCls}-close-icon`}
         tabIndex={0}
       >
-        {closeText ? (
-          <span className={`${prefixCls}-close-text`}>{closeText}</span>
-        ) : (
-          <CloseOutlined />
-        )}
+        {closeText ? <span className={`${prefixCls}-close-text`}>{closeText}</span> : closeIcon}
       </button>
     ) : null;
 

components/alert/index.zh-CN.md

@@ -22,6 +22,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
 | banner | 是否用作顶部公告 | boolean | false |  |
 | closable | 默认不显示关闭按钮 | boolean | - |  |
 | closeText | 自定义关闭按钮 | ReactNode | - |  |
+| closeIcon | 自定义关闭 Icon | ReactNode | <CloseOutlined /> | 4.17.0 |
 | description | 警告提示的辅助性文字介绍 | ReactNode | - |  |
 | icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - |  |
 | message | 警告提示内容 | ReactNode | - |  |