Fluent: accordion redesign (#25613)

packages/devextreme/js/ui/accordion.js

@@ -16,7 +16,7 @@ import CollectionWidget from './collection/ui.collection_widget.live_update';
 import { when, Deferred } from '../core/utils/deferred';
 import { BindableTemplate } from '../core/templates/bindable_template';
 import { getImageContainer } from '../core/utils/icon';
-import { isMaterial } from './themes';
+import { isMaterialBased } from './themes';
 
 // STYLE accordion
 
@@ -77,7 +77,7 @@ const Accordion = CollectionWidget.inherit({
             },
             {
                 device: function() {
-                    return isMaterial();
+                    return isMaterialBased();
                 },
                 options: {
                     animationDuration: 200,

packages/devextreme/js/ui/calendar/ui.calendar.js

@@ -26,6 +26,7 @@ import CalendarMultipleSelectionStrategy from './ui.calendar.multiple.selection.
 import CalendarRangeSelectionStrategy from './ui.calendar.range.selection.strategy';
 import { end as hoverEndEventName } from '../../events/hover';
 import eventsEngine from '../../events/core/events_engine';
+import { isFluent } from '../themes';
 
 // STYLE calendar
 
@@ -1110,8 +1111,8 @@ const Calendar = Editor.inherit({
                     onClick: (args) => {
                         this._toTodayView(args);
                     },
-                    type: 'default',
-                    stylingMode: 'text',
+                    type: isFluent() ? 'normal' : 'default',
+                    stylingMode: isFluent() ? 'outlined' : 'text',
                     integrationOptions: {}
                 }).$element()
                 .addClass(CALENDAR_TODAY_BUTTON_CLASS);

packages/devextreme/js/ui/calendar/ui.calendar.navigator.js

@@ -2,7 +2,7 @@ import $ from '../../core/renderer';
 import { extend } from '../../core/utils/extend';
 import Widget from '../widget/ui.widget';
 import Button from '../button';
-import { isMaterial } from '../themes';
+import { isFluent, isMaterial } from '../themes';
 
 const CALENDAR_NAVIGATOR_CLASS = 'dx-calendar-navigator';
 const CALENDAR_NAVIGATOR_PREVIOUS_MONTH_CLASS = 'dx-calendar-navigator-previous-month';
@@ -35,6 +35,15 @@ class Navigator extends Widget {
                     stylingMode: 'text'
                 }
             },
+            {
+                device: function() {
+                    return isFluent();
+                },
+                options: {
+                    type: 'normal',
+                    stylingMode: 'text'
+                }
+            }
         ]);
     }
 
