fix(card): fix ProCard small header style error

close #7203
ant-design · Jun 10, 2023 · 17ccf69 · 17ccf69
1 parent 28291fe
commit 17ccf69
Show file tree

Hide file tree

Showing 3 changed files with 257 additions and 104 deletions.
diff --git a/packages/card/src/components/Card/style.ts b/packages/card/src/components/Card/style.ts
@@ -78,29 +78,6 @@ const genProCardStyle: GenerateStyle<ProCardToken> = (token) => {
         ...genActiveStyle(token),
       },
 
-      '&&-size-small': {
-        [componentCls]: {
-          '&-header': {
-            paddingInline: token.paddingSM,
-            paddingBlock: token.paddingXS,
-            paddingBlockEnd: 0,
-
-            '&-border': {
-              paddingBlockEnd: token.paddingXS,
-            },
-          },
-
-          '&-title': {
-            fontSize: token.fontSize,
-          },
-
-          '&-body': {
-            paddingInline: token.paddingSM,
-            paddingBlock: token.paddingSM,
-          },
-        },
-      },
-
       '&&-ghost': {
         backgroundColor: 'transparent',
 
@@ -209,6 +186,32 @@ const genProCardStyle: GenerateStyle<ProCardToken> = (token) => {
           justifyContent: 'center',
         },
       },
+
+      '&&-size-small': {
+        [componentCls]: {
+          '&-header': {
+            paddingInline: token.paddingSM,
+            paddingBlock: token.paddingXS,
+            paddingBlockEnd: 0,
+
+            '&-border': {
+              paddingBlockEnd: token.paddingXS,
+            },
+          },
+
+          '&-title': {
+            fontSize: token.fontSize,
+          },
+
+          '&-body': {
+            paddingInline: token.paddingSM,
+            paddingBlock: token.paddingSM,
+          },
+        },
+        [`${componentCls}-header${componentCls}-header-collapsible`]: {
+          paddingBlock: token.paddingXS,
+        },
+      },
     },
 
     [`${componentCls}-col`]: {

diff --git a/packages/card/src/demos/collapsible.tsx b/packages/card/src/demos/collapsible.tsx
@@ -7,7 +7,14 @@ export default () => {
   const [collapsed, setCollapsed] = useState(true);
 
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        padding: 24,
+        gap: 12,
+      }}
+    >
       <ProCard
         title="可折叠"
         headerBordered
@@ -27,6 +34,47 @@ export default () => {
       >
         内容
       </ProCard>
+      <ProCard
+        title="可折叠"
+        bordered
+        headerBordered
+        collapsible
+        defaultCollapsed
+        onCollapse={(collapse) => console.log(collapse)}
+        extra={
+          <Button
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            提交
+          </Button>
+        }
+      >
+        内容
+      </ProCard>
+      <ProCard
+        bordered
+        size="small"
+        title="可折叠"
+        headerBordered
+        collapsible
+        defaultCollapsed
+        onCollapse={(collapse) => console.log(collapse)}
+        extra={
+          <Button
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            提交
+          </Button>
+        }
+      >
+        内容
+      </ProCard>
       <ProCard
         title="可折叠-受控自定义"
         extra={
@@ -57,6 +105,6 @@ export default () => {
       >
         内容
       </ProCard>
-    </>
+    </div>
   );
 };