feat(notification): add show progress option and update docs (#48353)

* feat(notification): add show progress option and update docs

* feat(notification): update style for progress

* fix: lint issues and add version for the doc

* feat: upgrade rc-notification and update the style changes

* test: update test snapshots

* fix: update changes base on the conversation

* fix: update bg base on the conversation

* fix: use primary color for progress bg

* docs: update doc changes

Co-authored-by: kiner-tang <1127031143@qq.com>
Signed-off-by: Eden Wang <yociduo@vip.qq.com>

---------

Signed-off-by: Eden Wang <yociduo@vip.qq.com>
Co-authored-by: kiner-tang <1127031143@qq.com>

components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -537,6 +537,19 @@ exports[`renders components/notification/demo/render-panel.tsx extend context co
 
 exports[`renders components/notification/demo/render-panel.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/notification/demo/show-with-progress.tsx extend context correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open the notification box
+  </span>
+</button>
+`;
+
+exports[`renders components/notification/demo/show-with-progress.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/notification/demo/stack.tsx extend context correctly 1`] = `
 <div>
   <div

components/notification/__tests__/__snapshots__/demo.test.ts.snap

@@ -523,6 +523,17 @@ exports[`renders components/notification/demo/render-panel.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/notification/demo/show-with-progress.tsx correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open the notification box
+  </span>
+</button>
+`;
+
 exports[`renders components/notification/demo/stack.tsx correctly 1`] = `
 <div>
   <div

components/notification/demo/show-with-progress.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+显示自动关闭通知框的进度条。
+
+## en-US
+
+Show progress bar for auto-closing notification.

components/notification/demo/show-with-progress.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, notification } from 'antd';
+
+const App: React.FC = () => {
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotification = () => {
+    api.open({
+      message: 'Notification Title',
+      description:
+        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+      showProgress: true,
+    });
+  };
+
+  return (
+    <>
+      {contextHolder}
+      <Button type="primary" onClick={openNotification}>
+        Open the notification box
+      </Button>
+    </>
+  );
+};
+
+export default App;

components/notification/index.en-US.md

@@ -30,6 +30,7 @@ To display a notification message at any of the four corners of the viewport. Ty
 <code src="./demo/custom-style.tsx">Customized style</code>
 <code src="./demo/update.tsx">Update Message Content</code>
 <code src="./demo/stack.tsx" version="5.10.0">Stack</code>
+<code src="./demo/show-with-progress.tsx" version="5.18.0">Show with progress</code>
 <code src="./demo/basic.tsx">Static Method (deprecated)</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 
@@ -53,6 +54,7 @@ The properties of config are as follows:
 | closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
 | description | The content of notification box (required) | ReactNode | - | - |
 | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | - |
+| showProgress | Show progress bar for auto-closing notification | boolean |  | 5.18.0 |
 | icon | Customized icon | ReactNode | - | - |
 | key | The unique identifier of the Notification | string | - | - |
 | message | The title of notification box (required) | ReactNode | - | - |

components/notification/index.zh-CN.md

@@ -31,6 +31,7 @@ demo:
 <code src="./demo/custom-style.tsx">自定义样式</code>
 <code src="./demo/update.tsx">更新消息内容</code>
 <code src="./demo/stack.tsx" version="5.10.0">堆叠</code>
+<code src="./demo/show-with-progress.tsx" version="5.18.0">显示进度条</code>
 <code src="./demo/basic.tsx">静态方法（不推荐）</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 
@@ -105,6 +106,7 @@ notification.config({
 | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |  |
 | closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
 | duration | 默认自动关闭延时，单位秒 | number | 4.5 |  |
+| showProgress | 显示自动关闭通知框的进度条 | boolean |  | 5.18.0 |
 | getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body |  |
 | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | rtl | 是否开启 RTL 模式 | boolean | false |  |

components/notification/interface.ts

@@ -25,6 +25,7 @@ export interface ArgsProps {
   key?: React.Key;
   onClose?: () => void;
   duration?: number | null;
+  showProgress?: boolean;
   icon?: React.ReactNode;
   placement?: NotificationPlacement;
   style?: React.CSSProperties;
@@ -52,6 +53,7 @@ export interface GlobalConfigProps {
   top?: number;
   bottom?: number;
   duration?: number;
+  showProgress?: boolean;
   prefixCls?: string;
   getContainer?: () => HTMLElement | ShadowRoot;
   placement?: NotificationPlacement;
@@ -72,4 +74,5 @@ export interface NotificationConfig {
   rtl?: boolean;
   stack?: boolean | { threshold?: number };
   duration?: number;
+  showProgress?: boolean;
 }

components/notification/style/index.ts

@@ -34,6 +34,8 @@ export interface NotificationToken extends FullToken<'Notification'> {
   notificationMarginBottom: number;
   notificationMarginEdge: number;
   notificationStackLayer: number;
+  notificationProgressBg: string;
+  notificationProgressHeight: number;
 }
 
 export const genNoticeStyle = (token: NotificationToken): CSSObject => {
@@ -52,6 +54,8 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
     notificationBg,
     notificationPadding,
     notificationMarginEdge,
+    notificationProgressBg,
+    notificationProgressHeight,
     fontSize,
     lineHeight,
     width,
@@ -154,6 +158,39 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
       ...genFocusStyle(token),
     },
 
+    [`${noticeCls}-progress`]: {
+      position: 'absolute',
+      display: 'block',
+      appearance: 'none',
+      WebkitAppearance: 'none',
+      inlineSize: `calc(100% - ${unit(borderRadiusLG)} * 2)`,
+      left: {
+        _skip_check_: true,
+        value: borderRadiusLG,
+      },
+      right: {
+        _skip_check_: true,
+        value: borderRadiusLG,
+      },
+      bottom: 0,
+      blockSize: notificationProgressHeight,
+      border: 0,
+
+      '&, &::-webkit-progress-bar': {
+        borderRadius: borderRadiusLG,
+        backgroundColor: `rgba(0, 0, 0, 0.04)`,
+      },
+
+      '&::-moz-progress-bar': {
+        background: notificationProgressBg,
+      },
+
+      '&::-webkit-progress-value': {
+        borderRadius: borderRadiusLG,
+        background: notificationProgressBg,
+      },
+    },
+
     [`${noticeCls}-btn`]: {
       float: 'right',
       marginTop: token.marginSM,
@@ -279,6 +316,8 @@ export const prepareNotificationToken: (
     notificationMarginEdge: token.marginLG,
     animationMaxHeight: 150,
     notificationStackLayer: 3,
+    notificationProgressHeight: 2,
+    notificationProgressBg: `linear-gradient(90deg, ${token.colorPrimaryBorderHover}, ${token.colorPrimary})`,
   });
 
   return notificationToken;

package.json

@@ -143,7 +143,7 @@
     "rc-mentions": "~2.11.1",
     "rc-menu": "~9.13.0",
     "rc-motion": "^2.9.0",
-    "rc-notification": "~5.4.0",
+    "rc-notification": "~5.5.0",
     "rc-pagination": "~4.0.4",
     "rc-picker": "~4.5.0",
     "rc-progress": "~4.0.0",