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

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">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 |  |  |
 | 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">显示进度条</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 |  |  |
 | 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

@@ -44,6 +44,7 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
     fontSizeLG,
     notificationMarginBottom,
     borderRadiusLG,
+    colorPrimary,
     colorSuccess,
     colorInfo,
     colorWarning,
@@ -154,6 +155,25 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
       ...genFocusStyle(token),
     },
 
+    [`${noticeCls}-progress`]: {
+      position: 'absolute',
+      width: `calc(100% - ${unit(borderRadiusLG)} * 2)`,
+      height: '2px',
+      left: borderRadiusLG,
+      right: borderRadiusLG,
+      bottom: '-2px',
+
+      '.rc-progress-line': {
+        '&-trail': {
+          stroke: `rgba(0, 0, 0, 0.04)`,
+        },
+
+        '&-path': {
+          stroke: colorPrimary,
+        },
+      },
+    },
+
     [`${noticeCls}-btn`]: {
       float: 'right',
       marginTop: token.marginSM,