DateBox: make today button look the same as cancel button (#25902)

DevExpress · Oct 28, 2023 · 30a21fd · 30a21fd
1 parent 82bdce6
commit 30a21fd
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 3 deletions.
diff --git a/packages/devextreme/js/ui/date_box/ui.date_box.strategy.calendar.js b/packages/devextreme/js/ui/date_box/ui.date_box.strategy.calendar.js
@@ -5,6 +5,9 @@ import { splitPair } from '../../core/utils/common';
 import { isFunction, isEmptyObject } from '../../core/utils/type';
 import { extend } from '../../core/utils/extend';
 import messageLocalization from '../../localization/message';
+import { isMaterial } from '../themes';
+
+const TODAY_BUTTON_CLASS = 'dx-button-today';
 
 const CalendarStrategy = DateBoxStrategy.inherit({
 
@@ -116,8 +119,8 @@ const CalendarStrategy = DateBoxStrategy.inherit({
     _getTodayButtonConfig() {
         const buttonsLocation = this.dateBox.option('buttonsLocation');
         const isButtonsLocationDefault = buttonsLocation === 'default';
-
         const position = isButtonsLocationDefault ? ['bottom', 'center'] : splitPair(buttonsLocation);
+        const stylingMode = isMaterial() ? 'text' : 'outlined';
 
         return {
             widget: 'dxButton',
@@ -126,7 +129,8 @@ const CalendarStrategy = DateBoxStrategy.inherit({
             options: {
                 onClick: (args) => { this._widget._toTodayView(args); },
                 text: this.dateBox.option('todayButtonText'),
-                type: 'today',
+                elementAttr: { class: TODAY_BUTTON_CLASS },
+                stylingMode,
             }
         };
     },

diff --git a/...afe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png b/...afe/tests/editors/dateBox/etalons/Datebox with datetime (fluent-blue-light).png
diff --git a/...e/tests/editors/dateBox/etalons/Datebox with datetime (material-blue-light).png b/...e/tests/editors/dateBox/etalons/Datebox with datetime (material-blue-light).png
diff --git a/...eBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png b/...eBox/etalons/Datebox with datetime without analog clock (fluent-blue-light).png
diff --git a/...ox/etalons/Datebox with datetime without analog clock (material-blue-light).png b/...ox/etalons/Datebox with datetime without analog clock (material-blue-light).png
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
@@ -58,6 +58,8 @@ const STATE_FOCUSED_CLASS = 'dx-state-focused';
 const BUTTONS_CONTAINER_CLASS = 'dx-texteditor-buttons-container';
 const GESTURE_COVER_CLASS = 'dx-gesture-cover';
 const DROP_DOWN_BUTTON_CLASS = 'dx-dropdowneditor-button';
+const BUTTON_CLASS = 'dx-button';
+const TODAY_BUTTON_CLASS = 'dx-button-today';
 const DROP_DOWN_BUTTON_VISIBLE_CLASS = 'dx-dropdowneditor-button-visible';
 const OVERLAY_CONTENT_CLASS = 'dx-overlay-content';
 const OVERLAY_WRAPPER_CLASS = 'dx-overlay-wrapper';
@@ -74,7 +76,7 @@ const SHOW_INVALID_BADGE_CLASS = 'dx-show-invalid-badge';
 
 const APPLY_BUTTON_SELECTOR = '.dx-popup-done.dx-button';
 const CANCEL_BUTTON_SELECTOR = '.dx-popup-cancel.dx-button';
-const TODAY_BUTTON_SELECTOR = '.dx-button-today.dx-button';
+const TODAY_BUTTON_SELECTOR = `.${TODAY_BUTTON_CLASS}.${BUTTON_CLASS}`;
 const BUTTON_SELECTOR = '.dx-button';
 const TEXTBOX_SELECTOR = '.dx-textbox';
 
@@ -537,6 +539,19 @@ QUnit.module('toolbar buttons', {}, () => {
     ];
 
     types.forEach(type => {
+        QUnit.test(`Today button should have "dx-button-today" class (type=${type})`, function(assert) {
+            const dateBox = $('#dateBox').dxDateBox({
+                type,
+                pickerType: 'calendar',
+                opened: true,
+                applyValueMode: 'useButtons',
+            }).dxDateBox('instance');
+            const $overlayContent = $(dateBox.content()).parent();
+            const $todayButton = $overlayContent.find(`.${TODAY_BUTTON_CLASS}`);
+
+            assert.strictEqual($todayButton.length, 1);
+        });
+
         buttons.forEach(button => {
             QUnit.test(`"${button.optionName}" should customize ${button.name} button on init when type="${type}"`, function(assert) {
                 const $dateBox = $('#dateBox').dxDateBox({