fix: use variables to set size or padding

infra-fe · Jul 5, 2022 · 1010e25 · 1010e25
1 parent a75adfa
commit 1010e25
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 14 deletions.
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
@@ -654,6 +654,8 @@
 @table-header-bg: @background-color-light;
 @table-header-color: fade(@black, 45%);
 @table-header-sort-bg: @background-color-base;
+@table-header-font-weight: 400;
+@table-header-font-size: @font-size-base - 2px;
 @table-body-sort-bg: #fafafa;
 @table-row-hover-bg: @background-color-light;
 @table-selected-row-color: inherit;
@@ -667,6 +669,8 @@
 @table-padding-horizontal-md: (@table-padding-horizontal / 2);
 @table-padding-vertical-sm: (@table-padding-vertical / 2);
 @table-padding-horizontal-sm: (@table-padding-horizontal / 2);
+@table-padding-md: (@table-padding-vertical * 3 / 4);
+@table-padding-sm: (@table-padding-vertical / 2);
 @table-border-color: @border-color-split;
 @table-border-radius-base: @border-radius-base;
 @table-footer-bg: @background-color-light;

diff --git a/components/style/themes/variable.less b/components/style/themes/variable.less
@@ -710,6 +710,8 @@
 @table-header-bg: @background-color-light;
 @table-header-color: fade(@black, 45%);
 @table-header-sort-bg: @background-color-base;
+@table-header-font-weight: 400;
+@table-header-font-size: @font-size-base - 2px;
 @table-body-sort-bg: #fafafa;
 @table-row-hover-bg: @background-color-light;
 @table-selected-row-color: inherit;
@@ -723,6 +725,8 @@
 @table-padding-horizontal-md: (@table-padding-horizontal / 2);
 @table-padding-vertical-sm: (@table-padding-vertical / 2);
 @table-padding-horizontal-sm: (@table-padding-horizontal / 2);
+@table-padding-md: (@table-padding-vertical * 3 / 4);
+@table-padding-sm: (@table-padding-vertical / 2);
 @table-border-color: @border-color-split;
 @table-border-radius-base: @border-radius-base;
 @table-footer-bg: @background-color-light;

diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -430,7 +430,7 @@ exports[`renders ./components/table/demo/basic.md extend context correctly 1`] =
       class="ant-spin-container"
     >
       <div
-        class="ant-table ant-table-small"
+        class="ant-table"
       >
         <div
           class="ant-table-container"
@@ -654,7 +654,7 @@ exports[`renders ./components/table/demo/basic.md extend context correctly 1`] =
         </div>
       </div>
       <ul
-        class="ant-pagination ant-pagination-mini ant-table-pagination ant-table-pagination-right"
+        class="ant-pagination ant-table-pagination ant-table-pagination-right"
         unselectable="unselectable"
       >
         <li

diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -218,7 +218,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
       class="ant-spin-container"
     >
       <div
-        class="ant-table ant-table-small"
+        class="ant-table"
       >
         <div
           class="ant-table-container"
@@ -442,7 +442,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
         </div>
       </div>
       <ul
-        class="ant-pagination ant-pagination-mini ant-table-pagination ant-table-pagination-right"
+        class="ant-pagination ant-table-pagination ant-table-pagination-right"
         unselectable="unselectable"
       >
         <li

diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md
@@ -99,7 +99,7 @@ const data: DataType[] = [
   },
 ];
 
-const App: React.FC = () => <Table size={'small'} columns={columns} dataSource={data} />;
+const App: React.FC = () => <Table columns={columns} dataSource={data} />;
 
 export default App;
 ```
diff --git a/components/table/style/index.less b/components/table/style/index.less
@@ -89,8 +89,8 @@
       > th {
         position: relative;
         color: @table-header-color;
-        font-weight: 400;
-        font-size: 12px;
+        font-weight: @table-header-font-weight;
+        font-size: @table-header-font-size;
         text-align: left;
         background: @table-header-bg;
         border-bottom: @border-width-base @border-style-base @table-border-color;
@@ -283,7 +283,7 @@
     height: 14px;
     margin-left: 4px;
     color: @table-header-icon-color;
-    font-size: 14px;
+    font-size: @table-font-size;
     transition: color 0.3s;
 
     &-inner {

diff --git a/components/table/style/size.less b/components/table/style/size.less
@@ -2,21 +2,20 @@
 
 @table-prefix-cls: ~'@{ant-prefix}-table';
 
-.table-size(@size, @padding-vertical, @padding-horizontal, @font-size) {
+.table-size(@size, @padding-vertical, @padding-horizontal, @font-size, @body-padding) {
   .@{table-prefix-cls}.@{table-prefix-cls}-@{size} {
     font-size: @font-size;
 
     .@{table-prefix-cls}-title,
     .@{table-prefix-cls}-footer,
     .@{table-prefix-cls}-thead > tr > th,
-    .@{table-prefix-cls}-tbody > tr > td,
     tfoot > tr > th,
     tfoot > tr > td {
-      padding: @padding-vertical @padding-horizontal;
+      padding: @padding-horizontal @padding-vertical;
     }
 
     .@{table-prefix-cls}-tbody > tr > td {
-      padding: @padding-horizontal;
+      padding: @body-padding;
     }
 
     .@{table-prefix-cls}-filter-trigger {
@@ -47,9 +46,9 @@
 // ================================================================
 // =                            Middle                            =
 // ================================================================
-.table-size(~'middle', @table-padding-vertical-sm, @table-padding-vertical-md, @table-font-size-md);
+.table-size(~'middle', @table-padding-vertical-md, @table-padding-horizontal-md, @table-font-size-md, @table-padding-md);
 
 // ================================================================
 // =                            Small                             =
 // ================================================================
-.table-size(~'small', @table-padding-vertical-sm, @table-padding-horizontal-sm, @table-font-size-sm);
+.table-size(~'small', @table-padding-vertical-sm, @table-padding-horizontal-sm, @table-font-size-sm, @table-padding-sm);