From f89c97b488216711fc0c5c62ec9146344bb4ec5f Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 26 Apr 2023 21:55:58 +0800 Subject: [PATCH] feat: Modal Component Token (#42000) * feat: Modal Component Token * chore: code clean * docs: less to component token * docs: update * chore: clean * chore: clean * docs: add alert --- components/modal/style/index.tsx | 97 +++++++++++----------- docs/react/migrate-less-variables.en-US.md | 38 +++++++++ docs/react/migrate-less-variables.zh-CN.md | 38 +++++++++ 3 files changed, 126 insertions(+), 47 deletions(-) create mode 100644 docs/react/migrate-less-variables.en-US.md create mode 100644 docs/react/migrate-less-variables.zh-CN.md diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 3443452fbf..14afd906ab 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -8,32 +8,31 @@ import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook' /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { // Component token here + modalHeaderBg: string; + modalHeaderTitleLineHeight: number; + modalHeaderTitleFontSize: number; + modalHeadingColor: string; + modalCloseIconColor: string; + modalContentBg: string; + modalFooterBg: string; + modalCloseBtnSize: number; + modalConfirmIconSize: number; } export interface ModalToken extends FullToken<'Modal'> { // Custom token here + modalHeaderHeight: number; modalBodyPadding: number; - modalHeaderBg: string; modalHeaderPadding: string; modalHeaderBorderWidth: number; modalHeaderBorderStyle: string; - modalHeaderTitleLineHeight: number; - modalHeaderTitleFontSize: number; modalHeaderBorderColorSplit: string; - modalHeaderCloseSize: number; - modalContentBg: string; - modalHeadingColor: string; - modalCloseColor: string; - modalCloseBtnSize: number; - modalFooterBg: string; modalFooterBorderColorSplit: string; modalFooterBorderStyle: string; modalFooterPaddingVertical: number; modalFooterPaddingHorizontal: number; modalFooterBorderWidth: number; - modalConfirmTitleFontSize: number; modalIconHoverColor: string; - modalConfirmIconSize: number; } function box(position: React.CSSProperties['position']): React.CSSProperties { @@ -176,11 +175,11 @@ const genModalStyle: GenerateStyle = (token) => { [`${componentCls}-close`]: { position: 'absolute', - top: (token.modalHeaderCloseSize - token.modalCloseBtnSize) / 2, - insetInlineEnd: (token.modalHeaderCloseSize - token.modalCloseBtnSize) / 2, + top: (token.modalHeaderHeight - token.modalCloseBtnSize) / 2, + insetInlineEnd: (token.modalHeaderHeight - token.modalCloseBtnSize) / 2, zIndex: token.zIndexPopupBase + 10, padding: 0, - color: token.modalCloseColor, + color: token.modalCloseIconColor, fontWeight: token.fontWeightStrong, lineHeight: 1, textDecoration: 'none', @@ -423,41 +422,45 @@ const genWireframeStyle: GenerateStyle = (token) => { }; // ============================== Export ============================== -export default genComponentStyleHook('Modal', (token) => { - const headerPaddingVertical = token.padding; - const headerFontSize = token.fontSizeHeading5; - const headerLineHeight = token.lineHeightHeading5; +export default genComponentStyleHook( + 'Modal', + (token) => { + const headerPaddingVertical = token.padding; + const headerFontSize = token.fontSizeHeading5; + const headerLineHeight = token.lineHeightHeading5; - const modalToken = mergeToken(token, { - modalBodyPadding: token.paddingLG, + const modalToken = mergeToken(token, { + modalBodyPadding: token.paddingLG, + modalHeaderPadding: `${headerPaddingVertical}px ${token.paddingLG}px`, + modalHeaderBorderWidth: token.lineWidth, + modalHeaderBorderStyle: token.lineType, + modalHeaderBorderColorSplit: token.colorSplit, + modalHeaderHeight: headerLineHeight * headerFontSize + headerPaddingVertical * 2, + modalFooterBorderColorSplit: token.colorSplit, + modalFooterBorderStyle: token.lineType, + modalFooterPaddingVertical: token.paddingXS, + modalFooterPaddingHorizontal: token.padding, + modalFooterBorderWidth: token.lineWidth, + modalIconHoverColor: token.colorIconHover, + }); + return [ + genModalStyle(modalToken), + genModalConfirmStyle(modalToken), + genRTLStyle(modalToken), + genModalMaskStyle(modalToken), + token.wireframe && genWireframeStyle(modalToken), + initZoomMotion(modalToken, 'zoom'), + ]; + }, + (token) => ({ + modalFooterBg: 'transparent', modalHeaderBg: token.colorBgElevated, - modalHeaderPadding: `${headerPaddingVertical}px ${token.paddingLG}px`, - modalHeaderBorderWidth: token.lineWidth, - modalHeaderBorderStyle: token.lineType, - modalHeaderTitleLineHeight: headerLineHeight, - modalHeaderTitleFontSize: headerFontSize, - modalHeaderBorderColorSplit: token.colorSplit, - modalHeaderCloseSize: headerLineHeight * headerFontSize + headerPaddingVertical * 2, + modalHeaderTitleLineHeight: token.lineHeightHeading5, + modalHeaderTitleFontSize: token.fontSizeHeading5, modalContentBg: token.colorBgElevated, modalHeadingColor: token.colorTextHeading, - modalCloseColor: token.colorTextDescription, - modalFooterBg: 'transparent', - modalFooterBorderColorSplit: token.colorSplit, - modalFooterBorderStyle: token.lineType, - modalFooterPaddingVertical: token.paddingXS, - modalFooterPaddingHorizontal: token.padding, - modalFooterBorderWidth: token.lineWidth, - modalConfirmTitleFontSize: token.fontSizeLG, - modalIconHoverColor: token.colorIconHover, + modalCloseIconColor: token.colorTextDescription, modalConfirmIconSize: token.fontSize * token.lineHeight, - modalCloseBtnSize: token.controlHeightLG * 0.55, - }); - return [ - genModalStyle(modalToken), - genModalConfirmStyle(modalToken), - genRTLStyle(modalToken), - genModalMaskStyle(modalToken), - token.wireframe && genWireframeStyle(modalToken), - initZoomMotion(modalToken, 'zoom'), - ]; -}); + modalCloseBtnSize: token.fontSize * token.lineHeight, + }), +); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md new file mode 100644 index 0000000000..2905d42293 --- /dev/null +++ b/docs/react/migrate-less-variables.en-US.md @@ -0,0 +1,38 @@ +--- +order: 9 +title: Migrate less variables to Component Token +--- + +This document contains the correspondence between all the less variables related to components in version 4.x and the Component Token in version 5.x. If you are upgrading from version 4.x to version 5.x, you can quickly find the corresponding Component Token through this comparison table. + + + +## Modal 对话框 + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@modal-header-padding-vertical` | - | Deprecated for style change | +| `@modal-header-padding-horizontal` | - | Deprecated for style change | +| `@modal-body-padding` | - | Deprecated for style change | +| `@modal-header-bg` | `modalHeaderBg` | - | +| `@modal-header-padding` | - | Deprecated for style change | +| `@modal-header-border-width` | - | Deprecated for style change | +| `@modal-header-border-style` | - | Deprecated for style change | +| `@modal-header-title-line-height` | `modalHeaderTitleLineHeight` | - | +| `@modal-header-title-font-size` | `modalHeaderTitleFontSize` | - | +| `@modal-header-border-color-split` | - | Deprecated for style change | +| `@modal-header-close-size` | - | Deprecated for style change | +| `@modal-content-bg` | `modalContentBg` | - | +| `@modal-heading-color` | `modalHeadingColor` | - | +| `@modal-close-color` | `modalCloseIconColor` | - | +| `@modal-footer-bg` | `modalFooterBg` | - | +| `@modal-footer-border-color-split` | - | Deprecated for style change | +| `@modal-footer-border-style` | - | Deprecated for style change | +| `@modal-footer-padding-vertical` | - | Deprecated for style change | +| `@modal-footer-padding-horizontal` | - | Deprecated for style change | +| `@modal-footer-border-width` | - | Deprecated for style change | +| `@modal-mask-bg` | `colorBgMask` | - | +| `@modal-confirm-body-padding` | - | Deprecated for style change | +| `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - | +| `@modal-border-radius` | `borderRadiusLG` | - | diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md new file mode 100644 index 0000000000..4b07d14524 --- /dev/null +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -0,0 +1,38 @@ +--- +order: 9 +title: less 变量迁移 Component Token +--- + +本文档包含了所有 4.x 版本中组件相关的 less 变量与 5.x 版本的 Component Token 的对照关系。如果你是从 4.x 版本升级到 5.x 版本，可以通过这份对照表快速找到对应的 Component Token。 + + + +## Modal 对话框 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@modal-header-padding-vertical` | - | 由于样式变化已废弃 | +| `@modal-header-padding-horizontal` | - | 由于样式变化已废弃 | +| `@modal-body-padding` | - | 由于样式变化已废弃 | +| `@modal-header-bg` | `modalHeaderBg` | - | +| `@modal-header-padding` | - | 由于样式变化已废弃 | +| `@modal-header-border-width` | - | 由于样式变化已废弃 | +| `@modal-header-border-style` | - | 由于样式变化已废弃 | +| `@modal-header-title-line-height` | `modalHeaderTitleLineHeight` | - | +| `@modal-header-title-font-size` | `modalHeaderTitleFontSize` | - | +| `@modal-header-border-color-split` | - | 由于样式变化已废弃 | +| `@modal-header-close-size` | - | 由于样式变化已废弃 | +| `@modal-content-bg` | `modalContentBg` | - | +| `@modal-heading-color` | `modalHeadingColor` | - | +| `@modal-close-color` | `modalCloseIconColor` | - | +| `@modal-footer-bg` | `modalFooterBg` | - | +| `@modal-footer-border-color-split` | - | 由于样式变化已废弃 | +| `@modal-footer-border-style` | - | 由于样式变化已废弃 | +| `@modal-footer-padding-vertical` | - | 由于样式变化已废弃 | +| `@modal-footer-padding-horizontal` | - | 由于样式变化已废弃 | +| `@modal-footer-border-width` | - | 由于样式变化已废弃 | +| `@modal-mask-bg` | `colorBgMask` | - | +| `@modal-confirm-body-padding` | - | 由于样式变化已废弃 | +| `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - | +| `@modal-border-radius` | `borderRadiusLG` | - |