Merge pull request #2608 from XiaoMi/hotfix/table(#2596)

Hotfix/table(#2596)
XiaoMi · Sep 25, 2023 · 241cd97 · 241cd97
2 parents a6054b1 + e44cd94
commit 241cd97
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 18 deletions.
diff --git a/.changeset/red-books-shake.md b/.changeset/red-books-shake.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": patch
+---
+
+fix: 修复紧凑模式下多选项间距问题
diff --git a/.changeset/smart-onions-tan.md b/.changeset/smart-onions-tan.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Table fix: 修复紧凑模式下多选项间距问题
diff --git a/packages/ui/table/src/BaseTable.tsx b/packages/ui/table/src/BaseTable.tsx
@@ -38,7 +38,7 @@ export const BaseTable = forwardRef<HTMLDivElement | null, BaseTableProps>(
       onEmbedExpand,
       expandedRender,
       // 其它
-      size,
+      size = 'md',
       extra,
       onRow,
       onHeaderRow,

diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss
@@ -43,12 +43,20 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
         tbody {
           & > tr:not(.#{$emptyContent}) > td {
             padding: use-spacing(7);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(7) use-spacing(5);
+            }
           }
         }
 
         thead {
           & > tr > th {
             padding: use-spacing(7);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(7) use-spacing(5);
+            }
           }
         }
       }
@@ -59,12 +67,20 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
         tbody {
           & > tr:not(.#{$emptyContent}) > td {
             padding: use-spacing(5);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(5);
+            }
           }
         }
 
         thead {
           & > tr > th {
             padding: use-spacing(5);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(5);
+            }
           }
         }
       }
@@ -75,12 +91,20 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
         tbody {
           & > tr:not(.#{$emptyContent}) > td {
             padding: use-spacing(9);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(9) use-spacing(5);
+            }
           }
         }
 
         thead {
           & > tr > th {
             padding: use-spacing(9);
+
+            &.#{$prefix}__selection-col {
+              padding: use-spacing(9) use-spacing(5);
+            }
           }
         }
       }
@@ -161,6 +185,17 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
 
     &-cell {
       background-color: use-color('gray', 50);
+      color: use-color('gray', 700);
+      font-size: use-text-size('normal');
+      font-weight: use-text-weight('medium');
+      line-height: use-text-lineheight('sm');
+      padding: use-spacing(7) use-spacing(8);
+      border-bottom: use-border-size('normal') use-color('gray', 300);
+
+      &.#{$prefix}__embed-col,
+      &.#{$prefix}__selection-col {
+        padding: use-spacing(7) use-spacing(5);
+      }
 
       $this: &;
 
@@ -241,6 +276,7 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
         }
       }
     }
+
     &--virtual {
       display: flex;
     }
@@ -270,20 +306,6 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default;
   overflow: auto;
 }
 
-.#{$prefix}-header-cell {
-  color: use-color('gray', 700);
-  font-size: use-text-size('normal');
-  font-weight: use-text-weight('medium');
-  line-height: use-text-lineheight('sm');
-  padding: use-spacing(7) use-spacing(8);
-  border-bottom: use-border-size('normal') use-color('gray', 300);
-
-  &.#{$prefix}__embed-col,
-  &.#{$prefix}__selection-col {
-    padding: use-spacing(7) use-spacing(5);
-  }
-}
-
 // 单元格
 .#{$prefix}-cell {
   word-break: break-word;

diff --git a/packages/ui/table/stories/size.stories.tsx b/packages/ui/table/stories/size.stories.tsx
@@ -231,13 +231,13 @@ export const Size = () => {
     <>
       <h1>Size for Table</h1>
       <div className="table-size__wrap" style={{ minWidth: 660, background: '#fff' }}>
-        <Table bordered columns={column} data={data} size="sm" />
+        <Table bordered columns={column} data={data} size="sm" rowSelection={{}} />
         <br />
         <br />
-        <Table bordered columns={column} data={data} size="md" />
+        <Table bordered columns={column} data={data} size="md" rowSelection={{}} />
         <br />
         <br />
-        <Table bordered columns={column} data={data} size="lg" />
+        <Table bordered columns={column} data={data} size="lg" rowSelection={{}} />
       </div>
     </>
   )