From 2cec6f84d84c7586066bcee8e0dbb8da7628e97e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <mark_nikolsky@outlook.com>
Date: Fri, 8 Sep 2023 13:35:02 +0400
Subject: [PATCH] TabPanel: Add stylingMode option

---
 .../src/ui/nested/base/tab-panel-options.ts   |  7 +++++++
 .../src/ui/nested/tab-panel-options.ts        |  1 +
 .../src/ui/tab-panel/index.ts                 | 21 +++++++++++++++++++
 packages/devextreme-react/src/form.ts         |  1 +
 packages/devextreme-react/src/tab-panel.ts    |  6 ++++++
 packages/devextreme-vue/src/form.ts           |  2 ++
 packages/devextreme-vue/src/tab-panel.ts      |  3 +++
 packages/devextreme/js/ui/tab_panel.d.ts      |  8 +++++++
 packages/devextreme/js/ui/tab_panel.js        | 15 +++++++++++++
 .../devextreme/js/ui/tab_panel_types.d.ts     |  1 +
 .../DevExpress.ui.widgets/tabPanel.tests.js   |  8 +++++++
 packages/devextreme/ts/dx.all.d.ts            |  4 ++++
 12 files changed, 77 insertions(+)

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
index f1a49b12a36a..6af6e795b1d4 100644
--- 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
index b169b73230d9..ad901b19326e 100644
--- 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
index 959ae8217502..49293b932fe0 100644
--- 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
index 931818f4a9ef..f05bc1241255 100644
--- 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
index 8a3e4e99e946..284496a1b325 100644
--- 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
index de172c4e4f25..7ac4b36df056 100644
--- 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
index 3a437881906b..3253e69ed8d7 100644
--- 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
index 5713c44fc294..a4e8f80a0b3c 100644
--- 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
index ccb5dc5cc814..d48beb98e494 100644
--- 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
index 4fe767b0dba0..4aee9203d20a 100644
--- 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
index 1393198ee2be..2efdaf825e18 100644
--- 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
index 760ffe97af5a..85b908a87ad2 100644
--- 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]
      */