Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs: Add stylingMode option #25488

Merged
merged 34 commits into from
Sep 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
fe9a832
Tabs: icon position
marker-dao Aug 22, 2023
b2893d0
feat(tabs): Update TS
marker-dao Aug 22, 2023
72c307f
fix(d.ts): Rename type
marker-dao Aug 23, 2023
33e2a69
fix(angular): Generate
marker-dao Aug 23, 2023
45731c0
fix(d.ts): Update d.ts
marker-dao Aug 28, 2023
88294dc
fix(package-lock): Update sha512
marker-dao Aug 30, 2023
41f25f2
fix(package-lock): Update sha512
marker-dao Aug 30, 2023
222afb2
feat(tabs): Update TS
marker-dao Aug 22, 2023
ebc70b7
feat(tabs): Update etalons
marker-dao Aug 23, 2023
d7b2024
fix(etalons): Update etalon && Add new etalons
marker-dao Aug 23, 2023
29c66e6
fix(d.ts): Update d.ts
marker-dao Aug 30, 2023
40df212
rebase from TabPanel: Add iconPosition option
marker-dao Sep 4, 2023
ff0e7af
feat(tabs): Update TS
marker-dao Aug 22, 2023
8f588d7
fix(d.ts): Rename type
marker-dao Aug 23, 2023
910bee8
feat(d.ts): Update TS
marker-dao Aug 22, 2023
bc1b2a7
fix(tabPanel): Update TS
marker-dao Aug 23, 2023
66aea7d
fix(d.ts): Rename type
marker-dao Aug 29, 2023
dc2d19a
regenerate-all
marker-dao Aug 30, 2023
112e16f
feat(tabs): Add icon position
marker-dao Aug 23, 2023
d038069
revert(tabs: styles): Revert paddings
marker-dao Aug 24, 2023
557427d
fix(d.ts): Update d.ts
marker-dao Aug 30, 2023
18ff775
REFENERATE ALL
marker-dao Sep 4, 2023
207d196
feat(tabs): Update TS
marker-dao Aug 22, 2023
8b54bb0
fix(d.ts): Rename type
marker-dao Aug 23, 2023
09c783a
feat(tabs): Add icon position
marker-dao Aug 23, 2023
c1fafb8
stash
marker-dao Aug 23, 2023
451cf1b
feat(tabs): Add icon position
marker-dao Aug 23, 2023
636b68e
Tabs: Add stylingMode option
marker-dao Aug 31, 2023
38e11c9
feat(tabs: QUnit): Add tests for stilingMode option and classes
marker-dao Aug 31, 2023
6470bba
feat(d.ts): Update d.ts
marker-dao Aug 31, 2023
cda7f39
feat(regenerate-all)
marker-dao Aug 31, 2023
6d5b3d9
fix(tabs): Fix paddings
marker-dao Sep 5, 2023
aeafbb1
fix(tabs: QUnit): Add tests
marker-dao Sep 5, 2023
7dab714
fix(d.ts): Rename type
marker-dao Sep 7, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
}


/**
EugeniyKiyashko marked this conversation as resolved.
Show resolved Hide resolved
* [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);
EugeniyKiyashko marked this conversation as resolved.
Show resolved Hide resolved
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);
EugeniyKiyashko marked this conversation as resolved.
Show resolved Hide resolved
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
Loading