From e28d129185dc9e776e3e6399c8c207f02d54c645 Mon Sep 17 00:00:00 2001 From: Alexander Kozlovskiy Date: Mon, 16 Dec 2024 13:20:46 +0400 Subject: [PATCH] Menu and ContextMenu - selected and focused item should have correct color in Material and Fluent (T1246203, T1257608) (#28542) --- .../tests/navigation/contextMenu/common.ts | 37 +++++++++++++++ ...ected focused item (fluent-blue-light).png | Bin 0 -> 6290 bytes ... selected focused item (generic-light).png | Bin 0 -> 4201 bytes ...ted focused item (material-blue-light).png | Bin 0 -> 4725 bytes .../tests/navigation/menu/common.ts | 44 ++++++++++++++++++ ...ected focused item (fluent-blue-light).png | Bin 0 -> 7384 bytes ... selected focused item (generic-light).png | Bin 0 -> 5001 bytes ...ted focused item (material-blue-light).png | Bin 0 -> 5775 bytes .../scss/widgets/fluent/menu/_colors.scss | 10 +++- .../scss/widgets/material/menu/_colors.scss | 4 +- 10 files changed, 93 insertions(+), 2 deletions(-) create mode 100644 e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (fluent-blue-light).png create mode 100644 e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (generic-light).png create mode 100644 e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (material-blue-light).png create mode 100644 e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu selected focused item (fluent-blue-light).png create mode 100644 e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu selected focused item (generic-light).png create mode 100644 e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu selected focused item (material-blue-light).png diff --git a/e2e/testcafe-devextreme/tests/navigation/contextMenu/common.ts b/e2e/testcafe-devextreme/tests/navigation/contextMenu/common.ts index 19231d101d45..66a8705efbe6 100644 --- a/e2e/testcafe-devextreme/tests/navigation/contextMenu/common.ts +++ b/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'); +}); diff --git a/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (fluent-blue-light).png new file mode 100644 index 0000000000000000000000000000000000000000..86159ee88e2cc6a67f2f10d0514b668f049366ab GIT binary patch literal 6290 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 literal 0 HcmV?d00001 diff --git a/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (generic-light).png b/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (generic-light).png new file mode 100644 index 0000000000000000000000000000000000000000..445a549b4ccf2b8a9b4bf8c8bfbf9a7a2c96a198 GIT binary patch literal 4201 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 VyjLtM@ZSM}nv%9+Da!KYKLA==uJ`}| literal 0 HcmV?d00001 diff --git a/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (material-blue-light).png new file mode 100644 index 0000000000000000000000000000000000000000..bdccdb20aa0e000e6e875f386f62bbc4506ba8f4 GIT binary patch literal 4725 zcmbVQ2{@E}yGP0(%gB~>jD5+zG?H3CSd-dP$)uYmB8L zk;qy^b`s7#^KU$`Hft2{#%XR?jwsdX^`=mx_u_mh$UcLzqwIxq%l8^D8qSudm806#A5x&>fsP zZc!DN5FFWkiJC~e|1PqJBl&4^e?=+BGv@t>N3Ax@HwQ$rb(;mJ6*;T*vs(>4Xk9BC`CVxr*lP=_+w|R!)nYLihPOO5UVyuF|!K8&3u1R#v?wSGI zW0ziXv(RXx@J-A7Xnhy9ZbnjjjBRFOnN+hNa?}kSMY@Vc7dyUCvBv9@OpNjLWm1x) zgau2iF%oIZffN!!-;qM=tM7J-A+ZHY^GWR7{+a96tGBK;`ib_cr6_$o;tOj4lP$-! zC3Y*a4cW#_9Wh0JGm?r%g0k)@t<)vmzB06QGE zIN%w-d-qjVTI$>W3{g~9Bcn)c*7)9rGaMun#T?q*>_kF#eH(_3K|&-0XPbHU%)bPY zxQRk%*W<9d)VuKp_`{SH^l&7swdG*9GIJ?~jc$>mZ8`807Xtqj9>!~pU^Z+N;Is?B zyJ<**9iADcnPQro4b22^FVm+;Tfr9irlF&7HNfNOT0BARqHNxnMQu|1%A|bru77e3 zUvtRF-(D5lhlOd~yLZpY!rNPVWo0FsH&HnG!{Fe+(;(@E5Mp1SoorukufBo7ZpUiB zlDay6!WhE1XnSij!&oG)Wz5#rHVqyOi=rJI9N>2}TRiR7=31$my1II{c9=S0vct8% z!nq?`;j(|&jN{qh;KdH5t_S{~v;zYJvsHb0JUu1m6m7f2X@HW8e6;%!dBnvAP@QhR?^E=c-l)PMECD z4!lg^*DyZ6)Tw6w$7zn4{`;l(?j`$2Y!2?_RZTkJSoQtg{qRgCUe$olujutHb+(kv z&CP!Kam&4S_Ym+=wxPQ z?iJ9?MhY9sd-ut#&V4j(S9`u;4oaQ-7{s+t+`?nz#ieW4uLlnLRv&h7FflaT1JXUN zstWu*qDLZ;xK(|)D~~3%x0@Wh_)R56P={Qqv*i_q8tIDIRw}$q$D(+mgBzWWXh{`3 zxwE}xYiFkz^8L7B5_dzn{iFBK&dI4IMrxyZlCACS+cGS*annXRKae2%j-8zyr(|++ z@*OD_tz}lOrz?GqxVF|-l&H9PtfOB|3_DUtS~`(Twn!1sGI<`p71!ie%+A4)o|o78 zX?s;|4~sy@lQU!MTk{cJQ`&17W&zDsFb}=gWr3@6}Nj52Pb=IEZj&kQ`*T-5? z-}Lnvo;jl+X>V^|yZ$*b4k1a#_;IFa-z+JKNl0MOkH<#+_QRXr-o{u_p5)$-AI%|m zYHDi6CnvAw=9->3Ay%hycG?QE$jjGPw4|~!9o&3{MbP5Z@^lYGdu7m!o%T{rSNHRX z2z{^(ymfGNgfJFWQ_C6}a#B=MsLdyr9OSC&cn-#Ilm|p6cpq$^dvnu<`)XYw~WOhK;yk`A(Nex)B5PqxSGnpm8pNk!rv7PUa@wY8W&g535nJA;PoG{#4Tr5cYp;}9RuZNx=IS^7^u7BlCQ>7Q3P1ljAxE#G zto$H!BXD~$>$&`?Zj?aS^5OdJmHYbuYxhbYsqg@}#iEfWrl$6_Aqs$hLxe7^jsl&6 zse*`n|IjgB&F%HE>@~)9#KrM+BML?X;CB52v&W~9fOFynTeBz2NTkn@Ub90r88)RB zmB$-s78e(@RlGS1!!}ndPjvDmBqYf1wDlNu5HT5vfWC|_76sa!I@=2@%_;n^UtHRi zqv*-tSmiTXHRx9a@c8lBIU7gE*AScBDyP{AQ)JJU6#in(jq!}3h@CBPl-stAu3)7{ z8yk^O`*ZPi^a(N%=jkb054zMZ<;~0c4{O%1H_2IBTQ@%Tdehq0Hd_6B>i`&0!M!=4 z@aNA^>xYjXDP(bV8+mwo9=5SLWNyyXZwi-3C%aB`Mj6mwoVIqTk7Szdl{ZvI&K+Otm!&Ak5K*Pid>S%rsd7wr6;l9ZHm?JdU9>goEA zkB^TKi;9XaUjr4=d;9vDFYTgR|IlCGT$HNazE;1c1vRGGRIcvTE*4GQBS*LZT!${s z*A-KO8o;gN-R|PUhYsyZEg<~OkI6x3*v z3vXbQtJMYk0|7rj`?Mv?qWPVw5bQShbVe4;*g4*o;pOjta=7+ot>TR?CkQvvqw8JcMnkwhm0|)`n=bb(9p>B z4q6`2pZfZ?OvbS)$ylVZx5RXy z%9pqBs7&+X#OsY2m!0-1-$6u^o5FQD7YpDrC&@%t3RC#-M*Rh)Y=JH4;gRoUiqooTq^a`pVA8DT9)eON|u_&;DOuyn{a+2L^Big3|rERi3*??oX06<~_z+ z)8F>>SwoQ+^nc#@$7yeG_qDl?Fr?_w%4(R*(==2=7^rlogK9WCT$c;}zOr|Jj7RU<4GSLOC`};ls6yYcJ4K9Omd>X8@7X zf2*+Yl80hjwu1W;3QRCDF@b@allH%iSzKD$kN}RXcX`hlAb=HoRk4;t46H zZSC!71dZ%KyvBjrlW;PjJ5>A$qmOc-~fLr+#E7$9ej`87(^PUjwfXcm& zPzaL*b@EG0vldqe{g;4bQ9v3$1-6*CcJY)z3=wOK~PD zoL}^SVvh+NM~GVxN8-ivZ$jchBm;(&Ra8v2rVA4fo{19A4~YVoXfx3CN&o`{41+}r zLg~g2dAS3V|CrUm+KjL(!ygcdQ zLq%ET<1eV7pUG1EeHS#K_EJ7c=DSc-Rz^>72N(MeR=N6FP5(+v#Zxk9;TUuI5_eKpW z)pr4Eq)^_!Ry1Cug=R}W%m%m=VjhXa(jtZUX=L@Vh%zbI2>N3!EiIyYPy&Q<6zT;g z7FY1QA%<28suD9TD=QKkofd~eJ6Tfy7J`NbF}`IfAdyDPZXB2&nC}+KM&3szL{c%c zzM!UoO;PCLLoe`g2r`CMmx@k=noa^03DYX*Mm4EvDMJX<2=NfsI4e?`mD1Z6&cr%H zegGmsy%otZ`%U!jNI^U7_H!Ra*F=5Ws8-(MvZw&M{(l#dbM27O~JE3#K|L<$?t{!0?u%rw%~TO{rs z$^guP^U~tdEU5d9u~vA>^G#A5g3B78q=Rm30x95=1!p%Sq&EqTb~3}t_ZP%i6%t?hakA77J&2;F2GFN20 { 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(); diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu selected focused item (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu selected focused item (fluent-blue-light).png new file mode 100644 index 0000000000000000000000000000000000000000..dcb9392c3544176b6eff1727b0349f91e5697133 GIT binary patch literal 7384 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 literal 0 HcmV?d00001 diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu selected focused item (material-blue-light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu selected focused item (material-blue-light).png new file mode 100644 index 0000000000000000000000000000000000000000..6d4c6f74f776208c0ff6fe51910b48fed217052d GIT binary patch literal 5775 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 HxzK+AwO-6{ literal 0 HcmV?d00001 diff --git a/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss index 197eb023830a..92c6404feba4 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss +++ b/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; +} diff --git a/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss index 749c5f38bdb5..2122cf0f63b4 100644 --- a/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss +++ b/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; }