From 3f785909dffb6346388261d7971ad7e9829eb42b Mon Sep 17 00:00:00 2001
From: JiaQi <112228030+Yuiai01@users.noreply.github.com>
Date: Thu, 6 Jul 2023 09:33:54 +0800
Subject: [PATCH] feat: ConfigProvider support Alert className and style
 properties (#43384)

---
 components/alert/Alert.tsx                    |  5 ++--
 .../config-provider/__tests__/style.test.tsx  | 29 +++++++++++++++++++
 components/config-provider/context.ts         |  1 +
 components/config-provider/index.en-US.md     |  1 +
 components/config-provider/index.tsx          |  3 ++
 components/config-provider/index.zh-CN.md     |  1 +
 6 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx
index f3ca2aa14e..42419f8e4a 100644
--- a/components/alert/Alert.tsx
+++ b/components/alert/Alert.tsx
@@ -120,7 +120,7 @@ const Alert: React.FC<AlertProps> = ({
     warning(!closeText, 'Alert', '`closeText` is deprecated. Please use `closeIcon` instead.');
   }
   const ref = React.useRef<HTMLDivElement>(null);
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, alert } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -164,6 +164,7 @@ const Alert: React.FC<AlertProps> = ({
       [`${prefixCls}-banner`]: !!banner,
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
+    alert?.className,
     className,
     rootClassName,
     hashId,
@@ -190,7 +191,7 @@ const Alert: React.FC<AlertProps> = ({
           ref={ref}
           data-show={!closed}
           className={classNames(alertCls, motionClassName)}
-          style={{ ...style, ...motionStyle }}
+          style={{ ...alert?.style, ...style, ...motionStyle }}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
           onClick={onClick}
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index bc3c3a411e..d07cbd231a 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ConfigProvider from '..';
 import { fireEvent, render } from '../../../tests/utils';
+import Alert from '../../alert';
 import Anchor from '../../anchor';
 import Avatar from '../../avatar';
 import Badge from '../../badge';
@@ -516,6 +517,34 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should Alert className works', () => {
+    const { container } = render(
+      <ConfigProvider
+        alert={{
+          className: 'test-class',
+        }}
+      >
+        <Alert message="Test Message" />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-alert')).toHaveClass('test-class');
+  });
+
+  it('Should Alert style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        alert={{
+          style: { color: 'red' },
+        }}
+      >
+        <Alert style={{ fontSize: '16px' }} message="Test Message" />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-alert')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Anchor className & style works', () => {
     const { container } = render(
       <ConfigProvider
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index 0aa9c2f9d0..fe4f7e0fff 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -94,6 +94,7 @@ export interface ConfigConsumerProps {
   select?: ComponentStyleConfig & {
     showSearch?: boolean;
   };
+  alert?: ComponentStyleConfig;
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 8bd18cb23b..9fd164e475 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -101,6 +101,7 @@ const {
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| alert | Set Alert common props | { className?: string, style?: React.CSSProperties } | - | 5.7.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
index 5886372d37..4c876bcc2c 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -138,6 +138,7 @@ export interface ConfigProviderProps {
   popupMatchSelectWidth?: boolean;
   popupOverflow?: PopupOverflow;
   theme?: ThemeConfig;
+  alert?: ComponentStyleConfig;
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   cascader?: ComponentStyleConfig;
@@ -248,6 +249,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     children,
     csp: customCsp,
     autoInsertSpaceInButton,
+    alert,
     anchor,
     form,
     locale,
@@ -340,6 +342,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
   const baseConfig = {
     csp,
     autoInsertSpaceInButton,
+    alert,
     anchor,
     locale: locale || legacyLocale,
     direction,
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index 9f7ed17bd4..e3a7eae115 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -103,6 +103,7 @@ const {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| alert | 设置 Alert 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.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 |