From fb9b1281d99ba0d21b5cb32c87b5e671272c1c8e Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Tue, 19 Sep 2023 19:28:25 +0800 Subject: [PATCH 1/2] fix(table): #2596 --- .changeset/red-books-shake.md | 5 +++ .changeset/smart-onions-tan.md | 5 +++ packages/ui/table/src/Table.tsx | 5 ++- packages/ui/table/src/styles/table.scss | 50 ++++++++++++++++------ packages/ui/table/stories/size.stories.tsx | 6 +-- 5 files changed, 52 insertions(+), 19 deletions(-) create mode 100644 .changeset/red-books-shake.md create mode 100644 .changeset/smart-onions-tan.md diff --git a/.changeset/red-books-shake.md b/.changeset/red-books-shake.md new file mode 100644 index 000000000..433d3eee6 --- /dev/null +++ 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 new file mode 100644 index 000000000..b5b23b8d4 --- /dev/null +++ b/.changeset/smart-onions-tan.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +Table fix: 修复紧凑模式下多选项间距问题 diff --git a/packages/ui/table/src/Table.tsx b/packages/ui/table/src/Table.tsx index 73829e570..ba2ea7fa8 100644 --- a/packages/ui/table/src/Table.tsx +++ b/packages/ui/table/src/Table.tsx @@ -180,8 +180,9 @@ export const Table = forwardRef( const checkboxColWidth = React.useMemo(() => { return rowSelection && typeof rowSelection.checkboxColWidth === 'number' ? rowSelection.checkboxColWidth - : 38 - }, [rowSelection]) + : // 适配不同尺寸，默认常规尺寸 + { sm: 36, md: 44, lg: 52 }[rest.size ?? 'md'] + }, [rest.size, rowSelection]) // 预处理 column 支持 多选渲染 const { diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss index 81aa68d34..96ccb7c6a 100644 --- 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); + } } } thead { & > tr > th { padding: use-spacing(7); + + &.#{$prefix}__selection-col { + padding: use-spacing(7); + } } } } @@ -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); + } } } thead { & > tr > th { padding: use-spacing(9); + + &.#{$prefix}__selection-col { + padding: use-spacing(9); + } } } } @@ -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 index 3cf5355f5..86ccaef44 100644 --- a/packages/ui/table/stories/size.stories.tsx +++ b/packages/ui/table/stories/size.stories.tsx @@ -231,13 +231,13 @@ export const Size = () => { <>

Size for Table

- +


-
+


-
+
) From e44cd9403de0de08fd8a8a5b2c14bf993383b0f0 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Wed, 20 Sep 2023 11:20:22 +0800 Subject: [PATCH 2/2] =?UTF-8?q?chore(table):=20=E7=B4=A7=E5=87=91=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/table/src/BaseTable.tsx | 2 +- packages/ui/table/src/Table.tsx | 5 ++--- packages/ui/table/src/styles/table.scss | 8 ++++---- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/ui/table/src/BaseTable.tsx b/packages/ui/table/src/BaseTable.tsx index 4bec99ddc..5002fcf87 100644 --- a/packages/ui/table/src/BaseTable.tsx +++ b/packages/ui/table/src/BaseTable.tsx @@ -38,7 +38,7 @@ export const BaseTable = forwardRef( onEmbedExpand, expandedRender, // 其它 - size, + size = 'md', extra, onRow, onHeaderRow, diff --git a/packages/ui/table/src/Table.tsx b/packages/ui/table/src/Table.tsx index ba2ea7fa8..73829e570 100644 --- a/packages/ui/table/src/Table.tsx +++ b/packages/ui/table/src/Table.tsx @@ -180,9 +180,8 @@ export const Table = forwardRef( const checkboxColWidth = React.useMemo(() => { return rowSelection && typeof rowSelection.checkboxColWidth === 'number' ? rowSelection.checkboxColWidth - : // 适配不同尺寸，默认常规尺寸 - { sm: 36, md: 44, lg: 52 }[rest.size ?? 'md'] - }, [rest.size, rowSelection]) + : 38 + }, [rowSelection]) // 预处理 column 支持 多选渲染 const { diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss index 96ccb7c6a..277011838 100644 --- a/packages/ui/table/src/styles/table.scss +++ b/packages/ui/table/src/styles/table.scss @@ -45,7 +45,7 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default; padding: use-spacing(7); &.#{$prefix}__selection-col { - padding: use-spacing(7); + padding: use-spacing(7) use-spacing(5); } } } @@ -55,7 +55,7 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default; padding: use-spacing(7); &.#{$prefix}__selection-col { - padding: use-spacing(7); + padding: use-spacing(7) use-spacing(5); } } } @@ -93,7 +93,7 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default; padding: use-spacing(9); &.#{$prefix}__selection-col { - padding: use-spacing(9); + padding: use-spacing(9) use-spacing(5); } } } @@ -103,7 +103,7 @@ $emptyContent: '#{$component-prefix}-table-empty-content' !default; padding: use-spacing(9); &.#{$prefix}__selection-col { - padding: use-spacing(9); + padding: use-spacing(9) use-spacing(5); } } }