List: Revert styles for .dx-button .dx-icon in Generic (T1216108)

Author: marker-dao

packages/devextreme/scss/widgets/generic/list/_index.scss

@@ -60,7 +60,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
     background-color: $list-item-hover-bg;
     color: $list-item-hover-color;
 
-    .dx-icon {
+    .dx-list-item-icon-container .dx-icon {
       color: $list-item-hover-color;
     }
 
@@ -71,7 +71,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
     background-color: $list-item-selected-bg;
     color: $list-item-selected-color;
 
-    .dx-icon {
+    .dx-list-item-icon-container .dx-icon {
       color: $list-item-selected-color;
     }
 
@@ -87,7 +87,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
     background-color: $list-focused-bg;
     color: $list-item-focus-color;
 
-    .dx-icon {
+    .dx-list-item-icon-container .dx-icon {
       color: $list-item-focus-color;
     }
 
@@ -107,7 +107,7 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
     background-color: $list-item-active-bg;
     color: $list-item-active-color;
 
-    .dx-icon {
+    .dx-list-item-icon-container .dx-icon {
       color: $list-item-active-color;
     }
 
@@ -118,6 +118,17 @@ $generic-list-search-editor-height: round($generic-base-line-height * $generic-b
 
     @include toggle-delete-icon($list-item-active-color);
   }
+
+  .dx-list-static-delete-button .dx-icon {
+    color: $list-icon-color;
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-list-static-delete-button .dx-icon {
+      color: $base-icon-color;
+    }
+  }
 }
 
 @mixin dx-list-sizing($item-horizontal-padding) {

packages/devextreme/testing/testcafe/tests/editors/list/common.ts

@@ -1,5 +1,6 @@
 import { ClientFunction } from 'testcafe';
-import { isMaterialBased, isFluent } from '../../../helpers/themeUtils';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { isMaterialBased, isFluent, testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import List from '../../../model/list';
 import { createWidget } from '../../../helpers/createWidget';
@@ -323,6 +324,49 @@ test('Disabled item should be focused on tab press to match accessibility criter
   searchEnabled: true,
 }));
 
+test('The delete button should be displayed correctly after the list item focused (T1216108)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const list = new List('#container');
+
+  await list.focus();
+
+  await testScreenshot(t, takeScreenshot, 'List delete button when item is focused.png');
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxList', {
+  dataSource: [{
+    text: 'item 1',
+    icon: 'user',
+  }],
+  allowItemDeleting: true,
+  itemDeleteMode: 'static',
+}));
+
+test('The button icon in custom template should be displayed correctly after the list item focused (T1216108)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const list = new List('#container');
+
+  await list.focus();
+
+  await testScreenshot(t, takeScreenshot, 'List icon in button when item is focused.png');
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxList', {
+  dataSource: [{ text: 'item 1' }],
+  itemTemplate: (_, __, element) => {
+    const button = ($('<div>') as any).dxButton({
+      text: 'custom',
+      icon: 'home',
+    });
+
+    element.append(button);
+  },
+}));
+
 test('Checking simple list with selectAll and "more" button via aXe', async (t) => {
   await a11yCheck(t);
 }).before(async () => createWidget('dxList', {