diff --git a/js/ui/file_manager/ui.file_manager.toolbar.js b/js/ui/file_manager/ui.file_manager.toolbar.js index 68db6c2e66f9..23fc496043fb 100644 --- a/js/ui/file_manager/ui.file_manager.toolbar.js +++ b/js/ui/file_manager/ui.file_manager.toolbar.js @@ -265,6 +265,11 @@ class FileManagerToolbar extends Widget { if(!result.widget) { result.widget = 'dxButton'; } + if(result.widget === 'dxButton' && !result.compactMode && !result.showText && result.options.icon && result.options.text) { + result.compactMode = { + showText: 'inMenu' + }; + } } if(commandName && !result.name) { diff --git a/testing/tests/DevExpress.ui.widgets/fileManagerParts/toolbar.tests.js b/testing/tests/DevExpress.ui.widgets/fileManagerParts/toolbar.tests.js index 17fe72b6ae71..c4e30a152fb0 100644 --- a/testing/tests/DevExpress.ui.widgets/fileManagerParts/toolbar.tests.js +++ b/testing/tests/DevExpress.ui.widgets/fileManagerParts/toolbar.tests.js @@ -894,4 +894,52 @@ QUnit.module('Toolbar', moduleConfig, () => { assert.strictEqual($fileToolbarElements.eq(2).text(), 'Rename', 'third file element correct'); }); + test('custom toolbar items have compact mode', function(assert) { + createFileManager(false); + this.clock.tick(400); + + const fileManager = this.wrapper.getInstance(); + fileManager.option('toolbar.items', [ + { + widget: 'dxButton', + options: { + text: 'item with long name 0', + icon: 'upload' + }, + locateInMenu: 'never' + }, + { + widget: 'dxButton', + options: { + text: 'item with long name 1', + icon: 'upload' + }, + locateInMenu: 'never' + }, + { + widget: 'dxButton', + options: { + text: 'item with long name 2' + }, + locateInMenu: 'never' + } + ]); + this.clock.tick(400); + + const originalWidth = renderer.fn.width; + renderer.fn.width = () => 400; + $('#fileManager').css('width', '100%'); + fileManager.repaint(); + this.clock.tick(800); + + const $generalToolbarElements = this.wrapper.getGeneralToolbarElements(); + + assert.strictEqual($generalToolbarElements.length, 3, 'there are three elements in general toolbar'); + assert.strictEqual($generalToolbarElements.eq(0).find(`.${Consts.BUTTON_TEXT_CLASS}:visible`).text(), '', 'fisrt general element correct'); + assert.strictEqual($generalToolbarElements.eq(1).find(`.${Consts.BUTTON_TEXT_CLASS}:visible`).text(), '', 'second general element correct'); + assert.strictEqual($generalToolbarElements.eq(2).find(`.${Consts.BUTTON_TEXT_CLASS}:visible`).text(), 'item with long name 2', 'third general element correct'); + + renderer.fn.width = originalWidth; + }); + });