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,
|