Update hover styles for ActionList item

primer · Oct 13, 2023 · 1069665 · 1069665
1 parent 341243f
commit 1069665
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -125,6 +125,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
         ':hover:not([aria-disabled])': {
           backgroundColor: `actionListItem.${variant}.hoverBg`,
           color: getVariantStyles(variant, disabled).hoverColor,
+          boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.border.muted}` ,
         },
         '&:focus-visible, > a:focus-visible': {
           outline: 'none',

diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -248,6 +248,7 @@ exports[`NavList renders a simple list 1`] = `
   .c2:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1);
   }
 
   .c2:focus-visible,
@@ -273,6 +274,7 @@ exports[`NavList renders a simple list 1`] = `
   .c6:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1);
   }
 
   .c6:focus-visible,
@@ -658,6 +660,7 @@ exports[`NavList renders with groups 1`] = `
   .c6:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1);
   }
 
   .c6:focus-visible,
@@ -683,6 +686,7 @@ exports[`NavList renders with groups 1`] = `
   .c10:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1);
   }
 
   .c10:focus-visible,
@@ -1145,6 +1149,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   .c10:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1);
   }
 
   .c10:focus-visible,
@@ -1170,6 +1175,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   .c3:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1);
   }
 
   .c3:focus-visible,
@@ -1627,6 +1633,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   .c10:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1);
   }
 
   .c10:focus-visible,
@@ -1652,6 +1659,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   .c3:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
     color: #1F2328;
+    box-shadow: inset 0 0 0 max(1px,0.0625rem) hsla(210,18%,87%,1);
   }
 
   .c3:focus-visible,