feat(notification): update style for progress

ant-design · Apr 15, 2024 · e53f010 · e53f010
1 parent c191b53
commit e53f010
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 2 deletions.
diff --git a/...onents/notification/demo/show-progress.md → ...s/notification/demo/show-with-progress.md b/...onents/notification/demo/show-progress.md → ...s/notification/demo/show-with-progress.md
diff --git a/...nents/notification/demo/show-progress.tsx → .../notification/demo/show-with-progress.tsx b/...nents/notification/demo/show-progress.tsx → .../notification/demo/show-with-progress.tsx
diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md
@@ -30,7 +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-progress.tsx">Show Progress</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>
 

diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md
@@ -31,7 +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-progress.tsx">显示进度条</code>
+<code src="./demo/show-with-progress.tsx">显示进度条</code>
 <code src="./demo/basic.tsx">静态方法（不推荐）</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 

diff --git a/components/notification/style/index.ts b/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,