fix: notification style width (#45681)

* fix: notification style width

* chore: code clean

* chore: update size-limit

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: <InfoCircleFilled />,
@@ -99,6 +100,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
 
   return (
     <div className={classNames(`${noticePrefixCls}-pure-panel`, hashId, className)}>
+      <PurePanelStyle prefixCls={prefixCls} />
       <Notice
         {...restProps}
         prefixCls={prefixCls}

components/notification/__tests__/index.test.tsx

@@ -313,6 +313,7 @@ describe('notification', () => {
 
     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: '' });
+  });
 });

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<NotificationToken> = (token) => {
+export const genNoticeStyle = (token: NotificationToken): CSSObject => {
   const {
     iconCls,
     componentCls, // .ant-notification
@@ -49,8 +49,6 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
     notificationBg,
     notificationPadding,
     notificationMarginEdge,
-    motionDurationMid,
-    motionEaseInOut,
     fontSize,
     lineHeight,
     width,
@@ -60,25 +58,8 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (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<NotificationToken> = (token) => {
 
     [noticeCls]: {
       padding: notificationPadding,
+      width,
+      maxWidth: `calc(100vw - ${notificationMarginEdge * 2}px)`,
       overflow: 'hidden',
       lineHeight,
       wordWrap: 'break-word',
@@ -172,6 +155,33 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
       marginTop: token.marginSM,
     },
   };
+};
+
+const genNotificationStyle: GenerateStyle<NotificationToken> = (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<NotificationToken> = (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<NotificationToken>(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<NotificationToken>(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,
 );

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,
+);

components/notification/style/stack.ts

@@ -88,7 +88,6 @@ const genStackStyle: GenerateStyle<NotificationToken> = (token) => {
       [`& > ${componentCls}-notice-wrapper`]: {
         '&:not(:nth-last-child(-n + 1))': {
           opacity: 1,
-          width: token.width,
           overflow: 'unset',
           color: 'inherit',
           pointerEvents: 'auto',

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",