diff --git a/components/notification/PurePanel.tsx b/components/notification/PurePanel.tsx
index 32daa2707b..efd0f9789a 100644
--- a/components/notification/PurePanel.tsx
+++ b/components/notification/PurePanel.tsx
@@ -11,6 +11,7 @@ import * as React from 'react';
import { ConfigContext } from '../config-provider';
import type { IconType } from './interface';
import useStyle from './style';
+import PurePanelStyle from './style/pure-panel';
export const TypeIcon = {
info: ,
@@ -99,6 +100,7 @@ const PurePanel: React.FC = (props) => {
return (
+
{
expect(document.querySelectorAll('[role="status"]').length).toBe(1);
});
+
it('should hide close btn when closeIcon setting to null or false', async () => {
notification.config({
closeIcon: undefined,
@@ -348,4 +349,22 @@ describe('notification', () => {
expect(document.querySelectorAll('.with-null .ant-notification-notice-close').length).toBe(0);
expect(document.querySelectorAll('.with-false .ant-notification-notice-close').length).toBe(0);
});
+
+ it('style.width could be overrided', async () => {
+ act(() => {
+ notification.open({
+ message: 'Notification Title',
+ duration: 0,
+ style: {
+ width: 600,
+ },
+ className: 'with-style',
+ });
+ });
+ await awaitPromise();
+ expect(document.querySelector('.with-style')).toHaveStyle({ width: '600px' });
+ expect(
+ document.querySelector('.ant-notification-notice-wrapper:has(.width-style)'),
+ ).toHaveStyle({ width: '' });
+ });
});
diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts
index 2e4599b8ae..9cb156fba1 100644
--- a/components/notification/style/index.ts
+++ b/components/notification/style/index.ts
@@ -1,7 +1,7 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, AliasToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genNotificationPlacementStyle from './placement';
import genStackStyle from './stack';
@@ -33,7 +33,7 @@ export interface NotificationToken extends FullToken<'Notification'> {
notificationStackLayer: number;
}
-const genNotificationStyle: GenerateStyle = (token) => {
+export const genNoticeStyle = (token: NotificationToken): CSSObject => {
const {
iconCls,
componentCls, // .ant-notification
@@ -49,8 +49,6 @@ const genNotificationStyle: GenerateStyle = (token) => {
notificationBg,
notificationPadding,
notificationMarginEdge,
- motionDurationMid,
- motionEaseInOut,
fontSize,
lineHeight,
width,
@@ -60,25 +58,8 @@ const genNotificationStyle: GenerateStyle = (token) => {
const noticeCls = `${componentCls}-notice`;
- const fadeOut = new Keyframes('antNotificationFadeOut', {
- '0%': {
- maxHeight: token.animationMaxHeight,
- marginBottom: notificationMarginBottom,
- },
-
- '100%': {
- maxHeight: 0,
- marginBottom: 0,
- paddingTop: 0,
- paddingBottom: 0,
- opacity: 0,
- },
- });
-
- const noticeStyle: CSSObject = {
+ return {
position: 'relative',
- width,
- maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
marginBottom: notificationMarginBottom,
marginInlineStart: 'auto',
background: notificationBg,
@@ -87,6 +68,8 @@ const genNotificationStyle: GenerateStyle = (token) => {
[noticeCls]: {
padding: notificationPadding,
+ width,
+ maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
overflow: 'hidden',
lineHeight,
wordWrap: 'break-word',
@@ -172,6 +155,33 @@ const genNotificationStyle: GenerateStyle = (token) => {
marginTop: token.marginSM,
},
};
+};
+
+const genNotificationStyle: GenerateStyle = (token) => {
+ const {
+ componentCls, // .ant-notification
+ notificationMarginBottom,
+ notificationMarginEdge,
+ motionDurationMid,
+ motionEaseInOut,
+ } = token;
+
+ const noticeCls = `${componentCls}-notice`;
+
+ const fadeOut = new Keyframes('antNotificationFadeOut', {
+ '0%': {
+ maxHeight: token.animationMaxHeight,
+ marginBottom: notificationMarginBottom,
+ },
+
+ '100%': {
+ maxHeight: 0,
+ marginBottom: 0,
+ paddingTop: 0,
+ paddingBottom: 0,
+ opacity: 0,
+ },
+ });
return [
// ============================ Holder ============================
@@ -236,39 +246,42 @@ const genNotificationStyle: GenerateStyle = (token) => {
{
[componentCls]: {
[`${noticeCls}-wrapper`]: {
- ...noticeStyle,
+ ...genNoticeStyle(token),
},
},
},
-
- // ============================= Pure =============================
- {
- [`${noticeCls}-pure-panel`]: {
- ...noticeStyle,
- margin: 0,
- },
- },
];
};
// ============================== Export ==============================
+export const prepareComponentToken = (token: AliasToken) => ({
+ zIndexPopup: token.zIndexPopupBase + 50,
+ width: 384,
+});
+
+export const prepareNotificationToken = (token: AliasToken) => {
+ const notificationPaddingVertical = token.paddingMD;
+ const notificationPaddingHorizontal = token.paddingLG;
+ const notificationToken = mergeToken(token, {
+ notificationBg: token.colorBgElevated,
+ notificationPaddingVertical,
+ notificationPaddingHorizontal,
+ notificationIconSize: token.fontSizeLG * token.lineHeightLG,
+ notificationCloseButtonSize: token.controlHeightLG * 0.55,
+ notificationMarginBottom: token.margin,
+ notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
+ notificationMarginEdge: token.marginLG,
+ animationMaxHeight: 150,
+ notificationStackLayer: 3,
+ });
+
+ return notificationToken;
+};
+
export default genComponentStyleHook(
'Notification',
(token) => {
- const notificationPaddingVertical = token.paddingMD;
- const notificationPaddingHorizontal = token.paddingLG;
- const notificationToken = mergeToken(token, {
- notificationBg: token.colorBgElevated,
- notificationPaddingVertical,
- notificationPaddingHorizontal,
- notificationIconSize: token.fontSizeLG * token.lineHeightLG,
- notificationCloseButtonSize: token.controlHeightLG * 0.55,
- notificationMarginBottom: token.margin,
- notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
- notificationMarginEdge: token.marginLG,
- animationMaxHeight: 150,
- notificationStackLayer: 3,
- });
+ const notificationToken = prepareNotificationToken(token);
return [
genNotificationStyle(notificationToken),
@@ -276,8 +289,5 @@ export default genComponentStyleHook(
genStackStyle(notificationToken),
];
},
- (token) => ({
- zIndexPopup: token.zIndexPopupBase + 50,
- width: 384,
- }),
+ prepareComponentToken,
);
diff --git a/components/notification/style/pure-panel.ts b/components/notification/style/pure-panel.ts
new file mode 100644
index 0000000000..6358709f90
--- /dev/null
+++ b/components/notification/style/pure-panel.ts
@@ -0,0 +1,20 @@
+import { genSubStyleComponent } from '../../theme/internal';
+import { prepareComponentToken, genNoticeStyle, prepareNotificationToken } from '.';
+
+export default genSubStyleComponent(
+ ['Notification', 'PurePanel'],
+ (token) => {
+ const noticeCls = `${token.componentCls}-notice`;
+ const notificationToken = prepareNotificationToken(token);
+
+ return {
+ [`${noticeCls}-pure-panel`]: {
+ ...genNoticeStyle(notificationToken),
+ width: notificationToken.width,
+ maxWidth: `calc(100vw - ${notificationToken.notificationMarginEdge * 2}px)`,
+ margin: 0,
+ },
+ };
+ },
+ prepareComponentToken,
+);
diff --git a/components/notification/style/stack.ts b/components/notification/style/stack.ts
index 4fb5b55b95..b2834354ca 100644
--- a/components/notification/style/stack.ts
+++ b/components/notification/style/stack.ts
@@ -88,7 +88,6 @@ const genStackStyle: GenerateStyle = (token) => {
[`& > ${componentCls}-notice-wrapper`]: {
'&:not(:nth-last-child(-n + 1))': {
opacity: 1,
- width: token.width,
overflow: 'unset',
color: 'inherit',
pointerEvents: 'auto',
diff --git a/package.json b/package.json
index f0205bebba..6dcd78102f 100644
--- a/package.json
+++ b/package.json
@@ -329,11 +329,11 @@
"size-limit": [
{
"path": "./dist/antd.min.js",
- "limit": "401 KiB"
+ "limit": "402 KiB"
},
{
"path": "./dist/antd-with-locales.min.js",
- "limit": "460 KiB"
+ "limit": "461 KiB"
}
],
"title": "Ant Design",