ActionMenu: Fix missing divider for first item when the menu is open …

…with mouse (#3476)

* remove divider color for invisible focus

* Create mighty-bananas-bathe.md

* include components changed in changelog

* does it work inside a comment?

* update NavList snapshot

.changeset/mighty-bananas-bathe.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+ActionMenu: Fix missing divider for first item when the menu is open with mouse
+
+<!-- Changed components: ActionMenu -->

src/ActionList/Item.tsx

@@ -153,7 +153,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
         '--divider-color': 'transparent',
       },
-      '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
+      '&:hover:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
         '--divider-color': 'transparent',
       },
       ...(active ? activeStyles : {}),

src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -99,7 +99,6 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 .c2:hover:not([aria-disabled]) + .c1,
-.c2:focus:not([aria-disabled]) + .c2,
 .c2[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -181,7 +180,6 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 .c6:hover:not([aria-disabled]) + .c1,
-.c6:focus:not([aria-disabled]) + .c6,
 .c6[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -496,7 +494,6 @@ exports[`NavList renders with groups 1`] = `
 }
 
 .c6:hover:not([aria-disabled]) + .c5,
-.c6:focus:not([aria-disabled]) + .c6,
 .c6[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -578,7 +575,6 @@ exports[`NavList renders with groups 1`] = `
 }
 
 .c10:hover:not([aria-disabled]) + .c5,
-.c10:focus:not([aria-disabled]) + .c10,
 .c10[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -924,7 +920,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c10:hover:not([aria-disabled]) + .c2,
-.c10:focus:not([aria-disabled]) + .c10,
 .c10[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -941,43 +936,36 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c12:hover:not([aria-disabled]) + .c2,
-.c12:focus:not([aria-disabled]) + .c12,
 .c12[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c13:hover:not([aria-disabled]) + .c2,
-.c13:focus:not([aria-disabled]) + .c13,
 .c13[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c14:hover:not([aria-disabled]) + .c2,
-.c14:focus:not([aria-disabled]) + .c14,
 .c14[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c15:hover:not([aria-disabled]) + .c2,
-.c15:focus:not([aria-disabled]) + .c15,
 .c15[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c16:hover:not([aria-disabled]) + .c2,
-.c16:focus:not([aria-disabled]) + .c16,
 .c16[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c17:hover:not([aria-disabled]) + .c2,
-.c17:focus:not([aria-disabled]) + .c17,
 .c17[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c18:hover:not([aria-disabled]) + .c2,
-.c18:focus:not([aria-disabled]) + .c18,
 .c18[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -1048,13 +1036,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c3:hover:not([aria-disabled]) + .c2,
-.c3:focus:not([aria-disabled]) + .c3,
 .c3[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c19:hover:not([aria-disabled]) + .c2,
-.c19:focus:not([aria-disabled]) + .c19,
 .c19[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -1385,7 +1371,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c10:hover:not([aria-disabled]) + .c2,
-.c10:focus:not([aria-disabled]) + .c10,
 .c10[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -1402,49 +1387,41 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c12:hover:not([aria-disabled]) + .c2,
-.c12:focus:not([aria-disabled]) + .c12,
 .c12[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c13:hover:not([aria-disabled]) + .c2,
-.c13:focus:not([aria-disabled]) + .c13,
 .c13[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c14:hover:not([aria-disabled]) + .c2,
-.c14:focus:not([aria-disabled]) + .c14,
 .c14[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c15:hover:not([aria-disabled]) + .c2,
-.c15:focus:not([aria-disabled]) + .c15,
 .c15[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c16:hover:not([aria-disabled]) + .c2,
-.c16:focus:not([aria-disabled]) + .c16,
 .c16[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c17:hover:not([aria-disabled]) + .c2,
-.c17:focus:not([aria-disabled]) + .c17,
 .c17[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c18:hover:not([aria-disabled]) + .c2,
-.c18:focus:not([aria-disabled]) + .c18,
 .c18[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
 .c19:hover:not([aria-disabled]) + .c2,
-.c19:focus:not([aria-disabled]) + .c19,
 .c19[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
@@ -1516,7 +1493,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c3:hover:not([aria-disabled]) + .c2,
-.c3:focus:not([aria-disabled]) + .c3,
 .c3[data-focus-visible-added] + li {
   --divider-color: transparent;
 }