feat(comp:table): change rowHeight theme tokens to paddings (#1760)

IDuxFE · Dec 11, 2023 · 48f0394 · 48f0394
1 parent f44039d
commit 48f0394
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 68 deletions.
diff --git a/packages/components/dark.full.css b/packages/components/dark.full.css
@@ -904,12 +904,12 @@
   --ix-table-head-row-height-sm: 32px;
   --ix-table-head-row-height-md: 32px;
   --ix-table-head-row-height-lg: 32px;
-  --ix-table-body-row-height-sm: 32px;
-  --ix-table-body-row-height-md: 40px;
-  --ix-table-body-row-height-lg: 56px;
-  --ix-table-row-padding-horizontal-sm: 8px;
-  --ix-table-row-padding-horizontal-md: 12px;
-  --ix-table-row-padding-horizontal-lg: 16px;
+  --ix-table-cell-padding-horizontal-sm: 8px;
+  --ix-table-cell-padding-horizontal-md: 12px;
+  --ix-table-cell-padding-horizontal-lg: 16px;
+  --ix-table-cell-padding-vertical-sm: 6px;
+  --ix-table-cell-padding-vertical-md: 10px;
+  --ix-table-cell-padding-vertical-lg: 18px;
   --ix-table-head-color: #c2c7d1;
   --ix-table-head-bg-color: #1f2329;
   --ix-table-head-separator-color: #3c424d;
@@ -920,6 +920,7 @@
   --ix-table-body-row-bg-color-selected: #0a0c0f;
   --ix-table-body-row-bg-color-expanded: #171a1f;
   --ix-table-body-row-bg-color-tree-expanded: #171a1f;
+  --ix-table-body-cell-vertical-align: middle;
   --ix-table-expandable-icon-color: #687080;
 }
 

diff --git a/packages/components/default.full.css b/packages/components/default.full.css
@@ -904,12 +904,12 @@
   --ix-table-head-row-height-sm: 32px;
   --ix-table-head-row-height-md: 32px;
   --ix-table-head-row-height-lg: 32px;
-  --ix-table-body-row-height-sm: 32px;
-  --ix-table-body-row-height-md: 40px;
-  --ix-table-body-row-height-lg: 56px;
-  --ix-table-row-padding-horizontal-sm: 8px;
-  --ix-table-row-padding-horizontal-md: 12px;
-  --ix-table-row-padding-horizontal-lg: 16px;
+  --ix-table-cell-padding-horizontal-sm: 8px;
+  --ix-table-cell-padding-horizontal-md: 12px;
+  --ix-table-cell-padding-horizontal-lg: 16px;
+  --ix-table-cell-padding-vertical-sm: 6px;
+  --ix-table-cell-padding-vertical-md: 10px;
+  --ix-table-cell-padding-vertical-lg: 18px;
   --ix-table-head-color: #454c59;
   --ix-table-head-bg-color: #edf1f7;
   --ix-table-head-separator-color: #d3d7de;
@@ -920,6 +920,7 @@
   --ix-table-body-row-bg-color-selected: #ffffff;
   --ix-table-body-row-bg-color-expanded: #f7f9fc;
   --ix-table-body-row-bg-color-tree-expanded: #f7f9fc;
+  --ix-table-body-cell-vertical-align: middle;
   --ix-table-expandable-icon-color: #bec3cc;
 }
 

diff --git a/packages/components/table/docs/Theme.zh.md b/packages/components/table/docs/Theme.zh.md
@@ -1,25 +1,26 @@
 | 名称 | 描述 | 类型 | default | dark |
 |---|---|---|---|---|
