Skip to content

Commit

Permalink
Tabs: Add stylingMode option
Browse files Browse the repository at this point in the history
  • Loading branch information
marker-dao authored Sep 7, 2023
1 parent b6a443a commit d060ee3
Show file tree
Hide file tree
Showing 12 changed files with 106 additions and 4 deletions.
1 change: 1 addition & 0 deletions packages/devextreme-angular/src/common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export {
StringLengthRule,
SubmenuShowMode,
TabsIconPosition,
TabsStyle,
TextBoxPredefinedButton,
TextEditorButton,
TextEditorButtonLocation,
Expand Down
21 changes: 21 additions & 0 deletions packages/devextreme-angular/src/ui/tabs/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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' }
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme-react/src/common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export {
StringLengthRule,
SubmenuShowMode,
TabsIconPosition,
TabsStyle,
TextBoxPredefinedButton,
TextEditorButton,
TextEditorButtonLocation,
Expand Down
6 changes: 6 additions & 0 deletions packages/devextreme-react/src/tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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([
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme-vue/src/common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export {
StringLengthRule,
SubmenuShowMode,
TabsIconPosition,
TabsStyle,
TextBoxPredefinedButton,
TextEditorButton,
TextEditorButtonLocation,
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme-vue/src/tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ type AccessibleOptions = Pick<Properties,
"selectedItems" |
"selectionMode" |
"showNavButtons" |
"stylingMode" |
"tabIndex" |
"visible" |
"width"
Expand Down Expand Up @@ -82,6 +83,7 @@ const DxTabs = createComponent({
selectedItems: Array,
selectionMode: String,
showNavButtons: Boolean,
stylingMode: String,
tabIndex: Number,
visible: Boolean,
width: [Function, Number, String]
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 6 additions & 0 deletions packages/devextreme/js/common.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 8 additions & 0 deletions packages/devextreme/js/ui/tabs.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
Orientation,
SingleOrMultiple,
TabsIconPosition,
TabsStyle,
} from '../common';

export type ItemLike = string | Item | any;
Expand All @@ -26,6 +27,7 @@ export {
SingleOrMultiple,
Orientation,
TabsIconPosition,
TabsStyle,
};

/**
Expand Down Expand Up @@ -191,6 +193,12 @@ export interface dxTabsBaseOptions<
* @public
*/
showNavButtons?: boolean;
/**
* @docid dxTabsOptions.stylingMode
* @default 'primary'
* @public
*/
stylingMode?: TabsStyle;
}

/**
Expand Down
34 changes: 30 additions & 4 deletions packages/devextreme/js/ui/tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -85,6 +90,11 @@ const ICON_POSITION = {
start: 'start',
};

const STYLING_MODE = {
primary: 'primary',
secondary: 'secondary',
};


const Tabs = CollectionWidget.inherit({

Expand All @@ -99,6 +109,7 @@ const Tabs = CollectionWidget.inherit({
selectionMode: 'single',
orientation: ORIENTATION.horizontal,
iconPosition: ICON_POSITION.start,
stylingMode: STYLING_MODE.primary,

/**
* @name dxTabsOptions.activeStateEnabled
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -538,7 +552,7 @@ const Tabs = CollectionWidget.inherit({
this._toggleTabsHorizontalClass(!isVertical);
},

_getTabIconPositionClass() {
_getTabsIconPositionClass() {
const position = this.option('iconPosition');

switch(position) {
Expand All @@ -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);
},
Expand Down Expand Up @@ -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':
Expand Down Expand Up @@ -633,6 +655,10 @@ const Tabs = CollectionWidget.inherit({
this._toggleIconPositionClass();
break;
}
case 'stylingMode': {
this._toggleStylingModeClass(args.value);
break;
}
default:
this.callBase(args);
}
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/ui/tabs_types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export {
SingleOrMultiple,
Orientation,
TabsIconPosition,
TabsStyle,
ContentReadyEvent,
DisposingEvent,
InitializedEvent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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', () => {
Expand Down
5 changes: 5 additions & 0 deletions packages/devextreme/ts/dx.all.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -25747,6 +25748,10 @@ declare module DevExpress.ui {
* [descr:dxTabsOptions.showNavButtons]
*/
showNavButtons?: boolean;
/**
* [descr:dxTabsOptions.stylingMode]
*/
stylingMode?: DevExpress.common.TabsStyle;
}
/**
* @deprecated Use Item instead
Expand Down

0 comments on commit d060ee3

Please sign in to comment.