PivotGrid: fix filter icon align in generic theme

e2e/testcafe-devextreme/helpers/changeTheme.ts

@@ -1,10 +1,10 @@
 import { ClientFunction } from 'testcafe';
 
-export const changeTheme = async (themeName: string):
+export const changeTheme = async (t: TestController, themeName: string):
 Promise<any> => ClientFunction(
   () => new Promise((resolve) => {
     (window as any).DevExpress.ui.themes.ready(resolve);
     (window as any).DevExpress.ui.themes.current(themeName);
   }),
   { dependencies: { themeName } },
-)();
+).with({ boundTestRun: t })();

e2e/testcafe-devextreme/helpers/themeUtils.ts

@@ -57,7 +57,7 @@ export async function testScreenshot(
   } = options ?? {};
 
   if (isString(theme)) {
-    await changeTheme(theme);
+    await changeTheme(t, theme);
     await themeChanged?.();
   }
 
@@ -67,7 +67,7 @@ export async function testScreenshot(
 
   if (shouldTestInCompact) {
     const themeName = (theme ?? process.env.theme) ?? defaultThemeName;
-    await changeTheme(`${themeName}.compact`);
+    await changeTheme(t, `${themeName}.compact`);
 
     await compactCallBack?.();
 
@@ -77,6 +77,6 @@ export async function testScreenshot(
   }
 
   if (isString(theme) || shouldTestInCompact) {
-    await changeTheme(process.env.theme ?? defaultThemeName);
+    await changeTheme(t, process.env.theme ?? defaultThemeName);
   }
 }

e2e/testcafe-devextreme/tests/common/pivotGrid/headerFilter.ts

@@ -4,6 +4,7 @@ import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilt
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
 import { testScreenshot } from '../../../helpers/themeUtils';
+import { Themes } from '../../../helpers/themes';
 import { sales } from './data';
 
 fixture.disablePageReloads`pivotGrid_headerFilter`
@@ -92,3 +93,84 @@ test('[T1284200] Should handle dxList "selectAll" when has unselected items on t
     visible: true,
   },
 }));
+
+test.meta({ runInTheme: Themes.genericLight })('[T1336516] Field indicators align with the field caption in every area', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+
+  await t
+    .expect(pivotGrid.getFilterHeaderArea().getHeaderFilterIcon().element.exists)
+    .ok()
+    .expect(pivotGrid.getColumnHeaderArea().getHeaderFilterIcon().element.exists)
+    .ok()
+    .expect(pivotGrid.getRowHeaderArea().getHeaderFilterIcon().element.exists)
+    .ok();
+
+  await testScreenshot(t, takeScreenshot, 'headerFilter - icon alignment.png', {
+    element: pivotGrid.element,
+    shouldTestInCompact: true,
+  });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxPivotGrid', {
+  width: 1000,
+  allowFiltering: true,
+  allowSorting: true,
+  showBorders: true,
+  fieldChooser: {
+    enabled: false,
+  },
+  fieldPanel: {
+    showColumnFields: true,
+    showDataFields: true,
+    showFilterFields: true,
+    showRowFields: true,
+    allowFieldDragging: false,
+    visible: true,
+  },
+  dataSource: {
+    fields: [{
+      caption: 'City',
+      dataField: 'city',
+      area: 'filter',
+    }, {
+      dataField: 'date',
+      dataType: 'date',
+      area: 'column',
+    }, {
+      groupName: 'date',
+      groupInterval: 'year',
+      expanded: true,
+    }, {
+      groupName: 'date',
+      groupInterval: 'quarter',
+      expanded: true,
+    }, {
+      groupName: 'date',
+      groupInterval: 'month',
+    }, {
+      caption: 'Region',
+      dataField: 'region',
+      area: 'row',
+    }, {
+      caption: 'Sales',
+      dataField: 'amount',
+      dataType: 'number',
+      summaryType: 'sum',
+      area: 'data',
+    }],
+    store: [{
+      region: 'Africa',
+      city: 'Cairo',
+      amount: 500,
+      date: '2015-05-26',
+    }, {
+      region: 'South America',
+      city: 'Lima',
+      amount: 780,
+      date: '2015-05-07',
+    }],
+  },
+}));

packages/devextreme-scss/scss/widgets/generic/pivotGrid/_index.scss

@@ -108,4 +108,12 @@
   .dx-position-indicator {
     background-color: $pivotgrid-position-indicator-color;
   }
+
+  .dx-column-indicators {
+    .dx-sort,
+    .dx-header-filter {
+      vertical-align: top;
+      line-height: inherit;
+    }
+  }
 }