diff --git a/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts b/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts index 618aa3231ceb..793e2f17555d 100644 --- a/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts +++ b/packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts @@ -884,10 +884,6 @@ const headerPanel = (Base: ModuleType) => class ExportHeaderPanelEx this.setToolbarItemDisabled('exportButton', disabled); }); } - - public isVisible() { - return super.isVisible() || this._isExportButtonVisible(); - } }; dataGridCore.registerModule('export', { diff --git a/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping.ts b/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping.ts index 7093eac76a80..d97ec7fd2220 100644 --- a/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping.ts +++ b/packages/devextreme/js/__internal/grids/data_grid/grouping/m_grouping.ts @@ -584,10 +584,6 @@ export const GroupingHeaderPanelExtender = (Base: ModuleType) => cl return items; } - public isVisible() { - return super.isVisible() || this._isGroupPanelVisible(); - } - public hasGroupedColumns(): boolean { return this._isGroupPanelVisible() && !!this.getColumns().length; } diff --git a/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts b/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts index a5a3f9f4122d..17093f4ce0fb 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts @@ -577,13 +577,6 @@ const headerPanel = (Base: ModuleType) => class ColumnChooserHeader super.optionChanged(args); } } - - public isVisible() { - const that = this; - const columnChooserEnabled = that.option('columnChooser.enabled')!; - - return super.isVisible() || columnChooserEnabled; - } }; const columns = (Base: ModuleType) => class ColumnsChooserColumnsControllerExtender extends Base { diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts index 0b4613b1c31b..8edd5f226dcd 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts @@ -2874,13 +2874,6 @@ const headerPanel = (Base: ModuleType) => 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 = { diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing_cell_based.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing_cell_based.ts index ce2c2a1936c0..e9b3766179c0 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing_cell_based.ts +++ b/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,15 +720,6 @@ const rowsView = (Base: ModuleType) => class RowsViewEditingCellBasedE } }; -const headerPanel = (Base: ModuleType) => 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: { @@ -737,7 +727,6 @@ export const editingCellBasedModule = { }, views: { rowsView, - headerPanel, }, }, }; diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts b/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts index 932b0757a150..785d03f828a4 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts @@ -1004,10 +1004,6 @@ const headerPanel = (Base: ModuleType) => class FilterRowHeaderPane private enableApplyButton(value) { this.setToolbarItemDisabled('applyFilterButton', !value); } - - public isVisible() { - return super.isVisible() || this._isShowApplyFilterButton(); - } }; export const filterRowModule = { diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts b/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts index 9a0565cb7b7d..8ff0c0e9a944 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts +++ b/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); diff --git a/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts b/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts index f15503efb992..8c596e2f721f 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts +++ b/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 = ( diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/etalons/invisible-toolbar-buttons-fluent.blue.light.png b/packages/devextreme/testing/testcafe/tests/dataGrid/etalons/invisible-toolbar-buttons-fluent.blue.light.png new file mode 100644 index 000000000000..a1306ae8cd3d Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/dataGrid/etalons/invisible-toolbar-buttons-fluent.blue.light.png differ diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/etalons/invisible-toolbar-buttons-generic.light.png b/packages/devextreme/testing/testcafe/tests/dataGrid/etalons/invisible-toolbar-buttons-generic.light.png new file mode 100644 index 000000000000..13fad88006fb Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/dataGrid/etalons/invisible-toolbar-buttons-generic.light.png differ diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/etalons/invisible-toolbar-buttons-material.blue.light.png b/packages/devextreme/testing/testcafe/tests/dataGrid/etalons/invisible-toolbar-buttons-material.blue.light.png new file mode 100644 index 000000000000..74fac3f21290 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/dataGrid/etalons/invisible-toolbar-buttons-material.blue.light.png differ diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/headerPanel.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/headerPanel.ts index a1844137063a..5c798e04c4dc 100644 --- a/packages/devextreme/testing/testcafe/tests/dataGrid/headerPanel.ts +++ b/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); + }); +}); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js index 3473b1d1de12..5eab2b8b26ca 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js +++ b/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);