diff --git a/packages/devextreme/js/ui/popup/ui.popup.js b/packages/devextreme/js/ui/popup/ui.popup.js index cf7b145d69b5..374a31585ed4 100644 --- a/packages/devextreme/js/ui/popup/ui.popup.js +++ b/packages/devextreme/js/ui/popup/ui.popup.js @@ -65,7 +65,6 @@ const POPUP_CONTENT_INHERIT_HEIGHT_CLASS = 'dx-popup-inherit-height'; const TOOLBAR_LABEL_CLASS = 'dx-toolbar-label'; const ALLOWED_TOOLBAR_ITEM_ALIASES = ['cancel', 'clear', 'done']; -const APPLY_VALUE_BUTTONS_ORDER = ['cancel', 'done']; const BUTTON_DEFAULT_TYPE = 'default'; const BUTTON_NORMAL_TYPE = 'normal'; @@ -75,14 +74,7 @@ const BUTTON_CONTAINED_MODE = 'contained'; const IS_OLD_SAFARI = browser.safari && compareVersions(browser.version, [11]) < 0; const HEIGHT_STRATEGIES = { static: '', inherit: POPUP_CONTENT_INHERIT_HEIGHT_CLASS, flex: POPUP_CONTENT_FLEX_HEIGHT_CLASS }; - -const sortApplyValueItems = (actionButtonsItems) => { - return actionButtonsItems.sort((a, b) => { - return APPLY_VALUE_BUTTONS_ORDER.indexOf(a.shortcut) - APPLY_VALUE_BUTTONS_ORDER.indexOf(b.shortcut); - }); -}; - -const getButtonInfo = shortcut => { +const getButtonPlace = name => { const device = devices.current(); const platform = device.platform; @@ -90,7 +82,7 @@ const getButtonInfo = shortcut => { let location = 'before'; if(platform === 'ios') { - switch(shortcut) { + switch(name) { case 'cancel': toolbar = 'top'; break; @@ -103,7 +95,7 @@ const getButtonInfo = shortcut => { break; } } else if(platform === 'android') { - switch(shortcut) { + switch(name) { case 'cancel': location = 'after'; break; @@ -115,8 +107,7 @@ const getButtonInfo = shortcut => { return { toolbar, - location, - shortcut + location }; }; @@ -492,16 +483,19 @@ const Popup = Overlay.inherit({ }, _getToolbarItems: function(toolbar) { + const toolbarItems = this.option('toolbarItems'); + const toolbarsItems = []; + this._toolbarItemClasses = []; + const currentPlatform = devices.current().platform; let index = 0; - const applyValueButtonsInfo = []; each(toolbarItems, (_, data) => { const isShortcut = isDefined(data.shortcut); - const item = isShortcut ? getButtonInfo(data.shortcut) : data; + const item = isShortcut ? getButtonPlace(data.shortcut) : data; if(isShortcut && currentPlatform === 'ios' && index < 2) { item.toolbar = 'top'; @@ -510,17 +504,15 @@ const Popup = Overlay.inherit({ item.toolbar = data.toolbar || item.toolbar || 'top'; - if(item?.toolbar === toolbar) { + if(item && item.toolbar === toolbar) { if(isShortcut) { extend(item, { location: data.location }, this._getToolbarItemByAlias(data)); - if(APPLY_VALUE_BUTTONS_ORDER.includes(data.shortcut)) { - applyValueButtonsInfo.push({ - shortcut: data.shortcut, - item - }); - } else { - toolbarsItems.push(item); - } + } + + const isLTROrder = currentPlatform === 'generic'; + + if((data.shortcut === 'done' && isLTROrder) || (data.shortcut === 'cancel' && !isLTROrder)) { + toolbarsItems.unshift(item); } else { toolbarsItems.push(item); } @@ -531,9 +523,7 @@ const Popup = Overlay.inherit({ toolbarsItems.push(this._getCloseButton()); } - const sortedApplyValueItems = sortApplyValueItems(applyValueButtonsInfo).map(item => item.item); - - return toolbarsItems.concat(...sortedApplyValueItems); + return toolbarsItems; }, _hasCloseButton() { diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png index 6ed558c5f12e..bace6c368749 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (generic-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (generic-light).png index 93aa9602dacb..f0fbfd380dc0 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (generic-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (material-blue-light).png index fe99e74f7148..681a2c00d8b8 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png index 6fa6389debff..66a914465a46 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (generic-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (generic-light).png index 94cad090a8cd..8028313fda17 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (generic-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (material-blue-light).png index c67f02eb24f9..0cee0d5bff8d 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (fluent-blue-light).png index b4f3c10fee6d..bf803a3e1cc0 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (generic-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (generic-light).png index c72dd5a2cbc3..a9f8746d7370 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (generic-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (material-blue-light).png index 2921f141b6d9..4c342a3fb284 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox with datetime without calendar (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/keyboard.ts b/packages/devextreme/testing/testcafe/tests/editors/dateBox/keyboard.ts index 82b059342972..f962496497fd 100644 --- a/packages/devextreme/testing/testcafe/tests/editors/dateBox/keyboard.ts +++ b/packages/devextreme/testing/testcafe/tests/editors/dateBox/keyboard.ts @@ -157,7 +157,7 @@ test('DateBox should be closed by press esc key when today/cancel/apply button i .pressKey('tab'); await t - .expect(dateBox.getPopup().getCancelButton().isFocused) + .expect(dateBox.getPopup().getApplyButton().isFocused) .eql(true); await t @@ -184,7 +184,7 @@ test('DateBox should be closed by press esc key when today/cancel/apply button i .pressKey('tab'); await t - .expect(dateBox.getPopup().getApplyButton().isFocused) + .expect(dateBox.getPopup().getCancelButton().isFocused) .eql(true); await t @@ -264,7 +264,7 @@ test('dateBox keyboard navigation via `tab` key if applyValueMode is useButtons, await t .expect(dateBox.option('opened')) .eql(true) - .expect(dateBox.getPopup().getCancelButton().isFocused) + .expect(dateBox.getPopup().getApplyButton().isFocused) .ok(); await t @@ -273,7 +273,7 @@ test('dateBox keyboard navigation via `tab` key if applyValueMode is useButtons, await t .expect(dateBox.option('opened')) .eql(true) - .expect(dateBox.getPopup().getApplyButton().isFocused) + .expect(dateBox.getPopup().getCancelButton().isFocused) .ok(); await t @@ -327,7 +327,7 @@ test('dateBox keyboard navigation via `shift+tab` key if applyValueMode is useBu await t .expect(dateBox.option('opened')) .eql(true) - .expect(dateBox.getPopup().getApplyButton().isFocused) + .expect(dateBox.getPopup().getCancelButton().isFocused) .ok(); await t @@ -336,7 +336,7 @@ test('dateBox keyboard navigation via `shift+tab` key if applyValueMode is useBu await t .expect(dateBox.option('opened')) .eql(true) - .expect(dateBox.getPopup().getCancelButton().isFocused) + .expect(dateBox.getPopup().getApplyButton().isFocused) .ok(); await t diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateRangeBox/keyboard.ts b/packages/devextreme/testing/testcafe/tests/editors/dateRangeBox/keyboard.ts index efb28bc95ad9..21e1fdc6ad06 100644 --- a/packages/devextreme/testing/testcafe/tests/editors/dateRangeBox/keyboard.ts +++ b/packages/devextreme/testing/testcafe/tests/editors/dateRangeBox/keyboard.ts @@ -278,7 +278,7 @@ test('DateRangeBox should be closed by press esc key when today/cancel/apply but .pressKey('tab'); await t - .expect(dateRangeBox.getPopup().getCancelButton().isFocused) + .expect(dateRangeBox.getPopup().getApplyButton().isFocused) .eql(true); await t @@ -305,7 +305,7 @@ test('DateRangeBox should be closed by press esc key when today/cancel/apply but .pressKey('tab'); await t - .expect(dateRangeBox.getPopup().getApplyButton().isFocused) + .expect(dateRangeBox.getPopup().getCancelButton().isFocused) .eql(true); await t @@ -651,9 +651,9 @@ test('DateRangeBox keyboard navigation via `tab` key if applyValueMode is useBut .expect(dateRangeBox.getEndDateBox().isFocused) .notOk() .expect(dateRangeBox.getPopup().getApplyButton().isFocused) - .notOk() - .expect(dateRangeBox.getPopup().getCancelButton().isFocused) .ok() + .expect(dateRangeBox.getPopup().getCancelButton().isFocused) + .notOk() .expect(dateRangeBox.getPopup().getTodayButton().isFocused) .notOk(); @@ -670,9 +670,9 @@ test('DateRangeBox keyboard navigation via `tab` key if applyValueMode is useBut .expect(dateRangeBox.getEndDateBox().isFocused) .notOk() .expect(dateRangeBox.getPopup().getApplyButton().isFocused) - .ok() - .expect(dateRangeBox.getPopup().getCancelButton().isFocused) .notOk() + .expect(dateRangeBox.getPopup().getCancelButton().isFocused) + .ok() .expect(dateRangeBox.getPopup().getTodayButton().isFocused) .notOk(); @@ -798,9 +798,9 @@ test('DateRangeBox keyboard navigation via `shift+tab` key if applyValueMode is .expect(dateRangeBox.getPopup().getNavigatorNextButton().isFocused) .notOk() .expect(dateRangeBox.getPopup().getApplyButton().isFocused) - .ok() - .expect(dateRangeBox.getPopup().getCancelButton().isFocused) .notOk() + .expect(dateRangeBox.getPopup().getCancelButton().isFocused) + .ok() .expect(dateRangeBox.getPopup().getTodayButton().isFocused) .notOk(); @@ -823,9 +823,9 @@ test('DateRangeBox keyboard navigation via `shift+tab` key if applyValueMode is .expect(dateRangeBox.getPopup().getNavigatorNextButton().isFocused) .notOk() .expect(dateRangeBox.getPopup().getApplyButton().isFocused) - .notOk() - .expect(dateRangeBox.getPopup().getCancelButton().isFocused) .ok() + .expect(dateRangeBox.getPopup().getCancelButton().isFocused) + .notOk() .expect(dateRangeBox.getPopup().getTodayButton().isFocused) .notOk(); diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/etalons/form-after-change-allday-and-reccurence-options.png b/packages/devextreme/testing/testcafe/tests/scheduler/etalons/form-after-change-allday-and-reccurence-options.png index ca2eec726000..3f1d9acf6ebd 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/etalons/form-after-change-allday-and-reccurence-options.png and b/packages/devextreme/testing/testcafe/tests/scheduler/etalons/form-after-change-allday-and-reccurence-options.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/etalons/save-appointment-loading-panel-screenshot.png b/packages/devextreme/testing/testcafe/tests/scheduler/etalons/save-appointment-loading-panel-screenshot.png index 8feb427fc4e7..06af8b7de829 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/etalons/save-appointment-loading-panel-screenshot.png and b/packages/devextreme/testing/testcafe/tests/scheduler/etalons/save-appointment-loading-panel-screenshot.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-click-all-day.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-click-all-day.png index 6f6b87685f1d..3c1b328fbcd5 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-click-all-day.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-click-all-day.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-render-on-table.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-render-on-table.png index 160d58d857c0..dddcfd6fc5a4 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-render-on-table.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-render-on-table.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-switch-off-all-day.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-switch-off-all-day.png index f9f2040c8e16..6dbd3dd7444d 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-switch-off-all-day.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-after-switch-off-all-day.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-before-click-all-day.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-before-click-all-day.png index b8df6f92d9bb..ab496bdf7b7c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-before-click-all-day.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-before-click-all-day.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-in-mobile-environment.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-in-mobile-environment.png index 2ac687c78b15..4e4d9e2dfaa6 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-in-mobile-environment.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/appointment-form-in-mobile-environment.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/dx-number-boxes-not-integer-chars.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/dx-number-boxes-not-integer-chars.png index 76232551d7d2..4e58e97ffe21 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/dx-number-boxes-not-integer-chars.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/dx-number-boxes-not-integer-chars.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/form-after-change-allday-and-reccurence-options.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/form-after-change-allday-and-reccurence-options.png index ca2eec726000..3f1d9acf6ebd 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/form-after-change-allday-and-reccurence-options.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/form-after-change-allday-and-reccurence-options.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/form-before-change-allday-and-reccurence-options.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/form-before-change-allday-and-reccurence-options.png index 5f2ca46b5f58..66c30d8024a4 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/form-before-change-allday-and-reccurence-options.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/form-before-change-allday-and-reccurence-options.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-click-all-day.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-click-all-day.png index 330781df50f7..2fb8dcfbd06c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-click-all-day.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-click-all-day.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-render-on-table.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-render-on-table.png index c3a51da2898f..698810674bb7 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-render-on-table.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-render-on-table.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-switch-off-all-day.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-switch-off-all-day.png index b4f1210b26b5..aeca550304ff 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-switch-off-all-day.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-after-switch-off-all-day.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-before-click-all-day.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-before-click-all-day.png index 831678516de2..2a1387f62943 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-before-click-all-day.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/new-appointment-form-before-click-all-day.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/disabled-appointment.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/disabled-appointment.png index 064d0a2014e9..de8641e8ac40 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/disabled-appointment.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/disabled-appointment.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/disabled-by-function-appointment.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/disabled-by-function-appointment.png index a81fde6c6ba3..b87b9dbb47c5 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/disabled-by-function-appointment.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/disabled-by-function-appointment.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/enabled-appointment.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/enabled-appointment.png index 5e723a846c6b..b9eddb0ab5a1 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/enabled-appointment.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/enabled-appointment.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/enabled-by-function-appointment.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/enabled-by-function-appointment.png index f2b725306b79..887391715ea3 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/enabled-by-function-appointment.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointments/etalons/enabled-by-function-appointment.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-month-with-form.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-month-with-form.png index c0e7c793a92f..cb26d7a2c224 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-month-with-form.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-month-with-form.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineDay-with-form.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineDay-with-form.png index 72d73d24d786..0ff2097ac685 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineDay-with-form.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineDay-with-form.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineMonth-with-form.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineMonth-with-form.png index b6c08fe0913d..ecbe844943d6 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineMonth-with-form.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineMonth-with-form.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineWeek-with-form.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineWeek-with-form.png index 83c1440f16b3..6ce085bc0c64 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineWeek-with-form.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineWeek-with-form.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineWorkWeek-with-form.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineWorkWeek-with-form.png index a89b8e686e79..a3dd34e74740 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineWorkWeek-with-form.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-timelineWorkWeek-with-form.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-week-with-form.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-week-with-form.png index cc996c1f34fc..001af90bd13f 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-week-with-form.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-week-with-form.png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-workWeek-with-form.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-workWeek-with-form.png index ea057319f946..408ef4b1580a 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-workWeek-with-form.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/views/intervalCount/etalons/start-date-in-workWeek-with-form.png differ diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/colorBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/colorBox.tests.js index d276057213bd..c5c31ff70d29 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/colorBox.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/colorBox.tests.js @@ -33,6 +33,7 @@ const COLORVIEW_HEX_INPUT_SELECTOR = '.dx-colorview-label-hex .dx-texteditor-inp const COLORVIEW_APPLY_BUTTON_SELECTOR = '.dx-colorview-apply-button'; const CLEAR_BUTTON_AREA_SELECTOR = '.dx-clear-button-area'; const COLOR_VIEW_PALETTE_HANDLE_SELECTOR = '.dx-colorview-palette-handle'; +const COLOR_VIEW_CANCEL_BUTTON_SELECTOR = '.dx-colorview-cancel-button'; const BUTTON_SELECTOR = '.dx-button'; const TEXTBOX_SELECTOR = '.dx-textbox'; @@ -879,16 +880,16 @@ QUnit.module('keyboard navigation', { assert.ok($(`.${COLORVIEW_CLASS}`).hasClass(STATE_FOCUSED_CLASS)); }); - QUnit.test('pressing tab + shift should set focus on apply button in popup', function(assert) { + QUnit.test('pressing tab + shift should set focus on cancel button in popup', function(assert) { this.instance.option({ opened: true, applyValueMode: 'useButtons', }); this.keyboard.keyDown('tab', { shiftKey: true }); - const $applyButton = getColorBoxOverlayContent().find(COLORVIEW_APPLY_BUTTON_SELECTOR); + const $cancelButton = getColorBoxOverlayContent().find(COLOR_VIEW_CANCEL_BUTTON_SELECTOR); - assert.ok($applyButton.hasClass(STATE_FOCUSED_CLASS)); + assert.ok($cancelButton.hasClass(STATE_FOCUSED_CLASS)); }); QUnit.test('pressing tab should set focus on first item in popup with custom items', function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.tests.js index c799dd738484..a123611a1878 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.tests.js @@ -39,6 +39,7 @@ const TEXTEDITOR_EMPTY_CLASS = 'dx-texteditor-empty'; const CALENDAR_CELL_CLASS = 'dx-calendar-cell'; const CALENDAR_CONTOURED_CELL_CLASS = 'dx-calendar-contoured-date'; const APPLY_BUTTON_SELECTOR = '.dx-popup-done.dx-button'; +const CANCEL_BUTTON_SELECTOR = '.dx-popup-cancel.dx-button'; const CALENDAR_NAVIGATOR_PREVIOUS_VIEW_CLASS = 'dx-calendar-navigator-previous-view'; const BUTTON_SELECTOR = '.dx-button'; const TEXTBOX_SELECTOR = '.dx-textbox'; @@ -4219,7 +4220,7 @@ if(devices.real().deviceType === 'desktop') { assert.ok($prevButton.hasClass(STATE_FOCUSED_CLASS)); }); - QUnit.test('pressing tab + shift should set focus on apply button in popup', function(assert) { + QUnit.test('pressing tab + shift should set focus on cancel button in popup', function(assert) { this.reinit({ opened: true, applyValueMode: 'useButtons', @@ -4231,8 +4232,8 @@ if(devices.real().deviceType === 'desktop') { shiftKey: true })); - const $applyButton = this.getPopupContent().parent().find(APPLY_BUTTON_SELECTOR); - assert.ok($applyButton.hasClass(STATE_FOCUSED_CLASS)); + const $cancelButton = this.getPopupContent().parent().find(CANCEL_BUTTON_SELECTOR); + assert.ok($cancelButton.hasClass(STATE_FOCUSED_CLASS)); }); QUnit.test('pressing tab should set focus on first item in popup with custom items', function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js index bb76a07d3128..579b30043872 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js @@ -4772,8 +4772,8 @@ if(devices.real().deviceType === 'desktop') { shiftKey: true })); - const $doneButton = this.dateBox._popup.$wrapper().find('.dx-button.dx-popup-done'); - assert.ok($doneButton.hasClass('dx-state-focused'), 'cancel button is focused'); + const $cancelButton = this.dateBox._popup.$wrapper().find('.dx-button.dx-popup-cancel'); + assert.ok($cancelButton.hasClass('dx-state-focused'), 'cancel button is focused'); }); QUnit.test('pressing tab should set focus on calendar prev button in popup', function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.tests.js index c46f3c2966e0..d2a3d537793a 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.tests.js @@ -801,12 +801,12 @@ if(devices.real().deviceType === 'desktop') { QUnit.testInActiveWindow('the first popup element should be focused on the \'tab\' key press if the input is focused', function(assert) { this.instance.open(); this.triggerKeyPress(this.$input, TAB_KEY_CODE); - assert.ok(this.$cancelButton.hasClass('dx-state-focused'), 'the first popup element is focused'); + assert.ok(this.$doneButton.hasClass('dx-state-focused'), 'the first popup element is focused'); }); QUnit.testInActiveWindow('the input should be focused on the \'tab\' key press if the last element is focused', function(assert) { this.instance.open(); - this.triggerKeyPress(this.$doneButton, TAB_KEY_CODE); + this.triggerKeyPress(this.$cancelButton, TAB_KEY_CODE); assert.ok(this.$element.hasClass('dx-state-focused'), 'the input is focused'); }); @@ -866,21 +866,21 @@ if(devices.real().deviceType === 'desktop') { QUnit.testInActiveWindow('the input should be focused on the \'tab+shift\' key press if the first element is focused', function(assert) { this.instance.open(); - this.triggerKeyPress(this.$cancelButton, TAB_KEY_CODE, true); + this.triggerKeyPress(this.$doneButton, TAB_KEY_CODE, true); assert.ok(this.$element.hasClass('dx-state-focused'), 'the input is focused'); }); QUnit.testInActiveWindow('the last popup element should be focused on the \'tab+shift\' key press if the input is focused', function(assert) { this.instance.open(); this.triggerKeyPress(this.$input, TAB_KEY_CODE, true); - assert.ok(this.$doneButton.hasClass('dx-state-focused'), 'the last popup element is focused'); + assert.ok(this.$cancelButton.hasClass('dx-state-focused'), 'the last popup element is focused'); }); QUnit.testInActiveWindow('default event should be prevented on the tab key press if the input is focused', function(assert) { this.instance.open(); const spy = sinon.spy(); - this.$doneButton.on('keydown', spy); - this.triggerKeyPress(this.$doneButton, TAB_KEY_CODE); + this.$cancelButton.on('keydown', spy); + this.triggerKeyPress(this.$cancelButton, TAB_KEY_CODE); assert.ok(spy.args[0][0].isDefaultPrevented(), 'default is prevented'); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js index 5254fef33462..48d74b433529 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js @@ -5427,7 +5427,7 @@ QUnit.module('keyboard navigation "TAB" button', moduleSetup, () => { assert.equal(caret.start, caret.end, 'the input has no selection'); }); - QUnit.testInActiveWindow('the "tab" key press should focus the "cancel" button if the input is focused', function(assert) { + QUnit.testInActiveWindow('the "tab" key press should focus the "apply" button if the input is focused', function(assert) { if(devices.real().deviceType !== 'desktop') { assert.ok(true, 'desktop specific test'); return; @@ -5440,14 +5440,14 @@ QUnit.module('keyboard navigation "TAB" button', moduleSetup, () => { opened: true }); const instance = $element.dxSelectBox('instance'); - const $cancelButton = instance._popup.$wrapper().find('.dx-popup-cancel.dx-button'); + const $applyButton = instance._popup.$wrapper().find('.dx-popup-done.dx-button'); keyboardMock($element.find(toSelector(TEXTEDITOR_INPUT_CLASS)), true) .focus() .keyDown('tab'); assert.ok(instance.option('opened'), 'popup is still opened'); - assert.ok($cancelButton.hasClass(STATE_FOCUSED_CLASS), 'the apply button is focused'); + assert.ok($applyButton.hasClass(STATE_FOCUSED_CLASS), 'the apply button is focused'); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js index 45e5617326b2..74ebb63f004e 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js @@ -2580,7 +2580,7 @@ QUnit.module('keyboard navigation', { assert.deepEqual(this.instance.option('value'), expectedValue, 'the value is correct'); }); - QUnit.testInActiveWindow('the \'cancel\' button should be focused on the \'tab\' key press if the input is focused and showSelectionControls if false (T389453)', function(assert) { + QUnit.testInActiveWindow('the \'apply\' button should be focused on the \'tab\' key press if the input is focused and showSelectionControls if false (T389453)', function(assert) { if(devices.real().deviceType !== 'desktop') { assert.ok(true, 'desktop specific test'); return; @@ -2595,8 +2595,8 @@ QUnit.module('keyboard navigation', { .focus() .press('tab'); - const $cancelButton = this.instance._popup.$wrapper().find('.dx-button.dx-popup-cancel'); - assert.ok($cancelButton.hasClass('dx-state-focused'), 'the apply button is focused'); + const $applyButton = this.instance._popup.$wrapper().find('.dx-button.dx-popup-done'); + assert.ok($applyButton.hasClass('dx-state-focused'), 'the apply button is focused'); }); QUnit.testInActiveWindow('toolbar button should be focused on the "tab" key press if the input is focused and showSelectionControls is enabled', function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.adaptivity.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.adaptivity.tests.js index a9632dd153f7..42f5f7783e12 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.adaptivity.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.adaptivity.tests.js @@ -422,7 +422,7 @@ module('Appointment popup buttons', moduleConfig, () => { scheduler.tooltip.clickOnItem(); const popup = scheduler.appointmentPopup; - assert.ok(popup.hasToolbarButtonsInSection(TOOLBAR_BOTTOM_LOCATION, SECTION_AFTER, [ CANCEL_BUTTON, DONE_BUTTON]), 'the \'Cancel\' and \'Done\' buttons are located in the \'after\' section'); + assert.ok(popup.hasToolbarButtonsInSection(TOOLBAR_BOTTOM_LOCATION, SECTION_AFTER, [DONE_BUTTON, CANCEL_BUTTON]), 'the \'Cancel\' and \'Done\' buttons are located in the \'after\' section'); } finally { this.realDeviceMock.restore(); } diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js index e46d2171ec29..8bb680422460 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js @@ -311,7 +311,7 @@ QUnit.module('basic', () => { const $popupBottom = instance.$content().parent().find('.dx-popup-bottom'); $popupBottom.dxToolbar('repaint'); - assert.equal($popupBottom.text(), 'TodayCancelOK', 'buttons order is correct'); + assert.equal($popupBottom.text(), 'TodayOKCancel', 'buttons order is correct'); devices.current(devices.real()); });