fix(menu): hover effect does not stay on menu button when menu is act…

…ivated
AxisCommunications · Dec 8, 2021 · e383796 · e383796
1 parent c48baad
commit e383796
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/packages/core/src/Menu/BaseMenu.tsx b/packages/core/src/Menu/BaseMenu.tsx
@@ -81,7 +81,8 @@ const MenuNativeButton = styled.button<{
     border: 2px solid transparent;
   }
 
-  &:hover {
+  &:hover,
+  &:focus-within {
     ${MenuButtonIconContainer} {
       border: 0 solid transparent;
     }

diff --git a/packages/core/src/Menu/__snapshots__/index.test.tsx.snap b/packages/core/src/Menu/__snapshots__/index.test.tsx.snap
@@ -127,11 +127,13 @@ exports[`Menus Menu (default) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
@@ -350,11 +352,13 @@ exports[`Menus Menu (disabled) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
@@ -569,11 +573,13 @@ exports[`Menus Menu (left) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
@@ -788,11 +794,13 @@ exports[`Menus Menu (right) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);