-| `bodyRowBgColorExpanded` |  | `string` | `#f7f9fc` | `#171A1F` |
-| `bodyRowBgColorHover` |  | `string` | `#f7f9fc` | `#171A1F` |
-| `bodyRowBgColorSelected` |  | `string` | `#ffffff` | `#0A0C0F` |
-| `bodyRowBgColorTreeExpanded` |  | `string` | `#f7f9fc` | `#171A1F` |
-| `bodyRowHeightLg` |  | `number` | `56` | `56` |
-| `bodyRowHeightMd` |  | `number` | `40` | `40` |
-| `bodyRowHeightSm` |  | `number` | `32` | `32` |
-| `expandableIconColor` |  | `string` | `#bec3cc` | `#687080` |
-| `fontSizeLg` |  | `number` | `12` | `12` |
-| `fontSizeMd` |  | `number` | `12` | `12` |
-| `fontSizeSm` |  | `number` | `12` | `12` |
-| `headBgColor` |  | `string` | `#edf1f7` | `#1F2329` |
-| `headColor` |  | `string` | `#454c59` | `#C2C7D1` |
-| `headIconBgColorHover` |  | `string` | `#e1e5eb` | `#1F2329` |
-| `headIconColor` |  | `string` | `#bec3cc` | `#687080` |
-| `headIconColorActive` |  | `string` | `#1c6eff` | `#4083E8` |
-| `headRowHeightLg` |  | `number` | `32` | `32` |
-| `headRowHeightMd` |  | `number` | `32` | `32` |
-| `headRowHeightSm` |  | `number` | `32` | `32` |
-| `headSeparatorColor` |  | `string` | `#d3d7de` | `#3C424D` |
-| `rowPaddingHorizontalLg` |  | `number` | `16` | `16` |
-| `rowPaddingHorizontalMd` |  | `number` | `12` | `12` |
-| `rowPaddingHorizontalSm` |  | `number` | `8` | `8` |
+| `bodyCellVerticalAlign` | 表格内容单元格垂直方向对齐 | `string` | `middle` | `middle` |
+| `bodyRowBgColorExpanded` | 表格内容行展开背景颜色 | `string` | `#f7f9fc` | `#171A1F` |
+| `bodyRowBgColorHover` | 表格内容行悬浮背景颜色 | `string` | `#f7f9fc` | `#171A1F` |
+| `bodyRowBgColorSelected` | 表格内容行选中背景颜色 | `string` | `#ffffff` | `#0A0C0F` |
+| `bodyRowBgColorTreeExpanded` | 树表格内容行展开背景颜色 | `string` | `#f7f9fc` | `#171A1F` |
+| `cellPaddingHorizontalLg` | lg 尺寸下表格单元格水平内边距 | `number` | `16` | `16` |
+| `cellPaddingHorizontalMd` | md 尺寸下表格单元格水平内边距 | `number` | `12` | `12` |
+| `cellPaddingHorizontalSm` | sm 尺寸下表格单元格水平内边距 | `number` | `8` | `8` |
+| `cellPaddingVerticalLg` | sm 尺寸下表格单元格垂直内边距 | `number` | `18` | `18` |
+| `cellPaddingVerticalMd` | sm 尺寸下表格单元格垂直内边距 | `number` | `10` | `10` |
+| `cellPaddingVerticalSm` | sm 尺寸下表格单元格垂直内边距 | `number` | `6` | `6` |
+| `expandableIconColor` | 表格展开收起图标 | `string` | `#bec3cc` | `#687080` |
+| `fontSizeLg` | lg 尺寸下表格字体大小 | `number` | `12` | `12` |
+| `fontSizeMd` | md 尺寸下表格字体大小 | `number` | `12` | `12` |
+| `fontSizeSm` | sm 尺寸下表格字体大小 | `number` | `12` | `12` |
+| `headBgColor` | 表头背景颜色 | `string` | `#edf1f7` | `#1F2329` |
+| `headColor` | 表头字体颜色 | `string` | `#454c59` | `#C2C7D1` |
+| `headIconBgColorHover` | 表头按钮悬浮颜色 | `string` | `#e1e5eb` | `#1F2329` |
+| `headIconColor` | 表头按钮颜色 | `string` | `#bec3cc` | `#687080` |
+| `headIconColorActive` | 表头按钮激活颜色 | `string` | `#1c6eff` | `#4083E8` |
+| `headRowHeightLg` | lg 尺寸下表格表头高度 | `number` | `32` | `32` |
+| `headRowHeightMd` | md 尺寸下表格表头高度 | `number` | `32` | `32` |
+| `headRowHeightSm` | sm 尺寸下表格表头高度 | `number` | `32` | `32` |
+| `headSeparatorColor` | 表头分割线颜色 | `string` | `#d3d7de` | `#3C424D` |
diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
@@ -101,6 +101,7 @@
   &-cell {
     position: relative;
     text-align: start;
+    vertical-align: var(--ix-table-body-cell-vertical-align);
     overflow-wrap: break-word;
   }
 

