From 4a501c312902166fb9ba36dc6db18515ac55dcef Mon Sep 17 00:00:00 2001 From: JarvisArt <1120886013@qq.com> Date: Mon, 19 Dec 2022 14:59:24 +0800 Subject: [PATCH 1/4] fix: card extra add padding --- components/card/style/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index c30b19030ec4..f30280e8f3aa 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -261,7 +261,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-extra`]: { // https://stackoverflow.com/a/22429853/3040605 marginInlineStart: 'auto', - padding: '', + padding: `${cardHeadPadding}px 0`, color: '', fontWeight: 'normal', fontSize: token.fontSize, From 342ec15130ac5d9e48cb7fc7a3e20d4333a6740f Mon Sep 17 00:00:00 2001 From: JarvisArt <1120886013@qq.com> Date: Mon, 19 Dec 2022 16:39:30 +0800 Subject: [PATCH 2/4] fix: Correct the cardHeadHeight variable name --- components/card/style/index.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index f30280e8f3aa..1bca3b74860b 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -7,10 +7,9 @@ import { clearFix, resetComponent, textEllipsis } from '../../style'; export interface ComponentToken {} interface CardToken extends FullToken<'Card'> { - cardHeaderHeight: number; - cardHeaderHeightSM: number; - cardShadow: string; cardHeadHeight: number; + cardHeadHeightSM: number; + cardShadow: string; cardHeadPadding: number; cardPaddingSM: number; cardPaddingBase: number; @@ -349,13 +348,13 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { // ============================== Size ============================== const genCardSizeStyle: GenerateStyle = (token): CSSObject => { - const { componentCls, cardPaddingSM, fontSize, lineHeight, cardHeaderHeightSM } = token; - const cardHeadPaddingSM = (cardHeaderHeightSM - fontSize * lineHeight) / 2; + const { componentCls, cardPaddingSM, fontSize, lineHeight, cardHeadHeightSM } = token; + const cardHeadPaddingSM = (cardHeadHeightSM - fontSize * lineHeight) / 2; return { [`${componentCls}-small`]: { [`> ${componentCls}-head`]: { - minHeight: cardHeaderHeightSM, + minHeight: cardHeadHeightSM, padding: `0 ${cardPaddingSM}px`, fontSize: token.fontSize, @@ -382,8 +381,8 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => { export default genComponentStyleHook('Card', (token) => { const cardToken = mergeToken(token, { cardShadow: token.boxShadowCard, - cardHeaderHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2, - cardHeaderHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2, + cardHeadHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2, + cardHeadHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2, cardHeadPadding: token.padding, cardPaddingBase: token.paddingLG, cardHeadTabsMarginBottom: -token.padding - token.lineWidth, From bcb10239dfe6c480cd41c84d59b0acde3573bf45 Mon Sep 17 00:00:00 2001 From: JarvisArt <1120886013@qq.com> Date: Mon, 19 Dec 2022 20:04:16 +0800 Subject: [PATCH 3/4] chore: minHeight instead of padding --- components/card/style/index.tsx | 45 +++++++++++++-------------------- 1 file changed, 18 insertions(+), 27 deletions(-) diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 1bca3b74860b..b54d18b0ca87 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -14,7 +14,6 @@ interface CardToken extends FullToken<'Card'> { cardPaddingSM: number; cardPaddingBase: number; cardHeadTabsMarginBottom: number; - cardInnerHeadPadding: number; cardActionsLiMargin: string; cardActionsIconSize: number; } @@ -23,16 +22,12 @@ interface CardToken extends FullToken<'Card'> { // ============================== Head ============================== const genCardHeadStyle: GenerateStyle = (token): CSSObject => { - const { - antCls, - componentCls, - cardHeadHeight, - cardHeadPadding, - cardPaddingBase, - cardHeadTabsMarginBottom, - } = token; + const { antCls, componentCls, cardHeadHeight, cardPaddingBase, cardHeadTabsMarginBottom } = token; return { + display: 'flex', + justifyContent: 'center', + flexDirection: 'column', minHeight: cardHeadHeight, marginBottom: -1, // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png padding: `0 ${cardPaddingBase}px`, @@ -46,6 +41,7 @@ const genCardHeadStyle: GenerateStyle = (token): CSSObject => { ...clearFix(), '&-wrapper': { + width: '100%', display: 'flex', alignItems: 'center', }, @@ -53,7 +49,6 @@ const genCardHeadStyle: GenerateStyle = (token): CSSObject => { '&-title': { display: 'inline-block', flex: 1, - padding: `${cardHeadPadding}px 0`, ...textEllipsis, [` @@ -195,7 +190,7 @@ const genCardMetaStyle: GenerateStyle = (token): CSSObject => ({ // ============================== Inner ============================== const genCardTypeInnerStyle: GenerateStyle = (token): CSSObject => { - const { componentCls, cardPaddingBase, colorFillAlter, cardInnerHeadPadding } = token; + const { componentCls, cardPaddingBase, colorFillAlter } = token; return { [`${componentCls}-head`]: { @@ -203,7 +198,6 @@ const genCardTypeInnerStyle: GenerateStyle = (token): CSSObject => { background: colorFillAlter, '&-title': { - padding: `${cardInnerHeadPadding}px 0`, fontSize: token.fontSize, }, }, @@ -211,10 +205,6 @@ const genCardTypeInnerStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-body`]: { padding: `${token.padding}px ${cardPaddingBase}px`, }, - - [`${componentCls}-extra`]: { - padding: `${cardInnerHeadPadding + 1.5}px 0`, - }, }; }; @@ -236,7 +226,6 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { const { componentCls, cardShadow, - cardHeadHeight, cardHeadPadding, colorBorderSecondary, boxShadow, @@ -260,7 +249,6 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-extra`]: { // https://stackoverflow.com/a/22429853/3040605 marginInlineStart: 'auto', - padding: `${cardHeadPadding}px 0`, color: '', fontWeight: 'normal', fontSize: token.fontSize, @@ -326,7 +314,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-contain-tabs`]: { [`> ${componentCls}-head`]: { [`${componentCls}-head-title`]: { - minHeight: cardHeadHeight - cardHeadPadding, + paddingTop: cardHeadPadding, paddingBottom: 0, }, @@ -348,8 +336,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { // ============================== Size ============================== const genCardSizeStyle: GenerateStyle = (token): CSSObject => { - const { componentCls, cardPaddingSM, fontSize, lineHeight, cardHeadHeightSM } = token; - const cardHeadPaddingSM = (cardHeadHeightSM - fontSize * lineHeight) / 2; + const { componentCls, cardPaddingSM, cardHeadHeightSM } = token; return { [`${componentCls}-small`]: { @@ -359,12 +346,7 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => { fontSize: token.fontSize, [`> ${componentCls}-head-wrapper`]: { - [`> ${componentCls}-head-title`]: { - padding: `${cardHeadPaddingSM}px 0`, - }, - [`> ${componentCls}-extra`]: { - padding: `${cardHeadPaddingSM}px 0`, fontSize: token.fontSize, }, }, @@ -374,6 +356,16 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => { padding: cardPaddingSM, }, }, + [`${componentCls}-small${componentCls}-contain-tabs`]: { + [`> ${componentCls}-head`]: { + [`${componentCls}-head-title`]: { + minHeight: cardHeadHeightSM, + paddingTop: 0, + display: 'flex', + alignItems: 'center', + }, + }, + }, }; }; @@ -386,7 +378,6 @@ export default genComponentStyleHook('Card', (token) => { cardHeadPadding: token.padding, cardPaddingBase: token.paddingLG, cardHeadTabsMarginBottom: -token.padding - token.lineWidth, - cardInnerHeadPadding: token.paddingSM, cardActionsLiMargin: `${token.paddingSM}px 0`, cardActionsIconSize: token.fontSize, cardPaddingSM: 12, // Fixed padding. From 79df3838c94002975116ca8417efc58655ef75b6 Mon Sep 17 00:00:00 2001 From: JarvisArt <1120886013@qq.com> Date: Tue, 20 Dec 2022 14:36:32 +0800 Subject: [PATCH 4/4] fix: Alignment between title and extra in card tablist --- components/card/style/index.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index b54d18b0ca87..a90d115950a1 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -313,13 +313,8 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-contain-tabs`]: { [`> ${componentCls}-head`]: { - [`${componentCls}-head-title`]: { + [`${componentCls}-head-title, ${componentCls}-extra`]: { paddingTop: cardHeadPadding, - paddingBottom: 0, - }, - - [`${componentCls}-extra`]: { - paddingBottom: 0, }, }, }, @@ -358,7 +353,7 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => { }, [`${componentCls}-small${componentCls}-contain-tabs`]: { [`> ${componentCls}-head`]: { - [`${componentCls}-head-title`]: { + [`${componentCls}-head-title, ${componentCls}-extra`]: { minHeight: cardHeadHeightSM, paddingTop: 0, display: 'flex',