refactor: Optimize default selection column width implement (#15990)

* 🔨 Optimize default selection column width implement

make it be able to overrided in css

close #15968

* ✅ update snapshots

components/table/Table.tsx

@@ -59,8 +59,6 @@ const defaultPagination = {
   onShowSizeChange: noop,
 };
 
-const ROW_SELECTION_COLUMN_WIDTH = '62px';
-
 /**
  * Avoid creating new object, so that parent component's shouldComponentUpdate
  * can works appropriately。
@@ -775,7 +773,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
         render: this.renderSelectionBox(rowSelection.type),
         className: selectionColumnClass,
         fixed: rowSelection.fixed,
-        width: rowSelection.columnWidth || ROW_SELECTION_COLUMN_WIDTH,
+        width: rowSelection.columnWidth,
         title: rowSelection.columnTitle,
       };
       if (rowSelection.type !== 'radio') {

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -26,9 +26,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                 class=""
               >
                 <colgroup>
-                  <col
+                  <col />
-                    style="width:62px;min-width:62px"
-                  />
                   <col />
                 </colgroup>
                 <thead
@@ -252,9 +250,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                   class="ant-table-fixed"
                 >
                   <colgroup>
-                    <col
+                    <col />
-                      style="width:62px;min-width:62px"
-                    />
                   </colgroup>
                   <thead
                     class="ant-table-thead"

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -2411,9 +2411,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
                   <col
                     class="ant-table-expand-icon-col"
                   />
-                  <col
+                  <col />
-                    style="width:62px;min-width:62px"
-                  />
                   <col
                     style="width:150px;min-width:150px"
                   />
@@ -4827,9 +4825,7 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
               class=""
             >
               <colgroup>
-                <col
+                <col />
-                  style="width:62px;min-width:62px"
-                />
                 <col />
                 <col
                   style="width:12%;min-width:12%"
@@ -12343,9 +12339,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
               class=""
             >
               <colgroup>
-                <col
+                <col />
-                  style="width:62px;min-width:62px"
-                />
                 <col />
                 <col />
                 <col />
@@ -12770,9 +12764,7 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
                 class=""
               >
                 <colgroup>
-                  <col
+                  <col />
-                    style="width:62px;min-width:62px"
-                  />
                   <col />
                   <col />
                   <col />
@@ -13467,9 +13459,7 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
               class=""
             >
               <colgroup>
-                <col
+                <col />
-                  style="width:62px;min-width:62px"
-                />
                 <col />
                 <col />
                 <col />

components/table/index.en-US.md

@@ -157,7 +157,7 @@ Properties for row selection.
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| columnWidth | Set the width of the selection column | string\|number | - |
+| columnWidth | Set the width of the selection column | string\|number | `60px` |
 | columnTitle | Set the title of the selection column | string\|React.ReactNode | - |
 | fixed | Fixed selection column on the left | boolean | - |
 | getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |

components/table/index.zh-CN.md

@@ -162,7 +162,7 @@ const columns = [{
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| columnWidth | 自定义列表选择框宽度 | string\|number | - |
+| columnWidth | 自定义列表选择框宽度 | string\|number | `60px` |
 | columnTitle | 自定义列表选择框标题 | string\|React.ReactNode | - |
 | fixed | 把选择框列固定在左边 | boolean | - |
 | getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |

components/table/style/index.less

@@ -5,6 +5,7 @@
 @table-header-icon-color: #bfbfbf;
 @table-header-sort-active-bg: darken(@table-header-bg, 3%);
 @table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
+@table-selection-column-width: 60px;
 
 .@{table-prefix-cls}-wrapper {
   .clearfix;
@@ -315,7 +316,9 @@
 
   &-thead > tr > th.@{table-prefix-cls}-selection-column,
   &-tbody > tr > td.@{table-prefix-cls}-selection-column {
+    width: @table-selection-column-width;
     text-align: center;
+
     .@{ant-prefix}-radio-wrapper {
       margin-right: 0;
     }