Fluent: update defaultOptions where isMaterial is used (#25837)

packages/devextreme/js/ui/accordion.d.ts

@@ -122,6 +122,7 @@ export interface dxAccordionOptions<
      * @docid
      * @default 300
      * @default 200 &for(Material)
+     * @default 200 &for(Fluent)
      * @public
      */
     animationDuration?: number;

packages/devextreme/js/ui/gantt.d.ts

@@ -1611,6 +1611,7 @@ export interface dxGanttHeaderFilter {
     /**
      * @docid
      * @default 315 &for(Material)
+     * @default 315 &for(Fluent)
      * @default 325
      */
     height?: number;

packages/devextreme/js/ui/popover/ui.popover.js

@@ -14,6 +14,7 @@ import { addNamespace } from '../../events/utils/index';
 import errors from '../widget/ui.errors';
 import Popup from '../popup/ui.popup';
 import { getBoundingRect } from '../../core/utils/position';
+import { isMaterialBased, isMaterial } from '../themes';
 import { PopoverPositionController, POPOVER_POSITION_ALIASES } from './popover_position_controller';
 
 // STYLE popover
@@ -246,7 +247,24 @@ const Popover = Popup.inherit({
                 options: {
                     animation: null
                 }
-            }
+            },
+            {
+                device: function() {
+                    return isMaterialBased();
+                },
+                options: {
+                    useFlatToolbarButtons: true,
+                }
+            },
+            {
+                device: function() {
+                    return isMaterial();
+                },
+                options: {
+                    useDefaultToolbarButtons: true,
+                    showCloseButton: false
+                }
+            },
         ];
     },
 

packages/devextreme/js/ui/popup/ui.popup.js

@@ -27,7 +27,7 @@ import PopupDrag from './popup_drag';
 import Resizable from '../resizable';
 import Button from '../button';
 import Overlay from '../overlay/ui.overlay';
-import { isMaterialBased, current as currentTheme } from '../themes';
+import { isMaterialBased, isMaterial, isFluent } from '../themes';
 import '../toolbar/ui.toolbar.base';
 import resizeObserverSingleton from '../../core/resize_observer';
 import * as zIndexPool from '../overlay/z_index';
@@ -70,6 +70,7 @@ const BUTTON_DEFAULT_TYPE = 'default';
 const BUTTON_NORMAL_TYPE = 'normal';
 const BUTTON_TEXT_MODE = 'text';
 const BUTTON_CONTAINED_MODE = 'contained';
+const BUTTON_OUTLINED_MODE = 'outlined';
 
 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 };
