Tabs/TabPanel: icon position in Generic

packages/devextreme/scss/widgets/base/_icons.scss

@@ -170,14 +170,15 @@
   }
 }
 
-@mixin dx-icon-margin($size) {
-  margin-right: $size;
-  margin-left: 0;
+@mixin dx-icon-margin($size, $position: start) {
+  @if $position == start {
+    margin-inline-end: $size;
+    margin-inline-start: 0;
+  }
 
-  @at-root #{selector-append(".dx-rtl", &)},
-  .dx-rtl & {
-    margin-left: $size;
-    margin-right: 0;
+  @if $position == end {
+    margin-inline-start: $size;
+    margin-inline-end: 0;
   }
 }
 

packages/devextreme/scss/widgets/base/_tabs.scss

@@ -134,3 +134,15 @@
     justify-content: flex-start;
   }
 }
+
+.dx-tabs-icon-position-end .dx-tab-text {
+  flex-direction: row-reverse;
+}
+
+.dx-tabs-icon-position-top .dx-tab-text {
+  flex-direction: column;
+}
+
+.dx-tabs-icon-position-bottom .dx-tab-text {
+  flex-direction: column-reverse;
+}

packages/devextreme/scss/widgets/generic/tabs/layout/tab/_base.scss

@@ -109,10 +109,17 @@
     color: $tabs-tab-icon-color;
 
     @include dx-icon-sizing($generic-base-icon-size);
-    @include dx-icon-margin($generic-tabs-icon-margin);
   }
 }
 
+.dx-tabs-icon-position-start .dx-tab .dx-icon {
+  @include dx-icon-margin($generic-tabs-icon-margin, start);
+}
+
+.dx-tabs-icon-position-end .dx-tab .dx-icon {
+  @include dx-icon-margin($generic-tabs-icon-margin, end);
+}
+
 .dx-tabs.dx-state-focused {
   .dx-tab {
     &.dx-focused-disabled-next-tab {

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 } from '../../../helpers/themeUtils';
+import { testScreenshot, isMaterial } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import createWidget from '../../../helpers/createWidget';
 import TabPanel from '../../../model/tabPanel';
@@ -419,3 +419,56 @@ test('TabPanel borders without scrolling', async (t) => {
     return createWidget('dxTabPanel', tabPanelOptions);
   });
 });
+
+[true, false].forEach((rtlEnabled) => {
+  ['start', 'top', 'end', 'bottom'].forEach((iconPosition) => {
+    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 t
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }).before(async () => {
+      const dataSource = [
+        {
+          title: 'John Heart',
+          text: 'John Heart',
+          icon: 'plus',
+        }, {
+          title: 'Olivia Peyton',
+          text: 'Olivia Peyton',
+          disabled: true,
+          icon: 'plus',
+        }, {
+          title: 'Robert Reagan',
+          text: 'Robert Reagan',
+          icon: 'plus',
+        }, {
+          title: 'Greta Sims',
+          text: 'Greta Sims',
+          icon: 'plus',
+        }, {
+          title: 'Olivia Peyton',
+          text: 'Olivia Peyton',
+          icon: 'plus',
+        },
+      ] as Item[];
+
+      const tabPanelOptions = {
+        dataSource,
+        height: 250,
+        width: 450,
+        iconPosition,
+        rtlEnabled,
+        // prevent firing dxinactive event for to avoid failing test
+        itemHoldTimeout: 5000,
+      };
+
+      return createWidget('dxTabPanel', tabPanelOptions);
+    });
+  });
+});

packages/devextreme/testing/testcafe/tests/navigation/tabs/common.ts

@@ -11,26 +11,32 @@ const TAB_CLASS = 'dx-tab';
 fixture.disablePageReloads`Tabs_common`
   .page(url(__dirname, '../../container.html'));
 
-test('Tabs icon alignment', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-  await testScreenshot(t, takeScreenshot, 'Tabs items alignment.png', { element: '#tabs', shouldTestInCompact: true });
-
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}).before(async () => {
-  await appendElementTo('#container', 'div', 'tabs');
-  await setAttribute('#container', 'style', 'width: 800px; height: 600px;');
-
-  const dataSource = [
-    { text: 'user' },
-    { text: 'comment', icon: 'comment' },
-    { icon: 'user' },
-    { icon: 'money' },
-  ] as Item[];
-
-  return createWidget('dxTabs', { dataSource }, '#tabs');
+[true, false].forEach((rtlEnabled) => {
+  ['start', 'top', 'end', 'bottom'].forEach((iconPosition) => {
+    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 t
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }).before(async () => {
+      await appendElementTo('#container', 'div', 'tabs');
+      await setAttribute('#container', 'style', 'width: 800px; height: 600px;');
+
+      const dataSource = [
+        { text: 'user' },
+        { text: 'comment', icon: 'comment' },
+        { icon: 'user' },
+        { icon: 'money' },
+      ] as Item[];
+
+      return createWidget('dxTabs', { dataSource, iconPosition, rtlEnabled }, '#tabs');
+    });
+  });
 });
 
 test('Tabs in contrast theme', async (t) => {