From 45dcbd50f47ac2df67187a948f7802e60626c0d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Wed, 28 Dec 2022 18:10:11 +0800 Subject: [PATCH] fix(table): Sorted/Filtered table fixed column transparent background unreadable (#39012) * fix: Sorted/Filtered table fixed column transparent background unreadable * feat: remove redundant code * Update components/table/style/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * feat: code optimize * style: reset format doc Co-authored-by: MadCcc <1075746765@qq.com> --- .../__snapshots__/demo-extend.test.ts.snap | 84 ++++++++++++++++++- .../__tests__/__snapshots__/demo.test.ts.snap | 60 ++++++++++++- components/table/demo/fixed-columns.tsx | 1 + components/table/style/index.tsx | 17 ++-- 4 files changed, 153 insertions(+), 9 deletions(-) diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index 9a47e1745468..d5c7f0517bdc 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -8897,11 +8897,91 @@ exports[`renders ./components/table/demo/fixed-columns.tsx extend context correc Full Name - Age +
+ + Age + + + + + + + + + + + +
+
+
+
+
+ +
+ +
+
+
- Age +
+ + Age + + + + + + + + + + + +
= [ dataIndex: 'age', key: 'age', fixed: 'left', + sorter: true, }, { title: 'Column 1', dataIndex: 'address', key: '1' }, { title: 'Column 2', dataIndex: 'address', key: '2' }, diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx index d259a3863ca7..06ccd72ed95f 100644 --- a/components/table/style/index.tsx +++ b/components/table/style/index.tsx @@ -308,9 +308,9 @@ export default genComponentStyleHook('Table', (token) => { colorIconHover, opacityLoading, colorBgContainer, - colorFillSecondary, borderRadiusLG, colorFillContent, + colorFillSecondary, controlInteractiveSize: checkboxSize, } = token; @@ -320,6 +320,13 @@ export default genComponentStyleHook('Table', (token) => { const tableSelectedRowBg = controlItemBgActive; const zIndexTableFixed: number = 2; + const colorFillSecondarySolid = new TinyColor(colorFillSecondary) + .onBackground(colorBgContainer) + .toHexString(); + const colorFillContentSolid = new TinyColor(colorFillContent) + .onBackground(colorBgContainer) + .toHexString(); + const colorFillAlterSolid = new TinyColor(colorFillAlter) .onBackground(colorBgContainer) .toHexString(); @@ -341,8 +348,8 @@ export default genComponentStyleHook('Table', (token) => { tableFooterTextColor: colorTextHeading, tableFooterBg: colorFillAlterSolid, tableHeaderCellSplitColor: colorBorderSecondary, - tableHeaderSortBg: colorFillSecondary, - tableHeaderSortHoverBg: colorFillContent, + tableHeaderSortBg: colorFillSecondarySolid, + tableHeaderSortHoverBg: colorFillContentSolid, tableHeaderIconColor: baseColorAction .clone() .setAlpha(baseColorAction.getAlpha() * opacityLoading) @@ -351,8 +358,8 @@ export default genComponentStyleHook('Table', (token) => { .clone() .setAlpha(baseColorActionHover.getAlpha() * opacityLoading) .toRgbString(), - tableBodySortBg: colorFillAlter, - tableFixedHeaderSortActiveBg: colorFillSecondary, + tableBodySortBg: colorFillAlterSolid, + tableFixedHeaderSortActiveBg: colorFillSecondarySolid, tableHeaderFilterActiveBg: colorFillContent, tableFilterDropdownBg: colorBgContainer, tableRowHoverBg: colorFillAlterSolid,