diff --git a/.changeset/dry-zoos-love.md b/.changeset/dry-zoos-love.md new file mode 100644 index 00000000000..b0e6aeb0ba3 --- /dev/null +++ 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 index 64343735987..37a87ad1afc 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -125,6 +125,7 @@ export const Item = React.forwardRef( ':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 index fb4e2779519..cc1f8de9391 100644 --- 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,