@@ -61,7 +70,6 @@ class Navigator extends Widget {
 
     _renderButtons() {
         const { rtlEnabled, type, stylingMode, focusStateEnabled } = this.option();
-
         const direction = 1;
 
         this._prevButton = this._createComponent($('<div>'),

packages/devextreme/js/ui/date_range_box/ui.date_range_box.js

@@ -6,7 +6,7 @@ import { getImageContainer } from '../../core/utils/icon';
 import config from '../../core/config';
 import devices from '../../core/devices';
 import messageLocalization from '../../localization/message';
-import { current, isMaterial } from '../themes';
+import { current, isMaterialBased } from '../themes';
 import Editor from '../editor/editor';
 import MultiselectDateBox from './ui.multiselect_date_box';
 import TextEditorButtonCollection from '../text_box/texteditor_button_collection/index';
@@ -126,7 +126,7 @@ class DateRangeBox extends Editor {
             {
                 device: function() {
                     const themeName = current();
-                    return isMaterial(themeName);
+                    return isMaterialBased(themeName);
                 },
                 options: {
                     stylingMode: config().editorStylingMode || 'filled',

packages/devextreme/js/ui/form/components/field_item.js

@@ -4,7 +4,7 @@ import { name as clickEventName } from '../../../events/click';
 import { getPublicElement } from '../../../core/element';
 import { captionize } from '../../../core/utils/inflector';
 import { format } from '../../../core/utils/string';
-import { isMaterial } from '../../themes';
+import { isMaterialBased } from '../../themes';
 import errors from '../../widget/ui.errors';
 
 import Validator from '../../validator';
@@ -226,7 +226,7 @@ function tryGetValidationTargetInstance($validationTarget) {
 }
 
 function subscribeWrapperInvalidClassToggle(validationTargetInstance) {
-    if(validationTargetInstance && isMaterial()) {
+    if(validationTargetInstance && isMaterialBased()) {
         const wrapperClass = `.${FIELD_ITEM_CONTENT_WRAPPER_CLASS}`;
         const toggleInvalidClass = ({ element, component }) => {
             const { isValid, validationMessageMode } = component.option();

packages/devextreme/js/ui/form/ui.form.js

@@ -18,7 +18,7 @@ import { default as FormItemsRunTimeInfo } from './ui.form.items_runtime_info';
 import TabPanel from '../tab_panel';
 import Scrollable from '../scroll_view/ui.scrollable';
 import { Deferred } from '../../core/utils/deferred';
-import { isMaterial } from '../themes';
+import { isMaterialBased } from '../themes';
 import tryCreateItemOptionAction from './ui.form.item_options_actions';
 import resizeObserverSingleton from '../../core/resize_observer';
 import './ui.form.layout_manager';
@@ -117,7 +117,7 @@ const Form = Widget.inherit({
         return this.callBase().concat([
             {
                 device: function() {
-                    return isMaterial();
+                    return isMaterialBased();
                 },
                 options: {
                     showColonAfterLabel: false,

packages/devextreme/js/ui/html_editor/ui.html_editor.js

@@ -46,8 +46,6 @@ const HtmlEditor = Editor.inherit({
     _getDefaultOptions: function() {
         return extend(this.callBase(), {
             focusStateEnabled: true,
-
-
             valueType: 'html',
             placeholder: '',
             toolbar: null,

packages/devextreme/js/ui/html_editor/ui/formDialog.js

@@ -7,7 +7,7 @@ import { Deferred } from '../../../core/utils/deferred';
 import localizationMessage from '../../../localization/message';
 import { getCurrentScreenFactor, hasWindow } from '../../../core/utils/window';
 import devices from '../../../core/devices';
-import { isMaterial } from '../../themes';
+import { isMaterialBased } from '../../themes';
 
 const DIALOG_CLASS = 'dx-formdialog';
 const FORM_CLASS = 'dx-formdialog-form';
@@ -141,7 +141,7 @@ class FormDialog {
         return {
             colCount: 1,
             width: 'auto',
-            labelLocation: isMaterial() ? 'top' : 'left'
+            labelLocation: isMaterialBased() ? 'top' : 'left'
         };
     }
 

packages/devextreme/js/ui/list/ui.list.base.js

@@ -18,7 +18,7 @@ import devices from '../../core/devices';
 import ListItem from './item';
 import Button from '../button';
 import { addNamespace } from '../../events/utils/index';
-import { current, isMaterial } from '../themes';
+import { current, isMaterial, isMaterialBased } from '../themes';
 import { hasWindow } from '../../core/utils/window';
 import ScrollView from '../scroll_view';
 import { deviceDependentOptions } from '../scroll_view/ui.scrollable.device';
@@ -238,15 +238,19 @@ export const ListBase = CollectionWidget.inherit({
                 device: function() {
                     return isMaterial(themeName);
                 },
+                options: {
+                    useInkRipple: true
+                }
+            },
+            {
+                device: function() {
+                    return isMaterialBased(themeName);
+                },
                 options: {
                     pullingDownText: '',
-
                     pulledDownText: '',
-
                     refreshingText: '',
-
                     pageLoadingText: '',
-                    useInkRipple: true
                 }
             }
         ]);
@@ -897,7 +901,7 @@ export const ListBase = CollectionWidget.inherit({
         this._createComponent($button, Button, {
             text: this.option('nextButtonText'),
             onClick: this._nextButtonHandler.bind(this),
-            type: isMaterial() ? 'default' : undefined,
+            type: isMaterialBased() ? 'default' : undefined,
             integrationOptions: {}
         });