From 2b779f1ec363e83650985436dcd6c9c25428c5db Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 22 Dec 2022 14:06:57 +0800 Subject: [PATCH 1/5] fix: table border issue --- .../__snapshots__/demo-extend.test.ts.snap | 13 ------ .../__tests__/__snapshots__/demo.test.ts.snap | 13 ------ components/table/demo/colspan-rowspan.tsx | 16 +++---- components/table/style/index.tsx | 44 ++++++++++++++----- 4 files changed, 40 insertions(+), 46 deletions(-) diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index 7e6c55a3d8ff..f572293fe865 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1148,19 +1148,6 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr London No. 2 Lake Park - - - - Jake White - - - diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap index 8ea6de6a3e59..4911b6e461df 100644 --- a/components/table/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap @@ -936,19 +936,6 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = ` London No. 2 Lake Park - - - - Jake White - - - diff --git a/components/table/demo/colspan-rowspan.tsx b/components/table/demo/colspan-rowspan.tsx index f879b6b4c187..efb80b6c4bb7 100644 --- a/components/table/demo/colspan-rowspan.tsx +++ b/components/table/demo/colspan-rowspan.tsx @@ -100,14 +100,14 @@ const data: DataType[] = [ phone: 18900010002, address: 'London No. 2 Lake Park', }, - { - key: '5', - name: 'Jake White', - age: 18, - tel: '0575-22098909', - phone: 18900010002, - address: 'Dublin No. 2 Lake Park', - }, + // { + // key: '5', + // name: 'Jake White', + // age: 18, + // tel: '0575-22098909', + // phone: 18900010002, + // address: 'Dublin No. 2 Lake Park', + // }, ]; const App: React.FC = () => ; diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx index 1e8ac7f581f5..33b152592360 100644 --- a/components/table/style/index.tsx +++ b/components/table/style/index.tsx @@ -170,10 +170,38 @@ const genTableStyle: GenerateStyle = (token) => { }, // ============================ Body ============================ + [`${componentCls}:not(${componentCls}-bordered)`]: { + [`${componentCls}-tbody`]: { + '> tr': { + '> td': { + borderTop: tableBorder, + }, + + '&:last-child > td': { + borderBottom: tableBorder, + }, + + [`&:first-child > td, + &${componentCls}-measure-row + tr > td`]: { + borderTop: 'none', + }, + }, + }, + }, + + [`${componentCls}${componentCls}-bordered`]: { + [`${componentCls}-tbody`]: { + '> tr': { + '> td': { + borderBottom: tableBorder, + }, + }, + }, + }, + [`${componentCls}-tbody`]: { '> tr': { '> td': { - borderTop: tableBorder, transition: `background ${motionDurationSlow}`, // ========================= Nest Table =========================== @@ -196,15 +224,6 @@ const genTableStyle: GenerateStyle = (token) => { }, }, - '&:last-child > td': { - borderBottom: tableBorder, - }, - - [`&:first-child > td, - &${componentCls}-measure-row + tr > td`]: { - borderTop: 'none', - }, - [` &${componentCls}-row:hover > td, > td${componentCls}-cell-row-hover @@ -275,6 +294,7 @@ export default genComponentStyleHook('Table', (token) => { colorTextPlaceholder, colorTextHeading, colorSplit, + colorBorderSecondary, fontSize, padding, paddingXS, @@ -312,12 +332,12 @@ export default genComponentStyleHook('Table', (token) => { tablePaddingHorizontalMiddle: paddingXS, tablePaddingVerticalSmall: paddingXS, tablePaddingHorizontalSmall: paddingXS, - tableBorderColor: colorSplit, + tableBorderColor: colorBorderSecondary, tableHeaderTextColor: colorTextHeading, tableHeaderBg: colorFillAlterSolid, tableFooterTextColor: colorTextHeading, tableFooterBg: colorFillAlterSolid, - tableHeaderCellSplitColor: colorSplit, + tableHeaderCellSplitColor: colorBorderSecondary, tableHeaderSortBg: colorFillSecondary, tableHeaderSortHoverBg: colorFillContent, tableHeaderIconColor: baseColorAction From bef2f9aff0b1f02089e8ebd4727c9144a192a66d Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 22 Dec 2022 14:17:14 +0800 Subject: [PATCH 2/5] chore: code clean --- components/table/demo/colspan-rowspan.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/components/table/demo/colspan-rowspan.tsx b/components/table/demo/colspan-rowspan.tsx index efb80b6c4bb7..0c94b1951c38 100644 --- a/components/table/demo/colspan-rowspan.tsx +++ b/components/table/demo/colspan-rowspan.tsx @@ -100,14 +100,6 @@ const data: DataType[] = [ phone: 18900010002, address: 'London No. 2 Lake Park', }, - // { - // key: '5', - // name: 'Jake White', - // age: 18, - // tel: '0575-22098909', - // phone: 18900010002, - // address: 'Dublin No. 2 Lake Park', - // }, ]; const App: React.FC = () =>
; From 204a0ba20ba9a8016bbb3231b66b6400fd83ac67 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 22 Dec 2022 14:28:52 +0800 Subject: [PATCH 3/5] docs: update demo --- .../__snapshots__/demo-extend.test.ts.snap | 35 +++++++++++++------ .../__tests__/__snapshots__/demo.test.ts.snap | 35 +++++++++++++------ components/table/demo/colspan-rowspan.tsx | 18 +++++++--- 3 files changed, 61 insertions(+), 27 deletions(-) diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index f572293fe865..f7e4d854b8de 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1062,47 +1062,60 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr > + + + diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap index 4911b6e461df..033cc5b546a0 100644 --- a/components/table/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap @@ -850,47 +850,60 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = ` > + + + diff --git a/components/table/demo/colspan-rowspan.tsx b/components/table/demo/colspan-rowspan.tsx index 0c94b1951c38..78cb0f504d79 100644 --- a/components/table/demo/colspan-rowspan.tsx +++ b/components/table/demo/colspan-rowspan.tsx @@ -14,7 +14,7 @@ interface DataType { // In the fifth row, other columns are merged into first column // by setting it's colSpan to be 0 const sharedOnCell = (_: DataType, index: number) => { - if (index === 4) { + if (index === 1) { return { colSpan: 0 }; } @@ -27,7 +27,7 @@ const columns: ColumnsType = [ dataIndex: 'name', render: (text) => {text}, onCell: (_, index) => ({ - colSpan: (index as number) < 4 ? 1 : 5, + colSpan: index === 1 ? 5 : 1, }), }, { @@ -40,14 +40,14 @@ const columns: ColumnsType = [ colSpan: 2, dataIndex: 'tel', onCell: (_, index) => { - if (index === 2) { + if (index === 3) { return { rowSpan: 2 }; } // These two are merged into above cell - if (index === 3) { + if (index === 4) { return { rowSpan: 0 }; } - if (index === 4) { + if (index === 1) { return { colSpan: 0 }; } @@ -100,6 +100,14 @@ const data: DataType[] = [ phone: 18900010002, address: 'London No. 2 Lake Park', }, + { + key: '5', + name: 'Jake White', + age: 18, + tel: '0575-22098909', + phone: 18900010002, + address: 'Dublin No. 2 Lake Park', + }, ]; const App: React.FC = () =>
Jim Green
- 42 + + Joe Black + - 0571-22098333 + 32 - 18889898888 + 0575-22098909 - London No. 1 Lake Park + 18900010002 + + Sidney No. 1 Lake Park
- Joe Black + Jim Red - 32 + 18 - Sidney No. 1 Lake Park + London No. 2 Lake Park
- Jim Red + Jake White - London No. 2 Lake Park + Dublin No. 2 Lake Park
Jim Green
- 42 + + Joe Black + - 0571-22098333 + 32 - 18889898888 + 0575-22098909 - London No. 1 Lake Park + 18900010002 + + Sidney No. 1 Lake Park
- Joe Black + Jim Red - 32 + 18 - Sidney No. 1 Lake Park + London No. 2 Lake Park
- Jim Red + Jake White - London No. 2 Lake Park + Dublin No. 2 Lake Park
; From 0382a6b469f9bd8d99d6ac2a50cbf2d9b1b41c50 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 22 Dec 2022 15:00:20 +0800 Subject: [PATCH 4/5] fix: table borderRadius --- components/table/style/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx index 3b42dfdb33ab..d948be219ac3 100644 --- a/components/table/style/index.tsx +++ b/components/table/style/index.tsx @@ -104,7 +104,7 @@ const genTableStyle: GenerateStyle = (token) => { ...resetComponent(token), fontSize: tableFontSize, background: tableBg, - borderRadius: tableRadius, + borderRadius: `${tableRadius}px ${tableRadius}px 0 0`, }, // https://github.com/ant-design/ant-design/issues/17611 table: { From 89fa240da600cd4fb9c3ea016792895258b8fa35 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 22 Dec 2022 15:56:22 +0800 Subject: [PATCH 5/5] chore: add comment --- components/table/style/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx index d948be219ac3..d259a3863ca7 100644 --- a/components/table/style/index.tsx +++ b/components/table/style/index.tsx @@ -170,6 +170,7 @@ const genTableStyle: GenerateStyle = (token) => { }, // ============================ Body ============================ + // Borderless Table has unique hover style, which would be implemented with `borderTop`. [`${componentCls}:not(${componentCls}-bordered)`]: { [`${componentCls}-tbody`]: { '> tr': { @@ -189,6 +190,8 @@ const genTableStyle: GenerateStyle = (token) => { }, }, + // Bordered Table remains simple `borderBottom`. + // Ref issue: https://github.com/ant-design/ant-design/issues/38724 [`${componentCls}${componentCls}-bordered`]: { [`${componentCls}-tbody`]: { '> tr': {