@@ -147,8 +148,6 @@ const Popup = Overlay.inherit({
     },
 
     _defaultOptionsRules: function() {
-        const themeName = currentTheme();
-
         return this.callBase().concat([
             {
                 device: { platform: 'ios' },
@@ -186,14 +185,21 @@ const Popup = Overlay.inherit({
             },
             {
                 device: function() {
-                    return isMaterialBased(themeName);
+                    return isMaterialBased();
                 },
                 options: {
-                    useDefaultToolbarButtons: true,
                     useFlatToolbarButtons: true,
+                }
+            },
+            {
+                device: function() {
+                    return isMaterial();
+                },
+                options: {
+                    useDefaultToolbarButtons: true,
                     showCloseButton: false
                 }
-            }
+            },
         ]);
     },
 
@@ -534,6 +540,22 @@ const Popup = Overlay.inherit({
         return itemType.toLowerCase() === 'done' ? 'OK' : camelize(itemType, true);
     },
 
+    _getToolbarButtonStylingMode: function(shortcut) {
+        if(isFluent()) {
+            return shortcut === 'done' ? BUTTON_CONTAINED_MODE : BUTTON_OUTLINED_MODE;
+        }
+
+        return this.option('useFlatToolbarButtons') ? BUTTON_TEXT_MODE : BUTTON_CONTAINED_MODE;
+    },
+
+    _getToolbarButtonType: function(shortcut) {
+        if((isFluent() && shortcut === 'done') || this.option('useDefaultToolbarButtons')) {
+            return BUTTON_DEFAULT_TYPE;
+        }
+
+        return BUTTON_NORMAL_TYPE;
+    },
+
     _getToolbarItemByAlias: function(data) {
         const that = this;
         const itemType = data.shortcut;
@@ -546,8 +568,8 @@ const Popup = Overlay.inherit({
             text: messageLocalization.format(this._getLocalizationKey(itemType)),
             onClick: this._createToolbarItemAction(data.onClick),
             integrationOptions: {},
-            type: that.option('useDefaultToolbarButtons') ? BUTTON_DEFAULT_TYPE : BUTTON_NORMAL_TYPE,
-            stylingMode: that.option('useFlatToolbarButtons') ? BUTTON_TEXT_MODE : BUTTON_CONTAINED_MODE
+            type: this._getToolbarButtonType(itemType),
+            stylingMode: this._getToolbarButtonStylingMode(itemType),
         }, data.options || {});
 
         const itemClass = POPUP_CLASS + '-' + itemType;

packages/devextreme/js/ui/tab_panel.d.ts

@@ -189,7 +189,7 @@ export interface dxTabPanelOptions<
     itemTitleTemplate?: template | ((itemData: TItem, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
     /**
      * @docid
-     * @default 'start' &for(Generic)
+     * @default 'start'
      * @default 'top' &for(Material)
      * @default 'top' &for(Fluent)
      * @public
@@ -253,8 +253,7 @@ export interface dxTabPanelOptions<
     showNavButtons?: boolean;
     /**
      * @docid
-     * @default 'primary' &for(Generic)
-     * @default 'primary' &for(Material)
+     * @default 'primary'
      * @default 'secondary' &for(Fluent)
      * @public
      */

packages/devextreme/js/ui/tab_panel.js

@@ -11,7 +11,7 @@ import { getImageContainer } from '../core/utils/icon';
 import { getPublicElement } from '../core/element';
 import { isPlainObject, isDefined } from '../core/utils/type';
 import { BindableTemplate } from '../core/templates/bindable_template';
-import { isMaterial, isFluent, current as currentTheme } from './themes';
+import { isMaterialBased, isFluent, current as currentTheme } from './themes';
 
 // STYLE tabPanel
 
@@ -123,13 +123,12 @@ const TabPanel = MultiView.inherit({
                     return isFluent(themeName);
                 },
                 options: {
-                    iconPosition: ICON_POSITION.top,
                     stylingMode: STYLING_MODE.secondary,
                 }
             },
             {
                 device() {
-                    return isMaterial(themeName);
+                    return isMaterialBased(themeName);
                 },
                 options: {
                     iconPosition: ICON_POSITION.top,

packages/devextreme/js/ui/tabs.d.ts

@@ -144,7 +144,7 @@ export interface dxTabsBaseOptions<
     hoverStateEnabled?: boolean;
     /**
      * @docid dxTabsOptions.iconPosition
-     * @default 'start' &for(Generic)
+     * @default 'start'
      * @default 'top' &for(Material)
      * @default 'top' &for(Fluent)
      * @public
@@ -197,8 +197,7 @@ export interface dxTabsBaseOptions<
     showNavButtons?: boolean;
     /**
      * @docid dxTabsOptions.stylingMode
-     * @default 'primary' &for(Generic)
-     * @default 'primary' &for(Material)
+     * @default 'primary'
      * @default 'secondary' &for(Fluent)
      * @public
      */

packages/devextreme/js/ui/toast.d.ts

@@ -122,6 +122,7 @@ export interface dxToastOptions extends dxOverlayOptions<dxToast> {
      * @docid
      * @default 2000
      * @default 4000 &for(Material)
+     * @default 4000 &for(Fluent)
      * @public
      */
     displayTime?: number;
@@ -142,6 +143,7 @@ export interface dxToastOptions extends dxOverlayOptions<dxToast> {
     /**
      * @docid
      * @default 568 &for(Material)
+     * @default 568 &for(Fluent)
      * @public
      */
     maxWidth?: number | string | (() => number | string);
@@ -154,6 +156,7 @@ export interface dxToastOptions extends dxOverlayOptions<dxToast> {
     /**
      * @docid
      * @default 344 &for(Material)
+     * @default 344 &for(Fluent)
      * @public
      */
     minWidth?: number | string | (() => number | string);

packages/devextreme/js/viz/core/base_widget.d.ts

@@ -520,6 +520,7 @@ export interface BaseWidgetTooltip {
      * @docid BaseWidgetOptions.tooltip.cornerRadius
      * @default 0
      * @default 4 &for(Material)
+     * @default 4 &for(Fluent)
      * @public
      */
     cornerRadius?: number;
@@ -699,6 +700,7 @@ export interface BaseWidgetAnnotationConfig {
        * @docid
        * @default 0
        * @default 4 &for(Material)
+       * @default 4 &for(Fluent)
        */
       cornerRadius?: number;
       /**

packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js

@@ -629,7 +629,6 @@ testComponentDefaults(Lookup,
     }
 );
 
-
 testComponentDefaults(Popup,
     {},
     { focusStateEnabled: true },
@@ -720,6 +719,36 @@ testComponentDefaults(Popup,
     {
         preventScrollEvents: false,
         enableBodyScroll: true,
+        showCloseButton: true,
+    }
+);
+
+testComponentDefaults(Popup,
+    {},
+    {
+        useDefaultToolbarButtons: true,
+        showCloseButton: false,
+    },
+    function() {
+        this.origIsMaterial = themes.isMaterial;
+        themes.isMaterial = function() { return true; };
+    },
+    function() {
+        themes.isMaterial = this.origIsMaterial;
+    }
+);
+
+testComponentDefaults(Popup,
+    {},
+    {
+        useFlatToolbarButtons: true,
+    },
+    function() {
+        this.origIsMaterialBased = themes.isMaterialBased;
+        themes.isMaterialBased = function() { return true; };
+    },
+    function() {
+        themes.isMaterialBased = this.origIsMaterialBased;
     }
 );
 
@@ -1173,6 +1202,34 @@ testComponentDefaults(TabPanel,
     }
 );
 
+testComponentDefaults(TabPanel,
+    { },
+    {
+        iconPosition: 'top',
+    },
+    function() {
+        this.origIsMaterialBased = themes.isMaterialBased;
+        themes.isMaterialBased = function() { return true; };
+    },
+    function() {
+        themes.isMaterialBased = this.origIsMaterialBased;
+    }
+);
+
+testComponentDefaults(TabPanel,
+    { },
+    {
+        stylingMode: 'secondary',
+    },
+    function() {
+        this.origIsFluent = themes.isFluent;
+        themes.isFluent = function() { return true; };
+    },
+    function() {
+        themes.isFluent = this.origIsFluent;
+    }
+);
+
 testComponentDefaults(LoadIndicator,
     {},
     {
@@ -1355,7 +1412,9 @@ testComponentDefaults(Tabs,
     { },
     {
         useInkRipple: true,
-        selectOnFocus: false
+        selectOnFocus: false,
+        iconPosition: 'top',
+        stylingMode: 'primary',
     },
     function() {
         this.origIsMaterial = themes.isMaterial;
@@ -1366,11 +1425,27 @@ testComponentDefaults(Tabs,
     }
 );
 
+testComponentDefaults(Tabs,
+    { },
+    {
+        iconPosition: 'top',
+        stylingMode: 'secondary',
+    },
+    function() {
+        this.origIsFluent = themes.isFluent;
+        themes.isFluent = function() { return true; };
+    },
+    function() {
+        themes.isFluent = this.origIsFluent;
+    }
+);
+
 testComponentDefaults(Tabs,
     {},
     {
         showNavButtons: true,
-        selectOnFocus: true
+        selectOnFocus: true,
+        iconPosition: 'start'
     },
     function() {
         this._origDevice = devices.real();