Skip to content

Commit

Permalink
style: redesign Table header action (#30651)
Browse files Browse the repository at this point in the history 
* feat: improve Table filter and sorter position

* fix: edge cases of th border

* fix lint

* style: apply new design

* fix css detail

* fix stylelint

* fix css error

* style: sorter icon hover color

* fix test cases

* update snapshot

* fix th padding

* fix calc

* style: fix dark theme
  • Loading branch information
@afc163
afc163 committed May 24, 2021
1 parent aa5990f commit 082f626
Show file tree
Hide file tree
Showing 15 changed files with 3,177 additions and 3,949 deletions.
1,656 changes: 792 additions & 864 deletions components/config-provider/__tests__/__snapshots__/components.test.js.snap
View file

Large diffs are not rendered by default.

2,880 changes: 1,200 additions & 1,680 deletions components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions components/style/themes/dark.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,7 @@
@table-header-bg: #1d1d1d;
@table-body-sort-bg: fade(@white, 1%);
@table-row-hover-bg: #262626;
@table-header-cell-split-color: fade(@white, 8%);
@table-header-sort-bg: #262626;
@table-header-filter-active-bg: #434343;
@table-header-sort-active-bg: #303030;
Expand Down
5 changes: 3 additions & 2 deletions components/style/themes/default.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -609,11 +609,12 @@
@table-font-size: @font-size-base;
@table-font-size-md: @table-font-size;
@table-font-size-sm: @table-font-size;
@table-header-cell-split-color: rgba(0, 0, 0, 0.06);
// Sorter
// Legacy: `table-header-sort-active-bg` is used for hover not real active
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
// Filter
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
@table-filter-btns-bg: inherit;
@table-filter-dropdown-bg: @component-background;
@table-expand-icon-bg: @component-background;
Expand Down
20 changes: 8 additions & 12 deletions components/table/__tests__/Table.sorter.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,15 +182,14 @@ describe('Table.sorter', () => {
jest.useFakeTimers();
const wrapper = mount(createTable({}));
// default show sorter tooltip
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
wrapper.find('.ant-table-column-sorters').simulate('mouseout');

// set table props showSorterTooltip is false
wrapper.setProps({ showSorterTooltip: false });
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
Expand All @@ -199,17 +198,16 @@ describe('Table.sorter', () => {
showSorterTooltip: false,
columns: [{ ...column, showSorterTooltip: true }],
});
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
// set table props showSorterTooltip is true, column showSorterTooltip is false
wrapper.setProps({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
});
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
Expand All @@ -221,31 +219,29 @@ describe('Table.sorter', () => {
const wrapper = mount(
createTable({ showSorterTooltip: { placement: 'bottom', title: 'static title' } }),
);
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
wrapper.find('.ant-table-column-sorters').simulate('mouseout');

wrapper.setProps({ showSorterTooltip: false });
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
wrapper.setProps({
showSorterTooltip: false,
columns: [{ ...column, showSorterTooltip: true }],
});
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
wrapper.setProps({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
});
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
Expand Down

0 comments on commit 082f626

Please sign in to comment.