mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
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
This commit is contained in:
MadCcc
GitHub
parent
60dbef4963
commit
f89c97b488
@ -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<ModalToken> = (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<ModalToken> = (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<ModalToken>(token, {
|
||||
modalBodyPadding: token.paddingLG,
|
||||
const modalToken = mergeToken<ModalToken>(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,
|
||||
}),
|
||||
);
|
||||
|
||||
38
docs/react/migrate-less-variables.en-US.md
Normal file
38
docs/react/migrate-less-variables.en-US.md
Normal file
@ -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.
|
||||
|
||||
<Alert message="Note: There are still some less variables that do not have a corresponding Component Token, and these variables have been deprecated in version 5.x."></Alert>
|
||||
|
||||
## Modal 对话框
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| 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` | - |
|
||||
38
docs/react/migrate-less-variables.zh-CN.md
Normal file
38
docs/react/migrate-less-variables.zh-CN.md
Normal file
@ -0,0 +1,38 @@
|
||||
---
|
||||
order: 9
|
||||
title: less 变量迁移 Component Token
|
||||
---
|
||||
|
||||
本文档包含了所有 4.x 版本中组件相关的 less 变量与 5.x 版本的 Component Token 的对照关系。如果你是从 4.x 版本升级到 5.x 版本，可以通过这份对照表快速找到对应的 Component Token。
|
||||
|
||||
<Alert message="注意：仍有部分变量没有对应的 Component Token，这些变量在 5.x 版本中已被废弃。"></Alert>
|
||||
|
||||
## Modal 对话框
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| 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` | - |
|
||||
Loading…
Reference in New Issue
Block a user