Skip to content

Commit

Permalink
refactor: modal wireframe tokens (ant-design#45901)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MadCcc
MadCcc authored Nov 15, 2023
1 parent 9e92c73 commit 411ca7a
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 72 deletions.
8 changes: 6 additions & 2 deletions components/modal/style/confirmCmp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
lineHeight,
modalTitleHeight,
fontHeight,
confirmBodyPadding,
} = token;
const confirmComponentCls = `${componentCls}-confirm`;

Expand All @@ -30,6 +31,9 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
[`${confirmComponentCls}-body-wrapper`]: {
...clearFix(),
},
[`&${componentCls} ${componentCls}-body`]: {
padding: confirmBodyPadding,
},

// ====================== Body ======================
[`${confirmComponentCls}-body`]: {
Expand All @@ -40,7 +44,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
[`> ${token.iconCls}`]: {
flex: 'none',
fontSize: modalConfirmIconSize,
marginInlineEnd: token.marginSM,
marginInlineEnd: token.confirmIconMarginInlineEnd,
marginTop: token
.calc(token.calc(fontHeight).sub(modalConfirmIconSize).equal())
.div(2)
Expand Down Expand Up @@ -80,7 +84,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
// ===================== Footer =====================
[`${confirmComponentCls}-btns`]: {
textAlign: 'end',
marginTop: token.marginSM,
marginTop: token.confirmBtnsMarginTop,

[`${token.antCls}-btn + ${token.antCls}-btn`]: {
marginBottom: 0,
Expand Down
136 changes: 66 additions & 70 deletions components/modal/style/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -195,7 +217,7 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
borderRadius: token.borderRadiusLG,
boxShadow: token.boxShadow,
pointerEvents: 'auto',
padding: `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,
padding: token.contentPadding,
},

[`${componentCls}-close`]: {
Expand Down Expand Up @@ -233,12 +255,12 @@ const genModalStyle: GenerateStyle<ModalToken> = (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),
Expand All @@ -248,19 +270,25 @@ const genModalStyle: GenerateStyle<ModalToken> = (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,
Expand Down Expand Up @@ -298,56 +326,6 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
];
};

const genWireframeStyle: GenerateStyle<ModalToken> = (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<ModalToken> = (token) => {
const { componentCls } = token;
return {
Expand All @@ -370,19 +348,12 @@ export const prepareToken: (token: Parameters<GenStyleFn<'Modal'>>[0]) => ModalT
const headerLineHeight = token.lineHeightHeading5;

const modalToken = mergeToken<ModalToken>(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,
Expand All @@ -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(
Expand All @@ -412,7 +409,6 @@ export default genComponentStyleHook(
genModalStyle(modalToken),
genRTLStyle(modalToken),
genModalMaskStyle(modalToken),
token.wireframe && genWireframeStyle(modalToken),
initZoomMotion(modalToken, 'zoom'),
];
},
Expand Down

0 comments on commit 411ca7a

Please sign in to comment.