From 411ca7ab5e570160c2f2805d6b369d1e6c17710a Mon Sep 17 00:00:00 2001 From: MadCcc Date: Wed, 15 Nov 2023 21:19:50 +0800 Subject: [PATCH] refactor: modal wireframe tokens (#45901) --- components/modal/style/confirmCmp.tsx | 8 +- components/modal/style/index.tsx | 136 +++++++++++++------------- 2 files changed, 72 insertions(+), 72 deletions(-) diff --git a/components/modal/style/confirmCmp.tsx b/components/modal/style/confirmCmp.tsx index cf91c6271fe8..37e94e97f515 100644 --- a/components/modal/style/confirmCmp.tsx +++ b/components/modal/style/confirmCmp.tsx @@ -16,6 +16,7 @@ const genModalConfirmStyle: GenerateStyle = (token) => { lineHeight, modalTitleHeight, fontHeight, + confirmBodyPadding, } = token; const confirmComponentCls = `${componentCls}-confirm`; @@ -30,6 +31,9 @@ const genModalConfirmStyle: GenerateStyle = (token) => { [`${confirmComponentCls}-body-wrapper`]: { ...clearFix(), }, + [`&${componentCls} ${componentCls}-body`]: { + padding: confirmBodyPadding, + }, // ====================== Body ====================== [`${confirmComponentCls}-body`]: { @@ -40,7 +44,7 @@ const genModalConfirmStyle: GenerateStyle = (token) => { [`> ${token.iconCls}`]: { flex: 'none', fontSize: modalConfirmIconSize, - marginInlineEnd: token.marginSM, + marginInlineEnd: token.confirmIconMarginInlineEnd, marginTop: token .calc(token.calc(fontHeight).sub(modalConfirmIconSize).equal()) .div(2) @@ -80,7 +84,7 @@ const genModalConfirmStyle: GenerateStyle = (token) => { // ===================== Footer ===================== [`${confirmComponentCls}-btns`]: { textAlign: 'end', - marginTop: token.marginSM, + marginTop: token.confirmBtnsMarginTop, [`${token.antCls}-btn + ${token.antCls}-btn`]: { marginBottom: 0, diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 4fa3ae8c3148..4fc7ea370b58 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -41,20 +41,42 @@ export interface ComponentToken { * @descEN Background color of footer */ footerBg: string; + + /** @internal */ + closeBtnHoverBg: string; + /** @internal */ + closeBtnActiveBg: string; + /** @internal */ + contentPadding: number | string; + /** @internal */ + headerPadding: string | number; + /** @internal */ + headerBorderBottom: string; + /** @internal */ + headerMarginBottom: number; + /** @internal */ + bodyPadding: number; + /** @internal */ + footerPadding: string | number; + /** @internal */ + footerBorderTop: string; + /** @internal */ + footerBorderRadius: string | number; + /** @internal */ + footerMarginTop: string | number; + /** @internal */ + confirmBodyPadding: string | number; + /** @internal */ + confirmIconMarginInlineEnd: string | number; + /** @internal */ + confirmBtnsMarginTop: string | number; } export interface ModalToken extends FullToken<'Modal'> { // Custom token here modalHeaderHeight: number | string; - modalBodyPadding: number; - modalHeaderPadding: string; - modalHeaderBorderWidth: number; - modalHeaderBorderStyle: string; - modalHeaderBorderColorSplit: string; modalFooterBorderColorSplit: string; modalFooterBorderStyle: string; - modalFooterPaddingVertical: number; - modalFooterPaddingHorizontal: number; modalFooterBorderWidth: number; modalIconHoverColor: string; modalCloseIconColor: string; @@ -195,7 +217,7 @@ const genModalStyle: GenerateStyle = (token) => { borderRadius: token.borderRadiusLG, boxShadow: token.boxShadow, pointerEvents: 'auto', - padding: `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`, + padding: token.contentPadding, }, [`${componentCls}-close`]: { @@ -233,12 +255,12 @@ const genModalStyle: GenerateStyle = (token) => { '&:hover': { color: token.modalIconHoverColor, - backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent, + backgroundColor: token.closeBtnHoverBg, textDecoration: 'none', }, '&:active': { - backgroundColor: token.wireframe ? 'transparent' : token.colorFillContentHover, + backgroundColor: token.closeBtnActiveBg, }, ...genFocusStyle(token), @@ -248,19 +270,25 @@ const genModalStyle: GenerateStyle = (token) => { color: token.colorText, background: token.headerBg, borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`, - marginBottom: token.marginXS, + marginBottom: token.headerMarginBottom, + padding: token.headerPadding, + borderBottom: token.headerBorderBottom, }, [`${componentCls}-body`]: { fontSize: token.fontSize, lineHeight: token.lineHeight, wordWrap: 'break-word', + padding: token.bodyPadding, }, [`${componentCls}-footer`]: { textAlign: 'end', background: token.footerBg, - marginTop: token.marginSM, + marginTop: token.footerMarginTop, + padding: token.footerPadding, + borderTop: token.footerBorderTop, + borderRadius: token.footerBorderRadius, [`${token.antCls}-btn + ${token.antCls}-btn:not(${token.antCls}-dropdown-trigger)`]: { marginBottom: 0, @@ -298,56 +326,6 @@ const genModalStyle: GenerateStyle = (token) => { ]; }; -const genWireframeStyle: GenerateStyle = (token) => { - const { componentCls, antCls } = token; - const confirmComponentCls = `${componentCls}-confirm`; - - return { - [componentCls]: { - [`${componentCls}-content`]: { - padding: 0, - }, - - [`${componentCls}-header`]: { - padding: token.modalHeaderPadding, - borderBottom: `${unit(token.modalHeaderBorderWidth)} ${token.modalHeaderBorderStyle} ${ - token.modalHeaderBorderColorSplit - }`, - marginBottom: 0, - }, - - [`${componentCls}-body`]: { - padding: token.modalBodyPadding, - }, - - [`${componentCls}-footer`]: { - padding: `${unit(token.modalFooterPaddingVertical)} ${unit( - token.modalFooterPaddingHorizontal, - )}`, - borderTop: `${unit(token.modalFooterBorderWidth)} ${token.modalFooterBorderStyle} ${ - token.modalFooterBorderColorSplit - }`, - borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`, - marginTop: 0, - }, - }, - - [confirmComponentCls]: { - [`${antCls}-modal-body`]: { - padding: `${unit(token.calc(token.padding).mul(2).equal())} ${unit( - token.calc(token.padding).mul(2).equal(), - )} ${unit(token.paddingLG)}`, - }, - [`${confirmComponentCls}-body > ${token.iconCls}`]: { - marginInlineEnd: token.margin, - }, - [`${confirmComponentCls}-btns`]: { - marginTop: token.marginLG, - }, - }, - }; -}; - const genRTLStyle: GenerateStyle = (token) => { const { componentCls } = token; return { @@ -370,19 +348,12 @@ export const prepareToken: (token: Parameters>[0]) => ModalT const headerLineHeight = token.lineHeightHeading5; const modalToken = mergeToken(token, { - modalBodyPadding: token.paddingLG, - modalHeaderPadding: `${unit(headerPaddingVertical)} ${unit(token.paddingLG)}`, - modalHeaderBorderWidth: token.lineWidth, - modalHeaderBorderStyle: token.lineType, - modalHeaderBorderColorSplit: token.colorSplit, modalHeaderHeight: token .calc(token.calc(headerLineHeight).mul(headerFontSize).equal()) .add(token.calc(headerPaddingVertical).mul(2).equal()) .equal(), modalFooterBorderColorSplit: token.colorSplit, modalFooterBorderStyle: token.lineType, - modalFooterPaddingVertical: token.paddingXS, - modalFooterPaddingHorizontal: token.padding, modalFooterBorderWidth: token.lineWidth, modalIconHoverColor: token.colorIconHover, modalCloseIconColor: token.colorIcon, @@ -401,6 +372,32 @@ export const prepareComponentToken = (token: GlobalToken) => ({ titleFontSize: token.fontSizeHeading5, contentBg: token.colorBgElevated, titleColor: token.colorTextHeading, + + // internal + closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent, + closeBtnActiveBg: token.wireframe ? 'transparent' : token.colorFillContentHover, + contentPadding: token.wireframe + ? 0 + : `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`, + headerPadding: token.wireframe ? `${unit(token.padding)} ${unit(token.paddingLG)}` : 0, + headerBorderBottom: token.wireframe + ? `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}` + : 'none', + headerMarginBottom: token.wireframe ? 0 : token.marginXS, + bodyPadding: token.wireframe ? token.paddingLG : 0, + footerPadding: token.wireframe ? `${unit(token.paddingXS)} ${unit(token.padding)}` : 0, + footerBorderTop: token.wireframe + ? `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}` + : 'none', + footerBorderRadius: token.wireframe + ? `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}` + : 0, + footerMarginTop: token.wireframe ? 0 : token.marginSM, + confirmBodyPadding: token.wireframe + ? `${unit(token.padding * 2)} ${unit(token.padding * 2)} ${unit(token.paddingLG)}` + : 0, + confirmIconMarginInlineEnd: token.wireframe ? token.margin : token.marginSM, + confirmBtnsMarginTop: token.wireframe ? token.marginLG : token.marginSM, }); export default genComponentStyleHook( @@ -412,7 +409,6 @@ export default genComponentStyleHook( genModalStyle(modalToken), genRTLStyle(modalToken), genModalMaskStyle(modalToken), - token.wireframe && genWireframeStyle(modalToken), initZoomMotion(modalToken, 'zoom'), ]; },