Update hover styles for ActionList item (#3815)

* Update hover styles for ActionList item * Fix formatting * Change the color * Create dry-zoos-love.md
primer · Oct 16, 2023 · 794a477 · 794a477
1 parent 0eb25a7
commit 794a477
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/dry-zoos-love.md b/.changeset/dry-zoos-love.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update hover styles for ActionList item
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.actionListItem.default.activeBorder}`,
         },
         '&: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) rgba(0,0,0,0);
   }
 
   .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) rgba(0,0,0,0);
   }
 
   .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) rgba(0,0,0,0);
   }
 
   .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) rgba(0,0,0,0);
   }
 
   .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) rgba(0,0,0,0);
   }
 
   .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) rgba(0,0,0,0);
   }
 
   .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) rgba(0,0,0,0);
   }
 
   .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) rgba(0,0,0,0);
   }
 
   .c3:focus-visible,