diff --git a/.changeset/mighty-bananas-bathe.md b/.changeset/mighty-bananas-bathe.md new file mode 100644 index 00000000000..48d965d286c --- /dev/null +++ b/.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 + + diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index 42e38b75cd3..615f3b03a58 100644 --- a/src/ActionList/Item.tsx +++ b/src/ActionList/Item.tsx @@ -153,7 +153,7 @@ export const Item = React.forwardRef( '&: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 : {}), diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index bb5474bed47..e648c07832c 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/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; }