DataGrid - In the Fluent theme, a padding is set when Toolbar is not …

…visible (T1261773) (#28602)

packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts

@@ -884,10 +884,6 @@ const headerPanel = (Base: ModuleType<HeaderPanel>) => class ExportHeaderPanelEx
       this.setToolbarItemDisabled('exportButton', disabled);
     });
   }
-
-  public isVisible() {
-    return super.isVisible() || this._isExportButtonVisible();
-  }
 };
 
 dataGridCore.registerModule('export', {

packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping.ts

@@ -584,10 +584,6 @@ export const GroupingHeaderPanelExtender = (Base: ModuleType<HeaderPanel>) => cl
     return items;
   }
 
-  public isVisible() {
-    return super.isVisible() || this._isGroupPanelVisible();
-  }
-
   public hasGroupedColumns(): boolean {
     return this._isGroupPanelVisible() && !!this.getColumns().length;
   }

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

@@ -577,13 +577,6 @@ const headerPanel = (Base: ModuleType<HeaderPanel>) => class ColumnChooserHeader
         super.optionChanged(args);
     }
   }
-
-  public isVisible() {
-    const that = this;
-    const columnChooserEnabled = that.option('columnChooser.enabled')!;
-
-    return super.isVisible() || columnChooserEnabled;
-  }
 };
 
 const columns = (Base: ModuleType<ColumnsController>) => class ColumnsChooserColumnsControllerExtender extends Base {

packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts

@@ -2874,13 +2874,6 @@ const headerPanel = (Base: ModuleType<HeaderPanel>) => class HeaderPanelEditingE
 
     return editButtonItems.concat(items);
   }
-
-  public isVisible() {
-    const editingOptions = this._editingController.option('editing');
-
-    // @ts-expect-error
-    return super.isVisible() || editingOptions?.allowAdding;
-  }
 };
 
 export const editingModule = {

packages/devextreme/js/__internal/grids/grid_core/editing/m_editing_cell_based.ts

@@ -12,7 +12,6 @@ import eventsEngine from '@js/events/core/events_engine';
 import holdEvent from '@js/events/hold';
 import pointerEvents from '@js/events/pointer';
 import { addNamespace } from '@js/events/utils/index';
-import type { HeaderPanel } from '@ts/grids/grid_core/header_panel/m_header_panel';
 import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
 
 import type { ModuleType } from '../m_types';
@@ -721,23 +720,13 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewEditingCellBasedE
   }
 };
 
-const headerPanel = (Base: ModuleType<HeaderPanel>) => class HeaderPanelEditingCellBasedExtender extends Base {
-  public isVisible() {
-    const editingOptions = this._editingController.option('editing');
-
-    // @ts-expect-error
-    return super.isVisible() || editingOptions && (editingOptions.allowUpdating || editingOptions.allowDeleting) && editingOptions.mode === EDIT_MODE_BATCH;
-  }
-};
-
 export const editingCellBasedModule = {
   extenders: {
     controllers: {
       editing: editingControllerExtender,
     },
     views: {
       rowsView,
-      headerPanel,
     },
   },
 };

packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts

@@ -1004,10 +1004,6 @@ const headerPanel = (Base: ModuleType<HeaderPanel>) => class FilterRowHeaderPane
   private enableApplyButton(value) {
     this.setToolbarItemDisabled('applyFilterButton', !value);
   }
-
-  public isVisible() {
-    return super.isVisible() || this._isShowApplyFilterButton();
-  }
 };
 
 export const filterRowModule = {

packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts

@@ -214,8 +214,7 @@ export class HeaderPanel extends ColumnsView {
       } else if (parts[1] === 'items') {
         if (parts.length === 2) {
           // `toolbar.items` case
-          const toolbarOptions = this._getToolbarOptions();
-          this._toolbar?.option('items', toolbarOptions.items);
+          this._invalidate();
         } else if (parts.length === 3) {
           // `toolbar.items[i]` case
           const normalizedItem = this._normalizeToolbarItems(this._getToolbarItems(), args.value);

packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts

@@ -194,11 +194,6 @@ const headerPanel = (
     }
     return null;
   }
-
-  public isVisible() {
-    const searchPanelOptions = this.option('searchPanel');
-    return super.isVisible() || !!searchPanelOptions?.visible;
-  }
 };
 
 const rowsView = (

packages/devextreme/testing/testcafe/tests/dataGrid/headerPanel.ts

@@ -180,3 +180,33 @@ test('Toolbar should not reset its widget values when changing the disabled prop
     }],
   },
 }));
+
+[
+  Themes.genericLight,
+  Themes.materialBlue,
+  Themes.fluentBlue,
+].forEach((theme) => {
+  test(`Invisible toolbar doesn't have additional paddings (T1261773) in ${theme}`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid('#container');
+
+    await t
+      .expect(await takeScreenshot(`invisible-toolbar-buttons-${theme}.png`, dataGrid.element))
+      .ok()
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await changeTheme(theme);
+
+    return createWidget('dxDataGrid', {
+      dataSource: getData(5, 3),
+      keyExpr: 'field_0',
+      toolbar: {
+        items: ['columnChooserButton'],
+        visible: false,
+      },
+    });
+  }).after(async () => {
+    await changeTheme(Themes.genericLight);
+  });
+});

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

@@ -2881,7 +2881,7 @@ QUnit.module('Assign options', baseModuleConfig, () => {
         dataGrid.option('toolbar.visible', false);
 
         // assert
-        assert.ok($toolbar.hasClass('dx-state-invisible'), 'toolbar is hidden');
+        assert.ok($toolbar.parent().hasClass('dx-hidden'), 'toolbar is hidden');
 
         // act
         dataGrid.option('toolbar.disabled', true);