Merge pull request #933 from oceanbase/dengfuping-dev

improve(design): Table margin in Card and ProCard without divider
oceanbase · Jan 14, 2025 · d24bd14 · d24bd14
2 parents 9347202 + afde164
commit d24bd14
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 11 deletions.
diff --git a/packages/design/src/card/index.tsx b/packages/design/src/card/index.tsx
@@ -27,8 +27,9 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
     {
       children,
       size,
-      divided = true,
+      title,
       tabList,
+      divided = true,
       prefixCls: customizePrefixCls,
       bodyStyle,
       styles,
@@ -50,6 +51,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
 
     const cardCls = classNames(
       {
+        [`${prefixCls}-has-title`]: !!title,
         [`${prefixCls}-no-divider`]: !divided,
         [`${prefixCls}-no-body-padding`]: noBodyPadding,
       },
@@ -77,6 +79,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
       <AntCard
         ref={ref}
         size={size}
+        title={title}
         tabList={newTabList}
         prefixCls={customizePrefixCls}
         bodyStyle={bodyStyle}

diff --git a/packages/design/src/card/style/index.ts b/packages/design/src/card/style/index.ts
@@ -9,7 +9,7 @@ export type CardToken = FullToken<'Card'> & {
 };
 
 export const genTableStyle = (padding: number, token: Partial<CardToken>): CSSObject => {
-  const { antCls } = token;
+  const { componentCls, antCls } = token;
   const tableComponentCls = `${antCls}-table`;
   return {
     [`${tableComponentCls}-wrapper`]: {
@@ -36,11 +36,19 @@ export const genTableStyle = (padding: number, token: Partial<CardToken>): CSSOb
         },
       },
     },
+    [`&${componentCls}-has-title${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
+      [`${componentCls}-body`]: {
+        [`& > ${tableComponentCls}-wrapper ${tableComponentCls}:not(${tableComponentCls}-bordered):first-child`]:
+          {
+            marginTop: -token.marginSM,
+          },
+      },
+    },
   };
 };
 
 export const genCardStyle: GenerateStyle<CardToken> = (token: CardToken): CSSObject => {
-  const { componentCls, tabsComponentCls, tabsPrefixCls, padding, paddingSM, paddingLG } = token;
+  const { componentCls, tabsComponentCls, tabsPrefixCls, paddingSM, paddingLG } = token;
   return {
     [`${componentCls}`]: {
       // nested Card style
@@ -50,7 +58,8 @@ export const genCardStyle: GenerateStyle<CardToken> = (token: CardToken): CSSObj
     },
     [`${componentCls}${componentCls}-no-divider`]: {
       [`${componentCls}-head`]: {
-        borderBottom: 'none',
+        // should not remove border-bottom to avoid tabs inkbar display correctly
+        borderBottomColor: 'transparent',
       },
     },
     [`${componentCls}${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {

diff --git a/packages/design/src/table/demo/card-table.tsx b/packages/design/src/table/demo/card-table.tsx
@@ -4,10 +4,15 @@ import { Card, Form, Switch, Table, theme } from '@oceanbase/design';
 const App: React.FC = () => {
   const { token } = theme.useToken();
 
+  // card
   const [hasBorder, setHasBorder] = useState(true);
   const [hasTitle, setHasTitle] = useState(true);
+  const [hasTabs, setHasTabs] = useState(false);
   const [hasDivider, setHasDivider] = useState(true);
   const [hasPadding, setHasPadding] = useState(false);
+
+  // table
+  const [bordered, setBordered] = useState(false);
   const [expandable, setExpandable] = useState(true);
   const [selectable, setSelectable] = useState(true);
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@@ -71,6 +76,15 @@ const App: React.FC = () => {
             }}
           />
         </Form.Item>
+        <Form.Item label="Card tabs" required={true}>
+          <Switch
+            size="small"
+            value={hasTabs}
+            onChange={value => {
+              setHasTabs(value);
+            }}
+          />
+        </Form.Item>
         <Form.Item label="Card divided" required={true}>
           <Switch
             size="small"
@@ -91,6 +105,15 @@ const App: React.FC = () => {
         </Form.Item>
       </Form>
       <Form layout="inline" style={{ marginBottom: 16 }}>
+        <Form.Item label="Table bordered" required={true}>
+          <Switch
+            size="small"
+            value={bordered}
+            onChange={value => {
+              setBordered(value);
+            }}
+          />
+        </Form.Item>
         <Form.Item label="Table expandable" required={true}>
           <Switch
             size="small"
@@ -114,6 +137,24 @@ const App: React.FC = () => {
         bordered={hasBorder}
         divided={hasDivider}
         title={hasTitle ? 'Title' : ''}
+        tabList={
+          hasTabs
+            ? [
+                {
+                  key: '1',
+                  tab: 'tab1',
+                },
+                {
+                  key: '2',
+                  tab: 'tab2',
+                },
+                {
+                  key: '3',
+                  tab: 'tab3',
+                },
+              ]
+            : undefined
+        }
         bodyStyle={
           hasPadding
             ? {}
@@ -123,6 +164,7 @@ const App: React.FC = () => {
         }
       >
         <Table
+          bordered={bordered}
           columns={columns}
           dataSource={dataSource}
           rowKey={record => record.key}

diff --git a/packages/design/src/table/demo/pro-card-table.tsx b/packages/design/src/table/demo/pro-card-table.tsx
@@ -5,9 +5,14 @@ import { ProCard } from '@oceanbase/ui';
 const App: React.FC = () => {
   const { token } = theme.useToken();
 
+  // card
   const [hasBorder, setHasBorder] = useState(true);
   const [hasTitle, setHasTitle] = useState(true);
+  const [hasTabs, setHasTabs] = useState(false);
   const [hasPadding, setHasPadding] = useState(false);
+
+  // table
+  const [bordered, setBordered] = useState(false);
   const [expandable, setExpandable] = useState(true);
   const [selectable, setSelectable] = useState(true);
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@@ -71,6 +76,15 @@ const App: React.FC = () => {
             }}
           />
         </Form.Item>
+        <Form.Item label="Card tabs" required={true}>
+          <Switch
+            size="small"
+            value={hasTabs}
+            onChange={value => {
+              setHasTabs(value);
+            }}
+          />
+        </Form.Item>
         <Form.Item label="Card body padding" required={true}>
           <Switch
             size="small"
@@ -82,6 +96,15 @@ const App: React.FC = () => {
         </Form.Item>
       </Form>
       <Form layout="inline" style={{ marginBottom: 16 }}>
+        <Form.Item label="Table bordered" required={true}>
+          <Switch
+            size="small"
+            value={bordered}
+            onChange={value => {
+              setBordered(value);
+            }}
+          />
+        </Form.Item>
         <Form.Item label="Table expandable" required={true}>
           <Switch
             size="small"
@@ -104,9 +127,30 @@ const App: React.FC = () => {
       <ProCard
         bordered={hasBorder}
         title={hasTitle ? 'Title' : ''}
+        tabs={
+          hasTabs
+            ? {
+                items: [
+                  {
+                    key: '1',
+                    label: 'tab1',
+                  },
+                  {
+                    key: '2',
+                    label: 'tab2',
+                  },
+                  {
+                    key: '3',
+                    label: 'tab3',
+                  },
+                ],
+              }
+            : undefined
+        }
         bodyStyle={hasPadding ? { padding: 24 } : { padding: 0 }}
       >
         <Table
+          bordered={bordered}
           columns={columns}
           dataSource={dataSource}
           rowKey={record => record.key}

diff --git a/packages/design/src/table/style/index.ts b/packages/design/src/table/style/index.ts
@@ -149,8 +149,8 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
         ['td, th']: {
           [`&${componentCls}-row-expand-icon-cell`]: {
             backgroundColor: colorBgBase,
-            // 去掉展开列的 padding，其宽度由 expandable.columnWidth 进行控制，其高度跟随其他列
-            padding: 0,
+            // 设置 paddingRight 即可
+            paddingRight: token.paddingXS,
           },
           // 紧跟在选择列或展开列后的第一列，左侧间距减小为 8px
           [`&${componentCls}-selection-column, &${componentCls}-row-expand-icon-cell`]: {
@@ -215,17 +215,23 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
                 },
               },
             },
+          [`${componentCls}-expanded-row > td`]: {
+            // 除内嵌子表格外，设置其他内嵌元素样式
+            [`& > *:not(${componentCls}-wrapper)`]: {
+              marginLeft: token.marginXL + token.lineWidth * 2,
+            },
+          },
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.marginXS + token.lineWidth * 2,
+            marginLeft: token.margin + token.lineWidth * 2,
           },
         },
       },
       [`${componentCls}-middle, ${componentCls}-small`]: {
         [`${componentCls}-tbody`]: {
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.marginXS + token.lineWidth * 2 + token.margin,
+            marginLeft: token.margin + token.lineWidth * 2 + token.margin,
           },
         },
       },
@@ -238,20 +244,20 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
           [`${componentCls}-expanded-row > td`]: {
             // 除内嵌子表格外，设置其他内嵌元素样式
             [`& > *:not(${componentCls}-wrapper)`]: {
-              marginLeft: token.marginLG + token.marginXL + token.lineWidth * 2,
+              marginLeft: token.marginXL + token.marginXL + token.lineWidth * 2,
             },
           },
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.marginXS + token.marginXL + token.lineWidth * 2,
+            marginLeft: token.margin + token.marginXL + token.lineWidth * 2,
           },
         },
       },
       [`${componentCls}-middle, ${componentCls}-small`]: {
         [`${componentCls}-tbody`]: {
           // 嵌套子表格和父表格第一列对齐
           [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
-            marginLeft: token.marginXS + token.marginXL + token.lineWidth * 2 + token.margin,
+            marginLeft: token.margin + token.marginXL + token.lineWidth * 2 + token.margin,
           },
         },
       },

diff --git a/packages/ui/src/ProCard/index.tsx b/packages/ui/src/ProCard/index.tsx
@@ -9,6 +9,9 @@ export { ProCardProps };
 
 // @ts-ignore
 const ProCard: typeof AntProCard = ({
+  title,
+  tabs,
+  headerBordered,
   bodyStyle,
   prefixCls: customizePrefixCls,
   className,
@@ -25,14 +28,20 @@ const ProCard: typeof AntProCard = ({
 
   const proCardCls = classNames(
     {
+      [`${prefixCls}-has-title`]: !!title,
       [`${prefixCls}-no-body-padding`]: noBodyPadding,
+      [`${prefixCls}-no-divider`]: !headerBordered,
+      [`${prefixCls}-contain-tabs`]: !!tabs,
     },
     className
   );
 
   return wrapSSR(
     <AntProCard
       prefixCls={customizePrefixCls}
+      title={title}
+      tabs={tabs}
+      headerBordered={headerBordered}
       bodyStyle={bodyStyle}
       className={proCardCls}
       {...restProps}