diff --git a/packages/components/table/style/size.less b/packages/components/table/style/size.less
@@ -1,4 +1,4 @@
-.table-size( @font-size, @head-height, @body-height, @padding-horizontal) {
+.table-size( @font-size, @head-height, @padding-horizontal, @padding-vertical) {
   .reset-font-size(@font-size);
 
   &:not(.@{table-prefix}-borderless) {
@@ -38,16 +38,14 @@
   .@{table-prefix}-alert-row > td,
   .@{table-prefix}-expanded-row > td,
   .@{table-prefix}-footer {
-    height: @body-height;
-    // border-bottom: 1px
-    padding: 4px @padding-horizontal 3px;
+    padding: @padding-vertical @padding-horizontal;
   }
 
   // TODO: Nest Table
 }
 
 .@{table-prefix}-sm {
-  .table-size(var(--ix-table-font-size-sm), var(--ix-table-head-row-height-sm), var(--ix-table-body-row-height-sm), var(--ix-table-row-padding-horizontal-sm));
+  .table-size(var(--ix-table-font-size-sm), var(--ix-table-head-row-height-sm), var(--ix-table-cell-padding-horizontal-sm), var(--ix-table-cell-padding-vertical-sm));
 
   .@{table-prefix}-col-expandable,
   .@{table-prefix}-col-selectable {
@@ -68,7 +66,7 @@
 }
 
 .@{table-prefix}-md {
-  .table-size(var(--ix-table-font-size-md), var(--ix-table-head-row-height-md), var(--ix-table-body-row-height-md), var(--ix-table-row-padding-horizontal-md));
+  .table-size(var(--ix-table-font-size-md), var(--ix-table-head-row-height-md), var(--ix-table-cell-padding-horizontal-md), var(--ix-table-cell-padding-vertical-md));
 
   .@{table-prefix}-col-expandable,
   .@{table-prefix}-col-selectable {
@@ -85,7 +83,7 @@
 }
 
 .@{table-prefix}-lg {
-  .table-size(var(--ix-table-font-size-lg), var(--ix-table-head-row-height-lg), var(--ix-table-body-row-height-lg), var(--ix-table-row-padding-horizontal-lg));
+  .table-size(var(--ix-table-font-size-lg), var(--ix-table-head-row-height-lg), var(--ix-table-cell-padding-horizontal-lg), var(--ix-table-cell-padding-vertical-lg));
 
   .@{table-prefix}-col-expandable,
   .@{table-prefix}-col-selectable {

diff --git a/packages/components/table/theme/dark.css b/packages/components/table/theme/dark.css
@@ -6,12 +6,12 @@
   --ix-table-head-row-height-sm: 32px;
   --ix-table-head-row-height-md: 32px;
   --ix-table-head-row-height-lg: 32px;
-  --ix-table-body-row-height-sm: 32px;
-  --ix-table-body-row-height-md: 40px;
-  --ix-table-body-row-height-lg: 56px;
-  --ix-table-row-padding-horizontal-sm: 8px;
-  --ix-table-row-padding-horizontal-md: 12px;
-  --ix-table-row-padding-horizontal-lg: 16px;
+  --ix-table-cell-padding-horizontal-sm: 8px;
+  --ix-table-cell-padding-horizontal-md: 12px;
+  --ix-table-cell-padding-horizontal-lg: 16px;
+  --ix-table-cell-padding-vertical-sm: 6px;
+  --ix-table-cell-padding-vertical-md: 10px;
+  --ix-table-cell-padding-vertical-lg: 18px;
   --ix-table-head-color: #c2c7d1;
   --ix-table-head-bg-color: #1f2329;
   --ix-table-head-separator-color: #3c424d;
@@ -22,5 +22,6 @@
   --ix-table-body-row-bg-color-selected: #0a0c0f;
   --ix-table-body-row-bg-color-expanded: #171a1f;
   --ix-table-body-row-bg-color-tree-expanded: #171a1f;
+  --ix-table-body-cell-vertical-align: middle;
   --ix-table-expandable-icon-color: #687080;
 }
diff --git a/packages/components/table/theme/default.css b/packages/components/table/theme/default.css
@@ -6,12 +6,12 @@
   --ix-table-head-row-height-sm: 32px;
   --ix-table-head-row-height-md: 32px;
   --ix-table-head-row-height-lg: 32px;
-  --ix-table-body-row-height-sm: 32px;
-  --ix-table-body-row-height-md: 40px;
-  --ix-table-body-row-height-lg: 56px;
-  --ix-table-row-padding-horizontal-sm: 8px;
-  --ix-table-row-padding-horizontal-md: 12px;
-  --ix-table-row-padding-horizontal-lg: 16px;
+  --ix-table-cell-padding-horizontal-sm: 8px;
+  --ix-table-cell-padding-horizontal-md: 12px;
+  --ix-table-cell-padding-horizontal-lg: 16px;
+  --ix-table-cell-padding-vertical-sm: 6px;
+  --ix-table-cell-padding-vertical-md: 10px;
+  --ix-table-cell-padding-vertical-lg: 18px;
   --ix-table-head-color: #454c59;
   --ix-table-head-bg-color: #edf1f7;
   --ix-table-head-separator-color: #d3d7de;
@@ -22,5 +22,6 @@
   --ix-table-body-row-bg-color-selected: #ffffff;
   --ix-table-body-row-bg-color-expanded: #f7f9fc;
   --ix-table-body-row-bg-color-tree-expanded: #f7f9fc;
+  --ix-table-body-cell-vertical-align: middle;
   --ix-table-expandable-icon-color: #bec3cc;
 }
diff --git a/packages/components/table/theme/default.ts b/packages/components/table/theme/default.ts
@@ -10,8 +10,6 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
   const {
     fontSizeSm,
     heightMd,
-    heightLg,
-    height2xl,
     paddingSizeSm,
     paddingSizeMd,
     paddingSizeLg,
@@ -35,13 +33,13 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
     headRowHeightMd: heightMd,
     headRowHeightLg: heightMd,
 
-    bodyRowHeightSm: heightMd,
-    bodyRowHeightMd: heightLg,
-    bodyRowHeightLg: height2xl,
+    cellPaddingHorizontalSm: paddingSizeSm,
+    cellPaddingHorizontalMd: paddingSizeMd,
+    cellPaddingHorizontalLg: paddingSizeLg,
 
-    rowPaddingHorizontalSm: paddingSizeSm,
-    rowPaddingHorizontalMd: paddingSizeMd,
-    rowPaddingHorizontalLg: paddingSizeLg,
+    cellPaddingVerticalSm: 6,
+    cellPaddingVerticalMd: 10,
+    cellPaddingVerticalLg: 18,
 
     headColor: colorTextTitleSecondary,
     headBgColor: colorEmphasizedContainerBg,
@@ -55,6 +53,8 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
     bodyRowBgColorExpanded: colorInfoContainerBg,
     bodyRowBgColorTreeExpanded: colorInfoContainerBg,
 
+    bodyCellVerticalAlign: 'middle',
+
     expandableIconColor: colorIconInfo,
   }
 }
diff --git a/packages/components/table/theme/tokens.ts b/packages/components/table/theme/tokens.ts
@@ -6,33 +6,107 @@
  */
 
 export interface TableThemeTokens {
+  /**
+   * @desc sm 尺寸下表格字体大小
+   */
   fontSizeSm: number
+  /**
+   * @desc md 尺寸下表格字体大小
+   */
   fontSizeMd: number
+  /**
+   * @desc lg 尺寸下表格字体大小
+   */
   fontSizeLg: number
 
+  /**
+   * @desc sm 尺寸下表格表头高度
+   */
   headRowHeightSm: number
+  /**
+   * @desc md 尺寸下表格表头高度
+   */
   headRowHeightMd: number
+  /**
+   * @desc lg 尺寸下表格表头高度
+   */
   headRowHeightLg: number
 
-  bodyRowHeightSm: number
-  bodyRowHeightMd: number
-  bodyRowHeightLg: number
+  /**
+   * @desc sm 尺寸下表格单元格水平内边距
+   */
+  cellPaddingHorizontalSm: number
+  /**
+   * @desc md 尺寸下表格单元格水平内边距
+   */
+  cellPaddingHorizontalMd: number
+  /**
+   * @desc lg 尺寸下表格单元格水平内边距
+   */
+  cellPaddingHorizontalLg: number
 
-  rowPaddingHorizontalSm: number
-  rowPaddingHorizontalMd: number
-  rowPaddingHorizontalLg: number
+  /**
+   * @desc sm 尺寸下表格单元格垂直内边距
+   */
+  cellPaddingVerticalSm: number
+  /**
+   * @desc sm 尺寸下表格单元格垂直内边距
+   */
+  cellPaddingVerticalMd: number
+  /**
+   * @desc sm 尺寸下表格单元格垂直内边距
+   */
+  cellPaddingVerticalLg: number
 
+  /**
+   * @desc 表头字体颜色
+   */
   headColor: string
+  /**
+   * @desc 表头背景颜色
+   */
   headBgColor: string
+  /**
+   * @desc 表头分割线颜色
+   */
   headSeparatorColor: string
+  /**
+   * @desc 表头按钮颜色
+   */
   headIconColor: string
+  /**
+   * @desc 表头按钮激活颜色
+   */
   headIconColorActive: string
+  /**
+   * @desc 表头按钮悬浮颜色
+   */
   headIconBgColorHover: string
 
+  /**
+   * @desc 表格内容行悬浮背景颜色
+   */
   bodyRowBgColorHover: string
+  /**
+   * @desc 表格内容行选中背景颜色
+   */
   bodyRowBgColorSelected: string
+  /**
+   * @desc 表格内容行展开背景颜色
+   */
   bodyRowBgColorExpanded: string
+  /**
+   * @desc 树表格内容行展开背景颜色
+   */
   bodyRowBgColorTreeExpanded: string
 
+  /**
+   * @desc 表格内容单元格垂直方向对齐
+   */
+  bodyCellVerticalAlign: string
+
+  /**
+   * @desc 表格展开收起图标
+   */
   expandableIconColor: string
 }
diff --git a/packages/site/src/docs/CustomizeTheme.zh.md b/packages/site/src/docs/CustomizeTheme.zh.md
@@ -339,6 +339,7 @@ token `getter` 只会在第一次注册成功的时候实际执行，因此不
 | `screenSm` | 屏幕尺寸Sm | `number` | `600` | `600` |
 | `screenXl` | 屏幕尺寸Xl | `number` | `1720` | `1720` |
 | `spacing` | 基础间距 | `number` | `8` | `8` |
+
 <!-- insert basicTokens end -->
 
 ### 派生Token
@@ -475,6 +476,7 @@ token `getter` 只会在第一次注册成功的时候实际执行，因此不
 | `screenSmMin` |  | `number` | `600` | `600` |
 | `screenXlMin` |  | `number` | `1720` | `1720` |
 | `screenXsMax` |  | `number` | `599.99` | `599.99` |
+
 <!-- insert derivedTokens end -->
 
 ### 扩展Token
@@ -564,6 +566,7 @@ token `getter` 只会在第一次注册成功的时候实际执行，因此不
 | `scrollbarTrackBoxShadow` | 滚动条轨道阴影 | `string` | `unset` | `unset` |
 | `scrollbarWidth` | 滚动条宽度 | `number` | `12` | `12` |
 | `tagCompColorAlpha` | IxTag 组件的颜色Alpha值，仅用于这一个组件 | `number` | `0.1` | `0.2` |
+
 <!-- insert extendedTokens end -->
 
 ## FAQ