test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 20:19:44 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

✨ feat: migrate less to token for Notification (#42079)

Browse Source 
* 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
This commit is contained in:
kiner-tang(文辉) 2023-05-04 15:33:16 +08:00 committed by GitHub
parent 4cf6f1b83b
commit 629087833f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/notification/style/index.tsx
View File

@ -9,18 +9,18 @@ import genNotificationPlacementStyle from './placement';
export interface ComponentToken {
zIndexPopup: number;
width: number;
notificationBg: string;
notificationPadding: string;
notificationPaddingVertical: number;
notificationPaddingHorizontal: number;
notificationIconSize: number;
notificationCloseButtonSize: number;
notificationMarginBottom: number;
notificationMarginEdge: number;
}
export interface NotificationToken extends FullToken<'Notification'> {
notificationBg: string;
notificationPaddingVertical: number;
notificationPaddingHorizontal: number;
notificationPadding: string;
notificationMarginBottom: number;
notificationMarginEdge: number;
animationMaxHeight: number;
notificationIconSize: number;
notificationCloseButtonSize: number;
}
const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
@ -269,27 +269,27 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
export default genComponentStyleHook(
'Notification',
(token) => {
const notificationPaddingVertical = token.paddingMD;
const notificationPaddingHorizontal = token.paddingLG;
const notificationToken = mergeToken<NotificationToken>(token, {
// default.less variables
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)];
},
(token) => ({
(token) => {
const notificationPaddingVertical = token.paddingMD;
const notificationPaddingHorizontal = token.paddingLG;
return {
zIndexPopup: token.zIndexPopupBase + 50,
width: 384,
}),
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,
};
},
);

15
docs/react/migrate-less-variables.en-US.md
View File

@ -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 -->
## Notification
<!-- prettier-ignore -->
| 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` | - |
<!-- ### Pagination -->
@ -118,7 +129,7 @@ This document contains the correspondence between all the less variables related
## Step
<!-- prettier-ignore -->
| less 变量 | Component Token | 备注 |
| Less variables | Component Token | Note |
| --- | --- | --- |
| `@process-tail-color` | `processTailColor` | - |
| `@steps-nav-arrow-color` | `stepsNavArrowColor` | - |

13
docs/react/migrate-less-variables.zh-CN.md
View File

@ -91,7 +91,18 @@ title: Less 变量迁移 Design Token
| `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - |
| `@modal-border-radius` | `borderRadiusLG` | - |
<!-- ### Notification 通知提醒框 -->
## Notification 通知提醒框
<!-- prettier-ignore -->
| 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` | - |
<!-- ### Pagination 分页 -->