TabPanel: Add stylingMode option

DevExpress · Sep 8, 2023 · 2cec6f8 · 2cec6f8
1 parent a9a5dbf
commit 2cec6f8
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 0 deletions.
diff --git a/packages/devextreme-angular/src/ui/nested/base/tab-panel-options.ts b/packages/devextreme-angular/src/ui/nested/base/tab-panel-options.ts
@@ -273,6 +273,13 @@ export abstract class DxoTabPanelOptions extends NestedOption {
         this._setOption('showNavButtons', value);
     }
 
+    get stylingMode(): string {
+        return this._getOption('stylingMode');
+    }
+    set stylingMode(value: string) {
+        this._setOption('stylingMode', value);
+    }
+
     get swipeEnabled(): boolean {
         return this._getOption('swipeEnabled');
     }

diff --git a/packages/devextreme-angular/src/ui/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/nested/tab-panel-options.ts
@@ -70,6 +70,7 @@ import { DxiItemComponent } from './item-dxi';
         'selectedIndex',
         'selectedItem',
         'showNavButtons',
+        'stylingMode',
         'swipeEnabled',
         'tabIndex',
         'tabsPosition',

diff --git a/packages/devextreme-angular/src/ui/tab-panel/index.ts b/packages/devextreme-angular/src/ui/tab-panel/index.ts
@@ -390,6 +390,19 @@ export class DxTabPanelComponent extends DxComponent implements OnDestroy, OnCha
     }
 
 
+    /**
+     * [descr:dxTabPanelOptions.stylingMode]
+    
+     */
+    @Input()
+    get stylingMode(): string {
+        return this._getOption('stylingMode');
+    }
+    set stylingMode(value: string) {
+        this._setOption('stylingMode', value);
+    }
+
+
     /**
      * [descr:dxTabPanelOptions.swipeEnabled]
     
@@ -725,6 +738,13 @@ export class DxTabPanelComponent extends DxComponent implements OnDestroy, OnCha
      */
     @Output() showNavButtonsChange: EventEmitter<boolean>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() stylingModeChange: EventEmitter<string>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -821,6 +841,7 @@ export class DxTabPanelComponent extends DxComponent implements OnDestroy, OnCha
             { emit: 'selectedIndexChange' },
             { emit: 'selectedItemChange' },
             { emit: 'showNavButtonsChange' },
+            { emit: 'stylingModeChange' },
             { emit: 'swipeEnabledChange' },
             { emit: 'tabIndexChange' },
             { emit: 'tabsPositionChange' },

diff --git a/packages/devextreme-react/src/form.ts b/packages/devextreme-react/src/form.ts
@@ -707,6 +707,7 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   selectedIndex?: number;
   selectedItem?: any;
   showNavButtons?: boolean;
+  stylingMode?: "primary" | "secondary";
   swipeEnabled?: boolean;
   tabIndex?: number;
   tabsPosition?: "bottom" | "left" | "right" | "top";

diff --git a/packages/devextreme-react/src/tab-panel.ts b/packages/devextreme-react/src/tab-panel.ts
@@ -123,6 +123,12 @@ class TabPanel<TItem = any, TKey = any> extends BaseComponent<React.PropsWithChi
   scrollingEnabled: PropTypes.bool,
   selectedIndex: PropTypes.number,
   showNavButtons: PropTypes.bool,
