From d060ee30caf2f56d6eeff5258979fc2be5d6644c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <mark_nikolsky@outlook.com>
Date: Thu, 7 Sep 2023 17:47:59 +0400
Subject: [PATCH] Tabs: Add stylingMode option

---
 .../devextreme-angular/src/common/index.ts    |  1 +
 .../devextreme-angular/src/ui/tabs/index.ts   | 21 ++++++++++++
 packages/devextreme-react/src/common/index.ts |  1 +
 packages/devextreme-react/src/tabs.ts         |  6 ++++
 packages/devextreme-vue/src/common/index.ts   |  1 +
 packages/devextreme-vue/src/tabs.ts           |  3 ++
 packages/devextreme/js/common.d.ts            |  6 ++++
 packages/devextreme/js/ui/tabs.d.ts           |  8 +++++
 packages/devextreme/js/ui/tabs.js             | 34 ++++++++++++++++---
 packages/devextreme/js/ui/tabs_types.d.ts     |  1 +
 .../tests/DevExpress.ui.widgets/tabs.tests.js | 23 +++++++++++++
 packages/devextreme/ts/dx.all.d.ts            |  5 +++
 12 files changed, 106 insertions(+), 4 deletions(-)

diff --git a/packages/devextreme-angular/src/common/index.ts b/packages/devextreme-angular/src/common/index.ts
index a839f33156e8..8bf03d75991c 100644
--- a/packages/devextreme-angular/src/common/index.ts
+++ b/packages/devextreme-angular/src/common/index.ts
@@ -51,6 +51,7 @@ export {
     StringLengthRule,
     SubmenuShowMode,
     TabsIconPosition,
+    TabsStyle,
     TextBoxPredefinedButton,
     TextEditorButton,
     TextEditorButtonLocation,
diff --git a/packages/devextreme-angular/src/ui/tabs/index.ts b/packages/devextreme-angular/src/ui/tabs/index.ts
index f84a3359844c..cde6c1367fba 100644
--- a/packages/devextreme-angular/src/ui/tabs/index.ts
+++ b/packages/devextreme-angular/src/ui/tabs/index.ts
@@ -390,6 +390,19 @@ export class DxTabsComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxTabsOptions.stylingMode]
+    
+     */
+    @Input()
+    get stylingMode(): string {
+        return this._getOption('stylingMode');
+    }
+    set stylingMode(value: string) {
+        this._setOption('stylingMode', value);
+    }
+
+
     /**
      * [descr:WidgetOptions.tabIndex]
     
@@ -675,6 +688,13 @@ export class DxTabsComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @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.
@@ -754,6 +774,7 @@ export class DxTabsComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'selectedItemsChange' },
             { emit: 'selectionModeChange' },
             { emit: 'showNavButtonsChange' },
+            { emit: 'stylingModeChange' },
             { emit: 'tabIndexChange' },
             { emit: 'visibleChange' },
             { emit: 'widthChange' }
diff --git a/packages/devextreme-react/src/common/index.ts b/packages/devextreme-react/src/common/index.ts
index bd42a4a4bb97..83397af54a21 100644
--- a/packages/devextreme-react/src/common/index.ts
+++ b/packages/devextreme-react/src/common/index.ts
@@ -51,6 +51,7 @@ export {
     StringLengthRule,
     SubmenuShowMode,
     TabsIconPosition,
+    TabsStyle,
     TextBoxPredefinedButton,
     TextEditorButton,
     TextEditorButtonLocation,
diff --git a/packages/devextreme-react/src/tabs.ts b/packages/devextreme-react/src/tabs.ts
index e336dc5ec20d..776f20395106 100644
--- a/packages/devextreme-react/src/tabs.ts
+++ b/packages/devextreme-react/src/tabs.ts
@@ -129,6 +129,12 @@ class Tabs<TItem = any, TKey = any> extends BaseComponent<React.PropsWithChildre
       "multiple"])
   ]),
   showNavButtons: PropTypes.bool,
+  stylingMode: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.oneOf([
+      "primary",
+      "secondary"])
+  ]),
   tabIndex: PropTypes.number,
   visible: PropTypes.bool,
   width: PropTypes.oneOfType([
diff --git a/packages/devextreme-vue/src/common/index.ts b/packages/devextreme-vue/src/common/index.ts
index bd42a4a4bb97..83397af54a21 100644
--- a/packages/devextreme-vue/src/common/index.ts
+++ b/packages/devextreme-vue/src/common/index.ts
@@ -51,6 +51,7 @@ export {
     StringLengthRule,
     SubmenuShowMode,
     TabsIconPosition,
+    TabsStyle,
     TextBoxPredefinedButton,
     TextEditorButton,
     TextEditorButtonLocation,
diff --git a/packages/devextreme-vue/src/tabs.ts b/packages/devextreme-vue/src/tabs.ts
index 393af3b2a287..8778ab39ead4 100644
--- a/packages/devextreme-vue/src/tabs.ts
+++ b/packages/devextreme-vue/src/tabs.ts
@@ -38,6 +38,7 @@ type AccessibleOptions = Pick<Properties,
   "selectedItems" |
   "selectionMode" |
   "showNavButtons" |
+  "stylingMode" |
   "tabIndex" |
   "visible" |
   "width"
@@ -82,6 +83,7 @@ const DxTabs = createComponent({
     selectedItems: Array,
     selectionMode: String,
     showNavButtons: Boolean,
+    stylingMode: String,
     tabIndex: Number,
     visible: Boolean,
     width: [Function, Number, String]
@@ -123,6 +125,7 @@ const DxTabs = createComponent({
     "update:selectedItems": null,
     "update:selectionMode": null,
     "update:showNavButtons": null,
+    "update:stylingMode": null,
     "update:tabIndex": null,
     "update:visible": null,
     "update:width": null,
diff --git a/packages/devextreme/js/common.d.ts b/packages/devextreme/js/common.d.ts
index 80a9ef21c014..864995683650 100644
--- a/packages/devextreme/js/common.d.ts
+++ b/packages/devextreme/js/common.d.ts
@@ -710,6 +710,12 @@ export type SubmenuShowMode = 'onClick' | 'onHover';
  */
 export type TabsIconPosition = 'top' | 'end' | 'bottom' | 'start';
 
