Menu and ContextMenu - selected and focused item should have correct …

…color in Material and Fluent (T1246203, T1257608) (#28542)

e2e/testcafe-devextreme/tests/navigation/contextMenu/common.ts

@@ -63,3 +63,40 @@ test('ContextMenu items render', async (t) => {
     },
   }, '#contextMenu');
 });
+
+test('ContextMenu selected focused item', async (t) => {
+  const contextMenu = new ContextMenu('#contextMenu');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await contextMenu.show();
+
+  await t.pressKey('down');
+
+  const screenshotName = 'ContextMenu selected focused item.png';
+
+  await testScreenshot(t, takeScreenshot, screenshotName, { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'contextMenu');
+  await setStyleAttribute(Selector('#container'), 'width: 150px; height: 200px;');
+
+  await insertStylesheetRulesToPage('.custom-class { border: 2px solid green !important; }');
+
+  const menuItems = [
+    { text: 'remove', icon: 'remove', selected: true },
+    { text: 'user', icon: 'user' },
+    { text: 'coffee', icon: 'coffee' },
+  ] as Item[];
+
+  return createWidget('dxContextMenu', {
+    cssClass: 'custom-class',
+    items: menuItems,
+    target: 'body',
+    position: {
+      offset: '10 10',
+    },
+  }, '#contextMenu');
+});

e2e/testcafe-devextreme/tests/navigation/menu/common.ts

@@ -87,6 +87,50 @@ test('Menu items render', async (t) => {
   return createWidget('dxMenu', { items: menuItems, cssClass: 'custom-class' }, '#menu');
 });
 
+test('Menu selected focused item', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const menu = new Menu();
+
+  await t
+    .click(menu.getItem(0))
+    .pressKey('down');
+
+  await testScreenshot(t, takeScreenshot, 'Menu selected focused item.png', {
+    element: '#container',
+  });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', 'menu');
+  await setAttribute('#container', 'style', 'box-sizing: border-box; width: 200px; height: 200px; padding: 8px;');
+
+  await insertStylesheetRulesToPage('.custom-class { border: 2px solid green !important }');
+
+  const menuItems = [
+    {
+      text: 'remove',
+      icon: 'remove',
+      items: [
+        {
+          text: 'user',
+          icon: 'user',
+          selected: true,
+        },
+        {
+          text: 'save',
+          icon: 'save',
+        },
+      ],
+    },
+    { text: 'user', icon: 'user' },
+  ] as Item[];
+
+  return createWidget('dxMenu', { items: menuItems, cssClass: 'custom-class' }, '#menu');
+});
+
 safeSizeTest('Menu delimiter appearance when orientation is horizontal', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const menu = new Menu();

packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss

@@ -24,5 +24,13 @@ $menu-popup-border-color: $base-border-color !default;
 $menu-separator-bg: $base-border-color !default;
 $menu-item-selected-color: $base-text-color !default;
 $menu-item-link-color: $base-link-color !default;
-$menu-item-focused-selected-bg: $base-selected-bg !default;
+$menu-item-focused-selected-bg: null !default;
+
+@if $mode == "light" {
+    $menu-item-focused-selected-bg: darken($base-bg, 9.8) !default;
+}
+
+@if $mode == "dark" {
+    $menu-item-focused-selected-bg: lighten($base-bg, 18.04) !default;
+}
 

packages/devextreme-scss/scss/widgets/material/menu/_colors.scss

@@ -24,16 +24,18 @@ $menu-popup-border-color: $base-border-color !default;
 $menu-separator-bg: $base-border-color !default;
 $menu-item-selected-color: $base-text-color !default;
 $menu-item-link-color: $base-link-color !default;
-$menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default;
+$menu-item-focused-selected-bg: null !default;
 $menu-container-shadow-color: null !default;
 
 @if $mode == "light" {
   $menu-item-selected-bg: lighten($base-text-color, 88%) !default;
+  $menu-item-focused-selected-bg: color.change(#000, $alpha: 0.14) !default;
   $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
 }
 
 @if $mode == "dark" {
   $menu-item-selected-bg: lighten($base-bg, 8%) !default;
+  $menu-item-focused-selected-bg: color.change(#fff, $alpha: 0.14) !default;
   $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
 }