diff --git a/.husky/pre-commit b/.husky/pre-commit old mode 100755 new mode 100644 diff --git a/packages/devextreme-angular/metadata/DeprecatedComponentsMetadata.json b/packages/devextreme-angular/metadata/DeprecatedComponentsMetadata.json deleted file mode 100644 index 0fd85dc51724..000000000000 --- a/packages/devextreme-angular/metadata/DeprecatedComponentsMetadata.json +++ /dev/null @@ -1,394 +0,0 @@ -{ - "Widgets": { - "dxPivotGrid": { - "Options": { - "dataSource": { - "ComplexTypes": [ - "PivotGridDataSource" - ] - } - } - } - }, - "ExtraObjects": { - "PivotGridDataSource": { - "Description": "An object that provides access to data for the PivotGrid widget.", - "Module": "ui/pivot_grid/data_source", - "Options": { - "fields": { - "ItemPrimitiveTypes": [ - "any" - ], - "IsCollection": true, - "SingularName": "field", - "Description": "An array of pivot grid fields.", - "Options": { - "allowCrossGroupCalculation": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Specifies whether to allow the predefined summary post-processing functions ('absoluteVariation' and 'percentVariation') and runningTotal to take values of different groups into account." - }, - "allowExpandAll": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Allows an end-user to expand/collapse all header items within a header level." - }, - "allowFiltering": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Allows a user to filter fields by selecting or deselecting values in the popup menu." - }, - "allowSorting": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Allows an end-user to change sorting options." - }, - "allowSortingBySummary": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Allows an end-user to sort columns by summary values." - }, - "area": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Type of the area where the field is located." - }, - "areaIndex": { - "PrimitiveTypes": [ - "number" - ], - "Description": "Index among the other fields displayed within the same area." - }, - "calculateCustomSummary": { - "PrimitiveTypes": [ - "Function" - ], - "IsFunc": true, - "Description": "Allows you to use a custom aggregate function to calculate the summary values. Cannot be used for the XmlaStore store type." - }, - "calculateSummaryValue": { - "PrimitiveTypes": [ - "Function" - ], - "IsFunc": true, - "Description": "Specifies a callback function that allows you to modify summary values after they are calculated." - }, - "caption": { - "PrimitiveTypes": [ - "string" - ], - "Description": "A caption that will be displayed in the pivot grid's field chooser and field panel to identify the field." - }, - "customizeText": { - "PrimitiveTypes": [ - "Function" - ], - "IsFunc": true, - "Description": "Specifies a callback function that returns the text to be displayed in the cells of a field." - }, - "dataField": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Name of the data source field containing data for the pivot grid field." - }, - "dataType": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Specifies a type of field values." - }, - "displayFolder": { - "PrimitiveTypes": [ - "string" - ], - "Description": "The name of the folder in which the field is located." - }, - "expanded": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Indicates whether all header items of the field's header level are expanded." - }, - "filterType": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Specifies whether a user can change the current filter by including (selecting) or excluding (clearing the selection) values. Applies only if allowFiltering is true." - }, - "filterValues": { - "ItemPrimitiveTypes": [ - "any" - ], - "IsCollection": true, - "SingularName": "filterValue", - "Description": "Specifies by which values the field is filtered." - }, - "format": { - "PrimitiveTypes": [ - "format", - "string" - ], - "ComplexTypes": [ - "Format" - ], - "TypeImports": [ - { - "Name": "format", - "Path": "ui/widget/ui.widget" - } - ], - "Description": "Specifies a display format for field values." - }, - "groupIndex": { - "PrimitiveTypes": [ - "number" - ], - "Description": "The index of the field within a group." - }, - "groupInterval": { - "PrimitiveTypes": [ - "number", - "string" - ], - "Description": "Specifies how the values of the current field are combined into groups. Cannot be used for the XmlaStore store type." - }, - "groupName": { - "PrimitiveTypes": [ - "string" - ], - "Description": "The name of the group to which the field belongs." - }, - "headerFilter": { - "Description": "Configures the header filter feature.", - "Options": { - "allowSearch": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Specifies whether searching is enabled in the header filter." - }, - "height": { - "PrimitiveTypes": [ - "number" - ], - "Description": "Specifies the height of the popup menu containing filtering values." - }, - "width": { - "PrimitiveTypes": [ - "number" - ], - "Description": "Specifies the width of the popup menu containing filtering values." - } - } - }, - "isMeasure": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Specifies whether the field should be treated as a Data Field." - }, - "precision": { - "PrimitiveTypes": [ - "number" - ], - "IsDeprecated": true, - "Description": "Use the format.precision option instead." - }, - "runningTotal": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Specifies whether to summarize each next summary value with the previous one by rows or columns." - }, - "selector": { - "PrimitiveTypes": [ - "Function" - ], - "IsFunc": true, - "Description": "Specifies the function that determines how to split data from the data source into ranges for header items. Cannot be used for the XmlaStore store type and along with remote operations." - }, - "showGrandTotals": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Specifies whether or not to display Grand Total values for the field." - }, - "showTotals": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Specifies whether or not to display Total values for the field." - }, - "showValues": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Specifies whether or not to display summary values. Applies only to the fields whose area is \"data\". Inherits the value of showTotals by default." - }, - "sortBy": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Specifies how field data should be sorted. Can be used for the XmlaStore store type only." - }, - "sortBySummaryField": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Sorts the header items of this field by the summary values of another field." - }, - "sortBySummaryPath": { - "ItemPrimitiveTypes": [ - "number", - "string" - ], - "IsCollection": true, - "SingularName": "sortBySummaryPath", - "Description": "The array of field names that specify a path to column/row whose summary field is used for sorting of this field's header items." - }, - "sortingMethod": { - "PrimitiveTypes": [ - "Function" - ], - "IsFunc": true, - "Description": "Specifies how to sort header items." - }, - "sortOrder": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Specifies the sort order of field values." - }, - "summaryDisplayMode": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Specifies the summary post-processing algorithm." - }, - "summaryType": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Specifies how to aggregate field data. Cannot be used for the XmlaStore store type." - }, - "visible": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "A boolean value specifying whether or not the field is visible in the pivot grid and the Field Chooser." - }, - "width": { - "PrimitiveTypes": [ - "number" - ], - "Description": "Specifies the absolute width of the field in the pivot grid." - }, - "wordWrapEnabled": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Specifies whether or not long text in header items should be wrapped." - } - } - }, - "filter": { - "PrimitiveTypes": [ - "any" - ], - "IsFilterExpr": true, - "Description": "Specifies data filtering conditions. Cannot be used for the XmlaStore store type." - }, - "onChanged": { - "PrimitiveTypes": [ - "Function" - ], - "IsFunc": true, - "IsEvent": true, - "Description": "A handler for the changed event." - }, - "onFieldsPrepared": { - "PrimitiveTypes": [ - "Function" - ], - "IsFunc": true, - "IsEvent": true, - "Description": "A handler for the fieldsPrepared event." - }, - "onLoadError": { - "PrimitiveTypes": [ - "Function" - ], - "IsFunc": true, - "IsEvent": true, - "Description": "A handler for the loadError event." - }, - "onLoadingChanged": { - "PrimitiveTypes": [ - "Function" - ], - "IsFunc": true, - "IsEvent": true, - "Description": "A handler for the loadingChanged event." - }, - "remoteOperations": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Specifies whether or not all the operations (filtering, grouping and summary calculation) are performed remotely." - }, - "retrieveFields": { - "PrimitiveTypes": [ - "boolean" - ], - "Description": "Indicates whether or not the automatic field generation from data in the Store is enabled." - }, - "store": { - "PrimitiveTypes": [ - "Store", - "StoreOptions", - "XmlaStore", - "XmlaStoreOptions" - ], - "ItemPrimitiveTypes": [ - "any" - ], - "TypeImports": [ - { - "Name": "Store", - "Path": "data" - }, - { - "Name": "StoreOptions", - "Path": "data" - }, - { - "Name": "default", - "Alias": "XmlaStore", - "Path": "ui/pivot_grid/xmla_store" - }, - { - "Name": "XmlaStoreOptions", - "Path": "ui/pivot_grid/xmla_store" - } - ], - "Description": "Specifies the underlying Store instance used to access data.", - "Options": { - "type": { - "PrimitiveTypes": [ - "string" - ], - "Description": "Specifies the type of the store used to access data." - } - } - } - } - } - } -} \ No newline at end of file diff --git a/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx b/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx index 5534645e169b..d8ea543eab3f 100644 --- a/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx +++ b/packages/devextreme-react/src/core/__tests__/props-updating.test.tsx @@ -673,7 +673,7 @@ describe('cfg-component option control', () => { expect(OptionsManagerModule.scheduleGuards).toBeCalled(); const updatedConfig = { ...config, options: { value: 2 } }; // value changed and options manager set value and remove scheduled guard - optionsManager.update(updatedConfig); + optionsManager.update(updatedConfig, {}); expect((optionsManager as any).setValue).toBeCalled(); jest.runAllTimers(); expect((optionsManager as any).setValue).toHaveBeenCalledTimes(1); diff --git a/packages/devextreme-react/src/core/__tests__/template-manager.test.tsx b/packages/devextreme-react/src/core/__tests__/template-manager.test.tsx index 58cb4844dc28..dba55b27e348 100644 --- a/packages/devextreme-react/src/core/__tests__/template-manager.test.tsx +++ b/packages/devextreme-react/src/core/__tests__/template-manager.test.tsx @@ -3,6 +3,7 @@ import { TemplateManager } from '../template-manager'; import { cleanup, render, act, screen } from '@testing-library/react'; import * as config from '../config'; import * as events from 'devextreme/events'; +import { InitArgument } from '../types'; type TemplateComponentProps = { data?: { text: string, effect?: () => void }; @@ -62,7 +63,7 @@ describe('Template Manager', () => { let createDXTemplates; - const init = (createDXTemplatesFn) => { + const init = ({ createDXTemplates: createDXTemplatesFn }: InitArgument) => { createDXTemplates = createDXTemplatesFn; }; @@ -89,7 +90,7 @@ describe('Template Manager', () => { it('dxtemplate creator generates correct templates', () => { let createDXTemplates; - const init = (createDXTemplatesFn) => { + const init = ({ createDXTemplates: createDXTemplatesFn }: InitArgument) => { createDXTemplates = createDXTemplatesFn; }; @@ -149,7 +150,7 @@ describe('Template Manager', () => { let createDXTemplates; - const init = (createDXTemplatesFn) => { + const init = ({ createDXTemplates: createDXTemplatesFn }: InitArgument) => { createDXTemplates = createDXTemplatesFn; }; @@ -198,7 +199,7 @@ describe('Template Manager', () => { let createDXTemplates; - const init = (createDXTemplatesFn) => { + const init = ({ createDXTemplates: createDXTemplatesFn }: InitArgument) => { createDXTemplates = createDXTemplatesFn; }; @@ -244,9 +245,12 @@ describe('Template Manager', () => { let createDXTemplates, clearInstantiationModels; let emulateWidgetRecreationOnRender = true; - const init = (createDXTemplatesFn, clearInstantiationModelsFn) => { + const init = ({ + createDXTemplates: createDXTemplatesFn, + clearInstantiationModels: clearInstantiationModelsFn + }: InitArgument) => { createDXTemplates = createDXTemplatesFn; - clearInstantiationModels = clearInstantiationModelsFn; + clearInstantiationModels = clearInstantiationModelsFn }; const templateOptions = getTemplateOptions([{ type: 'render', effect: () => { @@ -291,11 +295,17 @@ describe('Template Manager', () => { expect(renderTemplateRendered).toBeTruthy(); }); - it('rerenders for new templateOptions', () => { + it('update callback re-renderers template manager', () => { let createDXTemplates; + let updateTemplates; - const init = (createDXTemplatesFn) => { + + const init = ({ + createDXTemplates: createDXTemplatesFn, + updateTemplates: updateTemplatesFn + }: InitArgument) => { createDXTemplates = createDXTemplatesFn; + updateTemplates = updateTemplatesFn; }; const templateOptions = getTemplateOptions([{ type: 'render' }]); @@ -331,16 +341,22 @@ describe('Template Manager', () => { }, }; - act(() => { dxTemplates = createDXTemplates(newTemplateOptions); }); + let callbackCalled = false; + + act(() => { + dxTemplates = createDXTemplates(newTemplateOptions); + updateTemplates(() => { callbackCalled = true; }); + }); expect(document.querySelector('.render-template-container')?.innerHTML) .toBe('
Render template text
'); + expect(callbackCalled).toBeTruthy(); }); it('replaces templates with matching keys, adds templates with new keys', () => { let createDXTemplates; - const init = (createDXTemplatesFn) => { + const init = ({ createDXTemplates: createDXTemplatesFn }: InitArgument) => { createDXTemplates = createDXTemplatesFn; }; @@ -416,7 +432,7 @@ describe('Template Manager', () => { let createDXTemplates; let removeContainerDuringRender = true; - const init = (createDXTemplatesFn) => { + const init = ({ createDXTemplates: createDXTemplatesFn }: InitArgument) => { createDXTemplates = createDXTemplatesFn; }; diff --git a/packages/devextreme-react/src/core/__tests__/template.test.tsx b/packages/devextreme-react/src/core/__tests__/template.test.tsx index 0b130754515d..dd9d2e6f4e49 100644 --- a/packages/devextreme-react/src/core/__tests__/template.test.tsx +++ b/packages/devextreme-react/src/core/__tests__/template.test.tsx @@ -937,12 +937,12 @@ describe('component/render in nested options', () => { const updatedOptions = Widget.option.mock.calls; - expect(updatedOptions[0][0]).toBe('collection'); - expect(updatedOptions[0][1].length).toBe(2); - expect(updatedOptions[0][1][0].template).toBe('collection[0].template'); - expect(updatedOptions[0][1][1].template).toBe('collection[1].template'); - expect(updatedOptions[1][0]).toBe('integrationOptions'); - expect(Object.keys(updatedOptions[1][1].templates)).toEqual([ + expect(updatedOptions[1][0]).toBe('collection'); + expect(updatedOptions[1][1].length).toBe(2); + expect(updatedOptions[1][1][0].template).toBe('collection[0].template'); + expect(updatedOptions[1][1][1].template).toBe('collection[1].template'); + expect(updatedOptions[0][0]).toBe('integrationOptions'); + expect(Object.keys(updatedOptions[0][1].templates)).toEqual([ 'collection[0].template', 'collection[1].template', ]); @@ -970,9 +970,9 @@ describe('component/render in nested options', () => { const updatedOptions = Widget.option.mock.calls; - expect(updatedOptions[0][0]).toBe('collection'); - expect(updatedOptions[0][1].length).toBe(1); - expect(updatedOptions[0][1][0].template).toBe('collection[0].template'); + expect(updatedOptions[1][0]).toBe('collection'); + expect(updatedOptions[1][1].length).toBe(1); + expect(updatedOptions[1][1][0].template).toBe('collection[0].template'); }); xit('removes deleted tempalates from integrationOptions', () => { diff --git a/packages/devextreme-react/src/core/component-base.ts b/packages/devextreme-react/src/core/component-base.ts index 4bb4468085c5..9052e51690e7 100644 --- a/packages/devextreme-react/src/core/component-base.ts +++ b/packages/devextreme-react/src/core/component-base.ts @@ -12,7 +12,14 @@ import { IConfigNode } from './configuration/config-node'; import { IExpectedChild } from './configuration/react/element'; import { buildConfigTree } from './configuration/react/tree'; import { isIE } from './configuration/utils'; -import { DXRemoveCustomArgs, DXTemplateCreator, UpdateLocker } from './types'; + +import { + DXRemoveCustomArgs, + DXTemplateCreator, + InitArgument, + UpdateLocker, +} from './types'; + import { RemovalLockerContext } from './helpers'; const DX_REMOVE_EVENT = 'dxremove'; @@ -63,6 +70,8 @@ abstract class ComponentBase

extends React.PureComponent private _clearInstantiationModels: (() => void) | undefined; + private _updateTemplates: ((callback: () => void) => void) | undefined; + private _childNodes: Node[] = []; private readonly _optionsManager: OptionsManager; @@ -101,8 +110,10 @@ abstract class ComponentBase

extends React.PureComponent this._updateCssClasses(prevProps, this.props); const config = this._getConfig(); + const templateOptions = this._optionsManager.getTemplateOptions(config); + const dxTemplates = this._createDXTemplates?.(templateOptions) || {}; - this._optionsManager.update(config); + this._optionsManager.update(config, dxTemplates); this._scheduleTemplatesUpdate(); } @@ -169,11 +180,7 @@ abstract class ComponentBase

extends React.PureComponent updateFunc(() => { this.guardsUpdateScheduled = false; - const config = this._getConfig(); - const templateOptions = this._optionsManager.getTemplateOptions(config); - const dxTemplates = this._createDXTemplates?.(templateOptions, () => scheduleGuards()) || {}; - - this._optionsManager.updateTemplates(dxTemplates); + this._updateTemplates?.(() => scheduleGuards()); }); unscheduleGuards(); @@ -242,9 +249,14 @@ abstract class ComponentBase

extends React.PureComponent this.context?.unlock(); } - private _setTemplateManagerHooks(createDXTemplates: DXTemplateCreator, clearInstantiationModels: () => void) { + private _setTemplateManagerHooks({ + createDXTemplates, + clearInstantiationModels, + updateTemplates, + }: InitArgument) { this._createDXTemplates = createDXTemplates; this._clearInstantiationModels = clearInstantiationModels; + this._updateTemplates = updateTemplates; } protected renderChildren(): React.ReactNode { diff --git a/packages/devextreme-react/src/core/options-manager.ts b/packages/devextreme-react/src/core/options-manager.ts index aa5dbccb3a7f..ed714947ed19 100644 --- a/packages/devextreme-react/src/core/options-manager.ts +++ b/packages/devextreme-react/src/core/options-manager.ts @@ -69,7 +69,7 @@ class OptionsManager { return config.templates; } - public update(config: IConfigNode): void { + public update(config: IConfigNode, dxtemplates: DXTemplateCollection): void { const changedOptions: [string, unknown][] = []; const optionChangedHandler = ({ value, fullName }) => { changedOptions.push([fullName, value]); @@ -89,6 +89,15 @@ class OptionsManager { this.resetOption(optionName); }); + if (Object.keys(dxtemplates).length > 0) { + this.setValue( + 'integrationOptions', + { + templates: dxtemplates, + }, + ); + } + Object.keys(changes.options).forEach((key) => { this.setValue(key, changes.options[key]); }); @@ -107,17 +116,6 @@ class OptionsManager { this.instance.endUpdate(); } - public updateTemplates(dxtemplates: DXTemplateCollection): void { - if (Object.keys(dxtemplates).length > 0) { - this.setValue( - 'integrationOptions', - { - templates: dxtemplates, - }, - ); - } - } - public onOptionChanged(e: { name: string; fullName: string; value: unknown }): void { if (this.isUpdating) { return; diff --git a/packages/devextreme-react/src/core/template-manager.tsx b/packages/devextreme-react/src/core/template-manager.tsx index 34e13182ddbd..13769610486b 100644 --- a/packages/devextreme-react/src/core/template-manager.tsx +++ b/packages/devextreme-react/src/core/template-manager.tsx @@ -15,6 +15,7 @@ import { GetRenderFuncFn, DXTemplateCollection, TemplateFunc, + TemplateManagerUpdateContext, } from './types'; import { TemplateWrapper } from './template-wrapper'; @@ -37,9 +38,9 @@ function normalizeProps(props: ITemplateArgs): ITemplateArgs | ITemplateArgs['da export const TemplateManager: FC = ({ init }) => { const [instantiationModels, setInstantiationModels] = useState(new TemplateInstantiationModels()); - const [templateFactories, setTemplateFactories] = useState>({}); - const [componentCallback, setComponentCallback] = useState<() => void>(); + const [updateContext, setUpdateContext] = useState(); const widgetId = useRef(''); + const templateFactories = useRef>({}); const subscribeOnRemoval = useCallback((container: HTMLElement, onRemoved: () => void) => { if (container.nodeType === Node.ELEMENT_NODE) { @@ -121,17 +122,16 @@ export const TemplateManager: FC = ({ init }) => { } } - function getDXTemplates(templateOptions: Record, callback?: () => void): DXTemplateCollection { + function createDXTemplates(templateOptions: Record): DXTemplateCollection { const factories = Object.entries(templateOptions) - .reduce((res, [key, template]) => ( - { - ...res, - [key]: getTemplateFunction(template), - } - ), {}); + .reduce>((res, [key, template]) => ( + { + ...res, + [key]: getTemplateFunction(template), + } + ), {}); - setTemplateFactories(factories); - setComponentCallback(callback); + templateFactories.current = factories; const dxTemplates = Object.keys(factories) .reduce((templates, templateKey) => { @@ -148,14 +148,18 @@ export const TemplateManager: FC = ({ init }) => { setInstantiationModels(new TemplateInstantiationModels()); } - init(getDXTemplates, clearInstantiationModels); + function updateTemplates(onUpdated: () => void): void { + setUpdateContext({ onUpdated }); + } + + init({ createDXTemplates, clearInstantiationModels, updateTemplates }); }, [init, getRenderFunc]); useEffect(() => { - if (componentCallback) { - componentCallback(); + if (updateContext) { + updateContext.onUpdated(); } - }, []); + }, [updateContext]); if (instantiationModels.empty) { return null; @@ -175,7 +179,7 @@ export const TemplateManager: FC = ({ init }) => { return JSX.Element | ReactNode; -export type DXTemplateCreator = (templateOptions: Record, callback?: () => void) => DXTemplateCollection; +export type UpdateTemplateFunc = (onUpdated: () => void) => void; + +export interface InitArgument { + createDXTemplates: DXTemplateCreator; + clearInstantiationModels: () => void; + updateTemplates: UpdateTemplateFunc; +} + +export interface TemplateManagerUpdateContext { + onUpdated: () => void; +} + +export type DXTemplateCreator = (templateOptions: Record) => DXTemplateCollection; export interface TemplateManagerProps { - init: (getDXTemplates: DXTemplateCreator, clearInstantiationModels: () => void) => void; + init: (args: InitArgument) => void; } export interface TemplateInstantiationModel { diff --git a/packages/devextreme-themebuilder/src/modules/themes.ts b/packages/devextreme-themebuilder/src/modules/themes.ts index 6e264248b6d7..e16d9baa49d1 100644 --- a/packages/devextreme-themebuilder/src/modules/themes.ts +++ b/packages/devextreme-themebuilder/src/modules/themes.ts @@ -127,6 +127,18 @@ const themes: Theme[] = [ { themeId: 54, name: 'fluent', colorScheme: 'blue-dark-compact', text: 'Blue Dark Compact', group: 'Fluent Design (Compact)', }, + { + themeId: 55, name: 'fluent', colorScheme: 'saas-light', text: 'SaaS Light', group: 'Fluent Design', + }, + { + themeId: 56, name: 'fluent', colorScheme: 'saas-dark', text: 'SaaS Dark', group: 'Fluent Design', + }, + { + themeId: 57, name: 'fluent', colorScheme: 'saas-light-compact', text: 'SaaS Light Compact', group: 'Fluent Design (Compact)', + }, + { + themeId: 58, name: 'fluent', colorScheme: 'saas-dark-compact', text: 'SaaS Dark Compact', group: 'Fluent Design (Compact)', + }, ]; export default themes; diff --git a/packages/devextreme/artifacts/npm/devextreme-dist/package.json b/packages/devextreme/artifacts/npm/devextreme-dist/package.json deleted file mode 100644 index 92af4b84a0c6..000000000000 --- a/packages/devextreme/artifacts/npm/devextreme-dist/package.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "devextreme-dist", - "version": "23.2.3", - "description": "HTML5 JavaScript Component Suite for Responsive Web Development", - "keywords": [ - "html5", - "controls", - "widgets", - "components", - "jquery", - "knockout", - "angular", - "web", - "ui", - "datagrid", - "pivotgrid", - "scheduler", - "treelist", - "chart" - ], - "homepage": "https://js.devexpress.com/", - "bugs": "https://www.devexpress.com/support/", - "author": "Developer Express Inc.", - "repository": { - "type": "git", - "url": "https://github.com/DevExpress/DevExtreme.git" - } -} diff --git a/packages/devextreme/artifacts/npm/devextreme/package.json b/packages/devextreme/artifacts/npm/devextreme/package.json deleted file mode 100644 index d96094fe6ac9..000000000000 --- a/packages/devextreme/artifacts/npm/devextreme/package.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "name": "devextreme", - "version": "23.2.3", - "description": "HTML5 JavaScript Component Suite for Responsive Web Development", - "keywords": [ - "html5", - "controls", - "widgets", - "components", - "jquery", - "knockout", - "angular", - "web", - "ui", - "datagrid", - "pivotgrid", - "scheduler", - "treelist", - "chart" - ], - "homepage": "https://js.devexpress.com/", - "bugs": "https://www.devexpress.com/support/", - "author": "Developer Express Inc.", - "repository": { - "type": "git", - "url": "https://github.com/DevExpress/DevExtreme.git" - }, - "types": "./bundles/dx.all.d.ts", - "license": "SEE LICENSE IN README.md", - "dependencies": { - "@babel/runtime": "^7.12.1", - "@devextreme/runtime": "3.0.12", - "devexpress-diagram": "2.2.2", - "devexpress-gantt": "4.1.50", - "devextreme-quill": "1.6.2", - "devextreme-showdown": "^1.0.1", - "inferno": "^7.4.9", - "inferno-hydrate": "^7.4.9", - "jszip": "^3.7.1", - "rrule": "^2.7.1", - "turndown": "~7.1.0" - }, - "jest": { - "modulePathIgnorePatterns": [ - "node_modules" - ] - }, - "browserslist": [ - "last 2 versions", - "ios > 9", - "> 1%", - "not dead" - ], - "bin": { - "devextreme-bundler-init": "bin/bundler-init.js", - "devextreme-bundler": "bin/bundler.js" - } -} \ No newline at end of file diff --git a/packages/devextreme/artifacts/npm/devextreme/project.json b/packages/devextreme/artifacts/npm/devextreme/project.json deleted file mode 100644 index e7560e3017f1..000000000000 --- a/packages/devextreme/artifacts/npm/devextreme/project.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "devextreme", - "sourceRoot": "packages/devextreme/artifacts/npm/devextreme", - "projectType": "library", - "implicitDependencies": [ - "devextreme-main" - ], - "targets": { - "build": { - "executor": "nx:run-commands", - "options": { - "command": "echo START BUILDING" - } - } - }, - "tags": [] -} diff --git a/packages/devextreme/build/gulp/styles/style-compiler.js b/packages/devextreme/build/gulp/styles/style-compiler.js index fec9e55d5899..46017d7db21f 100644 --- a/packages/devextreme/build/gulp/styles/style-compiler.js +++ b/packages/devextreme/build/gulp/styles/style-compiler.js @@ -31,6 +31,8 @@ const DEFAULT_DEV_BUNDLE_NAMES = [ 'fluent.blue.light', 'fluent.blue.light.compact', 'fluent.blue.dark', + 'fluent.saas.light', + 'fluent.saas.dark', ]; const getBundleSourcePath = name => `scss/bundles/dx.${name}.scss`; diff --git a/packages/devextreme/build/gulp/styles/theme-options.js b/packages/devextreme/build/gulp/styles/theme-options.js index 6ed0c9286cb8..5e62a5f06563 100644 --- a/packages/devextreme/build/gulp/styles/theme-options.js +++ b/packages/devextreme/build/gulp/styles/theme-options.js @@ -3,7 +3,7 @@ const sizes = ['default', 'compact']; const materialColors = ['blue', 'lime', 'orange', 'purple', 'teal']; const materialModes = ['light', 'dark']; -const fluentColors = ['blue']; +const fluentColors = ['blue', 'saas']; const fluentModes = ['light', 'dark']; const genericColors = ['carmine', 'contrast', 'dark', 'darkmoon', 'darkviolet', 'greenmist', 'light', 'softblue']; diff --git a/packages/devextreme/docker-ci.sh b/packages/devextreme/docker-ci.sh old mode 100755 new mode 100644 diff --git a/packages/devextreme/js/__internal/core/license/license_validation.ts b/packages/devextreme/js/__internal/core/license/license_validation.ts index 47826cf884ed..57d1e7f3c3a8 100644 --- a/packages/devextreme/js/__internal/core/license/license_validation.ts +++ b/packages/devextreme/js/__internal/core/license/license_validation.ts @@ -158,6 +158,10 @@ export function validateLicense(licenseKey: string, version: string = packageVer } } +export function peekValidationPerformed(): boolean { + return validationPerformed; +} + export function setLicenseCheckSkipCondition(value = true): void { /// #DEBUG validationPerformed = value; diff --git a/packages/devextreme/js/__internal/core/license/license_validation_internal.ts b/packages/devextreme/js/__internal/core/license/license_validation_internal.ts index 2e54b28c91a1..4ed78fff0615 100644 --- a/packages/devextreme/js/__internal/core/license/license_validation_internal.ts +++ b/packages/devextreme/js/__internal/core/license/license_validation_internal.ts @@ -7,6 +7,9 @@ export function parseLicenseKey(encodedKey: string | undefined): Token {} // eslint-disable-next-line @typescript-eslint/no-unused-vars export function validateLicense(licenseKey: string, version?: string): void {} +// @ts-expect-error - only for internal usage +export function peekValidationPerformed(): boolean {} + export function setLicenseCheckSkipCondition(): void {} export default { diff --git a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts b/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts index da2a347a008a..908c6f2cb63c 100644 --- a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts +++ b/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts @@ -420,7 +420,7 @@ class SchedulerAppointments extends CollectionWidget { const formatText = this.invoke( 'getTextAndFormatDate', model.appointmentData, - this._currentAppointmentSettings.agendaSettings || model.targetedAppointmentData, + this._currentAppointmentSettings?.agendaSettings || model.targetedAppointmentData, 'TIME', ); diff --git a/packages/devextreme/js/core/component.js b/packages/devextreme/js/core/component.js index c2f3087ce11d..e1d3a6257f8f 100644 --- a/packages/devextreme/js/core/component.js +++ b/packages/devextreme/js/core/component.js @@ -12,7 +12,6 @@ import { PostponedOperations } from './postponed_operations'; import { isFunction, isPlainObject, isDefined } from './utils/type'; import { noop } from './utils/common'; import { getPathParts } from './utils/data'; -import license from '../__internal/core/license/license_validation'; const getEventName = (actionName) => { return actionName.charAt(2).toLowerCase() + actionName.substr(3); @@ -83,8 +82,6 @@ export const Component = Class.inherit({ this._disposingCallbacks = _disposingCallbacks || Callbacks(); this.postponedOperations = new PostponedOperations(); this._createOptions(options); - - license.validateLicense(Config().licenseKey); }, _createOptions(options) { diff --git a/packages/devextreme/js/core/dom_component.js b/packages/devextreme/js/core/dom_component.js index 475d1490aef8..4c4efb6925e7 100644 --- a/packages/devextreme/js/core/dom_component.js +++ b/packages/devextreme/js/core/dom_component.js @@ -14,6 +14,7 @@ import { grep, noop } from './utils/common'; import { isString, isDefined, isFunction } from './utils/type'; import { hasWindow } from '../core/utils/window'; import { resize as resizeEvent, visibility as visibilityEvents } from '../events/short'; +import license, { peekValidationPerformed } from '../__internal/core/license/license_validation'; const { abstract } = Component; @@ -48,6 +49,11 @@ const DOMComponent = Component.inherit({ attachInstanceToElement(this._$element, this, this._dispose); this.callBase(options); + const validationAlreadyPerformed = peekValidationPerformed(); + license.validateLicense(config().licenseKey); + if(!validationAlreadyPerformed && peekValidationPerformed()) { + config({ licenseKey: '' }); + } }, _createElement(element) { diff --git a/packages/devextreme/js/core/utils/error.js b/packages/devextreme/js/core/utils/error.js index 5c4747d83cdf..7759cbcce27d 100644 --- a/packages/devextreme/js/core/utils/error.js +++ b/packages/devextreme/js/core/utils/error.js @@ -4,7 +4,7 @@ import { logger } from './console'; import { format } from './string'; import { version } from '../version'; -const ERROR_URL = 'http://js.devexpress.com/error/' + version.split('.').slice(0, 2).join('_') + '/'; +const ERROR_URL = 'https://js.devexpress.com/error/' + version.split('.').slice(0, 2).join('_') + '/'; export default function(baseErrors, errors) { diff --git a/packages/devextreme/js/ui/tab_panel.js b/packages/devextreme/js/ui/tab_panel.js index ef039f93f062..ab317925a039 100644 --- a/packages/devextreme/js/ui/tab_panel.js +++ b/packages/devextreme/js/ui/tab_panel.js @@ -182,12 +182,10 @@ const TabPanel = MultiView.inherit({ $tabTextSpan.append(domAdapter.createTextNode(title)); - if(isFluent()) { - const $tabTextSpanPseudo = $('').addClass(TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS); + const $tabTextSpanPseudo = $('').addClass(TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS); - $tabTextSpanPseudo.append(domAdapter.createTextNode(title)); - $tabTextSpanPseudo.appendTo($tabTextSpan); - } + $tabTextSpanPseudo.append(domAdapter.createTextNode(title)); + $tabTextSpanPseudo.appendTo($tabTextSpan); $tabTextSpan.appendTo($container); } diff --git a/packages/devextreme/js/ui/tabs.js b/packages/devextreme/js/ui/tabs.js index 8ef755ffb4a1..8fa094254390 100644 --- a/packages/devextreme/js/ui/tabs.js +++ b/packages/devextreme/js/ui/tabs.js @@ -218,12 +218,10 @@ const Tabs = CollectionWidget.inherit({ $tabTextSpan.text(text); - if(isFluent()) { - const $tabTextSpanPseudo = $('').addClass(TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS); + const $tabTextSpanPseudo = $('').addClass(TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS); - $tabTextSpanPseudo.text(text); - $tabTextSpanPseudo.appendTo($tabTextSpan); - } + $tabTextSpanPseudo.text(text); + $tabTextSpanPseudo.appendTo($tabTextSpan); $tabTextSpan.appendTo($container); } @@ -369,9 +367,9 @@ const Tabs = CollectionWidget.inherit({ itemsWidth.push(getOuterWidth(item, true)); }); - const maxTabWidth = Math.max.apply(null, itemsWidth); + const maxTabItemWidth = Math.max.apply(null, itemsWidth); const requireWidth = elementWidth / $visibleItems.length; - const needStretchItems = maxTabWidth > requireWidth; + const needStretchItems = maxTabItemWidth > requireWidth + 1; return needStretchItems; }, diff --git a/packages/devextreme/playground/themeSelector.js b/packages/devextreme/playground/themeSelector.js index 9c8a0cc8288a..746cada02a8b 100644 --- a/packages/devextreme/playground/themeSelector.js +++ b/packages/devextreme/playground/themeSelector.js @@ -11,6 +11,10 @@ const themeList = [ { theme: 'fluent.blue.light.compact' }, { theme: 'fluent.blue.dark' }, { theme: 'fluent.blue.dark.compact' }, + { theme: 'fluent.saas.light' }, + { theme: 'fluent.saas.light.compact' }, + { theme: 'fluent.saas.dark' }, + { theme: 'fluent.saas.dark.compact' }, ] }, diff --git a/packages/devextreme/scss/widgets/base/_form.scss b/packages/devextreme/scss/widgets/base/_form.scss index 761674e84492..82450e4160f4 100644 --- a/packages/devextreme/scss/widgets/base/_form.scss +++ b/packages/devextreme/scss/widgets/base/_form.scss @@ -19,10 +19,6 @@ .dx-form-group .dx-single-column-item-content > .dx-first-row.dx-col-0.dx-field-item { padding-top: 0; } - - .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item { - padding-top: 10px; - } } .dx-label-h-align { diff --git a/packages/devextreme/scss/widgets/base/_menuBase.scss b/packages/devextreme/scss/widgets/base/_menuBase.scss index 81eaa367b98e..84dc5792b4e9 100644 --- a/packages/devextreme/scss/widgets/base/_menuBase.scss +++ b/packages/devextreme/scss/widgets/base/_menuBase.scss @@ -34,10 +34,6 @@ height: 100%; width: 100%; - &.dx-state-disabled { - opacity: 0.5; - } - .dx-menu-item-content { white-space: nowrap; height: 100%; diff --git a/packages/devextreme/scss/widgets/base/_tabPanel.scss b/packages/devextreme/scss/widgets/base/_tabPanel.scss index eedb081d6387..058bf7a7fd0c 100644 --- a/packages/devextreme/scss/widgets/base/_tabPanel.scss +++ b/packages/devextreme/scss/widgets/base/_tabPanel.scss @@ -16,6 +16,10 @@ } } +.dx-tabpanel-tab { + flex-basis: unset; +} + .dx-tabpanel-tabs-position-right { flex-direction: row-reverse; diff --git a/packages/devextreme/scss/widgets/base/_tabs.scss b/packages/devextreme/scss/widgets/base/_tabs.scss index 1d106fdef07d..3430119a8fb0 100644 --- a/packages/devextreme/scss/widgets/base/_tabs.scss +++ b/packages/devextreme/scss/widgets/base/_tabs.scss @@ -87,8 +87,9 @@ .dx-tab { position: relative; display: inline-flex; - align-items: center; + align-items: stretch; justify-content: center; + flex-basis: 100%; min-width: max-content; cursor: pointer; diff --git a/packages/devextreme/scss/widgets/base/dateRangeBox/_index.scss b/packages/devextreme/scss/widgets/base/dateRangeBox/_index.scss index 3da5592ea755..03da26c7c8b0 100644 --- a/packages/devextreme/scss/widgets/base/dateRangeBox/_index.scss +++ b/packages/devextreme/scss/widgets/base/dateRangeBox/_index.scss @@ -13,6 +13,7 @@ &.dx-editor-outlined { border: 0; box-shadow: none; + background-color: transparent; &.dx-texteditor-with-label, &.dx-texteditor-with-floating-label { @@ -34,6 +35,7 @@ &.dx-editor-underlined { border-bottom: 0; + background-color: transparent; &::before { margin-left: 0; diff --git a/packages/devextreme/scss/widgets/fluent/_colors.scss b/packages/devextreme/scss/widgets/fluent/_colors.scss index ce68962704e0..d5f98a73ecc4 100644 --- a/packages/devextreme/scss/widgets/fluent/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/_colors.scss @@ -1,6 +1,7 @@ @forward "./variables"; @use "./variables" as *; @use "sass:color"; + $color: null !default; $mode: null !default; @@ -24,19 +25,19 @@ $fluent-color-theme-modificator: null !default; $base-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif !default; // stylelint-disable-line value-keyword-case /** -* $name 30. Background color +* $name 30. Page background color * $type color */ $base-typography-bg: null !default; /** -* $name 31. Foreground color +* $name 31. Component background color * $type color */ $base-bg: null !default; /** -* $name 90. Hovered state background color +* $name 90. Hover state background color * $type color */ $base-hover-bg: null !default; @@ -82,9 +83,6 @@ $base-background-disabled: null !default; * $type color */ $base-success: null !default; -$base-success-hover: null !default; -$base-success-active: null !default; -$base-success-selected: null !default; /** * $name 60. Warning color @@ -130,50 +128,72 @@ $scrollview-pulldown-path: null !default; $fluent-color-accent-modificator: "blue" !default; } +@if $color == "saas" { + $fluent-color-accent-modificator: "saas" !default; +} + @if $mode == "light" { $fluent-color-theme-modificator: "light" !default; - $base-accent: rgba(15, 108, 189, 1) !default; // #0f6cbd - $base-accent-hover: darken(desaturate($base-accent, 4.18), 4.71) !default; // #115ea3 - $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 4.65), 9.61) !default; // #0f548c - $base-accent-selected: darken(desaturate($base-accent-active, 2.02), 4.71) !default; // #0E4775 + $base-bg: rgba(255, 255, 255, 1) !default; + + @if $color == "blue" { + $base-hover-bg: darken($base-bg, 3.9) !default; + $base-typography-bg: rgba(250, 250, 250, 1) !default; + + $base-accent: rgba(15, 108, 189, 1) !default; + $base-success: rgba(16, 124, 16, 1) !default; + $base-danger: rgba(209, 52, 56, 1) !default; + $base-text-color: rgba(36, 36, 36, 1) !default; + $base-label-color: lighten($base-text-color, 29.80) !default; + $base-icon-color: lighten($base-text-color, 23.92) !default; + $base-border-color: rgba(224, 224, 224, 1) !default; + $base-border-color-accessible: darken($base-border-color, 49.8) !default; + $base-shadow-color: #000 !default; + } + + @if $color == "saas" { + $base-accent: #5486ff !default; + $base-typography-bg: #FAFBFF !default; + + $base-hover-bg: mix(#FFF, $base-accent, 85%) !default; + + $base-success: #19914B !default; + $base-danger: #DC2828 !default; + $base-text-color: #21293b !default; + $base-label-color: lighten($base-text-color, 19) !default; + $base-icon-color: lighten($base-text-color, 10) !default; + $base-border-color: #e5e8f0 !default; + $base-border-color-accessible: darken($base-border-color, 20) !default; + $base-shadow-color: #3D4A6C !default; + } + + $base-accent-hover: darken(desaturate($base-accent, 4.18), 4.71) !default; + $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 4.65), 9.61) !default; + $base-accent-selected: darken(desaturate($base-accent-active, 2.02), 4.71) !default; + + $base-foreground-disabled: lighten($base-text-color, 60) !default; + + $base-selected-bg: darken($base-hover-bg, 3.92) !default; + $base-active-bg: darken($base-hover-bg, 8.24) !default; + $base-background-disabled: darken($base-hover-bg, 1.96) !default; + + $base-border-color-hover: darken($base-border-color, 9.8) !default; + $base-border-color-focused: darken($base-border-color, 17.65) !default; + + $base-border-color-accessible-hover: darken($base-border-color-accessible, 3.92) !default; + $base-border-color-accessible-focused: darken($base-border-color-accessible-hover, 3.92) !default; + $base-border-color-disabled: $base-border-color !default; + + $base-separator-color: $base-border-color !default; + + $base-inverted-bg: darken($base-bg, 100%) !default; - $base-text-color: rgba(36, 36, 36, 1) !default; // #242424; - $base-label-color: lighten($base-text-color, 29.80) !default; // #707070 - $base-icon-color: lighten($base-text-color, 23.92) !default; // #616161; - $base-foreground-disabled: lighten($base-text-color, 60) !default; // #bdbdbd - - $base-bg: rgba(255, 255, 255, 1) !default; // #FFFFFF - $base-hover-bg: darken($base-bg, 3.9) !default; // #F5F5F5 - $base-selected-bg: darken($base-bg, 7.8) !default; // #EBEBEB - $base-active-bg: darken($base-bg, 12.2) !default; // #E0E0E0 - $base-background-disabled: darken($base-bg, 5.9) !default; // f0f0f0 - - $base-typography-bg: #FAFAFA !default; // #FAFAFA - - $base-border-color: rgba(224, 224, 224, 1) !default; // #e0e0e0 - $base-border-color-hover: darken($base-border-color, 9.8) !default; // #c7c7c7 - $base-border-color-focused: darken($base-border-color, 17.65) !default; // #b3b3b3 - $base-border-color-accessible: darken($base-border-color, 49.8) !default; // #616161 - $base-border-color-accessible-hover: darken($base-border-color-accessible, 3.92) !default; // #575757 - $base-border-color-accessible-focused: darken($base-border-color-accessible-hover, 3.92) !default; // #4d4d4d - $base-border-color-disabled: $base-border-color !default; // e0e0e0 - - $base-separator-color: $base-border-color !default; // #E0E0E0 - - $base-inverted-bg: darken($base-bg, 100%) !default; // #EBF3FC - $base-shadow-color: $base-inverted-bg !default; $base-inverted-text-color: #fff !default; - $base-danger: rgba(209, 52, 56, 1) !default; // #d13438 - $base-danger-hover: darken(desaturate($base-danger, 3.05), 5.10) !default; // #bc2f32 - $base-danger-active: darken(desaturate($base-danger, 3.56), 35.69) !default; // #3f1011 - $base-danger-selected: darken(desaturate($base-danger, 2.78), 22.55) !default; // #751D1F - - $base-success: rgba(16, 124, 16, 1) !default; // #107c10 - $base-success-hover: darken(saturate($base-success, 0.63), 2.75) !default; // #0e700e - $base-success-active: darken(desaturate($base-success, 0.95), 19.22) !default; // #052505 - $base-success-selected: darken(desaturate($base-success, 0.22), 12.16) !default; // #094509 + $base-danger-hover: darken(desaturate($base-danger, 3.05), 5.10) !default; + $base-danger-active: darken(desaturate($base-danger, 3.56), 35.69) !default; + $base-danger-selected: darken(desaturate($base-danger, 2.78), 22.55) !default; $scrollview-pulldown-path: data-uri('images/widgets/fluent/color-schemes/light/pulldown.png') !default; } @@ -181,54 +201,64 @@ $scrollview-pulldown-path: null !default; @if $mode == "dark" { $fluent-color-theme-modificator: "dark" !default; - $base-accent: rgba(71, 158, 245, 1) !default; // #479EF5 - $base-accent-hover: lighten(desaturate($base-accent, 1.67), 5.29) !default; // #62ABF5 - $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 16.30), 10.59) !default; // #2886DE - $base-accent-selected: darken(desaturate(adjust-hue($base-accent, -3), 9.05), 31.57) !default; // #0f548c + @if $color == "blue" { + $base-bg: rgba(41, 41, 41, 1) !default; + $base-accent: rgba(71, 158, 245, 1) !default; + $base-success: #54B054 !default; + $base-danger: rgba(227, 125, 128, 1) !default; + $base-border-color: rgba(97, 97, 97, 1) !default; + + $base-typography-bg: #1F1F1F !default; + } + + @if $color == "saas" { + $base-bg: rgba(30, 40, 50, 1) !default; + $base-accent: #5492F6 !default; + $base-success: #10B230 !default; + $base-danger: #F92F2F !default; + $base-border-color: #414B5F !default; - $base-text-color: rgba(255, 255, 255, 1) !default; // #ffffff; - $base-label-color: darken($base-text-color, 40.00) !default; // #999999 - $base-icon-color: darken($base-text-color, 32.16) !default; // #adadad; - $base-foreground-disabled: darken($base-text-color, 63.9) !default; // #5c5c5c + $base-typography-bg: #141E28 !default; + } - $base-bg: rgba(41, 41, 41, 1) !default; // #292929 - $base-hover-bg: lighten($base-bg, 7.8) !default; // #3D3D3D - $base-selected-bg: lighten($base-bg, 5.9) !default; // #383838 - $base-active-bg: darken($base-bg, 3.9) !default; // #1F1F1F - $base-background-disabled: darken($base-bg, 8.2) !default; // #141414 - - $base-typography-bg: #1F1F1F !default; // #1F1F1F - - $base-border-color: rgba(97, 97, 97, 1) !default; // #616161 - $base-border-color-hover: lighten($base-border-color, 7.84) !default; // #757575 - $base-border-color-focused: lighten($base-border-color, 3.92) !default; // #6b6b6b - $base-border-color-accessible: lighten($base-border-color, 29.8) !default; // #adadad - $base-border-color-accessible-hover: lighten($base-border-color-accessible, 6.27) !default; // #bdbdbd - $base-border-color-accessible-focused: lighten($base-border-color-accessible-hover, 3.92) !default; // #b3b3b3 - $base-border-color-disabled: darken($base-border-color, 12.16) !default; // #424242 - - $base-separator-color: darken($base-border-color, 5.88) !default; // #525252 + $base-accent-hover: lighten(desaturate($base-accent, 1.67), 5.29) !default; + $base-accent-active: darken(desaturate(adjust-hue($base-accent, -1), 16.30), 10.59) !default; + $base-accent-selected: darken(desaturate(adjust-hue($base-accent, -3), 9.05), 31.57) !default; + + $base-text-color: rgba(255, 255, 255, 1) !default; + $base-label-color: darken($base-text-color, 40.00) !default; + $base-icon-color: darken($base-text-color, 32.16) !default; + $base-foreground-disabled: darken($base-text-color, 63.9) !default; + + $base-bg: rgba(41, 41, 41, 1) !default; + $base-hover-bg: lighten($base-bg, 7.8) !default; + $base-selected-bg: lighten($base-bg, 5.9) !default; + $base-active-bg: darken($base-bg, 3.9) !default; + $base-background-disabled: darken($base-bg, 8.2) !default; + + $base-border-color-hover: lighten($base-border-color, 7.84) !default; + $base-border-color-focused: lighten($base-border-color, 3.92) !default; + $base-border-color-accessible: lighten($base-border-color, 29.8) !default; + $base-border-color-accessible-hover: lighten($base-border-color-accessible, 6.27) !default; + $base-border-color-accessible-focused: lighten($base-border-color-accessible-hover, 3.92) !default; + $base-border-color-disabled: darken($base-border-color, 12.16) !default; + + $base-separator-color: darken($base-border-color, 5.88) !default; $base-inverted-bg: lighten($base-bg, 100%) !default; $base-shadow-color: #000 !default; $base-inverted-text-color: #000 !default; - $base-danger: rgba(227, 125, 128, 1) !default; // #e37d80 - $base-danger-hover: lighten(saturate($base-danger, 0.44), 7.45) !default; // #EA9C9E - $base-danger-active: lighten(desaturate(adjust-hue($base-danger, 1.8), 0.9), 28.8) !default; // #FDF6F6 - $base-danger-selected: lighten(saturate(adjust-hue($base-danger, 0.7), 1.3), 14.9); // #F1BBBC - - $base-success: #54B054 !default; // #54B054 - $base-success-hover: lighten(saturate($base-success, 5.4), 22.5) !default; // #9FD89F - $base-success-active: lighten(saturate($base-success, 10.6), 45.3) !default; // #F1FAF1 - $base-success-selected: lighten(saturate($base-success, 5.3), 34.1) !default; // #C9E9C9 + $base-danger-hover: lighten(saturate($base-danger, 0.44), 7.45) !default; + $base-danger-active: lighten(desaturate(adjust-hue($base-danger, 1.8), 0.9), 28.8) !default; + $base-danger-selected: lighten(saturate(adjust-hue($base-danger, 0.7), 1.3), 14.9); $scrollview-pulldown-path: data-uri('images/widgets/fluent/color-schemes/dark/pulldown.png') !default; } /** -* $name 80. Hovered state text color +* $name 80. Hover state text color * $type color */ $base-hover-color: $base-text-color !default; @@ -246,7 +276,7 @@ $base-focus-color: $base-inverted-text-color !default; $base-focus-bg: $base-hover-bg !default; /** -* $name 50. Spin icon color +* $name 50. Arrow icon color * $type color */ $base-spin-icon-color: $base-icon-color !default; diff --git a/packages/devextreme/scss/widgets/fluent/_sizes.scss b/packages/devextreme/scss/widgets/fluent/_sizes.scss index 905ca7e71e87..4ccce55b294f 100644 --- a/packages/devextreme/scss/widgets/fluent/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/_sizes.scss @@ -69,7 +69,7 @@ $fluent-base-border-width: 1px !default; /** -* $name 120. Border radius +* $name 200. Border radius * $type text */ $base-border-radius: $fluent-base-border-radius !default; diff --git a/packages/devextreme/scss/widgets/fluent/accordion/_sizes.scss b/packages/devextreme/scss/widgets/fluent/accordion/_sizes.scss index 312ef3305695..4db1e4c3b875 100644 --- a/packages/devextreme/scss/widgets/fluent/accordion/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/accordion/_sizes.scss @@ -13,7 +13,7 @@ $accordion-title-icon-size: null !default; $accordion-item-border-radius: $fluent-base-border-radius !default; /** -* $name 10. Item opened margin +* $name 10. Item expanded margin * $type text */ $fluent-accordion-item-opened-margin: null !default; diff --git a/packages/devextreme/scss/widgets/fluent/badge/_colors.scss b/packages/devextreme/scss/widgets/fluent/badge/_colors.scss index c7266c331fca..3a47968c58dd 100644 --- a/packages/devextreme/scss/widgets/fluent/badge/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/badge/_colors.scss @@ -5,13 +5,13 @@ // adduse /** -* $name 130. Badge text color +* $name 140. Badge text color * $type color */ $badge-color: null !default; /** -* $name 140. Badge background color +* $name 150. Badge background color * $type color */ $badge-bg: null !default; diff --git a/packages/devextreme/scss/widgets/fluent/button/_colors.scss b/packages/devextreme/scss/widgets/fluent/button/_colors.scss index ccf5a68393e0..6bad73d0c406 100644 --- a/packages/devextreme/scss/widgets/fluent/button/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/button/_colors.scss @@ -17,19 +17,19 @@ $button-shadow-color: null !default; $button-normal-color: $base-text-color !default; /** -* $name 10. Selected item text color +* $name 15. Background color * $type color */ -$button-normal-selected-color: $base-text-color !default; +$button-normal-bg: $base-element-bg !default; /** -* $name 20. Background color +* $name 20. Selected state text color * $type color */ -$button-normal-bg: $base-element-bg !default; +$button-normal-selected-color: $base-text-color !default; /** -* $name 30. Hovered state background color +* $name 30. Hover state background color * $type color */ $button-normal-hover-bg: $base-hover-bg !default; @@ -47,7 +47,7 @@ $button-normal-focused-bg: $base-focus-bg !default; $button-normal-active-bg: $base-active-bg !default; /** -* $name 20. Selected item background color +* $name 25. Selected state background color * $type color */ $button-normal-selected-bg: $base-selected-bg !default; @@ -60,19 +60,19 @@ $button-normal-bg-inverted: null !default; $button-default-color: null !default; /** -* $name 10. Selected item text color +* $name 15. Background color * $type color */ -$button-default-selected-color: null !default; +$button-default-bg: $base-accent !default; /** -* $name 20. Background color +* $name 20. Selected state text color * $type color */ -$button-default-bg: $base-accent !default; +$button-default-selected-color: null !default; /** -* $name 30. Hovered state background color +* $name 30. Hover state background color * $type color */ $button-default-hover-bg: null !default; @@ -90,7 +90,7 @@ $button-default-focused-bg: null !default; $button-default-active-bg: null !default; /** -* $name 20. Selected item background color +* $name 25. Selected state background color * $type color */ $button-default-selected-bg: null !default; @@ -111,19 +111,19 @@ $button-default-text-color: $base-accent !default; $button-danger-color: null !default; /** -* $name 10. Selected item text color +* $name 15. Background color * $type color */ -$button-danger-selected-color: null !default; +$button-danger-bg: $base-danger !default; /** -* $name 20. Background color +* $name 20. Selected state text color * $type color */ -$button-danger-bg: $base-danger !default; +$button-danger-selected-color: null !default; /** -* $name 30. Hovered state background color +* $name 30. Hover state background color * $type color */ $button-danger-hover-bg: $base-danger-hover !default; @@ -141,7 +141,7 @@ $button-danger-focused-bg: $base-danger-hover !default; $button-danger-active-bg: $base-danger-active !default; /** -* $name 20. Selected item background color +* $name 25. Selected state background color * $type color */ $button-danger-selected-bg: $base-danger-selected !default; @@ -163,40 +163,40 @@ $button-danger-outlined-selected-bg: null !default; $button-success-color: null !default; /** -* $name 10. Selected item text color +* $name 15. Background color * $type color */ -$button-success-selected-color: null !default; +$button-success-bg: $base-success !default; /** -* $name 20. Background color +* $name 20. Selected state text color * $type color */ -$button-success-bg: $base-success !default; +$button-success-selected-color: null !default; /** -* $name 30. Hovered state background color +* $name 30. Hover state background color * $type color */ -$button-success-hover-bg: $base-success-hover !default; +$button-success-hover-bg: null !default; /** * $name 40. Focused state background color * $type color */ -$button-success-focused-bg: $base-success-hover !default; +$button-success-focused-bg: null !default; /** * $name 50. Active state background color * $type color */ -$button-success-active-bg: $base-success-active !default; +$button-success-active-bg: null !default; /** -* $name 20. Selected item background color +* $name 25. Selected state background color * $type color */ -$button-success-selected-bg: $base-success-selected !default; +$button-success-selected-bg: null !default; $button-success-outlined-color: $base-success !default; $button-success-outlined-border-color: $base-success !default; @@ -211,35 +211,59 @@ $button-success-outlined-selected-bg: null !default; $button-accent-foreground-color: null !default; @if $mode == "light" { - $button-accent-foreground-color: darken(desaturate(adjust-hue($base-accent, -2), 9.10), 23.53) !default; // #0a2e4a + $button-accent-foreground-color: darken(desaturate(adjust-hue($base-accent, -2), 9.10), 23.53) !default; $button-default-hover-bg: $base-accent-hover !default; $button-default-focused-bg: $base-accent-hover !default; $button-default-active-bg: $base-accent-active !default; $button-default-selected-bg: $base-accent-selected !default; - $button-default-outlined-hover-bg: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default; // #EBF3FC + $button-success-hover-bg: darken(saturate($base-success, 0.63), 2.75) !default; + $button-success-focused-bg: $button-success-hover-bg !default; + $button-success-active-bg: darken(desaturate($base-success, 0.95), 19.22) !default; + $button-success-selected-bg: darken(desaturate($base-success, 0.22), 12.16) !default; + + @if $color == "blue" { + $button-default-outlined-hover-bg: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default; + $button-default-outlined-selected-bg: darken(saturate(adjust-hue($button-default-outlined-hover-bg, -1), 10.40), 5.49) !default; + $button-default-outlined-active-bg: darken(saturate(adjust-hue($button-default-outlined-hover-bg, -1), 17.00), 17.06) !default; + + $button-danger-outlined-hover-bg: lighten(saturate(adjust-hue($base-danger, 1.5), 0.6), 46.7) !default; + $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; + $button-danger-outlined-active-bg: darken(saturate(adjust-hue($button-danger-outlined-hover-bg, 358.9), 2.2), 13.9) !default; + $button-danger-outlined-selected-bg: lighten(desaturate(adjust-hue($button-danger-outlined-active-bg, 359.1), 0.6), 7.1) !default; + + $button-success-outlined-hover-bg: lighten(desaturate($base-success, 29.8), 68.8) !default; + $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; + $button-success-outlined-active-bg: lighten(desaturate($base-success, 34.9), 46.1) !default; + $button-success-outlined-selected-bg: lighten(desaturate($base-success, 35), 57.6) !default; + } + + @if $color == "saas" { + $button-default-outlined-hover-bg: mix($base-bg, $base-accent, 90%) !default; + $button-default-outlined-selected-bg: darken($button-default-outlined-hover-bg, 4) !default; + $button-default-outlined-active-bg: darken($button-default-outlined-hover-bg, 4) !default; + + $button-danger-outlined-hover-bg: mix($base-bg, $base-danger, 90%) !default; + $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; + $button-danger-outlined-active-bg: darken($button-danger-outlined-hover-bg, 4) !default; + $button-danger-outlined-selected-bg: darken($button-danger-outlined-hover-bg, 4) !default; + + $button-success-outlined-hover-bg: mix($base-bg, $base-success, 90%) !default; + $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; + $button-success-outlined-active-bg: darken($button-success-outlined-hover-bg, 4) !default; + $button-success-outlined-selected-bg: darken($button-success-outlined-hover-bg, 4) !default; + } + $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; - $button-default-outlined-active-bg: darken(saturate(adjust-hue($button-default-outlined-hover-bg, -1), 17.00), 17.06) !default; - $button-default-outlined-selected-bg: darken(saturate(adjust-hue($button-default-outlined-hover-bg, -1), 10.40), 5.49) !default; $button-danger-outlined-color-hover: $base-danger-selected !default; $button-danger-outlined-color-active: $base-danger-active !default; $button-danger-outlined-selected-color: $base-danger-selected !default; - $button-danger-outlined-hover-bg: lighten(saturate(adjust-hue($base-danger, 1.5), 0.6), 46.7) !default; // #FDF6F6 - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; - $button-danger-outlined-active-bg: darken(saturate(adjust-hue($button-danger-outlined-hover-bg, 358.9), 2.2), 13.9) !default; // #F1BBBC - $button-danger-outlined-selected-bg: lighten(desaturate(adjust-hue($button-danger-outlined-active-bg, 359.1), 0.6), 7.1) !default; // #F7D9DA - - $button-success-outlined-color-hover: $base-success-selected !default; - $button-success-outlined-color-active: $base-success-active !default; - $button-success-outlined-selected-color: $base-success-selected !default; - - $button-success-outlined-hover-bg: lighten(desaturate($base-success, 29.8), 68.8) !default; // #F1FAF1 - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; - $button-success-outlined-active-bg: lighten(desaturate($base-success, 34.9), 46.1) !default; // #9FD89F - $button-success-outlined-selected-bg: lighten(desaturate($base-success, 35), 57.6) !default; // #C9E9C9 + $button-success-outlined-color-hover: $button-success-selected-bg !default; + $button-success-outlined-color-active: $button-success-active-bg !default; + $button-success-outlined-selected-color: $button-success-selected-bg !default; $button-default-color: $base-inverted-text-color !default; $button-default-selected-color: $base-inverted-text-color !default; @@ -252,35 +276,40 @@ $button-accent-foreground-color: null !default; } @if $mode == "dark" { - $button-accent-foreground-color: lighten(desaturate(adjust-hue($base-accent, 0.9), 2.2), 22.4) !default; // #B4D6FA + $button-accent-foreground-color: lighten(desaturate(adjust-hue($base-accent, 0.9), 2.2), 22.4) !default; $button-default-hover-bg: $base-accent-hover !default; $button-default-focused-bg: $base-accent-hover !default; $button-default-active-bg: $button-accent-foreground-color !default; - $button-default-selected-bg: lighten(desaturate($button-default-active-bg, 6.4), 5.3) !default; // #CFE4FA + $button-default-selected-bg: lighten(desaturate($button-default-active-bg, 6.4), 5.3) !default; - $button-default-outlined-hover-bg: darken(desaturate(adjust-hue($base-accent, 356.3), 14.7), 49.4) !default; // #082338 + $button-success-hover-bg: lighten(saturate($base-success, 5.4), 22.5) !default; + $button-success-focused-bg: $button-success-hover-bg !default; + $button-success-active-bg: lighten(saturate($base-success, 10.6), 45.3) !default; + $button-success-selected-bg: lighten(saturate($base-success, 5.3), 34.1) !default; + + $button-default-outlined-hover-bg: darken(desaturate(adjust-hue($base-accent, 356.3), 14.7), 49.4) !default; $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default; $button-default-outlined-active-bg: $base-accent-selected !default; - $button-default-outlined-selected-bg: darken(desaturate(adjust-hue($base-accent, -4), 12.33), 41.18) !default; // #0C3B5E + $button-default-outlined-selected-bg: darken(desaturate(adjust-hue($base-accent, -4), 12.33), 41.18) !default; $button-danger-outlined-color-hover: $base-danger-active !default; $button-danger-outlined-color-active: $base-danger-active !default; $button-danger-outlined-selected-color: $base-danger-active !default; - $button-danger-outlined-hover-bg: darken(desaturate($base-danger, 5.1), 53.5) !default; // #3F1011 - $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; // #3F1011 - $button-danger-outlined-active-bg: darken(desaturate($base-danger, 4.6), 22.9) !default; // #BC2F32 - $button-danger-outlined-selected-bg: darken(desaturate($base-danger, 4.3), 40.4) !default; // #751D1F + $button-danger-outlined-hover-bg: darken(desaturate($base-danger, 5.1), 53.5) !default; + $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; + $button-danger-outlined-active-bg: darken(desaturate($base-danger, 4.6), 22.9) !default; + $button-danger-outlined-selected-bg: darken(desaturate($base-danger, 4.3), 40.4) !default; - $button-success-outlined-color-hover: $base-success-active !default; - $button-success-outlined-color-active: $base-success-active !default; - $button-success-outlined-selected-color: $base-success-active !default; + $button-success-outlined-color-hover: $button-success-active-bg !default; + $button-success-outlined-color-active: $button-success-active-bg !default; + $button-success-outlined-selected-color: $button-success-active-bg !default; - $button-success-outlined-hover-bg: darken(saturate($base-success, 39.4), 42.7) !default; // #052505 - $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; // #052505 - $button-success-outlined-active-bg: darken(saturate($base-success, 39), 33.1) !default; // #0B500B - $button-success-outlined-selected-bg: darken(saturate($base-success, 40.1), 35.7) !default; // #094509 + $button-success-outlined-hover-bg: darken(saturate($base-success, 39.4), 42.7) !default; + $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; + $button-success-outlined-active-bg: darken(saturate($base-success, 39), 33.1) !default; + $button-success-outlined-selected-bg: darken(saturate($base-success, 40.1), 35.7) !default; $button-default-color: $base-typography-bg !default; $button-default-selected-color: $base-typography-bg !default; diff --git a/packages/devextreme/scss/widgets/fluent/button/_index.scss b/packages/devextreme/scss/widgets/fluent/button/_index.scss index 1e6aaff90aae..458bdcabd0b8 100644 --- a/packages/devextreme/scss/widgets/fluent/button/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/button/_index.scss @@ -49,11 +49,6 @@ .dx-button-content { position: relative; - - .dx-inkripple { - overflow: hidden; - display: block; - } } @include dx-button-styling( diff --git a/packages/devextreme/scss/widgets/fluent/button/_mixins.scss b/packages/devextreme/scss/widgets/fluent/button/_mixins.scss index 424c93ba0dec..573db6ade0e0 100644 --- a/packages/devextreme/scss/widgets/fluent/button/_mixins.scss +++ b/packages/devextreme/scss/widgets/fluent/button/_mixins.scss @@ -99,10 +99,6 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta color: $text-color-active; } } - - .dx-inkripple-wave { - background-color: color.change($text-color, $alpha: 0.2); - } } @mixin dx-button-styling( diff --git a/packages/devextreme/scss/widgets/fluent/checkBox/_sizes.scss b/packages/devextreme/scss/widgets/fluent/checkBox/_sizes.scss index c7a70586b28f..1f9987b896ec 100644 --- a/packages/devextreme/scss/widgets/fluent/checkBox/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/checkBox/_sizes.scss @@ -22,7 +22,7 @@ $fluent-checkbox-text-padding-end: null !default; $fluent-checkbox-indeterminate-icon-size: 1em !default; $fluent-checkbox-indeterminate-font-size: 20px !default; $fluent-checkbox-border-radius: $checkbox-icon-border-radius !default; - $fluent-checkbox-size: 16px !default; // 18px !default; + $fluent-checkbox-size: 16px !default; } @else if $size == "compact" { diff --git a/packages/devextreme/scss/widgets/fluent/common/_index.scss b/packages/devextreme/scss/widgets/fluent/common/_index.scss index f67950701426..010296ae736d 100644 --- a/packages/devextreme/scss/widgets/fluent/common/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/common/_index.scss @@ -66,35 +66,3 @@ .dx-theme-border-color { border-color: $base-border-color !important; } - -// stylelint-enable declaration-no-important - -.dx-inkripple { - position: absolute; - height: 100%; - width: 100%; - top: 0; - left: 0; - pointer-events: none; -} - -.dx-inkripple-wave { - position: absolute; - background-color: rgba(0, 0, 0, 0.16); - border-radius: 50%; - opacity: 0; - transform: scale(0); - pointer-events: none; -} - -.dx-inkripple-showing { - transition: transform 0.1s linear; - opacity: 1; - transform: scale(1); -} - -.dx-inkripple-hiding { - transition: transform 0.1s linear, opacity 0.1s linear; - transform: scale(1.01); - opacity: 0; -} diff --git a/packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss b/packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss index 5445ca3f050d..bccb23a64e0d 100644 --- a/packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss @@ -16,9 +16,9 @@ .dx-context-menu { - .dx-menu-item { - color: $menu-color; + color: $menu-color; + .dx-menu-item { .dx-menu-item-content { display: flex; align-items: center; @@ -33,7 +33,6 @@ .dx-menu-item-popout { display: flex; align-items: center; - color: $base-icon-color; @include dx-icon(spinright); @include dx-icon-sizing($fluent-button-icon-size); @@ -41,6 +40,16 @@ } } + .dx-menu-item-popout { + color: $base-icon-color; + } + + &.dx-state-disabled { + .dx-menu-item-popout { + color: $base-foreground-disabled; + } + } + &.dx-menu-item-has-submenu > .dx-menu-item-content { padding-inline-end: $fluent-menu-item-with-icon-horizontal-padding; } diff --git a/packages/devextreme/scss/widgets/fluent/dataGrid/_colors.scss b/packages/devextreme/scss/widgets/fluent/dataGrid/_colors.scss index b998b78be8dd..8ec5be6106cc 100644 --- a/packages/devextreme/scss/widgets/fluent/dataGrid/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/dataGrid/_colors.scss @@ -7,7 +7,13 @@ $fluent-datagrid-grouppanel-item-bg: null !default; @if $mode == "light" { - $fluent-datagrid-grouppanel-item-bg: darken($base-bg, 5.88) !default; + @if $color == "blue"{ + $fluent-datagrid-grouppanel-item-bg: darken($base-bg, 5.88) !default; + } + + @if $color == "saas" { + $fluent-datagrid-grouppanel-item-bg: color.change($base-hover-bg, $alpha: 0.4) !default; + } } @if $mode == "dark" { diff --git a/packages/devextreme/scss/widgets/fluent/dropDownEditor/_colors.scss b/packages/devextreme/scss/widgets/fluent/dropDownEditor/_colors.scss index fc8d8b7fdaef..3b178aac2ed1 100644 --- a/packages/devextreme/scss/widgets/fluent/dropDownEditor/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/dropDownEditor/_colors.scss @@ -9,7 +9,7 @@ $dropdowneditor-icon-color: $base-spin-icon-color !default; /** -* $name 90. Spin active icon color +* $name 90. Active arrow icon color * $type color */ $dropdowneditor-icon-active-color: $base-spin-icon-color !default; diff --git a/packages/devextreme/scss/widgets/fluent/fileUploader/_colors.scss b/packages/devextreme/scss/widgets/fluent/fileUploader/_colors.scss index 88a26fd74b4f..fe8cdee52eeb 100644 --- a/packages/devextreme/scss/widgets/fluent/fileUploader/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/fileUploader/_colors.scss @@ -5,7 +5,7 @@ // adduse /** -* $name 10. Filename text color +* $name 10. File name text color * $type color */ $fileuploader-filename-color: $base-text-color !default; @@ -19,7 +19,7 @@ $fluent-fileuploader-files-container-bg-color: $base-bg !default; $fileuploader-falename-status-color: $base-label-color !default; /** -* $name 30. Border color on dragover +* $name 30. Drag-and-drop border color * $type color */ $fileuploader-border-color: $base-border-color !default; diff --git a/packages/devextreme/scss/widgets/fluent/form/_colors.scss b/packages/devextreme/scss/widgets/fluent/form/_colors.scss index 85816e16eba3..c09c1a678cad 100644 --- a/packages/devextreme/scss/widgets/fluent/form/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/form/_colors.scss @@ -8,7 +8,7 @@ * $name 10. Label text color * $type color */ -$form-field-item-color: $base-text-color !default; +$form-field-item-color: null !default; $form-item-help-text-color: $base-label-color !default; /** @@ -18,3 +18,17 @@ $form-item-help-text-color: $base-label-color !default; $form-group-border-color: $base-border-color !default; $form-field-required-color: $form-field-item-color !default; $form-field-mark-color: $form-field-item-color !default; + +@if $mode == "light" { + @if $color == "blue" { + $form-field-item-color: $base-text-color !default; + } + + @if $color == "saas" { + $form-field-item-color: $base-label-color !default; + } +} + +@if $mode == "dark" { + $form-field-item-color: $base-text-color !default; +} diff --git a/packages/devextreme/scss/widgets/fluent/form/_index.scss b/packages/devextreme/scss/widgets/fluent/form/_index.scss index ca26039827a0..9ba48c897609 100644 --- a/packages/devextreme/scss/widgets/fluent/form/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/form/_index.scss @@ -6,7 +6,6 @@ @use "../sizes" as *; @use "../../base/form"; @use "../../base/icons" as *; -@use "../textEditor/sizes" as *; // adduse @use "../scrollable"; @@ -70,10 +69,6 @@ .dx-switch { vertical-align: middle; } - - .dx-toggle-controls-paddings { - padding-inline-start: $fluent-filled-texteditor-input-horizontal-padding; - } } .dx-field-item-content-wrapper.dx-invalid { diff --git a/packages/devextreme/scss/widgets/fluent/gridBase/_colors.scss b/packages/devextreme/scss/widgets/fluent/gridBase/_colors.scss index e3baf2b2d462..1b3422d0acc7 100644 --- a/packages/devextreme/scss/widgets/fluent/gridBase/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/gridBase/_colors.scss @@ -8,7 +8,7 @@ $datagrid-base-color: $base-text-color !default; /** -* $name 60. Background color +* $name 15. Background color * $type color */ $datagrid-base-background-color: $base-bg !default; @@ -41,13 +41,13 @@ $header-filter-color: null !default; $header-filter-color-empty: null !default; /** -* $name 55. Selected row background color +* $name 51. Selected row background color * $type color */ $datagrid-selection-bg: $button-default-outlined-hover-bg !default; /** -* $name 60. Selected row border color +* $name 52. Selected row border color * $type color */ $datagrid-row-selected-border-color: $datagrid-border-color !default; @@ -73,7 +73,7 @@ $datagrid-hover-bg: $base-hover-bg !default; $datagrid-row-hovered-color: $base-hover-color !default; /** -* $name 30. Context menu icons color +* $name 30. Context menu icon color * $type color */ $datagrid-menu-icon-color: lighten($base-icon-color, 33.7%) !default; @@ -88,7 +88,7 @@ $datagrid-row-removed-bg: $datagrid-hover-bg !default; $datagrid-cell-removed-text-color: null !default; /** -* $name 45. Invalidate data faded color +* $name 45. Invalid data faded color * $type color */ $datagrid-row-invalid-faded-border-color: $button-danger-text-hover-bg !default; @@ -140,7 +140,7 @@ $datagrid-link-color: $base-link-color !default; $datagrid-focused-border-color: mix($base-bg, $base-accent, 20%) !default; /** -* $name 80. Editor background +* $name 80. Editor background color * $type color */ $datagrid-editor-bg: color.change($datagrid-base-background-color, $alpha: 0) !default; @@ -150,7 +150,7 @@ $datagrid-columnchooser-bg: $base-element-bg !default; $datagrid-columnchooser-item-bg: null !default; /** -* $name 85. Row alternation background color +* $name 85. Alternate row background color * $type color */ $datagrid-row-alternation-bg: null !default; @@ -163,7 +163,7 @@ $datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !defaul $datagrid-columnchooser-message-color: lighten($datagrid-base-color, 26%) !default; $datagrid-summary-bg: $datagrid-base-background-color !default; $datagrid-column-separator-bg: $base-accent !default; -$datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default; +$datagrid-filter-row-background-color: null !default; $datagrid-active-header-filter-icon-color: $base-accent !default; $datagrid-text-stub-background-image-path: null !default; $datagrid-filter-panel-color: $base-accent !default; @@ -172,7 +172,15 @@ $datagrid-text-link-disabled-opacity: $base-disabled-opacity; $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity; @if $mode == "light" { - $datagrid-row-focused-bg: #d0e5fb !default; + @if $color == "blue"{ + $datagrid-row-focused-bg: lighten(desaturate(adjust-hue($base-accent, 3), 0.98), 50.00) !default; // #d0e5fb + $datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default; + } + + @if $color == "saas" { + $datagrid-row-focused-bg: lighten(adjust-hue($base-accent, -1), 26.47) !default; // #dbe6ff + $datagrid-filter-row-background-color: $base-typography-bg !default; + } $datagrid-columnchooser-item-color: $datagrid-base-color !default; $datagrid-group-row-color: $datagrid-columnchooser-item-color !default; $datagrid-block-separator-bg: darken($datagrid-base-background-color, 12%) !default; diff --git a/packages/devextreme/scss/widgets/fluent/list/_colors.scss b/packages/devextreme/scss/widgets/fluent/list/_colors.scss index 3b5ec99c1b5e..dae06f391c6c 100644 --- a/packages/devextreme/scss/widgets/fluent/list/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/list/_colors.scss @@ -24,13 +24,13 @@ $list-border-color: $base-border-color !default; $list-group-header-bg: transparent !default; /** -* $name 30. Hovered item background color +* $name 30. Hovered state item background color * $type color */ $list-item-hover-bg: $base-hover-bg !default; /** -* $name 30. Selected item state background color +* $name 30. Selected state item background color * $type color */ $list-item-selected-bg: $base-selected-bg !default; @@ -50,7 +50,7 @@ $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.12) !def $list-menu-button-default-color: $button-default-color !default; $list-menu-button-default-bg: $button-default-bg !default; $list-menu-button-delete-bg: $base-danger !default; -$list-item-ghost-bg: $base-bg !default; +$list-item-ghost-bg: $base-element-bg !default; $list-item-ghost-color: $base-label-color !default; $list-item-ghost-border-color: $base-accent !default; $list-icon-color: $base-icon-color !default; diff --git a/packages/devextreme/scss/widgets/fluent/list/_index.scss b/packages/devextreme/scss/widgets/fluent/list/_index.scss index 958cfe89c314..9f46a2995f6f 100644 --- a/packages/devextreme/scss/widgets/fluent/list/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/list/_index.scss @@ -435,6 +435,7 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo &.dx-list-static-delete-button-container { width: $item-horizontal-padding + $fluent-button-icon-size; + padding: 0; } .dx-list-reorder-handle { @@ -473,6 +474,8 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo } .dx-list-static-delete-button { + padding: 0; + &.dx-button { box-shadow: none; background-color: transparent; diff --git a/packages/devextreme/scss/widgets/fluent/loadIndicator/_colors.scss b/packages/devextreme/scss/widgets/fluent/loadIndicator/_colors.scss index df79a2419fe8..705fdd537399 100644 --- a/packages/devextreme/scss/widgets/fluent/loadIndicator/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/loadIndicator/_colors.scss @@ -5,19 +5,25 @@ // adduse /** -* $name 10. Foreground color +* $name 10. Indicator color * $type color */ $load-indicator-segment-bg-color: $base-accent !default; /** -* $name 20. Background color +* $name 20. Indicator background color * $type color */ $load-indicator-inner-segment-border-color: null !default; @if $mode == "light" { - $load-indicator-inner-segment-border-color: lighten(saturate(adjust-hue($base-accent, 2.9), 2.2), 44.3) !default; // #B4D6FA + @if $color == "blue" { + $load-indicator-inner-segment-border-color: lighten(saturate(adjust-hue($load-indicator-segment-bg-color, 2.9), 2.2), 44.3) !default; + } + + @if $color == "saas" { + $load-indicator-inner-segment-border-color: mix($base-bg, $load-indicator-segment-bg-color, 68.82%) !default; + } } @if $mode == "dark" { diff --git a/packages/devextreme/scss/widgets/fluent/loadPanel/_colors.scss b/packages/devextreme/scss/widgets/fluent/loadPanel/_colors.scss index 7f4b71da2702..21fcf7903337 100644 --- a/packages/devextreme/scss/widgets/fluent/loadPanel/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/loadPanel/_colors.scss @@ -8,7 +8,7 @@ $loadpanel-content-shadow-color: color.change($base-shadow-color, $alpha: 0.25) !default; /** -* $name 20. Loadpanel background color +* $name 30. Background color * $type color */ $loadpanel-content-bg: $overlay-content-bg !default; diff --git a/packages/devextreme/scss/widgets/fluent/lookup/_index.scss b/packages/devextreme/scss/widgets/fluent/lookup/_index.scss index 687871ff4d43..058e21631679 100644 --- a/packages/devextreme/scss/widgets/fluent/lookup/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/lookup/_index.scss @@ -115,10 +115,6 @@ $fluent-base-icon-size, ); -.dx-state-readonly .dx-lookup-field::before { - opacity: 0.5; -} - .dx-lookup-popup-wrapper { @include dx-dropdownlist-list-appearance(); diff --git a/packages/devextreme/scss/widgets/fluent/menuBase/_colors.scss b/packages/devextreme/scss/widgets/fluent/menuBase/_colors.scss index 89c53a85429e..026f55548d97 100644 --- a/packages/devextreme/scss/widgets/fluent/menuBase/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/menuBase/_colors.scss @@ -4,3 +4,5 @@ // adduse +$menu-item-color-disabled: $base-foreground-disabled; + diff --git a/packages/devextreme/scss/widgets/fluent/menuBase/_index.scss b/packages/devextreme/scss/widgets/fluent/menuBase/_index.scss index c1ba688a7495..f93489dd75fb 100644 --- a/packages/devextreme/scss/widgets/fluent/menuBase/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/menuBase/_index.scss @@ -19,6 +19,10 @@ color: $typography-link-color; } + &.dx-state-disabled { + color: $menu-item-color-disabled; + } + &.dx-state-hover { background-color: $menu-item-hover-bg; } diff --git a/packages/devextreme/scss/widgets/fluent/pager/_colors.scss b/packages/devextreme/scss/widgets/fluent/pager/_colors.scss index a1f2addcfd77..09366aa7c225 100644 --- a/packages/devextreme/scss/widgets/fluent/pager/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/pager/_colors.scss @@ -5,14 +5,14 @@ // adduse /** -* $name 150. Pager selected item text color +* $name 180. Pager selected item text color * $type color */ $pager-page-selected-color: $base-inverted-text-color !default; $pager-page-hovered-bg: $base-hover-bg !default; /** -* $name 160. Pager selected item background color +* $name 190. Pager selected item background color * $type color */ $pager-page-selected-bg: $base-accent !default; diff --git a/packages/devextreme/scss/widgets/fluent/pivotGrid/_colors.scss b/packages/devextreme/scss/widgets/fluent/pivotGrid/_colors.scss index 36f10ccf7844..a45668ff782a 100644 --- a/packages/devextreme/scss/widgets/fluent/pivotGrid/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/pivotGrid/_colors.scss @@ -18,16 +18,16 @@ $pivotgrid-field-area-box-font-weight: 400 !default; $pivotgrid-data-area-color: $base-text-color !default; /** -* $name 20. Totals background color +* $name 20. Total background color * $type color */ $pivotgrid-totalcolor: $base-bg !default; /** -* $name 30. Grand totals background color +* $name 30. Grand total background color * $type color */ -$pivotgrid-grandtotalcolor: $base-hover-bg !default; +$pivotgrid-grandtotalcolor: null !default; /** * $name 40. Field area text color @@ -42,7 +42,15 @@ $pivotgrid-position-indicator-color: gray !default; $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default; @if $mode == "light" { - $pivotgrid-field-area-box-background-color: darken($base-bg, 5.88) !default; + @if $color == "blue"{ + $pivotgrid-grandtotalcolor: $base-hover-bg !default; + $pivotgrid-field-area-box-background-color: darken($base-bg, 5.88) !default; + } + + @if $color == "saas" { + $pivotgrid-grandtotalcolor: color.change($base-hover-bg, $alpha: 0.4) !default; + $pivotgrid-field-area-box-background-color: color.change($base-hover-bg, $alpha: 0.4) !default; + } } @if $mode == "dark" { diff --git a/packages/devextreme/scss/widgets/fluent/pivotGrid/_index.scss b/packages/devextreme/scss/widgets/fluent/pivotGrid/_index.scss index b72dad4760e5..16a0a0cec6d9 100644 --- a/packages/devextreme/scss/widgets/fluent/pivotGrid/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/pivotGrid/_index.scss @@ -123,10 +123,6 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px; .dx-area-description-cell { .dx-pivotgrid-toolbar { padding-left: 8px; - - .dx-button { - @include dx-button-flat-color-styling($base-text-color, $base-text-color, $base-text-color, color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.3)); - } } } @@ -137,15 +133,6 @@ $fluent-pivotgridfieldchooser-field-min-height: 36px; } } - .dx-column-header, - .dx-filter-header { - .dx-pivotgrid-toolbar { - .dx-button { - @include dx-button-flat-color-styling($base-text-color, $base-text-color, $base-text-color, color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.08), color.change($button-normal-bg-inverted, $alpha: 0.3)); - } - } - } - .dx-expand-icon-container { margin: 0; diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss index 8887ae61ebe7..d3d0cae0f3ee 100644 --- a/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss @@ -32,9 +32,9 @@ $progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $p $progressbar-label-color: $base-text-color !default; @if $mode == "light" { - $progressbar-bg: darken($base-bg, 9.80) !default; + $progressbar-bg: darken($base-typography-bg, 7.84) !default; } @if $mode == "dark" { - $progressbar-bg: lighten($base-bg, 3.92) !default; + $progressbar-bg: lighten($base-typography-bg, 7.84) !default; } diff --git a/packages/devextreme/scss/widgets/fluent/radioButton/_index.scss b/packages/devextreme/scss/widgets/fluent/radioButton/_index.scss index d0e36dd971f2..5550f3f7539f 100644 --- a/packages/devextreme/scss/widgets/fluent/radioButton/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/radioButton/_index.scss @@ -140,9 +140,9 @@ } .dx-state-disabled { - color: $base-foreground-disabled; - .dx-radiobutton { + color: $base-foreground-disabled; + .dx-radiobutton-icon { border-color: $base-foreground-disabled; } diff --git a/packages/devextreme/scss/widgets/fluent/scheduler/_colors.scss b/packages/devextreme/scss/widgets/fluent/scheduler/_colors.scss index 748dd0f0c5e9..22388ab223bc 100644 --- a/packages/devextreme/scss/widgets/fluent/scheduler/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/scheduler/_colors.scss @@ -35,7 +35,7 @@ $scheduler-appointment-focus-color: null !default; $scheduler-appointment-base-color: null !default; /** -* $name 50. Start appointment color +* $name 50. Appointment start color * $type color */ $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; @@ -91,10 +91,17 @@ $agenda-appointment-text-color: $base-text-color !default; $header-panel-cell-date: null !default; @if $mode == "light" { - $scheduler-appointment-base-color: lighten($base-accent, 48%) !default; $scheduler-appointment-text-color: #000 !default; $scheduler-panel-text-color: #707070; $header-panel-cell-date: #424242; + + @if $color == "blue"{ + $scheduler-appointment-base-color: lighten($base-accent, 48%) !default; + } + + @if $color == "saas" { + $scheduler-appointment-base-color: lighten($base-accent, 30%) !default; + } } @if $mode == "dark" { diff --git a/packages/devextreme/scss/widgets/fluent/scrollable/_colors.scss b/packages/devextreme/scss/widgets/fluent/scrollable/_colors.scss index bcdd5ae6c820..d8816031eb3e 100644 --- a/packages/devextreme/scss/widgets/fluent/scrollable/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/scrollable/_colors.scss @@ -4,10 +4,10 @@ // adduse -$scrollable-bg: $base-bg !default; +$scrollable-bg: $base-element-bg !default; /** -* $name 10. Scroller background color +* $name 10. Scroll bar background color * $type color */ $scrollable-scroll-bg: null !default; diff --git a/packages/devextreme/scss/widgets/fluent/selectBox/_colors.scss b/packages/devextreme/scss/widgets/fluent/selectBox/_colors.scss index bf4984d3bfe1..4421c0573c88 100644 --- a/packages/devextreme/scss/widgets/fluent/selectBox/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/selectBox/_colors.scss @@ -8,4 +8,4 @@ * $name 10. Item background color * $type color */ -$selectbox-list-bg: $base-bg !default; +$selectbox-list-bg: $base-element-bg !default; diff --git a/packages/devextreme/scss/widgets/fluent/slider/_colors.scss b/packages/devextreme/scss/widgets/fluent/slider/_colors.scss index d8cc4996f3f2..b9687c354af1 100644 --- a/packages/devextreme/scss/widgets/fluent/slider/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/slider/_colors.scss @@ -6,7 +6,7 @@ // adduse /** -* $name 10. Slider bar background color +* $name 10. Bar background color * $type color */ $fluent-slider-bar-bg: $base-border-color-accessible !default; diff --git a/packages/devextreme/scss/widgets/fluent/slider/_index.scss b/packages/devextreme/scss/widgets/fluent/slider/_index.scss index 2b1ad5781aad..73a692878e1d 100644 --- a/packages/devextreme/scss/widgets/fluent/slider/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/slider/_index.scss @@ -47,7 +47,7 @@ $fluent-slider-disabled-tooltip-top-margin: 5px; border-width: 1px; border-style: solid; border-color: $base-border-color; - background-color: $base-bg; + background-color: $base-element-bg; &::after { position: absolute; @@ -58,7 +58,7 @@ $fluent-slider-disabled-tooltip-top-margin: 5px; border-radius: $fluent-slider-radius; border-width: 3px; border-style: solid; - border-color: $base-bg; + border-color: $base-element-bg; } &.dx-state-hover { diff --git a/packages/devextreme/scss/widgets/fluent/slider/_sizes.scss b/packages/devextreme/scss/widgets/fluent/slider/_sizes.scss index c30a5e7e436a..4d603717a4fa 100644 --- a/packages/devextreme/scss/widgets/fluent/slider/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/slider/_sizes.scss @@ -9,19 +9,19 @@ $fluent-slider-top-tooltip-margin: null !default; $fluent-slider-height: 28px !default; // for fieldset height $fluent-slider-radius: 50% !default; -$fluent-slider-track-height: null !default; // 2px !default; +$fluent-slider-track-height: null !default; $fluent-slider-track-border-radius: 2px !default; $fluent-slider-handle-active-border-width: 2px !default; $fluent-slider-handle-height: null !default; -$fluent-slider-handle-inner-size: null !default; // 12px !default; +$fluent-slider-handle-inner-size: null !default; $fluent-slider-handle-inner-border-width: 1px !default; $fluent-slider-handle-inner-disabled-size: 2px !default; @if $size == "default" { $fluent-slider-track-height: 4px !default; $fluent-slider-handle-height: 18px !default; - $fluent-slider-handle-size: 20px !default; // 32px !default; - $fluent-slider-handle-inner-size: 18px !default; // 12px !default; + $fluent-slider-handle-size: 20px !default; + $fluent-slider-handle-inner-size: 18px !default; $fluent-slider-wrapper-height: 32px !default; $fluent-slider-tooltip-width: 34px !default; $fluent-slider-top-tooltip-margin: -5px !default; @@ -30,8 +30,8 @@ $fluent-slider-handle-inner-disabled-size: 2px !default; @else if $size == "compact" { $fluent-slider-track-height: 2px !default; $fluent-slider-handle-height: 14px !default; - $fluent-slider-handle-size: 16px !default; // 26px !default; - $fluent-slider-handle-inner-size: 14px !default; // 12px !default; + $fluent-slider-handle-size: 16px !default; + $fluent-slider-handle-inner-size: 14px !default; $fluent-slider-wrapper-height: 26px !default; $fluent-slider-tooltip-width: 28px !default; $fluent-slider-top-tooltip-margin: -2px !default; diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss index 6d02ea5e1dc9..d3da097c9531 100644 --- a/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss +++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss @@ -56,8 +56,7 @@ } } - &.dx-state-active, - &.dx-state-active .dx-inkripple-wave { + &.dx-state-active { background-color: $tabs-active-tab-bg-color; } @@ -94,10 +93,11 @@ width: 1em; height: 1em; - line-height: $fluent-line-height; + line-height: 1; } .dx-tabs-item-badge { + align-self: center; min-width: $fluent-badge-min-size; min-height: $fluent-badge-min-size; } diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss index ff371a3f2c8e..9a1543756b25 100644 --- a/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss @@ -18,10 +18,6 @@ padding: 0; background-color: $tabs-tab-background; - .dx-inkripple { - overflow: hidden; - } - .dx-scrollable { flex-basis: 100%; } diff --git a/packages/devextreme/scss/widgets/fluent/tabs/variables/_colors.scss b/packages/devextreme/scss/widgets/fluent/tabs/variables/_colors.scss index b1d47f124800..3935b46b4008 100644 --- a/packages/devextreme/scss/widgets/fluent/tabs/variables/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/tabs/variables/_colors.scss @@ -83,5 +83,5 @@ $tabs-tab-bg-color-active-primary: $base-selected-bg !default; * $name 120. Active tab background color * $type color */ -$tabs-active-tab-bg-color: $base-bg !default; +$tabs-active-tab-bg-color: $base-element-bg !default; $tabs-nav-button-bg-color: transparent !default; diff --git a/packages/devextreme/scss/widgets/fluent/tagBox/_colors.scss b/packages/devextreme/scss/widgets/fluent/tagBox/_colors.scss index 2237076fab7d..da71d425c748 100644 --- a/packages/devextreme/scss/widgets/fluent/tagBox/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/tagBox/_colors.scss @@ -36,7 +36,7 @@ $tagbox-tag-foreground-disabled: $base-foreground-disabled !default; $tagbox-tag-disabled: $base-background-disabled !default; @if $mode == "light" { - $tagbox-tag-bg: darken($base-element-bg, 5.88) !default; + $tagbox-tag-bg: darken($base-hover-bg, 1.96) !default; } @if $mode == "dark" { diff --git a/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss b/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss index 9b89f9c41ce1..b23901bcb838 100644 --- a/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss @@ -8,15 +8,13 @@ * $name 10. Text color * $type color */ -$texteditor-color: $base-text-color !default; +$texteditor-color: null !default; /** * $name 20. Placeholder text color * $type color */ -$texteditor-placeholder-color: $base-label-color !default; -$texteditor-label-color: $texteditor-placeholder-color; -$texteditor-label-color-focused: $base-accent; +$texteditor-placeholder-color: null !default; /** * $name 30. Outlined background color @@ -94,20 +92,44 @@ $texteditor-label-transition: top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; @if $mode == "light" { - $texteditor-filled-bg: darken($base-element-bg, 3.9) !default; - $texteditor-border-color-hover: darken($texteditor-border-color, 9.8) !default; // #c7c7c7 - $texteditor-border-color-focused: darken($texteditor-border-color, 17.65) !default; // #b3b3b3 - $texteditor-border-bottom-color-hover: darken($texteditor-border-bottom-color, 3.92) !default; // #575757 - $texteditor-border-bottom-color-focused: darken($texteditor-border-bottom-color-hover, 3.92) !default; // #4d4d4d + @if $color == "blue" { + $texteditor-color: $base-text-color !default; + $texteditor-placeholder-color: lighten($base-text-color, 29.80) !default; + $texteditor-outlined-bg: $base-element-bg !default; + $texteditor-filled-bg: darken($base-element-bg, 3.9) !default; + } + + @if $color == "saas" { + $texteditor-color: rgba(66, 81, 118, 1) !default; + $texteditor-placeholder-color: rgba(144, 158, 192, 1) !default; + $texteditor-outlined-bg: $base-element-bg !default; + $texteditor-filled-bg: rgba(243, 245, 248, 1) !default; + } + + $texteditor-border-color-hover: darken($texteditor-border-color, 9.8) !default; + $texteditor-border-color-focused: darken($texteditor-border-color, 17.65) !default; + $texteditor-border-bottom-color-hover: darken($texteditor-border-bottom-color, 3.92) !default; + $texteditor-border-bottom-color-focused: darken($texteditor-border-bottom-color-hover, 3.92) !default; } @if $mode == "dark" { - $texteditor-filled-bg: darken($base-element-bg, 8.2) !default; - $texteditor-border-color-hover: lighten($texteditor-border-color, 7.84) !default; // #757575 - $texteditor-border-color-focused: lighten($texteditor-border-color, 3.92) !default; // #6b6b6b - $texteditor-border-bottom-color-hover: lighten($texteditor-border-bottom-color, 6.27) !default; // #bdbdbd - $texteditor-border-bottom-color-focused: lighten($texteditor-border-bottom-color-hover, 3.92) !default; // #b3b3b3 + @if $color == "blue" { + $texteditor-outlined-bg: $base-element-bg !default; + $texteditor-filled-bg: darken($base-element-bg, 8.2) !default; + } + + @if $color == "saas" { + $texteditor-outlined-bg: rgba(20, 30, 40, 1) !default; + $texteditor-filled-bg: rgba(50, 60, 75, 1) !default; + } + + $texteditor-color: $base-text-color !default; + $texteditor-placeholder-color: darken($base-text-color, 40.00) !default; + $texteditor-border-color-hover: lighten($texteditor-border-color, 7.84) !default; + $texteditor-border-color-focused: lighten($texteditor-border-color, 3.92) !default; + $texteditor-border-bottom-color-hover: lighten($texteditor-border-bottom-color, 6.27) !default; + $texteditor-border-bottom-color-focused: lighten($texteditor-border-bottom-color-hover, 3.92) !default; } /** @@ -121,4 +143,8 @@ $texteditor-filled-bg-hover: $texteditor-filled-bg !default; * $type color */ $texteditor-filled-bg-focused: $texteditor-filled-bg !default; + +$texteditor-label-color: $texteditor-placeholder-color; +$texteditor-label-color-focused: $base-accent; + diff --git a/packages/devextreme/scss/widgets/generic/_colors.scss b/packages/devextreme/scss/widgets/generic/_colors.scss index 425891d2dc89..2e2b5a3b4adf 100644 --- a/packages/devextreme/scss/widgets/generic/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/_colors.scss @@ -86,13 +86,13 @@ $typography-color: null !default; $typography-link-color: null !default; /** -* $name 80. Hovered state text color +* $name 80. Hover state text color * $type color */ $base-hover-color: null !default; /** -* $name 90. Hovered state background color +* $name 90. Hover state background color * $type color */ $base-hover-bg: null !default; diff --git a/packages/devextreme/scss/widgets/generic/badge/_colors.scss b/packages/devextreme/scss/widgets/generic/badge/_colors.scss index d4f9482c941f..25f0cf5c491b 100644 --- a/packages/devextreme/scss/widgets/generic/badge/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/badge/_colors.scss @@ -6,13 +6,13 @@ // adduse /** -* $name 130. Badge text color +* $name 140. Badge text color * $type color */ $badge-color: $base-inverted-text-color !default; /** -* $name 140. Badge background color +* $name 150. Badge background color * $type color */ $badge-bg: null !default; diff --git a/packages/devextreme/scss/widgets/generic/checkBox/_colors.scss b/packages/devextreme/scss/widgets/generic/checkBox/_colors.scss index df4b11f4c807..9bc19ff06675 100644 --- a/packages/devextreme/scss/widgets/generic/checkBox/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/checkBox/_colors.scss @@ -25,7 +25,7 @@ $checkbox-border-color-focused: null !default; $checkbox-bg: null !default; /** -* $name 20. Hovered state border color +* $name 20. Hover state border color * $type color */ $checkbox-hover-border-color: null !default; diff --git a/packages/devextreme/scss/widgets/generic/dropDownEditor/_colors.scss b/packages/devextreme/scss/widgets/generic/dropDownEditor/_colors.scss index 26bfcab78b17..7b2fef310dc3 100644 --- a/packages/devextreme/scss/widgets/generic/dropDownEditor/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/dropDownEditor/_colors.scss @@ -26,13 +26,13 @@ $dropdowneditor-filled-button-invalid-active-bg: color.change($texteditor-invali $dropdowneditor-button-active-border-color: transparent !default; /** -* $name 80. Spin icon color +* $name 80. Arrow icon color * $type color */ $dropdowneditor-icon-color: $base-icon-color !default; /** -* $name 90. Spin active icon color +* $name 90. Active arrow icon color * $type color */ $dropdowneditor-icon-active-color: null !default; diff --git a/packages/devextreme/scss/widgets/generic/fileUploader/_colors.scss b/packages/devextreme/scss/widgets/generic/fileUploader/_colors.scss index 3dfbbcf96c30..d0fc024c38db 100644 --- a/packages/devextreme/scss/widgets/generic/fileUploader/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/fileUploader/_colors.scss @@ -5,7 +5,7 @@ // adduse /** -* $name 10. Filename text color +* $name 10. File name text color * $type color */ $fileuploader-filename-color: $base-text-color !default; @@ -17,7 +17,7 @@ $fileuploader-filename-color: $base-text-color !default; $fileuploader-falename-status-color: null !default; /** -* $name 30. Border color on dragover +* $name 30. Drag-and-drop border color * $type color */ $fileuploader-border-color: $base-border-color !default; diff --git a/packages/devextreme/scss/widgets/generic/form/_index.scss b/packages/devextreme/scss/widgets/generic/form/_index.scss index fa6b0df1df2a..2881a12a401b 100644 --- a/packages/devextreme/scss/widgets/generic/form/_index.scss +++ b/packages/devextreme/scss/widgets/generic/form/_index.scss @@ -19,6 +19,12 @@ .dx-field-item:not(.dx-last-col) { padding-inline-end: 15px; } + + &.dx-layout-manager-one-col { + .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item { + padding-top: $generic-form-default-padding; + } + } } .dx-form-group-caption { diff --git a/packages/devextreme/scss/widgets/generic/form/_sizes.scss b/packages/devextreme/scss/widgets/generic/form/_sizes.scss index f261662dfd91..f6b6121d95e6 100644 --- a/packages/devextreme/scss/widgets/generic/form/_sizes.scss +++ b/packages/devextreme/scss/widgets/generic/form/_sizes.scss @@ -6,6 +6,7 @@ $generic-form-group-caption-font-size: null !default; $generic-form-group-content-padding-bottom: null !default; $generic-form-label-icon-size: null !default; $generic-form-top-label-bottom-margin: null !default; +$generic-form-default-padding: 10px !default; @if $size == "default" { $generic-form-group-caption-font-size: 20px !default; diff --git a/packages/devextreme/scss/widgets/generic/gridBase/_colors.scss b/packages/devextreme/scss/widgets/generic/gridBase/_colors.scss index 736633e5aa9c..17981fcef745 100644 --- a/packages/devextreme/scss/widgets/generic/gridBase/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/gridBase/_colors.scss @@ -12,7 +12,7 @@ $datagrid-base-color: $base-text-color !default; /** -* $name 60. Background color +* $name 15. Background color * $type color */ $datagrid-base-background-color: $base-bg !default; @@ -24,7 +24,6 @@ $datagrid-base-background-color: $base-bg !default; $datagrid-border-color: $base-border-color !default; $datagrid-border: 1px solid $datagrid-border-color !default; - /** * $name 20. Header text color * $type color @@ -51,13 +50,13 @@ $header-filter-color: null !default; $header-filter-color-empty: null !default; /** -* $name 55. Selected row background color +* $name 51. Selected row background color * $type color */ $datagrid-selection-bg: null !default; /** -* $name 60. Selected row border color +* $name 52. Selected row border color * $type color */ $datagrid-row-selected-border-color: null !default; @@ -88,7 +87,7 @@ $datagrid-hover-bg: null !default; $datagrid-row-hovered-color: null !default; /** -* $name 30. Context menu icons color +* $name 30. Context menu icon color * $type color */ $datagrid-menu-icon-color: null !default; @@ -103,13 +102,12 @@ $datagrid-row-removed-bg: null !default; $datagrid-cell-removed-text-color: null !default; /** -* $name 45. Invalidate data faded color +* $name 45. Invalid data faded color * $type color */ $datagrid-row-invalid-faded-border-color: $base-invalid-faded-border-color !default; $datagrid-row-invalid-border-color: $base-invalid-color !default; - /** * $name 30. NoData message text color * $type color @@ -136,7 +134,7 @@ $datagrid-master-detail-cell-bg: null !default; $datagrid-search-color: $base-inverted-text-color !default; /** -* $name 125. Spin icon color +* $name 125. Arrow icon color * $type color */ $datagrid-spin-icon-color: null !default; @@ -172,7 +170,7 @@ $datagrid-link-color: $base-link-color !default; $datagrid-focused-border-color: null !default; /** -* $name 80. Editor background +* $name 80. Editor background color * $type color */ $datagrid-editor-bg: null !default; @@ -186,7 +184,7 @@ $datagrid-drop-highlight-color: $base-inverted-text-color !default; $datagrid-columnchooser-bg: null !default; /** -* $name 85. Row alternation background color +* $name 85. Alternate row background color * $type color */ $datagrid-row-alternation-bg: null !default; diff --git a/packages/devextreme/scss/widgets/generic/list/_colors.scss b/packages/devextreme/scss/widgets/generic/list/_colors.scss index 184867a9f92a..3e0c9a1f583a 100644 --- a/packages/devextreme/scss/widgets/generic/list/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/list/_colors.scss @@ -30,13 +30,13 @@ $list-group-header-bg: null !default; $list-normal-color: $base-text-color !default; /** -* $name 30. Hovered item background color +* $name 30. Hovered state item background color * $type color */ $list-item-hover-bg: null !default; /** -* $name 40. Selected item state background color +* $name 40. Selected state item background color * $type color */ $list-item-selected-bg: null !default; diff --git a/packages/devextreme/scss/widgets/generic/loadIndicator/_colors.scss b/packages/devextreme/scss/widgets/generic/loadIndicator/_colors.scss index e86dae031834..77a8385d7e0c 100644 --- a/packages/devextreme/scss/widgets/generic/loadIndicator/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/loadIndicator/_colors.scss @@ -5,7 +5,7 @@ // adduse /** -* $name 10. Load indicator color +* $name 10. Indicator color * $type color */ $loadindicator-bg: null !default; diff --git a/packages/devextreme/scss/widgets/generic/loadPanel/_colors.scss b/packages/devextreme/scss/widgets/generic/loadPanel/_colors.scss index dea77d7c8e48..7ed2de83004e 100644 --- a/packages/devextreme/scss/widgets/generic/loadPanel/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/loadPanel/_colors.scss @@ -9,7 +9,7 @@ $loadpanel-border-color: null !default; $loadpanel-content-shadow-color: null !default; /** -* $name 20. Loadpanel background color +* $name 30. Background color * $type color */ $loadpanel-content-bg: null !default; diff --git a/packages/devextreme/scss/widgets/generic/lookup/_index.scss b/packages/devextreme/scss/widgets/generic/lookup/_index.scss index 0b1628e41df0..139bfea3022f 100644 --- a/packages/devextreme/scss/widgets/generic/lookup/_index.scss +++ b/packages/devextreme/scss/widgets/generic/lookup/_index.scss @@ -32,10 +32,6 @@ $generic-base-icon-size, ); -.dx-state-readonly .dx-lookup-field::before { - opacity: 0.5; -} - .dx-lookup-popup-wrapper { .dx-list-item { border-top: none; diff --git a/packages/devextreme/scss/widgets/generic/menuBase/_index.scss b/packages/devextreme/scss/widgets/generic/menuBase/_index.scss index c84db0d3a37e..eb15382d688d 100644 --- a/packages/devextreme/scss/widgets/generic/menuBase/_index.scss +++ b/packages/devextreme/scss/widgets/generic/menuBase/_index.scss @@ -25,6 +25,10 @@ $generic-menu-popup-border: 1px solid $menu-popup-border-color; color: $typography-link-color; } + &.dx-state-disabled { + opacity: 0.5; + } + &.dx-state-hover { color: $menu-item-hovered-color; background-color: $menu-item-hover-bg; diff --git a/packages/devextreme/scss/widgets/generic/numberBox/_colors.scss b/packages/devextreme/scss/widgets/generic/numberBox/_colors.scss index 1b06e79da1f4..29861d5c5a75 100644 --- a/packages/devextreme/scss/widgets/generic/numberBox/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/numberBox/_colors.scss @@ -23,7 +23,7 @@ $numberbox-spin-container-border-radius: $base-border-radius !default; $numberbox-spin-icon-border-radius: null !default; /** -* $name 10. Spin icon color +* $name 10. Arrow icon color * $type color */ $numberbox-spin-icon-color: $base-icon-color !default; diff --git a/packages/devextreme/scss/widgets/generic/pager/_colors.scss b/packages/devextreme/scss/widgets/generic/pager/_colors.scss index 06488350f449..d8b33708a113 100644 --- a/packages/devextreme/scss/widgets/generic/pager/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/pager/_colors.scss @@ -5,13 +5,13 @@ // adduse /** -* $name 150. Pager selected item text color +* $name 180. Pager selected item text color * $type color */ $pager-page-selected-color: null !default; /** -* $name 160. Pager selected item background color +* $name 190. Pager selected item background color * $type color */ $pager-page-selected-bg: null !default; diff --git a/packages/devextreme/scss/widgets/generic/pivotGrid/_colors.scss b/packages/devextreme/scss/widgets/generic/pivotGrid/_colors.scss index f6dc3fb384e7..4cb930cd0d66 100644 --- a/packages/devextreme/scss/widgets/generic/pivotGrid/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/pivotGrid/_colors.scss @@ -15,13 +15,13 @@ $pivotgrid-area-color: null !default; $pivotgrid-data-area-color: $base-text-color !default; /** -* $name 20. Totals background color +* $name 20. Total background color * $type color */ $pivotgrid-totalcolor: null !default; /** -* $name 30. Grand totals background color +* $name 30. Grand total background color * $type color */ $pivotgrid-grandtotalcolor: null !default; @@ -38,7 +38,7 @@ $pivotgrid-drag-header-second-shadow-color: null !default; $pivotgrid-position-indicator-color: null !default; /** -* $name 50. Spin icon color +* $name 50. Arrow icon color * $type color */ $pivotgrid-spin-icon-color: null !default; diff --git a/packages/devextreme/scss/widgets/generic/scheduler/_colors.scss b/packages/devextreme/scss/widgets/generic/scheduler/_colors.scss index f74d02a23ea2..c58ca23ba383 100644 --- a/packages/devextreme/scss/widgets/generic/scheduler/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/scheduler/_colors.scss @@ -34,7 +34,7 @@ $scheduler-appointment-focus-color: null !default; $scheduler-appointment-base-color: null !default; /** -* $name 50. Start appointment color +* $name 50. Appointment start color * $type color */ $scheduler-appointment-start-color: null !default; diff --git a/packages/devextreme/scss/widgets/generic/scrollable/_colors.scss b/packages/devextreme/scss/widgets/generic/scrollable/_colors.scss index 38a766d80982..5c7b7fa48e68 100644 --- a/packages/devextreme/scss/widgets/generic/scrollable/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/scrollable/_colors.scss @@ -7,7 +7,7 @@ $scrollable-bg: $base-bg !default; /** -* $name 10. Scroller background color +* $name 10. Scroll bar background color * $type color */ $scrollable-scroll-bg: null !default; diff --git a/packages/devextreme/scss/widgets/generic/slider/_colors.scss b/packages/devextreme/scss/widgets/generic/slider/_colors.scss index cf2c5cae9ec8..671a39112cad 100644 --- a/packages/devextreme/scss/widgets/generic/slider/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/slider/_colors.scss @@ -6,7 +6,7 @@ // adduse /** -* $name 10. Slider bar background color +* $name 10. Bar background color * $type color */ $slider-bar-bg: $base-border-color !default; diff --git a/packages/devextreme/scss/widgets/generic/tabs/layout/tab/_base.scss b/packages/devextreme/scss/widgets/generic/tabs/layout/tab/_base.scss index ffe5ce631390..8689113b458f 100644 --- a/packages/devextreme/scss/widgets/generic/tabs/layout/tab/_base.scss +++ b/packages/devextreme/scss/widgets/generic/tabs/layout/tab/_base.scss @@ -86,8 +86,13 @@ .dx-tab-text { column-gap: $generic-tabs-icon-margin; + row-gap: $generic-tabs-item-gap; color: $tabs-tab-color; line-height: $generic-tab-text-line-height; + + .dx-tab-text-span-pseudo { + display: none; + } } .dx-icon { @@ -97,6 +102,7 @@ } .dx-tabs-item-badge { + align-self: center; min-width: $generic-badge-min-size; min-height: $generic-badge-min-size; } diff --git a/packages/devextreme/scss/widgets/generic/tabs/variables/_sizes.scss b/packages/devextreme/scss/widgets/generic/tabs/variables/_sizes.scss index bac523cb8951..43cc3f5ae00f 100644 --- a/packages/devextreme/scss/widgets/generic/tabs/variables/_sizes.scss +++ b/packages/devextreme/scss/widgets/generic/tabs/variables/_sizes.scss @@ -4,7 +4,7 @@ // adduse -$generic-tabs-item-gap: 4px !default; +$generic-tabs-item-gap: null !default; $generic-tabs-item-padding: null !default; $generic-tabs-item-padding-disabled-focused: null !default; $generic-tabs-border-width: $generic-base-border-width !default; @@ -17,6 +17,7 @@ $generic-tabs-icon-size: $generic-base-icon-size !default; $generic-badge-min-size: null !default; @if $size == "default" { + $generic-tabs-item-gap: 4px !default; $generic-tabs-item-padding: 10px 9px !default; $generic-tabs-item-padding-disabled-focused: 10px !default; $generic-tabs-nav-button-width: 25px !default; @@ -27,6 +28,7 @@ $generic-badge-min-size: null !default; } @else if $size == "compact" { + $generic-tabs-item-gap: 2px !default; $generic-tabs-item-padding: 5px 4px !default; $generic-tabs-item-padding-disabled-focused: 5px !default; $generic-tabs-nav-button-width: 25px !default; diff --git a/packages/devextreme/scss/widgets/generic/treeView/_colors.scss b/packages/devextreme/scss/widgets/generic/treeView/_colors.scss index 645845b4f8ca..9646a024cf4f 100644 --- a/packages/devextreme/scss/widgets/generic/treeView/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/treeView/_colors.scss @@ -14,7 +14,7 @@ $treeview-focused-bg: null !default; $treeview-focus-color: null !default; /** -* $name 90. Hovered state background color +* $name 90. Hover state background color * $type color */ $treeview-hover-bg: null !default; @@ -35,7 +35,7 @@ $treeview-item-selected-bg: null !default; $treeview-item-selected-hover-bg: null !default; /** -* $name 120. Spin icon color +* $name 120. Arrow icon color * $type color */ $treeview-spin-icon-color: null !default; diff --git a/packages/devextreme/scss/widgets/material/_colors.scss b/packages/devextreme/scss/widgets/material/_colors.scss index 112a3ed1ead1..ed81bcf61159 100644 --- a/packages/devextreme/scss/widgets/material/_colors.scss +++ b/packages/devextreme/scss/widgets/material/_colors.scss @@ -38,7 +38,7 @@ $base-label-color: null !default; $base-icon-color: null !default; /** -* $name 50. Spin icon color +* $name 50. Arrow icon color * $type color */ $base-spin-icon-color: null !default; @@ -77,13 +77,13 @@ $base-warning: #ffc107 !default; $base-danger: #f44336 !default; /** -* $name 80. Hovered state text color +* $name 80. Hover state text color * $type color */ $base-hover-color: null !default; /** -* $name 90. Hovered state background color +* $name 90. Hover state background color * $type color */ $base-hover-bg: null !default; diff --git a/packages/devextreme/scss/widgets/material/accordion/_sizes.scss b/packages/devextreme/scss/widgets/material/accordion/_sizes.scss index 0b2b9447cc83..1d64fd8dac16 100644 --- a/packages/devextreme/scss/widgets/material/accordion/_sizes.scss +++ b/packages/devextreme/scss/widgets/material/accordion/_sizes.scss @@ -13,7 +13,7 @@ $accordion-title-icon-size: null !default; $accordion-item-border-radius: $material-base-border-radius !default; /** -* $name 10. Item opened margin +* $name 10. Item expanded margin * $type text */ $material-accordion-item-opened-margin: null !default; diff --git a/packages/devextreme/scss/widgets/material/badge/_colors.scss b/packages/devextreme/scss/widgets/material/badge/_colors.scss index d9787506d86c..a0f4f0ba03ab 100644 --- a/packages/devextreme/scss/widgets/material/badge/_colors.scss +++ b/packages/devextreme/scss/widgets/material/badge/_colors.scss @@ -6,13 +6,13 @@ // adduse /** -* $name 130. Badge text color +* $name 140. Badge text color * $type color */ $badge-color: $base-inverted-text-color !default; /** -* $name 140. Badge background color +* $name 150. Badge background color * $type color */ $badge-bg: $base-accent !default; diff --git a/packages/devextreme/scss/widgets/material/button/_colors.scss b/packages/devextreme/scss/widgets/material/button/_colors.scss index 8804f92c3c01..b897c8bc57e0 100644 --- a/packages/devextreme/scss/widgets/material/button/_colors.scss +++ b/packages/devextreme/scss/widgets/material/button/_colors.scss @@ -18,19 +18,19 @@ $button-shadow-color: null !default; $button-normal-color: $base-text-color !default; /** -* $name 10. Selected item text color +* $name 20. Selected state text color * $type color */ $button-normal-selected-color: $base-text-color !default; /** -* $name 20. Background color +* $name 15. Background color * $type color */ $button-normal-bg: $base-element-bg !default; /** -* $name 30. Hovered state background color +* $name 30. Hover state background color * $type color */ $button-normal-hover-bg: null !default; @@ -48,7 +48,7 @@ $button-normal-focused-bg: null !default; $button-normal-active-bg: null !default; /** -* $name 20. Selected item background color +* $name 25. Selected state background color * $type color */ $button-normal-selected-bg: null !default; @@ -62,19 +62,19 @@ $button-normal-bg-inverted: null !default; $button-default-color: $base-inverted-text-color !default; /** -* $name 10. Selected item text color +* $name 20. Selected state text color * $type color */ $button-default-selected-color: $base-inverted-text-color !default; /** -* $name 20. Background color +* $name 15. Background color * $type color */ $button-default-bg: $base-accent !default; /** -* $name 30. Hovered state background color +* $name 30. Hover state background color * $type color */ $button-default-hover-bg: null !default; @@ -92,7 +92,7 @@ $button-default-focused-bg: null !default; $button-default-active-bg: null !default; /** -* $name 20. Selected item background color +* $name 25. Selected state background color * $type color */ $button-default-selected-bg: null !default; @@ -116,19 +116,19 @@ $button-default-text-selected-color: $button-default-bg !default; $button-danger-color: $base-inverted-text-color !default; /** -* $name 10. Selected item text color +* $name 20. Selected state text color * $type color */ $button-danger-selected-color: $base-inverted-text-color !default; /** -* $name 20. Background color +* $name 15. Background color * $type color */ $button-danger-bg: $base-danger !default; /** -* $name 30. Hovered state background color +* $name 30. Hover state background color * $type color */ $button-danger-hover-bg: null !default; @@ -146,7 +146,7 @@ $button-danger-focused-bg: null !default; $button-danger-active-bg: null !default; /** -* $name 20. Selected item background color +* $name 25. Selected state background color * $type color */ $button-danger-selected-bg: null !default; @@ -170,19 +170,19 @@ $button-danger-text-selected-color: $button-danger-bg !default; $button-success-color: $base-inverted-text-color !default; /** -* $name 10. Selected item text color +* $name 20. Selected state text color * $type color */ $button-success-selected-color: $base-inverted-text-color !default; /** -* $name 20. Background color +* $name 15. Background color * $type color */ $button-success-bg: $base-success !default; /** -* $name 30. Hovered state background color +* $name 30. Hover state background color * $type color */ $button-success-hover-bg: null !default; @@ -200,7 +200,7 @@ $button-success-focused-bg: null !default; $button-success-active-bg: null !default; /** -* $name 20. Selected item background color +* $name 25. Selected state background color * $type color */ $button-success-selected-bg: null !default; diff --git a/packages/devextreme/scss/widgets/material/dropDownEditor/_colors.scss b/packages/devextreme/scss/widgets/material/dropDownEditor/_colors.scss index fc8d8b7fdaef..3b178aac2ed1 100644 --- a/packages/devextreme/scss/widgets/material/dropDownEditor/_colors.scss +++ b/packages/devextreme/scss/widgets/material/dropDownEditor/_colors.scss @@ -9,7 +9,7 @@ $dropdowneditor-icon-color: $base-spin-icon-color !default; /** -* $name 90. Spin active icon color +* $name 90. Active arrow icon color * $type color */ $dropdowneditor-icon-active-color: $base-spin-icon-color !default; diff --git a/packages/devextreme/scss/widgets/material/fileUploader/_colors.scss b/packages/devextreme/scss/widgets/material/fileUploader/_colors.scss index 84c74d408af9..370387bc84ab 100644 --- a/packages/devextreme/scss/widgets/material/fileUploader/_colors.scss +++ b/packages/devextreme/scss/widgets/material/fileUploader/_colors.scss @@ -5,7 +5,7 @@ // adduse /** -* $name 10. Filename text color +* $name 10. File name text color * $type color */ $fileuploader-filename-color: $base-text-color !default; @@ -17,7 +17,7 @@ $fileuploader-filename-color: $base-text-color !default; $fileuploader-falename-status-color: lighten($fileuploader-filename-color, 40%) !default; /** -* $name 30. Border color on dragover +* $name 30. Drag-and-drop border color * $type color */ $fileuploader-border-color: $base-border-color !default; diff --git a/packages/devextreme/scss/widgets/material/form/_index.scss b/packages/devextreme/scss/widgets/material/form/_index.scss index 6c17b0e4c9a9..4aa986b197dc 100644 --- a/packages/devextreme/scss/widgets/material/form/_index.scss +++ b/packages/devextreme/scss/widgets/material/form/_index.scss @@ -29,7 +29,7 @@ > .dx-scrollable-wrapper { > .dx-scrollable-container { margin-left: -10px; - padding-left: 10px; + padding-left: $material-form-default-padding; } } } @@ -48,10 +48,9 @@ padding-inline-start: 20px; } - padding-bottom: 10px; + padding-bottom: $material-form-default-padding; font-size: $material-form-label-font-size; - .dx-field-item { &.dx-last-row { padding-bottom: 0; @@ -63,7 +62,15 @@ .dx-form > .dx-layout-manager.dx-layout-manager-one-col { .dx-field-item { .dx-field-item.dx-last-row:not(.dx-last-col) { - padding-bottom: 10px; + padding-bottom: $material-form-default-padding; + } + + .dx-form-group .dx-single-column-item-content > .dx-first-row.dx-col-0.dx-field-item { + padding-top: 0; + } + + .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item { + padding-top: $material-form-default-padding; } } } diff --git a/packages/devextreme/scss/widgets/material/form/_sizes.scss b/packages/devextreme/scss/widgets/material/form/_sizes.scss index 552f5e57e14b..189fd6ab26bd 100644 --- a/packages/devextreme/scss/widgets/material/form/_sizes.scss +++ b/packages/devextreme/scss/widgets/material/form/_sizes.scss @@ -11,6 +11,7 @@ $material-form-default-top-padding: null !default; $material-form-label-font-size: null !default; $material-form-label-icon-size: 14px !default; +$material-form-default-padding: 10px !default; @if $size == "default" { $material-form-label-font-size: 14px !default; diff --git a/packages/devextreme/scss/widgets/material/gridBase/_colors.scss b/packages/devextreme/scss/widgets/material/gridBase/_colors.scss index 8380884eb1eb..2661e93fb9f1 100644 --- a/packages/devextreme/scss/widgets/material/gridBase/_colors.scss +++ b/packages/devextreme/scss/widgets/material/gridBase/_colors.scss @@ -8,7 +8,7 @@ $datagrid-base-color: $base-text-color !default; /** -* $name 60. Background color +* $name 15. Background color * $type color */ $datagrid-base-background-color: $base-bg !default; @@ -42,13 +42,13 @@ $header-filter-color: null !default; $header-filter-color-empty: null !default; /** -* $name 55. Selected row background color +* $name 51. Selected row background color * $type color */ $datagrid-selection-bg: null !default; /** -* $name 60. Selected row border color +* $name 52. Selected row border color * $type color */ $datagrid-row-selected-border-color: $datagrid-border-color !default; @@ -74,7 +74,7 @@ $datagrid-hover-bg: $base-hover-bg !default; $datagrid-row-hovered-color: $base-hover-color !default; /** -* $name 30. Context menu icons color +* $name 30. Context menu icon color * $type color */ $datagrid-menu-icon-color: lighten($base-icon-color, 33.7%) !default; @@ -89,7 +89,7 @@ $datagrid-row-removed-bg: $datagrid-border-color !default; $datagrid-cell-removed-text-color: null !default; /** -* $name 45. Invalidate data faded color +* $name 45. Invalid data faded color * $type color */ $datagrid-row-invalid-faded-border-color: color.change($base-invalid-faded-border-color, $alpha: 0.32) !default; @@ -141,7 +141,7 @@ $datagrid-link-color: $base-link-color !default; $datagrid-focused-border-color: mix($base-bg, $base-accent, 20%) !default; /** -* $name 80. Editor background +* $name 80. Editor background color * $type color */ $datagrid-editor-bg: color.change($datagrid-base-background-color, $alpha: 0) !default; @@ -151,7 +151,7 @@ $datagrid-columnchooser-bg: $base-element-bg !default; $datagrid-columnchooser-item-bg: null !default; /** -* $name 85. Row alternation background color +* $name 85. Alternate row background color * $type color */ $datagrid-row-alternation-bg: null !default; diff --git a/packages/devextreme/scss/widgets/material/list/_colors.scss b/packages/devextreme/scss/widgets/material/list/_colors.scss index a816b7a3d700..a0f7f65006ee 100644 --- a/packages/devextreme/scss/widgets/material/list/_colors.scss +++ b/packages/devextreme/scss/widgets/material/list/_colors.scss @@ -36,13 +36,13 @@ $list-normal-color: $base-text-color !default; $list-expanded-group-color: $base-text-color !default; /** -* $name 30. Hovered item background color +* $name 30. Hovered state item background color * $type color */ $list-item-hover-bg: $base-hover-bg !default; /** -* $name 30. Selected item state background color +* $name 30. Selected state item background color * $type color */ $list-item-selected-bg: null !default; diff --git a/packages/devextreme/scss/widgets/material/loadIndicator/_colors.scss b/packages/devextreme/scss/widgets/material/loadIndicator/_colors.scss index 3ef4d0795a23..4eb46ac2f871 100644 --- a/packages/devextreme/scss/widgets/material/loadIndicator/_colors.scss +++ b/packages/devextreme/scss/widgets/material/loadIndicator/_colors.scss @@ -5,7 +5,7 @@ // adduse /** -* $name 10. Load indicator color +* $name 10. Indicator color * $type color */ $load-indicator-segment-bg-color: $base-accent !default; diff --git a/packages/devextreme/scss/widgets/material/loadPanel/_colors.scss b/packages/devextreme/scss/widgets/material/loadPanel/_colors.scss index 152faa009c31..d60f36aab0b3 100644 --- a/packages/devextreme/scss/widgets/material/loadPanel/_colors.scss +++ b/packages/devextreme/scss/widgets/material/loadPanel/_colors.scss @@ -9,7 +9,7 @@ $loadpanel-border-color: null !default; $loadpanel-content-shadow-color: color.change($base-shadow-color, $alpha: 0.25) !default; /** -* $name 20. Loadpanel background color +* $name 30. Background color * $type color */ $loadpanel-content-bg: $overlay-content-bg !default; diff --git a/packages/devextreme/scss/widgets/material/lookup/_index.scss b/packages/devextreme/scss/widgets/material/lookup/_index.scss index 73993ecac339..9dd572476683 100644 --- a/packages/devextreme/scss/widgets/material/lookup/_index.scss +++ b/packages/devextreme/scss/widgets/material/lookup/_index.scss @@ -115,10 +115,6 @@ $material-base-icon-size, ); -.dx-state-readonly .dx-lookup-field::before { - opacity: 0.5; -} - .dx-lookup-popup-wrapper { .dx-list-item { border-top: none; diff --git a/packages/devextreme/scss/widgets/material/menuBase/_index.scss b/packages/devextreme/scss/widgets/material/menuBase/_index.scss index 8e5576e8f8f5..cd7635804471 100644 --- a/packages/devextreme/scss/widgets/material/menuBase/_index.scss +++ b/packages/devextreme/scss/widgets/material/menuBase/_index.scss @@ -21,6 +21,10 @@ $material-menu-arrow-image-size: 7px; color: $typography-link-color; } + &.dx-state-disabled { + opacity: 0.5; + } + &.dx-state-hover { background-color: $menu-item-hover-bg; } diff --git a/packages/devextreme/scss/widgets/material/pager/_colors.scss b/packages/devextreme/scss/widgets/material/pager/_colors.scss index a1f2addcfd77..09366aa7c225 100644 --- a/packages/devextreme/scss/widgets/material/pager/_colors.scss +++ b/packages/devextreme/scss/widgets/material/pager/_colors.scss @@ -5,14 +5,14 @@ // adduse /** -* $name 150. Pager selected item text color +* $name 180. Pager selected item text color * $type color */ $pager-page-selected-color: $base-inverted-text-color !default; $pager-page-hovered-bg: $base-hover-bg !default; /** -* $name 160. Pager selected item background color +* $name 190. Pager selected item background color * $type color */ $pager-page-selected-bg: $base-accent !default; diff --git a/packages/devextreme/scss/widgets/material/pivotGrid/_colors.scss b/packages/devextreme/scss/widgets/material/pivotGrid/_colors.scss index 7c54008b0c8a..60aa28e4caac 100644 --- a/packages/devextreme/scss/widgets/material/pivotGrid/_colors.scss +++ b/packages/devextreme/scss/widgets/material/pivotGrid/_colors.scss @@ -17,13 +17,13 @@ $pivotgrid-field-area-box-background-color: null !default; $pivotgrid-data-area-color: $base-text-color !default; /** -* $name 20. Totals background color +* $name 20. Total background color * $type color */ $pivotgrid-totalcolor: color.change(darken($pivotgrid-area-background, 13.3%), $alpha: 0.2) !default; /** -* $name 30. Grand totals background color +* $name 30. Grand total background color * $type color */ $pivotgrid-grandtotalcolor: $base-hover-bg !default; diff --git a/packages/devextreme/scss/widgets/material/scheduler/_colors.scss b/packages/devextreme/scss/widgets/material/scheduler/_colors.scss index e4c8a42ba6ac..79404825c727 100644 --- a/packages/devextreme/scss/widgets/material/scheduler/_colors.scss +++ b/packages/devextreme/scss/widgets/material/scheduler/_colors.scss @@ -34,7 +34,7 @@ $scheduler-appointment-focus-color: $scheduler-appointment-text-color !default; $scheduler-appointment-base-color: $base-accent !default; /** -* $name 50. Start appointment color +* $name 50. Appointment start color * $type color */ $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default; diff --git a/packages/devextreme/scss/widgets/material/scrollable/_colors.scss b/packages/devextreme/scss/widgets/material/scrollable/_colors.scss index bcdd5ae6c820..5d40a0c60216 100644 --- a/packages/devextreme/scss/widgets/material/scrollable/_colors.scss +++ b/packages/devextreme/scss/widgets/material/scrollable/_colors.scss @@ -7,7 +7,7 @@ $scrollable-bg: $base-bg !default; /** -* $name 10. Scroller background color +* $name 10. Scroll bar background color * $type color */ $scrollable-scroll-bg: null !default; diff --git a/packages/devextreme/scss/widgets/material/slider/_colors.scss b/packages/devextreme/scss/widgets/material/slider/_colors.scss index 7bba9a497f9a..bd9822985bac 100644 --- a/packages/devextreme/scss/widgets/material/slider/_colors.scss +++ b/packages/devextreme/scss/widgets/material/slider/_colors.scss @@ -6,7 +6,7 @@ // adduse /** -* $name 10. Slider bar background color +* $name 10. Bar background color * $type color */ $material-slider-bar-bg: color.change($base-accent, $alpha: 0.24) !default; diff --git a/packages/devextreme/scss/widgets/material/tabs/layout/tab/_base.scss b/packages/devextreme/scss/widgets/material/tabs/layout/tab/_base.scss index 1e7cbd040b5c..a252452fd951 100644 --- a/packages/devextreme/scss/widgets/material/tabs/layout/tab/_base.scss +++ b/packages/devextreme/scss/widgets/material/tabs/layout/tab/_base.scss @@ -52,6 +52,10 @@ line-height: $material-tab-text-line-height; font-weight: 500; text-transform: uppercase; + + .dx-tab-text-span-pseudo { + display: none; + } } .dx-icon { @@ -59,6 +63,10 @@ @include dx-icon-sizing($material-tabs-icon-size); } + + .dx-tabs-item-badge { + align-self: center; + } } .dx-tabs.dx-state-focused { diff --git a/packages/devextreme/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss b/packages/devextreme/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss index bbbef371a4ee..c3116658d947 100644 --- a/packages/devextreme/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss +++ b/packages/devextreme/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss @@ -15,6 +15,10 @@ .dx-tabs-styling-mode-secondary { + &.dx-tabs-horizontal .dx-tabs-scrollable .dx-tab { + flex-basis: auto; + } + .dx-tab { min-width: 0; diff --git a/packages/devextreme/testing/helpers/wrappers/tabsWrappers.js b/packages/devextreme/testing/helpers/wrappers/tabsWrappers.js index 63b3f1b20aac..cbfdb65c5097 100644 --- a/packages/devextreme/testing/helpers/wrappers/tabsWrappers.js +++ b/packages/devextreme/testing/helpers/wrappers/tabsWrappers.js @@ -17,9 +17,15 @@ export class TestTabsWrapper { } _checkTabsContent($tabs) { - const items = this._tabs.option('items'); - $tabs.toArray().forEach((tabElement, index) => - QUnit.assert.equal($(tabElement).text(), items[index].text, `text of the ${index} tab`) + const { items, itemTemplate } = this._tabs.option(); + + $tabs.toArray().forEach((tabElement, index) => { + const expectedValue = itemTemplate === 'item' + ? `${items[index].text}${items[index].text}` + : items[index].text; + + QUnit.assert.strictEqual($(tabElement).text(), expectedValue, `text of the ${index} tab`); + } ); } diff --git a/packages/devextreme/testing/launch b/packages/devextreme/testing/launch old mode 100755 new mode 100644 diff --git a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (fluent-blue-light).png index e71e0326a8ed..719e6236121d 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (generic-light).png b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (generic-light).png index 4b2caf9f4b95..7e5d4062dbdf 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (generic-light).png and b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (material-blue-light).png index 86deb15ddc5a..d055e8a93c8c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (fluent-blue-light).png index 72b63ecffe63..e9216c136ef1 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (generic-light).png b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (generic-light).png index f783a46c7ee5..f47e33a5dbe2 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (generic-light).png and b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (material-blue-light).png index 650d29b99880..45ab18dbc6b6 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/list/etalons/Grouped list appearance,collapsibleGroups=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/list/grouping.ts b/packages/devextreme/testing/testcafe/tests/editors/list/grouping.ts index 2af6c34d253f..daaa4d898f54 100644 --- a/packages/devextreme/testing/testcafe/tests/editors/list/grouping.ts +++ b/packages/devextreme/testing/testcafe/tests/editors/list/grouping.ts @@ -26,14 +26,19 @@ test('Grouped list appearance', async (t) => { .ok(compareResults.errorMessages()); }).before(async () => createWidget('dxList', { width: 300, - height: 500, + height: 800, dataSource: [{ key: 'group_1', items: ['item_1_1', 'item_1_2', 'item_1_3'], expanded: false, }, { key: 'group_2', - items: ['item_2_1', 'item_2_2', 'item_2_3'], + items: [ + { text: 'item_2_1', disabled: true }, + { text: 'item_2_2', icon: 'home' }, + { text: 'item_2_3', showChevron: true, badge: 'item_2_3' }, + { text: 'item_2_4', badge: 'item_2_4' }, + 'item_2_5'], }, { key: 'group_3', items: ['item_3_1', 'item_3_2', 'item_3_3'], @@ -41,6 +46,11 @@ test('Grouped list appearance', async (t) => { }], collapsibleGroups: true, grouped: true, + allowItemDeleting: true, + itemDeleteMode: 'static', + itemDragging: { + allowReordering: true, + }, })); test('Grouped list appearance with template', async (t) => { diff --git a/packages/devextreme/testing/testcafe/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (fluent-blue-light).png index db9adbb72f48..895349858d52 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form item padding with screenByWidth=xs (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form item padding with screenByWidth=xs (fluent-blue-light).png index f3cc47e84149..2da517951641 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form item padding with screenByWidth=xs (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form item padding with screenByWidth=xs (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png index 38329a6966ca..d34af0e76729 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png index 14718de6ac9a..a0af4ad9eecf 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png index aea96c6abbdf..83c29034b6a3 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=floating,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png index e1cddb425bc7..aaf66dedceb1 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png index d3d1af2b77f1..f4f27cda370b 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png index 318bc851f978..d665e3281bdb 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=hidden,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png index e1cddb425bc7..aaf66dedceb1 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png index d3d1af2b77f1..f4f27cda370b 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png index 318bc851f978..d665e3281bdb 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=outside,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png index 90009bae76d0..21dd682e8180 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=filled (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png index 21803c2e6b52..4c0faa98fd37 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=outlined (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png index fcaaa159d522..4e869482c3ff 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/Form,lMode=static,lLoc=top,lVis=true,lAl=left,e.lMode=undefined,e.sMode=underlined (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png index 49909c2e4b6b..ccc4ad20ef91 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png index 49909c2e4b6b..ccc4ad20ef91 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png index 49909c2e4b6b..ccc4ad20ef91 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png index 49909c2e4b6b..ccc4ad20ef91 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=floating,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png index 6204b80fb3e6..189991bf4a5c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png index 6204b80fb3e6..189991bf4a5c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png index 6204b80fb3e6..189991bf4a5c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png index 6204b80fb3e6..189991bf4a5c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=outside,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png index edcf5717468f..c25d58ccfabd 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=false,alignInGrp=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png index edcf5717468f..c25d58ccfabd 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=false,alignInGrp=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png index edcf5717468f..c25d58ccfabd 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=true,alignInGrp=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png index edcf5717468f..c25d58ccfabd 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/align items,lblMode=static,alignInAllGrp=true,alignInGrp=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=floating, shwSmclnAfterlbl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=floating, shwSmclnAfterlbl=false (fluent-blue-light).png index d10c2ae13fca..24e8e837bac1 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=floating, shwSmclnAfterlbl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=floating, shwSmclnAfterlbl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=floating, shwSmclnAfterlbl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=floating, shwSmclnAfterlbl=true (fluent-blue-light).png index 787904cc7dc9..3d7d2b1bfd58 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=floating, shwSmclnAfterlbl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=floating, shwSmclnAfterlbl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=outside, shwSmclnAfterlbl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=outside, shwSmclnAfterlbl=false (fluent-blue-light).png index 58b192cddf15..259f36240e7a 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=outside, shwSmclnAfterlbl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=outside, shwSmclnAfterlbl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=outside, shwSmclnAfterlbl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=outside, shwSmclnAfterlbl=true (fluent-blue-light).png index a3dd06009d5a..df69b22432fd 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=outside, shwSmclnAfterlbl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=outside, shwSmclnAfterlbl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=static, shwSmclnAfterlbl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=static, shwSmclnAfterlbl=false (fluent-blue-light).png index 380493565966..3a687b448796 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=static, shwSmclnAfterlbl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=static, shwSmclnAfterlbl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=static, shwSmclnAfterlbl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=static, shwSmclnAfterlbl=true (fluent-blue-light).png index 3f36a3c3e985..e797e1b44761 100644 Binary files a/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=static, shwSmclnAfterlbl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/form/etalons/show semicolon, lblMode=static, shwSmclnAfterlbl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/menu/common.ts b/packages/devextreme/testing/testcafe/tests/navigation/menu/common.ts index 5b8a88169a99..0cfb59a31d5a 100644 --- a/packages/devextreme/testing/testcafe/tests/navigation/menu/common.ts +++ b/packages/devextreme/testing/testcafe/tests/navigation/menu/common.ts @@ -58,7 +58,14 @@ test('Menu items render', async (t) => { text: 'remove', icon: 'remove', items: [ - { text: 'user', icon: 'user' }, + { + text: 'user', + icon: 'user', + disabled: true, + items: [{ + text: 'user_1', + }], + }, { text: 'save', icon: 'save', @@ -70,7 +77,11 @@ test('Menu items render', async (t) => { ], }, { text: 'user', icon: 'user' }, - { text: 'coffee', icon: 'coffee' }, + { + text: 'coffee', + icon: 'coffee', + disabled: true, + }, ] as Item[]; return createWidget('dxMenu', { items: menuItems, cssClass: 'custom-class' }, '#menu'); diff --git a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (fluent-blue-light).png index 145c9ec60a71..520e1175cde8 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (fluent-blue-light-compact).png index 832af818c59a..5f4747268efc 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-contrast).png b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-contrast).png index 9c888bab1dcd..5087887c630d 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-contrast).png and b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-contrast).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-dark).png b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-dark).png index 6b7e9faa0470..bd01deea33b4 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-dark).png and b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-dark).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-light).png index cb0c5b8e9a16..8ab14c976eb6 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-light-compact).png index cb448360aedb..cbc7a524cf63 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (material-blue-light).png index 0d8fa07e88eb..a85cda2b145d 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (material-blue-light-compact).png index a7afd97c144c..1a4548350ee1 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (material-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/menu/etalons/Menu render items (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/common.ts b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/common.ts index e595bca0d3a7..04c154037252 100644 --- a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/common.ts +++ b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/common.ts @@ -8,7 +8,7 @@ import url from '../../../helpers/getPageUrl'; import createWidget from '../../../helpers/createWidget'; import TabPanel from '../../../model/tabPanel'; import { Item } from '../../../../../js/ui/tab_panel.d'; -import { setAttribute } from '../../../helpers/domUtils'; +import { setAttribute, appendElementTo } from '../../../helpers/domUtils'; // const TABS_RIGHT_NAV_BUTTON_CLASS = 'dx-tabs-nav-button-right'; // const TABS_LEFT_NAV_BUTTON_CLASS = 'dx-tabs-nav-button-left'; @@ -80,6 +80,38 @@ test('TabPanel borders with scrolling', async (t) => { return createWidget('dxTabPanel', tabPanelOptions); }); +['primary', 'secondary'].forEach((stylingMode) => { + test(`Tab item width in a bounded container, stylingMode=${stylingMode}`, async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await testScreenshot(t, takeScreenshot, `Tab item width in a bounded container, stylingMode=${stylingMode}.png`, { element: '#tabpanel' }); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); + }).before(async () => { + await appendElementTo('#container', 'div', 'tabpanel'); + await setAttribute('#container', 'style', 'width: 200px;'); + + const dataSource = [ + { title: 'John Heart', text: 'John Heart' }, + { title: 'Marina Thomas', text: 'Marina Thomas' }, + { title: 'Robert Reagan', text: 'Robert Reagan' }, + { title: 'Olivia Peyton', text: 'Olivia Peyton' }, + { title: 'Ed Holmes', text: 'Ed Holmes' }, + { title: 'Wally Hobbs', text: 'Wally Hobbs' }, + { title: 'Brad Jameson', text: 'Brad Jameson' }, + ] as Item[]; + + const options = { + dataSource, + height: 250, + }; + + return createWidget('dxTabPanel', options, '#tabpanel'); + }); +}); + test('TabPanel text-overflow with tabsPosition left', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=primary (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=primary (fluent-blue-light).png new file mode 100644 index 000000000000..8c0d31e78347 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=primary (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=primary (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=primary (generic-light).png new file mode 100644 index 000000000000..38c51dd02d0f Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=primary (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=primary (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=primary (material-blue-light).png new file mode 100644 index 000000000000..6926de316a3c Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=primary (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=secondary (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=secondary (fluent-blue-light).png new file mode 100644 index 000000000000..8c0d31e78347 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=secondary (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=secondary (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=secondary (generic-light).png new file mode 100644 index 000000000000..38c51dd02d0f Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=secondary (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=secondary (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=secondary (material-blue-light).png new file mode 100644 index 000000000000..6926de316a3c Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/Tab item width in a bounded container, stylingMode=secondary (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (fluent-blue-light).png index 1315e04a99c3..da87843dedca 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (generic-light).png index 3b298a7b587c..01595fc31123 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (fluent-blue-light).png index bbbec629e4f7..3f5e24d5e7ab 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (generic-light).png index 89cae2652d99..0489140d8982 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=false (fluent-blue-light).png index 02c583d27f32..35ad3b64f913 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=true (fluent-blue-light).png index f7114f9c86ae..79265b873a31 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=false (fluent-blue-light).png index 911cd8799aaa..7cd518067068 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=true (fluent-blue-light).png index 3ef9da6638c5..1806d348a505 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (fluent-blue-light).png index 20d073516ef4..a1edc331eeb4 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (generic-light).png index 4c02f8fa9051..bb689714345c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (fluent-blue-light).png index 2bbaf4c03711..a01f0b861742 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (generic-light).png index 7718d0a70160..393110e33c47 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel tabs min-width (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel tabs min-width (fluent-blue-light).png index 16bab1acaf7f..24036c30a9d4 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel tabs min-width (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel tabs min-width (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabs wrapper width is limited (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabs wrapper width is limited (fluent-blue-light).png index 18debc570c8c..bfc8be24fe23 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabs wrapper width is limited (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabs wrapper width is limited (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabsPosition is left (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabsPosition is left (fluent-blue-light).png index 965d25980f8b..ad27820cb292 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabsPosition is left (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabsPosition is left (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=primary,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=primary,rtl=false (fluent-blue-light).png index 54bcbc7e6eb7..9dc9307fc8fa 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=primary,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=primary,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=primary,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=primary,rtl=true (fluent-blue-light).png index 8a152e6bd27d..140d24009e85 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=primary,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=primary,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=false (fluent-blue-light).png index 12543916ed36..a2323cfe753d 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=false (material-blue-light).png index 2b499dd2dae6..ca34068ba5c6 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=false (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=true (fluent-blue-light).png index a6a818b76d39..157ec54057cf 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=true (material-blue-light).png index 87342ad091ea..6893bbd5a0ce 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=true (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected stylingMode=secondary,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=primary,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=primary,rtl=false (fluent-blue-light).png index 37f902c6b961..8631a40d7705 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=primary,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=primary,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=primary,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=primary,rtl=true (fluent-blue-light).png index 7da7bd6c5ee1..700bb5e57810 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=primary,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=primary,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=false (fluent-blue-light).png index 4426e0e80df0..82b70ec76c76 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=false (material-blue-light).png index 5b8a1ca913ad..429825366775 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=false (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=true (fluent-blue-light).png index 5daf32b5b2d8..0f8dddf57891 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=true (material-blue-light).png index 6448b1563fb5..51500d3b8b51 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=true (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 1 selected,active stylingMode=secondary,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=primary,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=primary,rtl=false (fluent-blue-light).png index 37f902c6b961..8631a40d7705 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=primary,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=primary,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=primary,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=primary,rtl=true (fluent-blue-light).png index 7da7bd6c5ee1..700bb5e57810 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=primary,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=primary,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=false (fluent-blue-light).png index 4426e0e80df0..82b70ec76c76 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=false (material-blue-light).png index 5b8a1ca913ad..429825366775 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=false (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=true (fluent-blue-light).png index 5daf32b5b2d8..0f8dddf57891 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=true (material-blue-light).png index 6448b1563fb5..51500d3b8b51 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=true (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs 3 not selected,active stylingMode=secondary,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (fluent-blue-light).png index 2637b2c72ae4..553d2df237e2 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (fluent-blue-light-compact).png index 249faedb69a7..87aa584a3aee 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (generic-light).png index a07d6e195a13..736c514f61d7 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (generic-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (generic-light-compact).png index 56176ac10f74..6edd52ac4186 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (generic-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (generic-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (fluent-blue-light).png index 39ec79240342..325d7ce84122 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (fluent-blue-light-compact).png index 457507b01de4..4774917835ee 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (generic-light).png index e00058a87261..c3c2e2ce2203 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (generic-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (generic-light-compact).png index efcbeaedd5b2..3cf68d5d0fb8 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (generic-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (generic-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (fluent-blue-light).png index b35d42c610f1..1c255ac6fab8 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (fluent-blue-light-compact).png index d828a1374e75..e14d525c88f1 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (generic-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (generic-light-compact).png index dafb0ada31a8..f092c093d040 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (generic-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (generic-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (fluent-blue-light).png index f082ba3c4201..2aba8717931d 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (fluent-blue-light-compact).png index a97fb14dc10d..6692af722826 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (generic-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (generic-light-compact).png index 47639dd6e588..359469ffe3bc 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (generic-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (generic-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (fluent-blue-light).png index e54e9cd79498..bcb6229c0545 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (fluent-blue-light-compact).png index e253990ee7db..f1f9bb338177 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (generic-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (generic-light-compact).png index 0220838a732e..288609357955 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (generic-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (generic-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (fluent-blue-light).png index e93d458ba7ae..af165fbb1891 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (fluent-blue-light-compact).png index bfd166a991f4..8480f367bd50 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (generic-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (generic-light-compact).png index 82b316af8d92..2bb327d529a0 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (generic-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (generic-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (fluent-blue-light).png index 969e1d077b40..a69a30762479 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (fluent-blue-light-compact).png index 3c3d34a25342..b06e7699ed57 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (generic-light).png index 2ced7618bfbc..36914c099eda 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (generic-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (generic-light-compact).png index d65f34f685d6..5508ad8b08a3 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (generic-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (generic-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (fluent-blue-light).png index 183166571951..ea5a64722e54 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (fluent-blue-light-compact).png index a6a3635c0567..7eac92718c3a 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (generic-light).png index dae5fb730b64..40619f91f071 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (generic-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (generic-light-compact).png index 0cf845e6920b..d50c2eb4e043 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (generic-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (generic-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow (fluent-blue-light).png index f5292b8533a2..a69528820067 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when height is limited (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when height is limited (fluent-blue-light).png index 0a33aa98bb5e..20032ec36d43 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when height is limited (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when height is limited (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when height is limited (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when height is limited (generic-light).png index 23e6a0c3ca56..b5156e9c7f39 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when height is limited (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when height is limited (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when iconPosition is top (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when iconPosition is top (fluent-blue-light).png index f5292b8533a2..a69528820067 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when iconPosition is top (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when iconPosition is top (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when iconPosition is top (generic-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when iconPosition is top (generic-light).png index e05f198113bb..62e2d66dd1b3 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when iconPosition is top (generic-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs text-overflow when iconPosition is top (generic-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs with width auto (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs with width auto (fluent-blue-light).png index 83cc24cd44cd..719989bee304 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs with width auto (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs with width auto (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs with width auto (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs with width auto (fluent-blue-light-compact).png index bf2f1a1e2e58..eadc3ba2dd15 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs with width auto (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs with width auto (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-blue-light).png index 75e1e9e32770..ba00f775bd94 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-blue-light-compact).png index 6305c4693cbc..8ad75852977c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=auto (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=auto (fluent-blue-light).png index 75e1e9e32770..ba00f775bd94 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=auto (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=auto (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=auto (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=auto (fluent-blue-light-compact).png index 6305c4693cbc..8ad75852977c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=auto (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=auto (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-blue-light).png index 9a767ada552a..cd27e2075fdb 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-blue-light-compact).png index 2e9453519a69..c3478f97215d 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-blue-light).png index 8d210d80c640..7a14cd7927fb 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-blue-light-compact).png index 77e464aa8659..48f251f2ec84 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=auto (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=auto (fluent-blue-light).png index 8d210d80c640..7a14cd7927fb 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=auto (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=auto (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=auto (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=auto (fluent-blue-light-compact).png index 77e464aa8659..48f251f2ec84 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=auto (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=auto (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-blue-light).png index bca8ffef5613..6bebd3c5c340 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-blue-light-compact).png index 6a65eef6d618..aef13e2150f0 100644 Binary files a/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/allday-and-reccurence-form_fluent.blue.light.png b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/allday-and-reccurence-form_fluent.blue.light.png index 569edbf6bb30..f49fc11d3f39 100644 Binary files a/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/allday-and-reccurence-form_fluent.blue.light.png and b/packages/devextreme/testing/testcafe/tests/scheduler/layout/appointmentForm/etalons/allday-and-reccurence-form_fluent.blue.light.png differ diff --git a/packages/devextreme/testing/tests/DevExpress.core/component.tests.js b/packages/devextreme/testing/tests/DevExpress.core/component.tests.js index 70368d7e03b5..9403faa219f9 100644 --- a/packages/devextreme/testing/tests/DevExpress.core/component.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.core/component.tests.js @@ -5,7 +5,6 @@ import { PostponedOperations } from 'core/postponed_operations'; import errors from 'core/errors'; import devices from 'core/devices'; import config from 'core/config'; -import licenseModule, { setLicenseCheckSkipCondition } from '__internal/core/license/license_validation'; const TestComponent = Component.inherit({ @@ -1731,32 +1730,3 @@ QUnit.module('action API', {}, () => { config({ wrapActionsBeforeExecute: originFlag }); }); }); - -QUnit.module('License check', { - beforeEach: function() { - sinon.spy(licenseModule, 'validateLicense'); - setLicenseCheckSkipCondition(false); - }, - afterEach: function() { - licenseModule.validateLicense.restore(); - } -}, () => { - QUnit.test('validateLicense() method should be called once', function(assert) { - new TestComponent(); - - assert.ok(licenseModule.validateLicense.calledOnce); - }); - - QUnit.test('validateLicense() method should be called with license from config', function(assert) { - try { - const licenseKey = 'license key'; - config({ licenseKey }); - - new TestComponent(); - - assert.ok(licenseModule.validateLicense.calledWith(licenseKey)); - } finally { - config({ licenseKey: null }); - } - }); -}); diff --git a/packages/devextreme/testing/tests/DevExpress.core/domComponent.tests.js b/packages/devextreme/testing/tests/DevExpress.core/domComponent.tests.js index 35f506d865c1..7f80ca7a6d1a 100644 --- a/packages/devextreme/testing/tests/DevExpress.core/domComponent.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.core/domComponent.tests.js @@ -9,6 +9,7 @@ import publicComponentUtils from 'core/utils/public_component'; import resizeCallbacks from 'core/utils/resize_callbacks'; import eventsEngine from 'events/core/events_engine'; import { triggerResizeEvent } from 'events/visibility_change'; +import licenseModule, { setLicenseCheckSkipCondition } from '__internal/core/license/license_validation'; import $ from 'jquery'; const nameSpace = {}; @@ -1170,3 +1171,59 @@ QUnit.module('default', { assert.equal(element.style.height, '10px', 'height is correct'); }); }); + +QUnit.module('License check', { + beforeEach: function() { + this.TestComponent = DOMComponent.inherit(); + sinon.spy(licenseModule, 'validateLicense'); + setLicenseCheckSkipCondition(false); + }, + afterEach: function() { + licenseModule.validateLicense.restore(); + } +}, () => { + QUnit.test('validateLicense() method should be called once', function(assert) { + new this.TestComponent('#component'); + + assert.ok(licenseModule.validateLicense.calledOnce); + }); + + QUnit.test('validateLicense() method should be called with license from config', function(assert) { + try { + const licenseKey = 'license key'; + config({ licenseKey }); + + new this.TestComponent('#component'); + + assert.ok(licenseModule.validateLicense.calledWith(licenseKey)); + } finally { + config({ licenseKey: null }); + } + }); + + QUnit.test('license should be removed from config after validateLicense() executed', function(assert) { + try { + const licenseKey = 'license key'; + config({ licenseKey }); + new this.TestComponent('#component'); + + assert.strictEqual(config().licenseKey, ''); + } finally { + config({ licenseKey: null }); + } + }); + + QUnit.test('license should be removed from config once', function(assert) { + try { + const licenseKey = 'license key'; + + new this.TestComponent('#component'); + config({ licenseKey }); + new this.TestComponent('#component'); + + assert.strictEqual(config().licenseKey, licenseKey); + } finally { + config({ licenseKey: null }); + } + }); +}); diff --git a/packages/devextreme/testing/tests/DevExpress.core/utils.error.tests.js b/packages/devextreme/testing/tests/DevExpress.core/utils.error.tests.js index b366d38b88f5..f86a40932421 100644 --- a/packages/devextreme/testing/tests/DevExpress.core/utils.error.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.core/utils.error.tests.js @@ -41,12 +41,12 @@ const mockVersion = function(s) { QUnit.test('\'log\' method logs error on console if ID is matched to error id pattern', function(assert) { errors.log('E1'); - assert.deepEqual(mockVersion(this.log[0].error), 'E1 - Error 1.\n\nFor additional information on this error message, see: http://js.devexpress.com/error/[VERSION]/E1'); + assert.deepEqual(mockVersion(this.log[0].error), 'E1 - Error 1.\n\nFor additional information on this error message, see: https://js.devexpress.com/error/[VERSION]/E1'); }); QUnit.test('\'log\' method logs warning on console if ID is matched to warning id pattern', function(assert) { errors.log('W1'); - assert.deepEqual(mockVersion(this.log[0].warn), 'W1 - Warning 1.\n\nFor additional information on this warning message, see: http://js.devexpress.com/error/[VERSION]/W1'); + assert.deepEqual(mockVersion(this.log[0].warn), 'W1 - Warning 1.\n\nFor additional information on this warning message, see: https://js.devexpress.com/error/[VERSION]/W1'); }); QUnit.test('\'log\' method logs message on console if ID is not matched to any patterns', function(assert) { @@ -57,7 +57,7 @@ QUnit.test('\'log\' method logs message on console if ID is not matched to any p QUnit.test('\'Error\' method creates Error instance', function(assert) { const error = errors.Error('E1'); assert.ok(error instanceof Error); - assert.equal(mockVersion(error.message), 'E1 - Error 1.\n\nFor additional information on this error message, see: http://js.devexpress.com/error/[VERSION]/E1'); + assert.equal(mockVersion(error.message), 'E1 - Error 1.\n\nFor additional information on this error message, see: https://js.devexpress.com/error/[VERSION]/E1'); }); QUnit.test('\'Error\' method called with \'new\' returns Error instance', function(assert) { @@ -73,13 +73,13 @@ QUnit.test('\'Error\' method creates Error with \'__details\' and \'__id\' prope QUnit.test('\'Error\' method create Error with no unnecessary dots', function(assert) { const error = errors.Error('E2'); - assert.equal(mockVersion(error.message), 'E2 - Error 2.\n\nFor additional information on this error message, see: http://js.devexpress.com/error/[VERSION]/E2'); + assert.equal(mockVersion(error.message), 'E2 - Error 2.\n\nFor additional information on this error message, see: https://js.devexpress.com/error/[VERSION]/E2'); }); QUnit.test('\'log\' and \'error\' method support string formatting', function(assert) { errors.log('W2', 'Core'); - assert.deepEqual(mockVersion(this.log[0].warn), 'W2 - Core module is not initialized.\n\nFor additional information on this warning message, see: http://js.devexpress.com/error/[VERSION]/W2'); + assert.deepEqual(mockVersion(this.log[0].warn), 'W2 - Core module is not initialized.\n\nFor additional information on this warning message, see: https://js.devexpress.com/error/[VERSION]/W2'); const error = errors.Error('W2', 'Core'); - assert.equal(mockVersion(error.message), 'W2 - Core module is not initialized.\n\nFor additional information on this warning message, see: http://js.devexpress.com/error/[VERSION]/W2'); + assert.equal(mockVersion(error.message), 'W2 - Core module is not initialized.\n\nFor additional information on this warning message, see: https://js.devexpress.com/error/[VERSION]/W2'); }); diff --git a/packages/devextreme/testing/tests/DevExpress.data/odataStore.tests.js b/packages/devextreme/testing/tests/DevExpress.data/odataStore.tests.js index c865f3594ddc..47aeef00fdec 100644 --- a/packages/devextreme/testing/tests/DevExpress.data/odataStore.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.data/odataStore.tests.js @@ -836,7 +836,7 @@ QUnit.test('Should show E4024 error when searching or filtering an Int32 field ( function assertFunc(message, operation) { assert.equal(message.replace(/\d+_\d+/, '[VERSION]'), - `E4024 - String function ${operation} cannot be used with the data field id of type Int32.\n\nFor additional information on this error message, see: http://js.devexpress.com/error/[VERSION]/E4024`); + `E4024 - String function ${operation} cannot be used with the data field id of type Int32.\n\nFor additional information on this error message, see: https://js.devexpress.com/error/[VERSION]/E4024`); } const promises = [ diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js index a65b08ed6bce..2a150a79c949 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js @@ -856,7 +856,7 @@ QUnit.module('Initialization', baseModuleConfig, () => { QUnit.test('Raise error if key field is missed', function(assert) { // act - const errorUrl = 'http://js.devexpress.com/error/' + version.split('.').slice(0, 2).join('_') + '/E1046'; + const errorUrl = 'https://js.devexpress.com/error/' + version.split('.').slice(0, 2).join('_') + '/E1046'; const dataGrid = createDataGrid({ columns: ['field1'], keyExpr: 'ID', @@ -875,7 +875,7 @@ QUnit.module('Initialization', baseModuleConfig, () => { QUnit.test('Raise error if key field is missed and one of columns is named \'key\'', function(assert) { // act - const errorUrl = 'http://js.devexpress.com/error/' + version.split('.').slice(0, 2).join('_') + '/E1046'; + const errorUrl = 'https://js.devexpress.com/error/' + version.split('.').slice(0, 2).join('_') + '/E1046'; const dataGrid = createDataGrid({ columns: ['key'], keyExpr: 'ID', diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.option_tabs.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.option_tabs.tests.js index 2e324b269fdf..306d1073f2c0 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.option_tabs.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.option_tabs.tests.js @@ -80,7 +80,7 @@ class FormTestWrapper { checkTabTitle(tabIndex, expectedText) { const $title = this._getTabsTextsElements().eq(tabIndex); - assert.strictEqual($title.text(), expectedText, `${tabIndex} tab title`); + assert.strictEqual($title.text(), `${expectedText}${expectedText}`, `${tabIndex} tab title`); } checkTabsElements(expectedTabsCount) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.update_items_dynamically.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.update_items_dynamically.tests.js index c9275f8c1175..de15dbaf90bc 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.update_items_dynamically.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.update_items_dynamically.tests.js @@ -138,7 +138,11 @@ class FormTestWrapper { } checkTabTitle(tabSelector, expectedTitle) { - QUnit.assert.strictEqual(this._form.$element().find(`${tabSelector} .dx-tab-text`).text(), expectedTitle, 'caption of tab'); + QUnit.assert.strictEqual( + this._form.$element().find(`${tabSelector} .dx-tab-text`).text(), + `${expectedTitle}${expectedTitle}`, + 'caption of tab', + ); } checkLabelsWidthInGroup({ columnIndex, groupColumnIndex = 0, etalonLabelText }) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js index 304253b99542..2abe159f8cd4 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js @@ -1239,7 +1239,7 @@ QUnit.test('Update layout inside a tab (T1040296)', function(assert) { { title: 'Window' } ]); - assert.deepEqual([...document.querySelectorAll('.dx-tab-text')].map(e => e.textContent), ['General', 'Window'], 'dx-tab-text elements'); + assert.deepEqual([...document.querySelectorAll('.dx-tab-text')].map(e => e.textContent), ['GeneralGeneral', 'WindowWindow'], 'dx-tab-text elements'); }); QUnit.module('Align labels', { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/formLayoutManager.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/formLayoutManager.markup.tests.js index 9f44eac20426..4ce26a6bbbe7 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/formLayoutManager.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.form/formLayoutManager.markup.tests.js @@ -2668,7 +2668,7 @@ QUnit.module('Supported editors', () => { const errorMessage = consoleErrorStub.getCall(0).args[0]; assert.equal(consoleErrorStub.callCount, 1, 'error was raised for item without dataField and editorType'); assert.equal(errorMessage.indexOf('E1035 - The editor cannot be created'), 0); - assert.ok(errorMessage.indexOf('\n\nFor additional information on this error message, see: http://js.devexpress.com/error/') > 0); + assert.ok(errorMessage.indexOf('\n\nFor additional information on this error message, see: https://js.devexpress.com/error/') > 0); consoleErrorStub.restore(); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js index 8bb680422460..3df53be0072e 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js @@ -2636,7 +2636,7 @@ QUnit.module('templates', () => { const toolbarTabTitleText = popup.$overlayContent().find('.dx-popup-bottom .dx-tab').text(); assert.strictEqual(toolbarButtonText, buttonText, 'default content template rendered'); - assert.strictEqual(toolbarTabTitleText, titleText, 'default title template rendered'); + assert.strictEqual(toolbarTabTitleText, `${titleText}${titleText}`, 'default title template rendered'); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.markup.tests.js index c98cab46bbdd..97aaa07655f7 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.markup.tests.js @@ -105,8 +105,8 @@ QUnit.module('TabPanel items', () => { tabPanel.option('items[0].title', 'test'); - assert.equal($tabPanel.find(toSelector(TABS_ITEM_CLASS)).eq(0).text(), - 'test', 'option of nested tabs widget successfully changed - tabs were rerendered'); + assert.strictEqual($tabPanel.find(toSelector(TABS_ITEM_CLASS)).eq(0).text(), + 'testtest', 'option of nested tabs widget successfully changed - tabs were rerendered'); }); QUnit.test('itemTitleTemplate rendering test', function(assert) { @@ -154,14 +154,14 @@ QUnit.module('TabPanel items', () => { }); [ - { title: 'text', expected: 'text' }, - { title: 'texttext', expected: 'texttext' }, + { title: 'text', expected: 'texttext' }, + { title: 'texttext', expected: 'texttexttexttext' }, { title: null, expected: '' }, { title: undefined, expected: '' }, { title: '', expected: '' }, - { title: 0, expected: '0' }, - { title: 1, expected: '1' }, - { title: new Date(2019, 10, 13), expected: String(new Date(2019, 10, 13)) }, + { title: 0, expected: '00' }, + { title: 1, expected: '11' }, + { title: new Date(2019, 10, 13), expected: `${new Date(2019, 10, 13)}${new Date(2019, 10, 13)}` }, { title: { value: 'title' }, expected: '' } ].forEach((value) => { QUnit.test(`DefaultTemplate: title template property - ${value.title}`, function(assert) { 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 6d45b1d674c2..c290c00948f1 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.tests.js @@ -99,8 +99,8 @@ QUnit.module('rendering', { const $contents = $tabPanel.find('.dx-multiview-item-content'); assert.equal($tabTexts.length, 2, 'two tabs are rendered'); - assert.equal($tabTexts.eq(0).text(), 'Test1', 'first tab text'); - assert.equal($tabTexts.eq(0).text(), 'Test1', 'secon tab text'); + assert.equal($tabTexts.eq(0).text(), 'Test1Test1', 'first tab text'); + assert.equal($tabTexts.eq(1).text(), 'Test2Test2', 'secon tab text'); assert.equal($contents.length, 1, 'one content is rendered'); assert.equal($contents.eq(0).text(), 'Test1', 'first item content is rendered'); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js index cefff01657fd..14d1044235d2 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js @@ -1,7 +1,6 @@ import $ from 'jquery'; import Tabs from 'ui/tabs'; import windowUtils from 'core/utils/window'; -import themes from 'ui/themes'; import ariaAccessibilityTestHelper from '../../helpers/ariaAccessibilityTestHelper.js'; import 'generic_light.css!'; @@ -34,26 +33,15 @@ QUnit.module('Tabs markup', () => { }); [[{ text: '1' }], ['1']].forEach(items => { - QUnit.test(`Tabs item should have a correct span element when items are ${items}`, function(assert) { + QUnit.test(`Tabs item should have a correct span elements when items are ${items}`, function(assert) { const $tabs = $('#tabs').dxTabs({ items }); const $tabsTextSpan = $tabs.find(`.${TABS_ITEM_TEXT_CLASS}`).children(); assert.strictEqual($tabsTextSpan.hasClass(TABS_ITEM_TEXT_SPAN_CLASS), true); - }); - - QUnit.test(`Tabs item should have the second span element in Fluent when items are ${items}`, function(assert) { - const origIsFluent = themes.isFluent; - themes.isFluent = function() { return true; }; - - try { - const $tabs = $('#tabs').dxTabs({ items }); - const $tabsTextSpanPseudo = $tabs.find(`.${TABS_ITEM_TEXT_SPAN_CLASS}`).children(); + const $tabsTextSpanPseudo = $tabs.find(`.${TABS_ITEM_TEXT_SPAN_CLASS}`).children(); - assert.strictEqual($tabsTextSpanPseudo.hasClass(TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS), true); - } finally { - themes.isFluent = origIsFluent; - } + assert.strictEqual($tabsTextSpanPseudo.hasClass(TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS), true); }); }); @@ -79,7 +67,7 @@ QUnit.module('Tabs markup', () => { assert.equal(tabsInstance.option('selectedIndex'), -1); - assert.equal($.trim(tabsElement.text()), '012'); + assert.strictEqual($.trim(tabsElement.text()), '001122'); assert.equal(tabElements.find('.dx-icon-custom').length, 1); @@ -238,25 +226,25 @@ QUnit.module('Default template', moduleConfig, () => { QUnit.test('template should be rendered correctly with text', function(assert) { const $content = this.prepareItemTest('custom'); - assert.equal($content.text(), 'custom'); + assert.strictEqual($content.text(), 'customcustom'); }); QUnit.test('template should be rendered correctly with boolean', function(assert) { const $content = this.prepareItemTest(true); - assert.equal($.trim($content.text()), 'true'); + assert.strictEqual($.trim($content.text()), 'truetrue'); }); QUnit.test('template should be rendered correctly with number', function(assert) { const $content = this.prepareItemTest(1); - assert.equal($.trim($content.text()), '1'); + assert.strictEqual($.trim($content.text()), '11'); }); QUnit.test('template should be rendered correctly with object that contains the "text" property', function(assert) { const $content = this.prepareItemTest({ text: 'custom' }); - assert.equal($.trim($content.text()), 'custom'); + assert.strictEqual($.trim($content.text()), 'customcustom'); }); QUnit.test('template should be rendered correctly with html', function(assert) { @@ -270,7 +258,7 @@ QUnit.module('Default template', moduleConfig, () => { QUnit.test('template should be rendered correctly with htmlstring', function(assert) { const $content = this.prepareItemTest('test'); - assert.equal($content.text(), 'test'); + assert.strictEqual($content.text(), 'testtest'); }); QUnit.test('template should be rendered correctly with html & text', function(assert) { @@ -285,13 +273,13 @@ QUnit.module('Default template', moduleConfig, () => { QUnit.test('template should be rendered correctly with tab text wrapper for data with text field', function(assert) { const $content = this.prepareItemTest({ text: 'test' }); - assert.equal($content.filter('.' + TABS_ITEM_TEXT_CLASS).text(), 'test'); + assert.strictEqual($content.filter(`.${TABS_ITEM_TEXT_CLASS}`).text(), 'testtest'); }); QUnit.test('template should be rendered correctly with tab text wrapper for string data', function(assert) { const $content = this.prepareItemTest('test'); - assert.equal($content.filter('.' + TABS_ITEM_TEXT_CLASS).text(), 'test'); + assert.strictEqual($content.filter(`.${TABS_ITEM_TEXT_CLASS}`).text(), 'testtest'); }); QUnit.test('template should be rendered correctly with icon', function(assert) { 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 bae1c351ebc8..f67457730c2e 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js @@ -620,9 +620,10 @@ QUnit.module('Horizontal scrolling', () => { assert.ok($scrollable.find('.' + TABS_ITEM_CLASS).length, 'items wrapped into scrollable'); }); - QUnit.test('tabs should not be wrapped into scrollable after orientation runtime changing if component width more than total tabs width', function(assert) { + QUnit.test('tabs should be wrapped into scrollable after orientation runtime changing', function(assert) { const $element = $('#scrollableTabs').dxTabs({ items: [{ text: 'item 1' }, { text: 'item 1' }], + showNavButtons: false, scrollingEnabled: true, orientation: 'vertical', width: 500, @@ -634,7 +635,7 @@ QUnit.module('Horizontal scrolling', () => { instance.option({ orientation: 'horizontal' }); - assert.strictEqual($element.children(`.${SCROLLABLE_CLASS}`).length, 0, 'scroll was removed'); + assert.strictEqual($element.children(`.${SCROLLABLE_CLASS}`).length, 1, 'scroll was not removed'); }); QUnit.test('tabs should be wrapped into scrollable for some disabled items', function(assert) { @@ -649,13 +650,17 @@ QUnit.module('Horizontal scrolling', () => { assert.ok($scrollable.find('.' + TABS_ITEM_CLASS).length, 'items wrapped into scrollable'); }); - QUnit.test('tabs should not be wrapped into scrollable for some invisible items', function(assert) { + QUnit.test('scrollable width is equal to component width if there are invisible items there', function(assert) { const $element = $('#scrollableTabs').dxTabs({ + showNavButtons: false, + scrollingEnabled: true, items: [{ text: 'item 1' }, { text: 'item 2', visible: false }, { text: 'item 3', visible: false }, { text: 'item 4', visible: false }], - width: 200 + width: 200, }); - assert.notOk(!!$element.children('.' + SCROLLABLE_CLASS).length, 'no scroll for invisible items'); + const scrollableWidth = $element.children(`.${SCROLLABLE_CLASS}`).width(); + + assert.strictEqual(scrollableWidth, 200); }); QUnit.test('scrollable should have correct option scrollByContent', function(assert) { @@ -906,15 +911,16 @@ QUnit.module('Horizontal scrolling', () => { instance.option('selectedIndex', 3); }); - QUnit.test('tabs should not be wrapped into scrollable if all items are visible', function(assert) { + QUnit.test('tabs should be wrapped into scrollable if all items are visible', function(assert) { const $element = $('#scrollableTabs').dxTabs({ items: [{ text: 'item 1' }, { text: 'item 2' }], scrollingEnabled: true, - width: 250 + showNavButtons: false, + width: 250, }); - const $scrollable = $element.children('.' + SCROLLABLE_CLASS); + const $scrollable = $element.children(`.${SCROLLABLE_CLASS}`); - assert.equal($scrollable.length, 0, 'scroll was not created'); + assert.strictEqual($scrollable.length, 1, 'scroll was created'); }); QUnit.test('left button should be disabled if scrollPosition == 0', function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.width.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.width.tests.js index 5d8354bc9bae..3ca58b50c6c2 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.width.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.width.tests.js @@ -172,11 +172,11 @@ QUnit.module('Width', () => { }); }); - QUnit.test('Does not render navbuttons: dx-tabs { max-width: 413px; } .dx-tab{ width: 100px; min-width: 0; }', function(assert) { + QUnit.test('Does not render navbuttons: dx-tabs { max-width: 413px; } .dx-tab{ width: 100px; min-width: 0 !important; }', function(assert) { const styles = ` `; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.markup.tests.js index 788e34e089a9..4c4d85ee4cd4 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.markup.tests.js @@ -77,11 +77,11 @@ QUnit.module('render', { }); const items = this.element.find('.' + TOOLBAR_ITEM_CLASS); - assert.equal(items.length, 3); + assert.strictEqual(items.length, 3); - assert.equal(items.eq(0).text(), 'Before Button'); - assert.equal(items.eq(1).text(), 'Tab 1Tab 2Tab 3'); - assert.equal(items.eq(2).text(), 'After Button'); + assert.strictEqual(items.eq(0).text(), 'Before Button'); + assert.strictEqual(items.eq(1).text(), 'Tab 1Tab 1Tab 2Tab 2Tab 3Tab 3'); + assert.strictEqual(items.eq(2).text(), 'After Button'); }); @@ -417,9 +417,9 @@ QUnit.module('default template', () => { const tabs = $content.filter('.dx-tabs'); - assert.equal(tabs.length, 1); - assert.equal(tabs.find('.dx-tab').length, 1); - assert.equal($.trim(tabs.text()), 'test'); + assert.strictEqual(tabs.length, 1); + assert.strictEqual(tabs.find('.dx-tab').length, 1); + assert.strictEqual($.trim(tabs.text()), 'testtest'); }); test('template should be rendered correctly with tabs', function(assert) { @@ -427,8 +427,8 @@ QUnit.module('default template', () => { const tabs = $content.filter('.dx-tabs'); - assert.equal(tabs.length, 1); - assert.equal(tabs.find('.dx-tab').length, 1); - assert.equal($.trim(tabs.text()), 'test'); + assert.strictEqual(tabs.length, 1); + assert.strictEqual(tabs.find('.dx-tab').length, 1); + assert.strictEqual($.trim(tabs.text()), 'testtest'); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.viz.core/baseWidget.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.core/baseWidget.tests.js index 7ea5bbbff6e3..b096c9d31b64 100644 --- a/packages/devextreme/testing/tests/DevExpress.viz.core/baseWidget.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.viz.core/baseWidget.tests.js @@ -1137,7 +1137,7 @@ QUnit.test('in default output message with url in logger. without arguments', fu this.triggerIncident('E100'); assert.ok(this.error.calledOnce); - assert.equal(this.error.firstCall.args[0].replace(/\d+_\d+/, '0_1'), 'E100 - Templated text 1: {0}, Templated text 2: {1}.\n\nFor additional information on this error message, see: http://js.devexpress.com/error/0_1/E100'); + assert.equal(this.error.firstCall.args[0].replace(/\d+_\d+/, '0_1'), 'E100 - Templated text 1: {0}, Templated text 2: {1}.\n\nFor additional information on this error message, see: https://js.devexpress.com/error/0_1/E100'); }); QUnit.test('default incidentOccurred show warning', function(assert) { @@ -1146,7 +1146,7 @@ QUnit.test('default incidentOccurred show warning', function(assert) { this.triggerIncident('W100'); assert.ok(this.warn.calledOnce); - assert.equal(this.warn.firstCall.args[0].replace(/\d+_\d+/, '0_1'), 'W100 - Warning: Templated text 1: {0}, Templated text 2: {1}.\n\nFor additional information on this warning message, see: http://js.devexpress.com/error/0_1/W100'); + assert.equal(this.warn.firstCall.args[0].replace(/\d+_\d+/, '0_1'), 'W100 - Warning: Templated text 1: {0}, Templated text 2: {1}.\n\nFor additional information on this warning message, see: https://js.devexpress.com/error/0_1/W100'); }); QUnit.test('in default output message with url in logger', function(assert) { @@ -1155,7 +1155,7 @@ QUnit.test('in default output message with url in logger', function(assert) { this.triggerIncident('E100', ['argument1', 'argument2']); assert.ok(this.error.calledOnce); - assert.equal(this.error.firstCall.args[0].replace(/\d+_\d+/, '0_1'), 'E100 - Templated text 1: argument1, Templated text 2: argument2.\n\nFor additional information on this error message, see: http://js.devexpress.com/error/0_1/E100'); + assert.equal(this.error.firstCall.args[0].replace(/\d+_\d+/, '0_1'), 'E100 - Templated text 1: argument1, Templated text 2: argument2.\n\nFor additional information on this error message, see: https://js.devexpress.com/error/0_1/E100'); }); QUnit.module('drawn', $.extend({}, environment, {