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

feat: v5 margin (#37283)

Browse Source 
* feat: v5 margin

* fix: alert icon line-height
This commit is contained in:
MadCcc 2022-08-29 17:09:41 +08:00 committed by GitHub
parent d2b219dbf8
commit c0653c8a3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 49 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/alert/style/index.tsx
View File

@ -7,8 +7,6 @@ export interface ComponentToken {}
type AlertToken = FullToken<'Alert'> & {
alertIconSizeLG: number;
alertPadding: number;
alertPaddingLG: number;
};
const genAlertTypeStyle = (
@ -30,6 +28,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
componentCls,
motionDurationSlow: duration,
marginXS,
marginSM,
fontSize,
fontSizeLG,
lineHeight,
@ -37,9 +36,10 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
motionEaseInOutCirc,
alertIconSizeLG,
colorText,
alertPadding,
alertPaddingLG,
marginXXS,
paddingSM,
paddingXS,
paddingTmp,
paddingLG,
} = token;
return {
@ -48,7 +48,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
position: 'relative',
display: 'flex',
alignItems: 'center',
padding: `${alertPadding}px ${alertPaddingLG}px`,
padding: `${paddingXS}px ${paddingSM}px`,
wordWrap: 'break-word',
borderRadius,
@ -94,18 +94,18 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
[`${componentCls}-with-description`]: {
alignItems: 'flex-start',
paddingInline: alertPaddingLG,
paddingBlock: alertPaddingLG,
paddingInline: paddingLG,
paddingBlock: paddingTmp,
[`${componentCls}-icon`]: {
marginInlineStart: alertPadding,
marginInlineEnd: alertPaddingLG,
marginInlineEnd: marginSM,
fontSize: alertIconSizeLG,
lineHeight: 1,
},
[`${componentCls}-message`]: {
display: 'block',
marginBottom: marginXXS,
marginBottom: marginXS,
color: colorText,
fontSize: fontSizeLG,
},
@ -227,12 +227,10 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
];
export default genComponentStyleHook('Alert', token => {
const { fontSizeHeading3, paddingXS, padding } = token;
const { fontSizeHeading3 } = token;
const alertToken = mergeToken<AlertToken>(token, {
alertIconSizeLG: fontSizeHeading3,
alertPadding: paddingXS,
alertPaddingLG: padding,
});
return [genAlertStyle(alertToken)];

2
components/message/style/index.tsx
View File

@ -168,7 +168,7 @@ export default genComponentStyleHook(
const combinedToken = mergeToken<MessageToken>(token, {
messageNoticeContentPadding: `${
(token.controlHeightLG - token.fontSize * token.lineHeight) / 2
}px ${token.padding}px`,
}px ${token.paddingSM}px`,
});
return [genMessageStyle(combinedToken)];
},

18
components/modal/style/index.tsx
View File

@ -164,6 +164,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
borderRadius: token.radiusLG,
boxShadow: token.boxShadowSecondary,
pointerEvents: 'auto',
padding: `${token.paddingTmp}px ${token.paddingLG}px`,
},
[`${componentCls}-close`]: {
@ -201,26 +202,22 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
},
[`${componentCls}-header`]: {
padding: token.modalHeaderPadding,
color: token.colorText,
background: token.modalHeaderBg,
borderBottom: `${token.modalHeaderBorderWidth}px ${token.modalHeaderBorderStyle} ${token.modalHeaderBorderColorSplit}`,
borderRadius: `${token.radiusLG}px ${token.radiusLG}px 0 0`,
marginBottom: token.marginXS,
},
[`${componentCls}-body`]: {
padding: token.modalBodyPadding,
fontSize: token.fontSizeBase,
lineHeight: token.lineHeight,
wordWrap: 'break-word',
},
[`${componentCls}-footer`]: {
padding: `${token.modalFooterPaddingVertical}px ${token.modalFooterPaddingHorizontal}px`,
textAlign: 'end',
background: token.modalFooterBg,
borderTop: `${token.modalFooterBorderWidth}px ${token.modalFooterBorderStyle} ${token.modalFooterBorderColorSplit}`,
borderRadius: `0 0 ${token.radiusLG}px ${token.radiusLG}px`,
marginTop: token.marginSM,
[`${token.antCls}-btn + ${token.antCls}-btn:not(${token.antCls}-dropdown-trigger)`]: {
marginBottom: 0,
@ -256,9 +253,6 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
[`${token.antCls}-modal-header`]: {
display: 'none',
},
[`${token.antCls}-modal-body`]: {
padding: `${token.padding * 2}px ${token.padding * 2}px ${token.paddingLG}px`,
},
[`${confirmComponentCls}-body-wrapper`]: {
...clearFix(),
},
@ -286,12 +280,12 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
[`> ${token.iconCls}`]: {
flex: 'none',
marginInlineEnd: token.margin,
marginInlineEnd: token.marginSM,
fontSize: token.modalConfirmIconSize,
// `content` after `icon` should set marginLeft
[`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: {
marginInlineStart: token.modalConfirmIconSize + token.margin,
marginInlineStart: token.modalConfirmIconSize + token.marginSM,
marginBlockStart: token.marginXS,
flexBasis: '100%',
},
@ -299,7 +293,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
},
[`${confirmComponentCls}-btns`]: {
textAlign: 'end',
marginTop: token.marginLG,
marginTop: token.marginSM,
[`${token.antCls}-btn + ${token.antCls}-btn`]: {
marginBottom: 0,

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

@ -18,6 +18,7 @@ export interface NotificationToken extends FullToken<'Notification'> {
notificationMarginBottom: number;
notificationMarginEdge: number;
animationMaxHeight: number;
notificationIconSize: number;
}
const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
@ -41,6 +42,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
fontSizeBase,
lineHeight,
width,
notificationIconSize,
} = token;
const noticeCls = `${componentCls}-notice`;
@ -185,13 +187,13 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
},
[`${noticeCls}-with-icon ${noticeCls}-message`]: {
marginBottom: token.marginXXS,
marginInlineStart: token.marginXXL,
marginBottom: token.marginXS,
marginInlineStart: token.marginSM + notificationIconSize,
fontSize: fontSizeLG,
},
[`${noticeCls}-with-icon ${noticeCls}-description`]: {
marginInlineStart: token.marginXXL,
marginInlineStart: token.marginSM + notificationIconSize,
fontSize: fontSizeBase,
},
@ -200,8 +202,8 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
// https://github.com/ant-design/ant-design/issues/15512
[`${noticeCls}-icon`]: {
position: 'absolute',
marginInlineStart: token.marginXXS,
fontSize: token.fontSizeLG * token.lineHeightLG,
fontSize: notificationIconSize,
lineHeight: 1,
// icon-font
[`&-success${iconCls}`]: {
@ -232,7 +234,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
[`${noticeCls}-btn`]: {
float: 'right',
marginTop: token.margin,
marginTop: token.marginSM,
},
},
},
@ -250,7 +252,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
export default genComponentStyleHook(
'Notification',
token => {
const notificationPaddingVertical = token.padding;
const notificationPaddingVertical = token.paddingTmp;
const notificationPaddingHorizontal = token.paddingLG;
const notificationToken = mergeToken<NotificationToken>(token, {
@ -263,6 +265,7 @@ export default genComponentStyleHook(
notificationMarginBottom: token.margin,
notificationMarginEdge: token.marginLG,
animationMaxHeight: 150,
notificationIconSize: token.fontSizeLG * token.lineHeightLG,
});
return [genNotificationStyle(notificationToken)];

29
components/popover/style/index.tsx
View File

@ -12,9 +12,7 @@ export interface ComponentToken {
export type PopoverToken = FullToken<'Popover'> & {
popoverBg: string;
popoverColor: string;
popoverPaddingHorizontal: number;
popoverTitlePaddingBlockTop: number;
popoverTitlePaddingBlockBottom: number;
popoverPadding: number;
};
const genBaseStyle: GenerateStyle<PopoverToken> = token => {
@ -23,19 +21,13 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
popoverBg,
popoverColor,
width,
popoverPaddingHorizontal,
popoverTitlePaddingBlockTop,
popoverTitlePaddingBlockBottom,
lineWidth,
lineType,
fontWeightStrong,
popoverPadding,
boxShadowSecondary,
colorSplit,
colorTextHeading,
radiusLG: borderRadius,
paddingSM,
zIndexPopup,
marginXS,
} = token;
return [
@ -69,19 +61,17 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
backgroundClip: 'padding-box',
borderRadius,
boxShadow: boxShadowSecondary,
padding: popoverPadding,
},
[`${componentCls}-title`]: {
minWidth: width,
margin: 0,
padding: `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px`,
marginBottom: marginXS,
color: colorTextHeading,
fontWeight: fontWeightStrong,
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
},
[`${componentCls}-inner-content`]: {
padding: `${paddingSM}px ${popoverPaddingHorizontal}px`,
color: popoverColor,
},
},
@ -131,15 +121,12 @@ const genColorStyle: GenerateStyle<PopoverToken> = token => {
export default genComponentStyleHook(
'Popover',
token => {
const { controlHeight, fontSize, lineHeight, lineWidth, colorBgElevated } = token;
const titlePaddingBlockDist = controlHeight - Math.round(fontSize * lineHeight);
const { colorBgElevated, colorText, paddingSM } = token;
const popoverToken = mergeToken<PopoverToken>(token, {
popoverBg: colorBgElevated,
popoverColor: token.colorText,
popoverTitlePaddingBlockTop: titlePaddingBlockDist / 2,
popoverTitlePaddingBlockBottom: titlePaddingBlockDist / 2 - lineWidth,
popoverPaddingHorizontal: token.padding,
popoverColor: colorText,
popoverPadding: paddingSM,
});
return [

14
components/style/placementArrow.tsx
View File

@ -11,11 +11,19 @@ export default function getArrowStyle<Token extends TokenWithCommonCls<AliasToke
token: Token,
colorBg: string,
showArrowCls?: string,
arrowMargin?: number,
): CSSInterpolation {
const { componentCls, sizePopupArrow, marginXXS, radiusXS, radiusOuter, boxShadowPopoverArrow } =
token;
const {
componentCls,
sizePopupArrow,
marginXXS,
radiusXS,
radiusOuter,
boxShadowPopoverArrow,
marginXS,
} = token;
const dropdownArrowOffset = 0;
const dropdownArrowOffset = arrowMargin ?? marginXS;
const dropdownArrowDistance = sizePopupArrow + marginXXS;
return {

1
components/tooltip/style/index.tsx
View File

@ -105,6 +105,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
}),
'var(--antd-arrow-background-color)',
'',
0,
),
// Pure Render