Skip to content

Commit

Permalink
feat: ConfigProvider support Alert className and style properties (an…
Browse files Browse the repository at this point in the history
  • Loading branch information
Yuiai01 authored Jul 6, 2023
1 parent 3aedb2f commit 3f78590
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 2 deletions.
5 changes: 3 additions & 2 deletions components/alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -164,6 +164,7 @@ const Alert: React.FC<AlertProps> = ({
[`${prefixCls}-banner`]: !!banner,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
alert?.className,
className,
rootClassName,
hashId,
Expand All @@ -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}
Expand Down
29 changes: 29 additions & 0 deletions components/config-provider/__tests__/style.test.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions components/config-provider/context.ts
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ export interface ConfigConsumerProps {
select?: ComponentStyleConfig & {
showSearch?: boolean;
};
alert?: ComponentStyleConfig;
anchor?: ComponentStyleConfig;
button?: ButtonConfig;
divider?: ComponentStyleConfig;
Expand Down
1 change: 1 addition & 0 deletions components/config-provider/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
3 changes: 3 additions & 0 deletions components/config-provider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ export interface ConfigProviderProps {
popupMatchSelectWidth?: boolean;
popupOverflow?: PopupOverflow;
theme?: ThemeConfig;
alert?: ComponentStyleConfig;
anchor?: ComponentStyleConfig;
button?: ButtonConfig;
cascader?: ComponentStyleConfig;
Expand Down Expand Up @@ -248,6 +249,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
children,
csp: customCsp,
autoInsertSpaceInButton,
alert,
anchor,
form,
locale,
Expand Down Expand Up @@ -340,6 +342,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
const baseConfig = {
csp,
autoInsertSpaceInButton,
alert,
anchor,
locale: locale || legacyLocale,
direction,
Expand Down
1 change: 1 addition & 0 deletions components/config-provider/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down

0 comments on commit 3f78590

Please sign in to comment.