+  stylingMode: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.oneOf([
+      "primary",
+      "secondary"])
+  ]),
   swipeEnabled: PropTypes.bool,
   tabIndex: PropTypes.number,
   tabsPosition: PropTypes.oneOfType([

diff --git a/packages/devextreme-vue/src/form.ts b/packages/devextreme-vue/src/form.ts
@@ -782,6 +782,7 @@ const DxTabPanelOptions = createConfigurationComponent({
     "update:selectedIndex": null,
     "update:selectedItem": null,
     "update:showNavButtons": null,
+    "update:stylingMode": null,
     "update:swipeEnabled": null,
     "update:tabIndex": null,
     "update:tabsPosition": null,
@@ -827,6 +828,7 @@ const DxTabPanelOptions = createConfigurationComponent({
     selectedIndex: Number,
     selectedItem: {},
     showNavButtons: Boolean,
+    stylingMode: String,
     swipeEnabled: Boolean,
     tabIndex: Number,
     tabsPosition: String,

diff --git a/packages/devextreme-vue/src/tab-panel.ts b/packages/devextreme-vue/src/tab-panel.ts
@@ -41,6 +41,7 @@ type AccessibleOptions = Pick<Properties,
   "selectedIndex" |
   "selectedItem" |
   "showNavButtons" |
+  "stylingMode" |
   "swipeEnabled" |
   "tabIndex" |
   "tabsPosition" |
@@ -90,6 +91,7 @@ const DxTabPanel = createComponent({
     selectedIndex: Number,
     selectedItem: {},
     showNavButtons: Boolean,
+    stylingMode: String,
     swipeEnabled: Boolean,
     tabIndex: Number,
     tabsPosition: String,
@@ -136,6 +138,7 @@ const DxTabPanel = createComponent({
     "update:selectedIndex": null,
     "update:selectedItem": null,
     "update:showNavButtons": null,
+    "update:stylingMode": null,
     "update:swipeEnabled": null,
     "update:tabIndex": null,
     "update:tabsPosition": null,

diff --git a/packages/devextreme/js/ui/tab_panel.d.ts b/packages/devextreme/js/ui/tab_panel.d.ts
@@ -19,6 +19,7 @@ import {
 import {
     Position,
     TabsIconPosition,
+    TabsStyle,
 } from '../common';
 
 import CollectionWidget, {
@@ -33,6 +34,7 @@ import {
 export {
     Position,
     TabsIconPosition,
+    TabsStyle,
 };
 
 type ItemLike = string | Item | any;
@@ -247,6 +249,12 @@ export interface dxTabPanelOptions<
      * @public
      */
     showNavButtons?: boolean;
+    /**
+     * @docid
+     * @default 'primary'
+     * @public
+     */
+    stylingMode?: TabsStyle;
     /**
      * @docid
      * @default false &for(non-touch_devices)

diff --git a/packages/devextreme/js/ui/tab_panel.js b/packages/devextreme/js/ui/tab_panel.js
@@ -47,6 +47,11 @@ const ICON_POSITION = {
     start: 'start',
 };
 
+const STYLING_MODE = {
+    primary: 'primary',
+    secondary: 'secondary',
+};
+
 const TabPanel = MultiView.inherit({
 
     _getDefaultOptions: function() {
@@ -67,6 +72,8 @@ const TabPanel = MultiView.inherit({
 
             iconPosition: ICON_POSITION.start,
 
+            stylingMode: STYLING_MODE.primary,
+
             onTitleClick: null,
 
             onTitleHold: null,
@@ -247,6 +254,7 @@ const TabPanel = MultiView.inherit({
             }).bind(this),
             orientation: this._getTabsOrientation(),
             iconPosition: this.option('iconPosition'),
+            stylingMode: this.option('stylingMode'),
             _itemAttributes: {
                 class: TABPANEL_TABS_ITEM_CLASS,
             },
@@ -303,6 +311,10 @@ const TabPanel = MultiView.inherit({
         this._tabs.option({ iconPosition });
     },
 
+    _updateTabsStylingMode(stylingMode) {
+        this._tabs.option({ stylingMode });
+    },
+
     _toggleWrapperFocusedClass(isFocused) {
         this._toggleFocusClass(isFocused, this._$wrapper);
     },
@@ -451,6 +463,9 @@ const TabPanel = MultiView.inherit({
             case 'iconPosition':
                 this._updateTabsIconPosition(value);
                 break;
+            case 'stylingMode':
+                this._updateTabsStylingMode(value);
+                break;
             default:
                 this.callBase(args);
         }

diff --git a/packages/devextreme/js/ui/tab_panel_types.d.ts b/packages/devextreme/js/ui/tab_panel_types.d.ts
@@ -1,6 +1,7 @@
 export {
   Position,
   TabsIconPosition,
+  TabsStyle,
   ContentReadyEvent,
   DisposingEvent,
   InitializedEvent,

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.tests.js
@@ -204,6 +204,14 @@ QUnit.module('options', {
         assert.strictEqual(this.tabWidgetInstance.option('iconPosition'), 'top', 'option <iconPosition> of nested tabs widget successfully changed');
     });
 
+    QUnit.test('stylingMode option should be passed to tabs correctly', function(assert) {
+        assert.strictEqual(this.tabWidgetInstance.option('stylingMode'), 'primary', 'option <stylingMode> successfully passed to nested tabs widget');
+
+        this.tabPanelInstance.option('stylingMode', 'secondary');
+
+        assert.strictEqual(this.tabWidgetInstance.option('stylingMode'), 'secondary', 'option <stylingMode> of nested tabs widget successfully changed');
+    });
+
     QUnit.test('dataSource option test', function(assert) {
         assert.expect(2);
 

diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
@@ -25574,6 +25574,10 @@ declare module DevExpress.ui {
      * [descr:dxTabPanelOptions.showNavButtons]
      */
     showNavButtons?: boolean;
+    /**
+     * [descr:dxTabPanelOptions.stylingMode]
+     */
+    stylingMode?: DevExpress.common.TabsStyle;
     /**
      * [descr:dxTabPanelOptions.swipeEnabled]
      */