From 629087833f25ed43b5f2b47e8ae510b10302cb42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Thu, 4 May 2023 15:33:16 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20migrate=20less=20to=20token?= =?UTF-8?q?=20for=20Notification=20(#42079)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: migrate less to token for Notification * feat: migrate less to token for Notification * docs: update docs * docs: update docs * docs: update docs * docs: update docs * docs: update docs --- components/notification/style/index.tsx | 42 +++++++++++----------- docs/react/migrate-less-variables.en-US.md | 15 ++++++-- docs/react/migrate-less-variables.zh-CN.md | 13 ++++++- 3 files changed, 46 insertions(+), 24 deletions(-) diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx index 9682c66fc7..60e24bf01f 100644 --- a/components/notification/style/index.tsx +++ b/components/notification/style/index.tsx @@ -9,18 +9,18 @@ import genNotificationPlacementStyle from './placement'; export interface ComponentToken { zIndexPopup: number; width: number; -} - -export interface NotificationToken extends FullToken<'Notification'> { notificationBg: string; + notificationPadding: string; notificationPaddingVertical: number; notificationPaddingHorizontal: number; - notificationPadding: string; + notificationIconSize: number; + notificationCloseButtonSize: number; notificationMarginBottom: number; notificationMarginEdge: number; +} + +export interface NotificationToken extends FullToken<'Notification'> { animationMaxHeight: number; - notificationIconSize: number; - notificationCloseButtonSize: number; } const genNotificationStyle: GenerateStyle = (token) => { @@ -268,28 +268,28 @@ const genNotificationStyle: GenerateStyle = (token) => { // ============================== Export ============================== export default genComponentStyleHook( 'Notification', + (token) => { + const notificationToken = mergeToken(token, { + // index.less variables + animationMaxHeight: 150, + }); + + return [genNotificationStyle(notificationToken)]; + }, (token) => { const notificationPaddingVertical = token.paddingMD; const notificationPaddingHorizontal = token.paddingLG; - - const notificationToken = mergeToken(token, { - // default.less variables + return { + zIndexPopup: token.zIndexPopupBase + 50, + width: 384, notificationBg: token.colorBgElevated, notificationPaddingVertical, notificationPaddingHorizontal, - // index.less variables - notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`, - notificationMarginBottom: token.margin, - notificationMarginEdge: token.marginLG, - animationMaxHeight: 150, notificationIconSize: token.fontSizeLG * token.lineHeightLG, notificationCloseButtonSize: token.controlHeightLG * 0.55, - }); - - return [genNotificationStyle(notificationToken)]; + notificationMarginBottom: token.margin, + notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`, + notificationMarginEdge: token.marginLG, + }; }, - (token) => ({ - zIndexPopup: token.zIndexPopupBase + 50, - width: 384, - }), ); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 504345fc7e..248e7b02e5 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -91,7 +91,18 @@ This document contains the correspondence between all the less variables related | `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - | | `@modal-border-radius` | `borderRadiusLG` | - | - +## Notification + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@notification-width` | `width` | - | +| `@notification-padding` | `notificationPadding` | - | +| `@notification-padding-vertical` | `notificationPaddingVertical` | - | +| `@notification-padding-horizontal` | `notificationPaddingHorizontal` | - | +| `@notification-margin-bottom` | `notificationMarginBottom` | - | +| `@notification-margin-edge` | `notificationMarginEdge` | - | +| `@notification-bg` | `notificationBg` | - | @@ -118,7 +129,7 @@ This document contains the correspondence between all the less variables related ## Step -| less 变量 | Component Token | 备注 | +| Less variables | Component Token | Note | | --- | --- | --- | | `@process-tail-color` | `processTailColor` | - | | `@steps-nav-arrow-color` | `stepsNavArrowColor` | - | diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index f5df6c1a35..2e8f6e701a 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -91,7 +91,18 @@ title: Less 变量迁移 Design Token | `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - | | `@modal-border-radius` | `borderRadiusLG` | - | - +## Notification 通知提醒框 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@notification-width` | `width` | - | +| `@notification-padding` | `notificationPadding` | - | +| `@notification-padding-vertical` | `notificationPaddingVertical` | - | +| `@notification-padding-horizontal` | `notificationPaddingHorizontal` | - | +| `@notification-margin-bottom` | `notificationMarginBottom` | - | +| `@notification-margin-edge` | `notificationMarginEdge` | - | +| `@notification-bg` | `notificationBg` | - |