diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (fluent-blue-light).png index 2e24ded04d6a..a57856ecb50c 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (generic-light).png index f1b9cf36ff55..339e7dc4c847 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (material-blue-light).png index 82b3baf67617..2d6ec4c88f26 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png index c3e3af31feb1..75c1921eb464 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (generic-light).png index cee4fd3aa156..0b021ddb6963 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (material-blue-light).png index 7d48c1638afa..f2a4705f62ad 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/api.themes.ts b/e2e/testcafe-devextreme/tests/cardView/sorting/api.themes.ts new file mode 100644 index 000000000000..b701101632b7 --- /dev/null +++ b/e2e/testcafe-devextreme/tests/cardView/sorting/api.themes.ts @@ -0,0 +1,192 @@ +import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; +import CardView from 'devextreme-testcafe-models/cardView'; +import url from '../../../helpers/getPageUrl'; +import { createWidget } from '../../../helpers/createWidget'; +import { data } from '../helpers/simpleArrayData'; +import { testScreenshot } from '../../../helpers/themeUtils'; + +fixture.disablePageReloads`CardView - Sorting Behavior` + .page(url(__dirname, '../../container.html')); + +test('Sort index API', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const cardView = new CardView('#container'); + + await testScreenshot(t, takeScreenshot, 'cardview_sort_index_api.png', { element: cardView.element }); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + await createWidget('dxCardView', { + dataSource: data, + columns: [ + { + dataField: 'id', + }, + { + dataField: 'title', + sortOrder: 'desc', + sortIndex: 1, + }, + { + dataField: 'name', + sortOrder: 'asc', + sortIndex: 0, + }, + { + dataField: 'lastName', + }, + ], + }); +}); + +test('ShowSortIndexes API', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const cardView = new CardView('#container'); + + await testScreenshot(t, takeScreenshot, 'cardview_show_sort_indexes_api.png', { element: cardView.element }); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + await createWidget('dxCardView', { + dataSource: data, + sorting: { + showSortIndexes: false, + }, + columns: [ + { + dataField: 'id', + }, + { + dataField: 'title', + sortOrder: 'desc', + sortIndex: 1, + }, + { + dataField: 'name', + sortOrder: 'asc', + sortIndex: 0, + }, + { + dataField: 'lastName', + }, + ], + }); +}); + +test('AllowSorting API', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const cardView = new CardView('#container'); + + await t + .click(cardView.getHeaders().getHeaderItemByText('Title').element); + + await testScreenshot(t, takeScreenshot, 'cardview_allow_sorting_api.png', { element: cardView.element }); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + await createWidget('dxCardView', { + dataSource: data, + sorting: { + showSortIndexes: false, + }, + columns: [ + { + dataField: 'id', + }, + { + dataField: 'title', + sortOrder: 'desc', + sortIndex: 1, + allowSorting: false, + }, + { + dataField: 'name', + sortOrder: 'asc', + sortIndex: 0, + }, + { + dataField: 'lastName', + }, + ], + }); +}); + +[ + function (rowData) { + return rowData.id % 3; + }, + 'name', +].forEach((calculateSortValue) => { + test('CalculateSortValue API', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const cardView = new CardView('#container'); + + await testScreenshot(t, takeScreenshot, `cardview_calculate_sort_value_is_${calculateSortValue === 'name' ? 'filed' : 'function'}_api.png`, { element: cardView.element }); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); + }).before(async () => { + await createWidget('dxCardView', { + dataSource: data, + sorting: { + showSortIndexes: false, + }, + columns: [ + { + dataField: 'id', + }, + { + dataField: 'title', + sortOrder: 'asc', + calculateSortValue, + }, + { + dataField: 'name', + }, + { + dataField: 'lastName', + }, + ], + }); + }); +}); + +test('SortingMethod API', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const cardView = new CardView('#container'); + + await testScreenshot(t, takeScreenshot, 'cardview_sorting_method_api.png', { element: cardView.element }); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + await createWidget('dxCardView', { + dataSource: data, + sorting: { + showSortIndexes: false, + }, + columns: [ + { + dataField: 'id', + }, + { + dataField: 'title', + sortOrder: 'asc', + sortingMethod(value1, value2) { + if (value1 === 'Mr.' && value2 !== 'Mr.') return 1; + if (value1 !== 'Mr.' && value2 === 'Mr.') return -1; + return value1.localeCompare(value2); + }, + }, + { + dataField: 'name', + }, + { + dataField: 'lastName', + }, + ], + }); +}); diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/bahavior.themes.ts b/e2e/testcafe-devextreme/tests/cardView/sorting/bahavior.themes.ts new file mode 100644 index 000000000000..1f2b1f28cfbc --- /dev/null +++ b/e2e/testcafe-devextreme/tests/cardView/sorting/bahavior.themes.ts @@ -0,0 +1,67 @@ +import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; +import CardView from 'devextreme-testcafe-models/cardView'; +import url from '../../../helpers/getPageUrl'; +import { createWidget } from '../../../helpers/createWidget'; +import { data } from '../helpers/simpleArrayData'; +import { testScreenshot } from '../../../helpers/themeUtils'; + +fixture.disablePageReloads`CardView - Sorting Behavior - Themes` + .page(url(__dirname, '../../container.html')); + +test('Default render', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const cardView = new CardView('#container'); + + await testScreenshot(t, takeScreenshot, 'cardview_headers_default_render.png', { element: cardView.element }); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + await createWidget('dxCardView', { + dataSource: data, + columns: [ + { + dataField: 'id', + }, + { + dataField: 'title', + sortOrder: 'desc', + }, + { + dataField: 'name', + }, + { + dataField: 'lastName', + }, + ], + }); +}); +test('Default multiple sorting render', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const cardView = new CardView('#container'); + await testScreenshot(t, takeScreenshot, 'cardview_headers_with_multiple_sorting_render.png', { element: cardView.element }); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + await createWidget('dxCardView', { + dataSource: data, + columns: [ + { + dataField: 'id', + }, + { + dataField: 'title', + sortOrder: 'desc', + }, + { + dataField: 'name', + sortOrder: 'asc', + }, + { + dataField: 'lastName', + }, + ], + }); +}); diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/behavior.functional.ts b/e2e/testcafe-devextreme/tests/cardView/sorting/behavior.functional.ts new file mode 100644 index 000000000000..a3c09a607fb2 --- /dev/null +++ b/e2e/testcafe-devextreme/tests/cardView/sorting/behavior.functional.ts @@ -0,0 +1,253 @@ +import CardView from 'devextreme-testcafe-models/cardView'; +import url from '../../../helpers/getPageUrl'; +import { createWidget } from '../../../helpers/createWidget'; +import { data } from '../helpers/simpleArrayData'; + +fixture.disablePageReloads`CardView - Sorting Behavior - Functional` + .page(url(__dirname, '../../container.html')); + +([ + ['none', false, false, false, [undefined, undefined]], + ['none', true, false, false, [undefined, undefined]], + ['none', false, true, false, [undefined, undefined]], + ['none', false, false, true, [undefined, undefined]], + + ['single', false, false, false, ['desc', undefined]], + ['single', true, false, false, ['desc', undefined]], + ['single', false, true, false, [undefined, undefined]], + ['single', false, false, true, [undefined, undefined]], + + ['multiple', false, false, false, ['desc', 0]], + ['multiple', true, false, false, ['desc', 0]], + ['multiple', false, true, false, [undefined, undefined]], + ['multiple', false, false, true, [undefined, undefined]], +] as [ + string, + boolean, + boolean, + boolean, + [ + string | undefined, + number | undefined, + ], +][] +).forEach(([ + mode, + shift, + ctrl, + meta, + [ + titleSortOrder, + titleSortIndex, + ]]) => { + test(`Change sorting of sorted item in ${mode} mode with shift=${shift}, ctrl=${ctrl}, meta=${meta}`, async (t) => { + const cardView = new CardView('#container'); + const titleHeaderItem = cardView.getHeaders().getHeaderItemByText('Title'); + + await t + .click(titleHeaderItem.element); + + await t + .click(titleHeaderItem.element, { + modifiers: { + shift, + ctrl, + meta, + }, + }) + .expect(cardView.apiColumnOption('title', 'sortOrder')) + .eql(titleSortOrder) + .expect(cardView.apiColumnOption('title', 'sortIndex')) + .eql(titleSortIndex); + }).before(async () => { + await createWidget('dxCardView', { + dataSource: data, + sorting: { + mode, + }, + columns: [ + { + dataField: 'title', + }, + { + dataField: 'name', + }, + ], + }); + }); +}); + +([ + ['none', false, false, false, [undefined, undefined], [undefined, undefined]], + ['none', true, false, false, [undefined, undefined], [undefined, undefined]], + ['none', false, true, false, [undefined, undefined], [undefined, undefined]], + ['none', false, false, true, [undefined, undefined], [undefined, undefined]], + + ['single', false, false, false, [undefined, undefined], ['asc', undefined]], + ['single', true, false, false, [undefined, undefined], ['asc', undefined]], + ['single', false, true, false, ['asc', undefined], [undefined, undefined]], + ['single', false, false, true, ['asc', undefined], [undefined, undefined]], + + ['multiple', false, false, false, [undefined, undefined], ['asc', 0]], + ['multiple', true, false, false, ['asc', 0], ['asc', 1]], + ['multiple', false, true, false, ['asc', 0], [undefined, undefined]], + ['multiple', false, false, true, ['asc', 0], [undefined, undefined]], +] as [ + string, + boolean, + boolean, + boolean, + [ + string | undefined, + number | undefined, + ], + [ + string | undefined, + number | undefined, + ], +][] +).forEach(([ + mode, + shift, + ctrl, + meta, + [ + titleSortOrder, + titleSortIndex, + ], + [ + nameSortOrder, + nameSortIndex, + ], +]) => { + test(`Change sorting of neighbour non sorted item in ${mode} mode with shift=${shift}, ctrl=${ctrl}, meta=${meta}`, async (t) => { + const cardView = new CardView('#container'); + const titleHeaderItem = cardView.getHeaders().getHeaderItemByText('Title'); + const nameHeaderItem = cardView.getHeaders().getHeaderItemByText('Name'); + + await t + .click(titleHeaderItem.element); + + await t + .click(nameHeaderItem.element, { + modifiers: { + shift, + ctrl, + meta, + }, + }) + .expect(cardView.apiColumnOption('title', 'sortOrder')) + .eql(titleSortOrder) + .expect(cardView.apiColumnOption('title', 'sortIndex')) + .eql(titleSortIndex) + .expect(cardView.apiColumnOption('name', 'sortOrder')) + .eql(nameSortOrder) + .expect(cardView.apiColumnOption('name', 'sortIndex')) + .eql(nameSortIndex); + }).before(async () => { + await createWidget('dxCardView', { + dataSource: data, + sorting: { + mode, + }, + columns: [ + { + dataField: 'title', + }, + { + dataField: 'name', + }, + ], + }); + }); +}); + +([ + ['none', false, false, false, [undefined, undefined], [undefined, undefined]], + ['none', true, false, false, [undefined, undefined], [undefined, undefined]], + ['none', false, true, false, [undefined, undefined], [undefined, undefined]], + ['none', false, false, true, [undefined, undefined], [undefined, undefined]], + + ['single', false, false, false, [undefined, undefined], ['desc', undefined]], + ['single', true, false, false, [undefined, undefined], ['desc', undefined]], + ['single', false, true, false, [undefined, undefined], [undefined, undefined]], + ['single', false, false, true, [undefined, undefined], [undefined, undefined]], + + ['multiple', false, false, false, [undefined, undefined], ['desc', 0]], + ['multiple', true, false, false, ['asc', 0], ['desc', 1]], + ['multiple', false, true, false, ['asc', 0], [undefined, undefined]], + ['multiple', false, false, true, ['asc', 0], [undefined, undefined]], +] as [ + string, + boolean, + boolean, + boolean, + [ + string | undefined, + number | undefined, + ], + [ + string | undefined, + number | undefined, + ], +][] +).forEach(([ + mode, + shift, + ctrl, + meta, + [ + titleSortOrder, + titleSortIndex, + ], + [ + nameSortOrder, + nameSortIndex, + ], +]) => { + test(`Change sorting of neighbour sorted item in ${mode} mode with shift=${shift}, ctrl=${ctrl}, meta=${meta}`, async (t) => { + const cardView = new CardView('#container'); + const titleHeaderItem = cardView.getHeaders().getHeaderItemByText('Title'); + const nameHeaderItem = cardView.getHeaders().getHeaderItemByText('Name'); + + await t + .click(titleHeaderItem.element) + .click(nameHeaderItem.element, { + modifiers: { + shift: true, + }, + }); + + await t + .click(nameHeaderItem.element, { + modifiers: { + shift, + ctrl, + meta, + }, + }) + .expect(cardView.apiColumnOption('title', 'sortOrder')) + .eql(titleSortOrder) + .expect(cardView.apiColumnOption('title', 'sortIndex')) + .eql(titleSortIndex) + .expect(cardView.apiColumnOption('name', 'sortOrder')) + .eql(nameSortOrder) + .expect(cardView.apiColumnOption('name', 'sortIndex')) + .eql(nameSortIndex); + }).before(async () => { + await createWidget('dxCardView', { + dataSource: data, + sorting: { + mode, + }, + columns: [ + { + dataField: 'title', + }, + { + dataField: 'name', + }, + ], + }); + }); +}); diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-blue-light).png new file mode 100644 index 000000000000..4fd6fa46af65 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (generic-light).png new file mode 100644 index 000000000000..4f613c8823f1 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (material-blue-light).png new file mode 100644 index 000000000000..4f478508c862 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-blue-light).png new file mode 100644 index 000000000000..d6af8ac82aba Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (generic-light).png new file mode 100644 index 000000000000..511a9bce6c8d Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (material-blue-light).png new file mode 100644 index 000000000000..b0a668aaaa01 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (fluent-blue-light).png new file mode 100644 index 000000000000..8e1c851fe8ec Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (generic-light).png new file mode 100644 index 000000000000..38d2fdf29e97 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (material-blue-light).png new file mode 100644 index 000000000000..16402b3da9b3 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (fluent-blue-light).png new file mode 100644 index 000000000000..a6d10e08af1a Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (generic-light).png new file mode 100644 index 000000000000..21f645dd344f Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (material-blue-light).png new file mode 100644 index 000000000000..9206a1df7499 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (fluent-blue-light).png new file mode 100644 index 000000000000..705fad70cf7e Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (generic-light).png new file mode 100644 index 000000000000..33113d4348ab Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (material-blue-light).png new file mode 100644 index 000000000000..45e72019ab16 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-blue-light).png new file mode 100644 index 000000000000..8cc6569e1122 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (generic-light).png new file mode 100644 index 000000000000..83b2bdba4331 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (material-blue-light).png new file mode 100644 index 000000000000..355e88d2ad9b Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-blue-light).png new file mode 100644 index 000000000000..6479bd472336 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (generic-light).png new file mode 100644 index 000000000000..4416f69f9bbf Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (material-blue-light).png new file mode 100644 index 000000000000..fa9ee26a29f5 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (fluent-blue-light).png new file mode 100644 index 000000000000..399f125d7b89 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (generic-light).png new file mode 100644 index 000000000000..fb93cb267d4e Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (material-blue-light).png new file mode 100644 index 000000000000..cdf598158061 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (material-blue-light).png differ diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss index 87cbb14463a6..7842a1b5e2e2 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss @@ -6,3 +6,7 @@ display: flex; gap: $cardview-headerpanel-content-gap; } + +.dx-cardview-header-item-sorting { + display: flex; +} diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss index 9a145974f853..017cf710782e 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss @@ -1,11 +1,17 @@ +@use '../../../icons' as *; @use './variables' as *; .dx-cardview-header-item { - background-color: $cardview-header-item-background-color; - border: solid $cardview-header-item-border-width $cardview-header-item-border-color; - border-radius: $cardview-header-item-border-radius; + display: flex; + align-items: center; padding: ($cardview-header-item-padding-vertical - $cardview-header-item-border-width) $cardview-header-item-padding-horizontal; min-width: fit-content; + user-select: none; + gap: $cardview-header-item-content-gap; + border: solid $cardview-header-item-border-width $cardview-header-item-border-color; + border-radius: $cardview-header-item-border-radius; + background-color: $cardview-header-item-background-color; + cursor: pointer; &:hover { background-color: $cardview-header-item-hovered-background-color; diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss index 8dfadf79f82e..6e1d5c63136d 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss @@ -6,5 +6,7 @@ $cardview-header-item-hovered-border-color: null !default; $cardview-header-item-border-width: null !default; $cardview-header-item-border-radius: null !default; -$cardview-header-item-padding-horizontal: 12px !default; +$cardview-header-item-padding-horizontal: 8px !default; $cardview-header-item-padding-vertical: 6px !default; + +$cardview-header-item-content-gap: 4px !default; diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/item.test.tsx.snap b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/item.test.tsx.snap index ac76d2654bdb..0d3c465aaacc 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/item.test.tsx.snap +++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/item.test.tsx.snap @@ -7,13 +7,13 @@ exports[`Item should render sort icons 1`] = ` tabindex="0" > Column 1 - - - + `; diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/column_sortable.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/column_sortable.tsx index 0ba637d4c77f..0ba68ff7ae20 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/column_sortable.tsx +++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/column_sortable.tsx @@ -20,7 +20,7 @@ export interface Props extends Omit void; - dragTemplate?: ComponentType<{ column: Column; status: Status }>; + dragTemplate?: ComponentType<{ column: Column; status?: Status }>; } interface State { diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/header_panel.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/header_panel.tsx index ba3efebeafd8..5604c582a316 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/header_panel.tsx +++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/header_panel.tsx @@ -1,5 +1,3 @@ -/* eslint-disable max-len */ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ import type { Column } from '@ts/grids/new/grid_core/columns_controller/types'; import { Scrollable } from '@ts/grids/new/grid_core/inferno_wrappers/scrollable'; import type { ComponentType } from 'inferno'; @@ -23,7 +21,7 @@ export interface HeaderPanelProps { showSortIndexes: boolean; - onSortClick: (column: Column) => void; + onSortClick: (column: Column, e: MouseEvent) => void; itemTemplate?: ComponentType<{ column: Column }>; @@ -63,7 +61,7 @@ export class HeaderPanel extends Component { { this.props.onSortClick(column); }} + onSortClick={(e): void => { this.props.onSortClick(column, e); }} template={this.props.itemTemplate} cssClass={this.props.itemCssClass} /> diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx index 8ad719adc970..3275d35cc66d 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx +++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx @@ -1,5 +1,6 @@ import type { Column } from '@ts/grids/new/grid_core/columns_controller/types'; import type { ComponentType } from 'inferno'; +import { Component } from 'inferno'; import type { Status } from './column_sortable'; @@ -10,6 +11,11 @@ export const CLASSES = { container: 'dx-cardview-header-item-sorting', order: 'dx-cardview-header-item-sorting-order', }, + headerFilter: { + iconEmpty: 'dx-header-filter-icon', + iconFilled: 'dx-header-filter-icon--selected', + }, + icon: 'dx-icon', }; // TODO: extract icons to separate component @@ -17,17 +23,21 @@ const ICONS = { // TODO: move to dx-icon once they are updated forbid: ( - + ), // TODO: move to dx-icon once they are updated moving: ( - + ), - sortUp: , - sortDown: , + sortUp:
, + sortDown:
, }; interface SortIconProps { @@ -38,17 +48,17 @@ interface SortIconProps { function SortIcon(props: SortIconProps): JSX.Element { return ( - +
{props.sortOrder === 'asc' && ICONS.sortUp} {props.sortOrder === 'desc' && ICONS.sortDown} { props.showSortIndex && ( - +
{props.sortIndex} - +
) } - +
); } @@ -56,30 +66,36 @@ export interface ItemProps { column: Column; status?: Status; showSortIndexes?: boolean; - onSortClick?: () => void; template?: ComponentType<{ column: Column }>; cssClass?: string; + onSortClick?: (e: MouseEvent) => void; } -export function Item(props: ItemProps): JSX.Element { - const Template = props.column.headerItemTemplate ?? props.template; - const cssClass = `${CLASSES.item} ${props.column.headerItemCssClass ?? ''} ${props.cssClass ?? ''}`; +export class Item extends Component { + public render(): JSX.Element { + const Template = this.props.column.headerItemTemplate ?? this.props.template; + const cssClass = `${CLASSES.item} ${this.props.column.headerItemCssClass ?? ''} ${this.props.cssClass ?? ''}`; - return ( -
- { props.status && ICONS[props.status]} - { Template &&