+/**
+ * @public
+ * @namespace DevExpress.common
+ */
+export type TabsStyle = 'primary' | 'secondary';
+
 /**
  * @public
  * @namespace DevExpress.common
diff --git a/packages/devextreme/js/ui/tabs.d.ts b/packages/devextreme/js/ui/tabs.d.ts
index 373f68c20a10..0f3f91b30c33 100644
--- a/packages/devextreme/js/ui/tabs.d.ts
+++ b/packages/devextreme/js/ui/tabs.d.ts
@@ -18,6 +18,7 @@ import {
     Orientation,
     SingleOrMultiple,
     TabsIconPosition,
+    TabsStyle,
 } from '../common';
 
 export type ItemLike = string | Item | any;
@@ -26,6 +27,7 @@ export {
     SingleOrMultiple,
     Orientation,
     TabsIconPosition,
+    TabsStyle,
 };
 
 /**
@@ -191,6 +193,12 @@ export interface dxTabsBaseOptions<
      * @public
      */
     showNavButtons?: boolean;
+    /**
+     * @docid dxTabsOptions.stylingMode
+     * @default 'primary'
+     * @public
+     */
+    stylingMode?: TabsStyle;
 }
 
 /**
diff --git a/packages/devextreme/js/ui/tabs.js b/packages/devextreme/js/ui/tabs.js
index d93503cc8cee..ad8a4c0f708b 100644
--- a/packages/devextreme/js/ui/tabs.js
+++ b/packages/devextreme/js/ui/tabs.js
@@ -57,6 +57,11 @@ const TABS_ICON_POSITION_CLASS = {
     start: 'dx-tabs-icon-position-start',
 };
 
+const TABS_STYLING_MODE_CLASS = {
+    primary: 'dx-tabs-styling-mode-primary',
+    secondary: 'dx-tabs-styling-mode-secondary',
+};
+
 const TABS_ITEM_DATA_KEY = 'dxTabData';
 
 const BUTTON_NEXT_ICON = 'chevronnext';
@@ -85,6 +90,11 @@ const ICON_POSITION = {
     start: 'start',
 };
 
+const STYLING_MODE = {
+    primary: 'primary',
+    secondary: 'secondary',
+};
+
 
 const Tabs = CollectionWidget.inherit({
 
@@ -99,6 +109,7 @@ const Tabs = CollectionWidget.inherit({
             selectionMode: 'single',
             orientation: ORIENTATION.horizontal,
             iconPosition: ICON_POSITION.start,
+            stylingMode: STYLING_MODE.primary,
 
             /**
              * @name dxTabsOptions.activeStateEnabled
@@ -155,12 +166,15 @@ const Tabs = CollectionWidget.inherit({
         ]);
     },
 
-    _init: function() {
+    _init() {
+        const { orientation, stylingMode } = this.option();
+
         this.callBase();
         this.setAria('role', 'tablist');
         this.$element().addClass(TABS_CLASS);
-        this._toggleOrientationClass(this.option('orientation'));
+        this._toggleOrientationClass(orientation);
         this._toggleIconPositionClass();
+        this._toggleStylingModeClass(stylingMode);
         this._renderWrapper();
         this._renderMultiple();
 
@@ -538,7 +552,7 @@ const Tabs = CollectionWidget.inherit({
         this._toggleTabsHorizontalClass(!isVertical);
     },
 
-    _getTabIconPositionClass() {
+    _getTabsIconPositionClass() {
         const position = this.option('iconPosition');
 
         switch(position) {
@@ -559,7 +573,7 @@ const Tabs = CollectionWidget.inherit({
             this.$element().removeClass(TABS_ICON_POSITION_CLASS[key]);
         }
 
-        const newClass = this._getTabIconPositionClass();
+        const newClass = this._getTabsIconPositionClass();
 
         this.$element().addClass(newClass);
     },
@@ -594,6 +608,14 @@ const Tabs = CollectionWidget.inherit({
         this._toggleFocusedDisabledPrevClass(currentIndex, shouldPrevClassBeSetted);
     },
 
+    _toggleStylingModeClass(value) {
+        for(const key in TABS_STYLING_MODE_CLASS) {
+            this.$element().removeClass(TABS_STYLING_MODE_CLASS[key]);
+        }
+
+        this.$element().addClass(TABS_STYLING_MODE_CLASS[value] ?? TABS_STYLING_MODE_CLASS.primary);
+    },
+
     _optionChanged: function(args) {
         switch(args.name) {
             case 'useInkRipple':
@@ -633,6 +655,10 @@ const Tabs = CollectionWidget.inherit({
                 this._toggleIconPositionClass();
                 break;
             }
+            case 'stylingMode': {
+                this._toggleStylingModeClass(args.value);
+                break;
+            }
             default:
                 this.callBase(args);
         }
diff --git a/packages/devextreme/js/ui/tabs_types.d.ts b/packages/devextreme/js/ui/tabs_types.d.ts
index b63c49ae58ad..5e5540da6550 100644
--- a/packages/devextreme/js/ui/tabs_types.d.ts
+++ b/packages/devextreme/js/ui/tabs_types.d.ts
@@ -2,6 +2,7 @@ export {
   SingleOrMultiple,
   Orientation,
   TabsIconPosition,
+  TabsStyle,
   ContentReadyEvent,
   DisposingEvent,
   InitializedEvent,
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js
index 4d188c198104..4ff8f81cc7e1 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js
@@ -48,6 +48,14 @@ const TABS_ICON_POSITION_CLASS = {
     bottom: 'dx-tabs-icon-position-bottom',
     start: 'dx-tabs-icon-position-start',
 };
+const TABS_STYLING_MODE_CLASS = {
+    primary: 'dx-tabs-styling-mode-primary',
+    secondary: 'dx-tabs-styling-mode-secondary',
+};
+const STYLING_MODE = {
+    primary: 'primary',
+    secondary: 'secondary',
+};
 const TABS_WRAPPER_CLASS = 'dx-tabs-wrapper';
 const TABS_NAV_BUTTON_CLASS = 'dx-tabs-nav-button';
 const TABS_NAV_BUTTONS_CLASS = 'dx-tabs-nav-buttons';
@@ -318,6 +326,21 @@ QUnit.module('General', () => {
             assert.ok($element.hasClass(TABS_ICON_POSITION_CLASS[iconPosition]));
         });
     });
+
+    QUnit.test('the tabs element must have a correct styling mode class', function(assert) {
+        const $element = $('#tabs').dxTabs({ items: [1, 2, 3] });
+        const instance = $element.dxTabs('instance');
+
+        assert.strictEqual(instance.option('stylingMode'), STYLING_MODE.primary);
+        assert.strictEqual($element.hasClass(TABS_STYLING_MODE_CLASS.primary), true);
+        assert.strictEqual($element.hasClass(TABS_STYLING_MODE_CLASS.secondary), false);
+
+        instance.option({ stylingMode: 'secondary' });
+
+        assert.strictEqual(instance.option('stylingMode'), STYLING_MODE.secondary);
+        assert.strictEqual($element.hasClass(TABS_STYLING_MODE_CLASS.secondary), true);
+        assert.strictEqual($element.hasClass(TABS_STYLING_MODE_CLASS.primary), false);
+    });
 });
 
 QUnit.module('Tab select action', () => {
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index cbee855e170d..a5a7ee0e1efd 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -1764,6 +1764,7 @@ declare module DevExpress.common {
   };
   export type SubmenuShowMode = 'onClick' | 'onHover';
   export type TabsIconPosition = 'top' | 'end' | 'bottom' | 'start';
+  export type TabsStyle = 'primary' | 'secondary';
   export type TextBoxPredefinedButton = 'clear';
 
   /**
@@ -25747,6 +25748,10 @@ declare module DevExpress.ui {
      * [descr:dxTabsOptions.showNavButtons]
      */
     showNavButtons?: boolean;
+    /**
+     * [descr:dxTabsOptions.stylingMode]
+     */
+    stylingMode?: DevExpress.common.TabsStyle;
   }
   /**
    * @deprecated Use Item instead