Skip to content

Commit

Permalink
fix(table): Sorted/Filtered table fixed column transparent background…
Browse files Browse the repository at this point in the history 
… 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>
  • Loading branch information
@kiner-tang @MadCcc
kiner-tang and MadCcc committed Dec 28, 2022
1 parent ef602f0 commit 4f35779
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 9 deletions.
84 changes: 82 additions & 2 deletions components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Expand Up @@ -8897,11 +8897,91 @@ exports[`renders ./components/table/demo/fixed-columns.tsx extend context correc
Full Name
</th>
<th
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
aria-label="Age"
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-column-has-sorters"
scope="col"
style="position:sticky;left:0"
tabindex="0"
>
Age
<div
class="ant-table-column-sorters"
>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
class="ant-table-column-sorter-inner"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="presentation"
>
<svg
aria-hidden="true"
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="presentation"
>
<svg
aria-hidden="true"
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</div>
<div>
<div
class="ant-tooltip"
style="opacity:0"
>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-arrow"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Click to sort ascending
</div>
</div>
</div>
</div>
</th>
<th
class="ant-table-cell"
Expand Down
60 changes: 58 additions & 2 deletions components/table/__tests__/__snapshots__/demo.test.ts.snap
View file
Expand Up @@ -6449,11 +6449,67 @@ exports[`renders ./components/table/demo/fixed-columns.tsx correctly 1`] = `
Full Name
</th>
<th
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
aria-label="Age"
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-column-has-sorters"
scope="col"
style="position:sticky;left:0"
tabindex="0"
>
Age
<div
class="ant-table-column-sorters"
>
<span
class="ant-table-column-title"
>
Age
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
class="ant-table-column-sorter-inner"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="presentation"
>
<svg
aria-hidden="true"
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="presentation"
>
<svg
aria-hidden="true"
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</div>
</th>
<th
class="ant-table-cell"
Expand Down
1 change: 1 addition & 0 deletions components/table/demo/fixed-columns.tsx
View file
Expand Up @@ -23,6 +23,7 @@ const columns: ColumnsType<DataType> = [
dataIndex: 'age',
key: 'age',
fixed: 'left',
sorter: true,
},
{ title: 'Column 1', dataIndex: 'address', key: '1' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
Expand Down
17 changes: 12 additions & 5 deletions components/table/style/index.tsx
View file
Expand Up @@ -308,9 +308,9 @@ export default genComponentStyleHook('Table', (token) => {
colorIconHover,
opacityLoading,
colorBgContainer,
colorFillSecondary,
borderRadiusLG,
colorFillContent,
colorFillSecondary,
controlInteractiveSize: checkboxSize,
} = token;

Expand All @@ -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();
Expand All @@ -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)
Expand All @@ -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,
Expand Down

0 comments on commit 4f35779

Please sign in to comment.