CardView - Column Chooser: Fix buttons in popup for Fluent Theme

e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts

@@ -5,43 +5,51 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { getData } from '../helpers/generateDataSourceData';
+import { changeTheme } from '../../../helpers/changeTheme';
 
 fixture.disablePageReloads`Column chooser`
   .page(url(__dirname, '../../container.html'));
 
-test('Column chooser screenshot', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  const dataGrid = new DataGrid('#container');
-
-  await t
-    .click(dataGrid.getColumnChooserButton())
-    // act
-    .expect(await takeScreenshot('column-chooser.png', dataGrid.element))
-    .ok()
-    // assert
-    .expect(dataGrid.getColumnChooser().element.exists)
-    .ok()
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxDataGrid', {
-  dataSource: getData(20, 3),
-  height: 400,
-  showBorders: true,
-  columns: [{
-    dataField: 'field_0',
-    dataType: 'string',
-  }, {
-    dataField: 'field_1',
-    dataType: 'string',
-  }, {
-    dataField: 'field_2',
-    dataType: 'string',
-    visible: false,
-  }],
-  columnChooser: {
-    enabled: true,
-  },
-}));
+['generic.light', 'material.blue.light', 'fluent.blue.light'].forEach((theme) => {
+  ['dragAndDrop', 'select'].forEach((mode: any) => {
+    test(`Column chooser screenshot in mode=${mode}, theme=${theme}`, async (t) => {
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+      const dataGrid = new DataGrid('#container');
+
+      await dataGrid.apiShowColumnChooser();
+
+      await t
+        .expect(await takeScreenshot(`column-chooser-${mode}-mode (${theme}).png`, dataGrid.element))
+        .ok()
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }).before(async () => {
+      await changeTheme(theme);
+      return createWidget('dxDataGrid', {
+        dataSource: getData(20, 3),
+        height: 400,
+        showBorders: true,
+        columns: [{
+          dataField: 'field_0',
+          dataType: 'string',
+        }, {
+          dataField: 'field_1',
+          dataType: 'string',
+        }, {
+          dataField: 'field_2',
+          dataType: 'string',
+          visible: false,
+        }],
+        columnChooser: {
+          enabled: true,
+          mode,
+        },
+      });
+    }).after(async () => {
+      await changeTheme('generic.light');
+    });
+  });
+});
 
 test('Column chooser checkboxes should be aligned correctly with plain structure', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts

@@ -8,8 +8,8 @@ import { each } from '@js/core/utils/iterator';
 import { getOuterHeight, getOuterWidth } from '@js/core/utils/size';
 import { isDefined } from '@js/core/utils/type';
 import Button from '@js/ui/button';
+import type { Properties as PopupProperties } from '@js/ui/popup';
 import Popup from '@js/ui/popup/ui.popup';
-import { current, isGeneric, isMaterial as isMaterialTheme } from '@js/ui/themes';
 import TreeView from '@js/ui/tree_view';
 import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
 
@@ -108,7 +108,7 @@ export class ColumnChooserController extends modules.ViewController {
     return isDefined(position) ? position : {
       my: 'right bottom',
       at: 'right bottom',
-      of: this._rowsView && this._rowsView.element(),
+      of: this._rowsView?.element(),
       collision: 'fit',
       offset: '-2 -2',
       boundaryOffset: '2 2',
@@ -157,19 +157,15 @@ export class ColumnChooserView extends ColumnsView {
     const columnChooserOptions = that.option('columnChooser')!;
     const popupPosition = this._columnChooserController.getPosition();
 
-    const themeName = current();
-    const isGenericTheme = isGeneric(themeName);
-    const isMaterial = isMaterialTheme(themeName);
-
     const dxPopupOptions = {
       visible: false,
       shading: false,
-      showCloseButton: false,
+      showCloseButton: true,
       dragEnabled: true,
       resizeEnabled: true,
       wrapperAttr: { class: columnChooserClass },
       toolbarItems: [
-        { text: columnChooserOptions.title, toolbar: 'top', location: isGenericTheme || isMaterial ? 'before' : 'center' },
+        { text: columnChooserOptions.title, toolbar: 'top', location: 'before' },
       ],
       position: popupPosition,
       width: columnChooserOptions.width,
@@ -182,14 +178,7 @@ export class ColumnChooserView extends ColumnsView {
       },
       container: columnChooserOptions.container,
       _loopFocus: true,
-    };
-
-    if (isGenericTheme || isMaterial) {
-      extend(dxPopupOptions, { showCloseButton: true });
-    } else {
-      // @ts-expect-error
-      dxPopupOptions.toolbarItems[dxPopupOptions.toolbarItems.length] = { shortcut: 'cancel' };
-    }
+    } as PopupProperties;
 
     if (!isDefined(this._popupContainer)) {
       that._popupContainer = that._createComponent($element, Popup, dxPopupOptions);
@@ -429,8 +418,8 @@ export class ColumnChooserView extends ColumnsView {
 
     const isSelectMode = this.isSelectMode();
     const chooserColumns = this._columnsController.getChooserColumns(isSelectMode);
-    const $content = this._popupContainer && this._popupContainer.$content();
-    const $nodes = $content && $content.find('.dx-treeview-node');
+    const $content = this._popupContainer?.$content();
+    const $nodes = $content?.find('.dx-treeview-node');
 
     if ($nodes) {
       chooserColumns.forEach((column) => {
@@ -466,9 +455,9 @@ export class ColumnChooserView extends ColumnsView {
 
   protected getBoundingRect() {
     const that = this;
-    const container = that._popupContainer && that._popupContainer.$overlayContent();
+    const container = that._popupContainer?.$overlayContent();
 
-    if (container && container.is(':visible')) {
+    if (container?.is(':visible')) {
       const offset = container.offset();
 
       return {
@@ -511,7 +500,7 @@ export class ColumnChooserView extends ColumnsView {
   public isColumnChooserVisible() {
     const popupContainer = this._popupContainer;
 
-    return popupContainer && popupContainer.option('visible');
+    return popupContainer?.option('visible');
   }
 
   public isSelectMode() {

packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/column_chooser.tsx

@@ -78,10 +78,10 @@ export class ColumnChooser extends Component<ColumnChooserProps> {
         shading={false}
         dragEnabled={true}
         resizeEnabled={true}
+        showCloseButton={true}
         // @ts-expect-error
         _loopFocus={true}
 
-        showCloseButton={popupConfig.showCloseButton}
         toolbarItems={popupConfig.toolbarItems}
         wrapperAttr={{ class: this.getPopupWrapperClass() }}
 

packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/view.tsx

@@ -3,7 +3,6 @@ import type { DxElement } from '@js/core/element';
 import type { Properties as ButtonProperties } from '@js/ui/button';
 import type { Properties as PopupProperties, ToolbarItem } from '@js/ui/popup';
 import type dxPopup from '@js/ui/popup';
-import { current, isGeneric, isMaterial } from '@js/ui/themes';
 import type { Properties as TreeViewProperties } from '@js/ui/tree_view';
 import type dxTreeView from '@js/ui/tree_view';
 import type { ReadonlySignal } from '@preact/signals-core';
@@ -57,11 +56,6 @@ export class ColumnChooserView extends View<ColumnChooserProps> {
       { text: title, toolbar: 'top', location: 'before' },
     ] as ToolbarItem[];
 
-    if (!this.isMaterialOrGeneric()) {
-      // @ts-expect-error
-      items.push({ shortcut: 'cancel' });
-    }
-
     return items;
   });
 
@@ -137,7 +131,6 @@ export class ColumnChooserView extends View<ColumnChooserProps> {
         container: this.options.oneWay('columnChooser.container').value,
         position: this.options.oneWay('columnChooser.position').value,
         toolbarItems: this.popupToolbarItems.value,
-        showCloseButton: this.isMaterialOrGeneric(),
 
         onHidden: () => {
           this.popupVisible.value = false;
@@ -164,8 +157,4 @@ export class ColumnChooserView extends View<ColumnChooserProps> {
       } as Partial<ColumnSortableProps>,
     }));
   }
-
-  private isMaterialOrGeneric(): boolean {
-    return isMaterial(current()) || isGeneric(current());
-  }
 }

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnChooserModule.tests.js

@@ -3,16 +3,11 @@ import 'ui/data_grid';
 
 import $ from 'jquery';
 import typeUtils from 'core/utils/type';
-import supportUtils from 'core/utils/support';
-import devices from '__internal/core/m_devices';
-import themes from 'ui/themes';
 import dataGridMocks from '../../helpers/dataGridMocks.js';
 import publicComponentUtils from 'core/utils/public_component';
 import messageLocalization from 'common/core/localization/message';
 import { TreeViewSearchBoxWrapper } from '../../helpers/wrappers/searchBoxWrappers.js';
 
-const device = devices.real();
-
 QUnit.testStart(function() {
     const markup =
         '<div id="container" class="dx-datagrid"></div>';
@@ -539,66 +534,6 @@ QUnit.module('Column chooser', {
         assert.strictEqual(searchBoxWrapper.getEditorInput().attr('aria-label'), messageLocalization.format('Search'), 'Search box input aria-label attribute');
     });
 
-    if(device.deviceType === 'desktop') {
-        QUnit.test('Close and cancel buttons for generic theme', function(assert) {
-            // arrange
-            const testElement = $('#container');
-            const columnChooserView = this.columnChooserView;
-
-            this.setTestElement(testElement);
-
-            // act
-            this.renderColumnChooser();
-            columnChooserView._popupContainer.toggle(true);
-
-            // assert
-            assert.ok($('.dx-closebutton').length, 'closebutton is shown');
-            assert.ok(!$('.dx-button-text').length, 'cancel button is hidden');
-        });
-    }
-
-    QUnit.test('Close and cancel buttons for mobile theme', function(assert) {
-        // arrange
-        const testElement = $('#container');
-        const origIsGeneric = themes.isGeneric;
-        const columnChooserView = this.columnChooserView;
-
-        this.setTestElement(testElement);
-
-        themes.isGeneric = function() { return false; };
-
-        // act
-        this.renderColumnChooser();
-        columnChooserView._popupContainer.toggle(true);
-
-        // assert
-        assert.ok(!$('.dx-closebutton').length, 'close button is hidden');
-        assert.ok($('.dx-button-text').length, 'cancel button is shown');
-        themes.isGeneric = origIsGeneric;
-    });
-
-
-    QUnit.test('Close and cancel buttons for material theme', function(assert) {
-        // arrange
-        const testElement = $('#container');
-        const origIsMaterial = themes.isMaterial;
-        const columnChooserView = this.columnChooserView;
-
-        this.setTestElement(testElement);
-
-        themes.isMaterial = function() { return true; };
-
-        // act
-        this.renderColumnChooser();
-        columnChooserView._popupContainer.toggle(true);
-
-        // assert
-        assert.ok($('.dx-closebutton').length, 'close button is shown');
-        assert.ok(!$('.dx-button-text').length, 'cancel button is hidden');
-
-        themes.isMaterial = origIsMaterial;
-    });
-
     QUnit.test('Show column chooser via api method when it is disabled_T102451', function(assert) {
         // arrange
         const testElement = $('#container');