diff --git a/packages/devextreme/js/ui/tabs.js b/packages/devextreme/js/ui/tabs.js index 990f48ff1c32..d93503cc8cee 100644 --- a/packages/devextreme/js/ui/tabs.js +++ b/packages/devextreme/js/ui/tabs.js @@ -148,7 +148,8 @@ const Tabs = CollectionWidget.inherit({ }, options: { useInkRipple: true, - selectOnFocus: false + selectOnFocus: false, + iconPosition: ICON_POSITION.top, } } ]); diff --git a/packages/devextreme/scss/widgets/material/tabs/_index.scss b/packages/devextreme/scss/widgets/material/tabs/_index.scss index 2b16f62aa325..afd4a2bec57d 100644 --- a/packages/devextreme/scss/widgets/material/tabs/_index.scss +++ b/packages/devextreme/scss/widgets/material/tabs/_index.scss @@ -86,7 +86,6 @@ } .dx-tab-text { - flex-direction: column; text-transform: uppercase; line-height: $material-tab-text-line-height; font-weight: 500; @@ -159,6 +158,14 @@ } } +.dx-tabs-icon-position-start .dx-tab .dx-icon { + @include dx-icon-margin($material-base-icon-margin, start); +} + +.dx-tabs-icon-position-end .dx-tab .dx-icon { + @include dx-icon-margin($material-base-icon-margin, end); +} + .dx-tabs-vertical { .dx-tab-selected { @include dx-tabs-border-mixin(left, $tabs-selected-tab-border-color); @@ -168,14 +175,6 @@ } } - .dx-tab-text { - flex-direction: row; - - .dx-icon { - @include dx-icon-margin($material-base-icon-margin-right); - } - } - .dx-tabs-nav-button { padding: $material-tab-vertical-nav-button-content-padding; } diff --git a/packages/devextreme/scss/widgets/material/tabs/_sizes.scss b/packages/devextreme/scss/widgets/material/tabs/_sizes.scss index c0223e3e6285..13f70096ce54 100644 --- a/packages/devextreme/scss/widgets/material/tabs/_sizes.scss +++ b/packages/devextreme/scss/widgets/material/tabs/_sizes.scss @@ -8,8 +8,7 @@ $material-tab-height: null !default; $material-tab-min-width: null !default; $material-tab-text-line-height: null !default; -$material-base-icon-margin-right: null !default; -$material-base-icon-margin-bottom: null !default; +$material-base-icon-margin: null !default; $material-tab-nav-button-icon-width: null !default; $material-tab-nav-button-icon-height: null !default; @@ -22,8 +21,7 @@ $material-tab-vertical-nav-button-content-padding: null !default; $material-tabs-item-padding: 12px 16px !default; $material-tab-height: auto !default; $material-tab-min-width: 90px !default; - $material-base-icon-margin-right: 8px !default; - $material-base-icon-margin-bottom: 4px !default; + $material-base-icon-margin: 8px !default; $material-tab-text-line-height: 24px !default; $material-tab-nav-button-icon-width: 24px !default; $material-tab-nav-button-icon-height: 24px !default; @@ -36,8 +34,7 @@ $material-tab-vertical-nav-button-content-padding: null !default; $material-tabs-item-padding: 6px 12px !default; $material-tab-height: auto !default; $material-tab-min-width: 82px !default; - $material-base-icon-margin-right: 8px !default; - $material-base-icon-margin-bottom: 4px !default; + $material-base-icon-margin: 8px !default; $material-tab-text-line-height: 24px !default; $material-tab-nav-button-icon-width: 24px !default; $material-tab-nav-button-icon-height: 24px !default; diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/common.ts b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/common.ts index d84a8d76a652..d0b999373c64 100644 --- a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/common.ts +++ b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/common.ts @@ -1,6 +1,6 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import { Selector, ClientFunction } from 'testcafe'; -import { testScreenshot, isMaterial } from '../../../helpers/themeUtils'; +import { testScreenshot } from '../../../helpers/themeUtils'; import url from '../../../helpers/getPageUrl'; import createWidget from '../../../helpers/createWidget'; import TabPanel from '../../../model/tabPanel'; @@ -425,9 +425,7 @@ test('TabPanel borders without scrolling', async (t) => { test('TabPanel icon position', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - if (!isMaterial()) { - await testScreenshot(t, takeScreenshot, `TabPanel iconPosition=${iconPosition},rtl=${rtlEnabled}.png`, { element: '#container' }); - } + await testScreenshot(t, takeScreenshot, `TabPanel iconPosition=${iconPosition},rtl=${rtlEnabled}.png`, { element: '#container' }); await t .expect(compareResults.isValid()) diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (material-blue-light).png new file mode 100644 index 000000000000..fbb1ca7a673d Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (material-blue-light).png new file mode 100644 index 000000000000..b86536c397f0 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=bottom,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=false (material-blue-light).png new file mode 100644 index 000000000000..6822a92f2b09 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=true (material-blue-light).png new file mode 100644 index 000000000000..e842cf6b4a52 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=end,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=false (material-blue-light).png new file mode 100644 index 000000000000..b83d8a121329 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=true (material-blue-light).png new file mode 100644 index 000000000000..4a0abcbfd650 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=start,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (material-blue-light).png new file mode 100644 index 000000000000..e61fddb30fbd Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (material-blue-light).png new file mode 100644 index 000000000000..6bd704c802ad Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabPanel/etalons/TabPanel iconPosition=top,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/common.ts b/packages/devextreme/testing/testcafe/tests/navigation/tabs/common.ts index ce79d2f65f6e..f1ac7c096d9c 100644 --- a/packages/devextreme/testing/testcafe/tests/navigation/tabs/common.ts +++ b/packages/devextreme/testing/testcafe/tests/navigation/tabs/common.ts @@ -16,9 +16,7 @@ fixture.disablePageReloads`Tabs_common` test('Tabs icon position', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - if (!isMaterial()) { - await testScreenshot(t, takeScreenshot, `Tabs iconPosition=${iconPosition},rtl=${rtlEnabled}.png`, { element: '#tabs', shouldTestInCompact: true }); - } + await testScreenshot(t, takeScreenshot, `Tabs iconPosition=${iconPosition},rtl=${rtlEnabled}.png`, { element: '#tabs', shouldTestInCompact: true }); await t .expect(compareResults.isValid()) diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (material-blue-light).png new file mode 100644 index 000000000000..2ae7ffe83016 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (material-blue-light-compact).png new file mode 100644 index 000000000000..5f4fd70ac393 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=false (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (material-blue-light).png new file mode 100644 index 000000000000..9919b78102d1 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (material-blue-light-compact).png new file mode 100644 index 000000000000..9b5c3705a2c0 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=bottom,rtl=true (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (material-blue-light).png new file mode 100644 index 000000000000..132a61d8f351 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (material-blue-light-compact).png new file mode 100644 index 000000000000..becffabcd9ff Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=false (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (material-blue-light).png new file mode 100644 index 000000000000..47ee47b9172c Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (material-blue-light-compact).png new file mode 100644 index 000000000000..b137edadfe83 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=end,rtl=true (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (material-blue-light).png new file mode 100644 index 000000000000..ad0471333f3a Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (material-blue-light-compact).png new file mode 100644 index 000000000000..b9b19f74ffae Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=false (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (material-blue-light).png new file mode 100644 index 000000000000..26ee862c4bab Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (material-blue-light-compact).png new file mode 100644 index 000000000000..1f0dc5540643 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=start,rtl=true (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (material-blue-light).png new file mode 100644 index 000000000000..0966c042eb7c Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (material-blue-light-compact).png new file mode 100644 index 000000000000..0972bdd48658 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=false (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (material-blue-light).png new file mode 100644 index 000000000000..02086f9bf0a9 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (material-blue-light-compact).png new file mode 100644 index 000000000000..dd31efc10767 Binary files /dev/null and b/packages/devextreme/testing/testcafe/tests/navigation/tabs/etalons/Tabs iconPosition=top,rtl=true (material-blue-light-compact).png differ