mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

fix(table): Sorted/Filtered table fixed column transparent background unreadable (#39012)

Browse Source 
* 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>
This commit is contained in:
kiner-tang(文辉) 2022-12-28 18:10:11 +08:00 committed by yoyo837
parent c1032f4743
commit 45dcbd50f4
4 changed files with 153 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -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"

60
components/table/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -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"

1
components/table/demo/fixed-columns.tsx
View File

@ -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' },

17
components/table/style/index.tsx
View File

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