improve(ui): ProCard border-radius, box-shadow and body padding follo…

…w Card style
oceanbase · Jan 15, 2025 · d69dafa · d69dafa
1 parent c4cade6
commit d69dafa
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 35 deletions.
diff --git a/packages/design/src/card/demo/border-less.tsx b/packages/design/src/card/demo/border-less.tsx
@@ -6,15 +6,15 @@ const App: React.FC = () => {
   return (
     <div
       style={{
-        backgroundColor: token.colorFillContent,
+        backgroundColor: token.colorBgLayout,
         padding: '40px 24px',
         margin: '-40px -24px',
       }}
     >
       <Card title="Card title" bordered={false} style={{ width: 300 }}>
-        <p>Card content</p>
-        <p>Card content</p>
-        <p>Card content</p>
+        <div>Card content</div>
+        <div>Card content</div>
+        <div>Card content</div>
       </Card>
     </div>
   );

diff --git a/packages/design/src/card/demo/no-divider.tsx b/packages/design/src/card/demo/no-divider.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 
 const App: React.FC = () => (
   <Card divided={false} title="Card title" extra={<a>More</a>} style={{ width: 300 }}>
-    <p>Card content</p>
-    <p>Card content</p>
-    <p>Card content</p>
+    <div>Card content</div>
+    <div>Card content</div>
+    <div>Card content</div>
   </Card>
 );
 

diff --git a/packages/design/src/space/demo/vertical.tsx b/packages/design/src/space/demo/vertical.tsx
@@ -3,16 +3,16 @@ import React from 'react';
 const App: React.FC = () => (
   <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
     <Card title="Card" size="small">
-      <p>Card content</p>
-      <p>Card content</p>
+      <div>Card content</div>
+      <div>Card content</div>
     </Card>
     <Card title="Card" size="small">
-      <p>Card content</p>
-      <p>Card content</p>
+      <div>Card content</div>
+      <div>Card content</div>
     </Card>
     <Card title="Card" size="small">
-      <p>Card content</p>
-      <p>Card content</p>
+      <div>Card content</div>
+      <div>Card content</div>
     </Card>
   </Space>
 );

diff --git a/packages/design/src/table/demo/card-table.tsx b/packages/design/src/table/demo/card-table.tsx
@@ -51,7 +51,7 @@ const App: React.FC = () => {
         hasBorder
           ? {}
           : {
-              backgroundColor: token.colorFillContent,
+              backgroundColor: token.colorBgLayout,
               padding: '40px 24px',
               margin: '-40px -24px',
             }

diff --git a/packages/design/src/table/demo/pro-card-table.tsx b/packages/design/src/table/demo/pro-card-table.tsx
@@ -51,7 +51,7 @@ const App: React.FC = () => {
         hasBorder
           ? {}
           : {
-              backgroundColor: token.colorFillContent,
+              backgroundColor: token.colorBgLayout,
               padding: '40px 24px',
               margin: '-40px -24px',
             }

diff --git a/packages/ui/src/ProCard/demo/basic.tsx b/packages/ui/src/ProCard/demo/basic.tsx
@@ -1,14 +1,25 @@
 import React, { useState } from 'react';
-import { Form, Switch } from '@oceanbase/design';
+import { Form, Switch, theme } from '@oceanbase/design';
 import { ProCard } from '@oceanbase/ui';
 
 export default () => {
+  const { token } = theme.useToken();
+  const [hasHeader, setHasHeader] = useState(true);
   const [headerBordered, setHeaderBordered] = useState(false);
   const [hasPadding, setHasPadding] = useState(true);
   const bodyStyle: React.CSSProperties = hasPadding ? {} : { padding: 0 };
   return (
     <>
       <Form layout="inline" style={{ marginBottom: 16 }}>
+        <Form.Item label="has header" required={true}>
+          <Switch
+            size="small"
+            value={hasHeader}
+            onChange={value => {
+              setHasHeader(value);
+            }}
+          />
+        </Form.Item>
         <Form.Item label="header bordered" required={true}>
           <Switch
             size="small"
@@ -31,9 +42,9 @@ export default () => {
       <ProCard
         bordered
         headerBordered={headerBordered}
-        title="默认尺寸"
-        extra="extra"
-        tooltip="这是提示"
+        title={hasHeader && '默认尺寸'}
+        extra={hasHeader && 'extra'}
+        tooltip={hasHeader && '这是提示'}
         style={{ width: 300 }}
         bodyStyle={bodyStyle}
       >
@@ -42,31 +53,40 @@ export default () => {
         <div>Card content</div>
       </ProCard>
       <ProCard
-        headerBordered={headerBordered}
-        boxShadow
-        title="带卡片阴影"
-        extra="extra"
-        tooltip="这是提示"
-        style={{ width: 300, marginBlockStart: 24 }}
-        bodyStyle={bodyStyle}
-      >
-        <div>Card content</div>
-        <div>Card content</div>
-        <div>Card content</div>
-      </ProCard>
-      <ProCard
+        bordered
         headerBordered={headerBordered}
         size="small"
-        title="小尺寸卡片"
-        extra="extra"
-        tooltip="这是提示"
+        title={hasHeader && '小尺寸'}
+        extra={hasHeader && 'extra'}
+        tooltip={hasHeader && '这是提示'}
         style={{ width: 300, marginBlockStart: 24 }}
         bodyStyle={bodyStyle}
       >
         <div>Card content</div>
         <div>Card content</div>
         <div>Card content</div>
       </ProCard>
+      <div
+        style={{
+          marginBlockStart: 24,
+          padding: 24,
+          borderRadius: 8,
+          background: token.colorBgLayout,
+        }}
+      >
+        <ProCard
+          headerBordered={headerBordered}
+          title={hasHeader && '无边框'}
+          extra={hasHeader && 'extra'}
+          tooltip={hasHeader && '这是提示'}
+          style={{ width: 300 }}
+          bodyStyle={bodyStyle}
+        >
+          <div>Card content</div>
+          <div>Card content</div>
+          <div>Card content</div>
+        </ProCard>
+      </div>
     </>
   );
 };
diff --git a/packages/ui/src/ProCard/style/index.ts b/packages/ui/src/ProCard/style/index.ts
@@ -9,6 +9,25 @@ export const genProCardStyle: GenerateStyle<OBToken> = (token: OBToken): CSSObje
   const tabsComponentCls = `${antCls}-tabs`;
   const tabsPrefixCls = `${prefixCls}-tabs`;
   return {
+    // follow Card style
+    // need add `div` to make style work
+    [`div${componentCls}`]: {
+      borderRadius: token.borderRadiusLG,
+    },
+    [`${componentCls}:not(${componentCls}-border)`]: {
+      boxShadow:
+        '0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)',
+    },
+    [`${componentCls}:not(${componentCls}-size-small)`]: {
+      [`${componentCls}-body`]: {
+        paddingBlock: token.paddingLG,
+      },
+      [`&${componentCls}-has-title${componentCls}-no-divider`]: {
+        [`${componentCls}-body`]: {
+          paddingBlockStart: token.padding,
+        },
+      },
+    },
     // no body padding card
     [`${componentCls}${componentCls}-no-body-padding:not(${componentCls}-contain-tabs)`]: {
       [`${componentCls}-header`]: {