fix: card extra add padding (#39646)

* fix: card extra add padding * fix: Correct the cardHeadHeight variable name * chore: minHeight instead of padding * fix: Alignment between title and extra in card tablist
ant-design · Dec 21, 2022 · 78592a5 · 78592a5
1 parent 527c71d
commit 78592a5
Showing 1 changed file with 24 additions and 39 deletions.
diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx
@@ -7,15 +7,13 @@ 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;
   cardHeadTabsMarginBottom: number;
-  cardInnerHeadPadding: number;
   cardActionsLiMargin: string;
   cardActionsIconSize: number;
 }
@@ -24,16 +22,12 @@ interface CardToken extends FullToken<'Card'> {
 
 // ============================== Head ==============================
 const genCardHeadStyle: GenerateStyle<CardToken> = (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`,
@@ -47,14 +41,14 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
     ...clearFix(),
 
     '&-wrapper': {
+      width: '100%',
       display: 'flex',
       alignItems: 'center',
     },
 
     '&-title': {
       display: 'inline-block',
       flex: 1,
-      padding: `${cardHeadPadding}px 0`,
       ...textEllipsis,
 
       [`
@@ -196,26 +190,21 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
 
 // ============================== Inner ==============================
 const genCardTypeInnerStyle: GenerateStyle<CardToken> = (token): CSSObject => {
-  const { componentCls, cardPaddingBase, colorFillAlter, cardInnerHeadPadding } = token;
+  const { componentCls, cardPaddingBase, colorFillAlter } = token;
 
   return {
     [`${componentCls}-head`]: {
       padding: `0 ${cardPaddingBase}px`,
       background: colorFillAlter,
 
       '&-title': {
-        padding: `${cardInnerHeadPadding}px 0`,
         fontSize: token.fontSize,
       },
     },
 
     [`${componentCls}-body`]: {
       padding: `${token.padding}px ${cardPaddingBase}px`,
     },
-
-    [`${componentCls}-extra`]: {
-      padding: `${cardInnerHeadPadding + 1.5}px 0`,
-    },
   };
 };
 
@@ -237,7 +226,6 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
   const {
     componentCls,
     cardShadow,
-    cardHeadHeight,
     cardHeadPadding,
     colorBorderSecondary,
     boxShadow,
@@ -261,7 +249,6 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
       [`${componentCls}-extra`]: {
         // https://stackoverflow.com/a/22429853/3040605
         marginInlineStart: 'auto',
-        padding: '',
         color: '',
         fontWeight: 'normal',
         fontSize: token.fontSize,
@@ -326,13 +313,8 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 
     [`${componentCls}-contain-tabs`]: {
       [`> ${componentCls}-head`]: {
-        [`${componentCls}-head-title`]: {
-          minHeight: cardHeadHeight - cardHeadPadding,
-          paddingBottom: 0,
-        },
-
-        [`${componentCls}-extra`]: {
-          paddingBottom: 0,
+        [`${componentCls}-head-title, ${componentCls}-extra`]: {
+          paddingTop: cardHeadPadding,
         },
       },
     },
@@ -349,23 +331,17 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 
 // ============================== Size ==============================
 const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
-  const { componentCls, cardPaddingSM, fontSize, lineHeight, cardHeaderHeightSM } = token;
-  const cardHeadPaddingSM = (cardHeaderHeightSM - fontSize * lineHeight) / 2;
+  const { componentCls, cardPaddingSM, cardHeadHeightSM } = token;
 
   return {
     [`${componentCls}-small`]: {
       [`> ${componentCls}-head`]: {
-        minHeight: cardHeaderHeightSM,
+        minHeight: cardHeadHeightSM,
         padding: `0 ${cardPaddingSM}px`,
         fontSize: token.fontSize,
 
         [`> ${componentCls}-head-wrapper`]: {
-          [`> ${componentCls}-head-title`]: {
-            padding: `${cardHeadPaddingSM}px 0`,
-          },
-
           [`> ${componentCls}-extra`]: {
-            padding: `${cardHeadPaddingSM}px 0`,
             fontSize: token.fontSize,
           },
         },
@@ -375,19 +351,28 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
         padding: cardPaddingSM,
       },
     },
+    [`${componentCls}-small${componentCls}-contain-tabs`]: {
+      [`> ${componentCls}-head`]: {
+        [`${componentCls}-head-title, ${componentCls}-extra`]: {
+          minHeight: cardHeadHeightSM,
+          paddingTop: 0,
+          display: 'flex',
+          alignItems: 'center',
+        },
+      },
+    },
   };
 };
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Card', (token) => {
   const cardToken = mergeToken<CardToken>(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,
-    cardInnerHeadPadding: token.paddingSM,
     cardActionsLiMargin: `${token.paddingSM}px 0`,
     cardActionsIconSize: token.fontSize,
     cardPaddingSM: 12, // Fixed padding.