From f04b859e974fbe68cfa39a6921a33d8f5b0abcdd Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 3 Jul 2023 12:57:40 +0200 Subject: [PATCH 1/5] remove divider color for invisible focus --- src/ActionList/Item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 : {}), From 72f4b2df78ab12ce2754f98cbfec1bee52a7fbb6 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 3 Jul 2023 13:04:26 +0200 Subject: [PATCH 2/5] Create mighty-bananas-bathe.md --- .changeset/mighty-bananas-bathe.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/mighty-bananas-bathe.md diff --git a/.changeset/mighty-bananas-bathe.md b/.changeset/mighty-bananas-bathe.md new file mode 100644 index 00000000000..9b40bb8cbbb --- /dev/null +++ b/.changeset/mighty-bananas-bathe.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +ActionMenu: Fix missing divider for first item when the menu is open with mouse From 5f1401ae687e0e66374f6da9efa6db2f64e571f3 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 3 Jul 2023 13:15:31 +0200 Subject: [PATCH 3/5] include components changed in changelog --- .changeset/mighty-bananas-bathe.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.changeset/mighty-bananas-bathe.md b/.changeset/mighty-bananas-bathe.md index 9b40bb8cbbb..cb215c71622 100644 --- a/.changeset/mighty-bananas-bathe.md +++ b/.changeset/mighty-bananas-bathe.md @@ -3,3 +3,5 @@ --- ActionMenu: Fix missing divider for first item when the menu is open with mouse + +Changed components: ActionMenu From d2ce043c56437b1e4f7c084011b2fd3746370784 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 3 Jul 2023 13:23:27 +0200 Subject: [PATCH 4/5] does it work inside a comment? --- .changeset/mighty-bananas-bathe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/mighty-bananas-bathe.md b/.changeset/mighty-bananas-bathe.md index cb215c71622..48d965d286c 100644 --- a/.changeset/mighty-bananas-bathe.md +++ b/.changeset/mighty-bananas-bathe.md @@ -4,4 +4,4 @@ ActionMenu: Fix missing divider for first item when the menu is open with mouse -Changed components: ActionMenu + From 4ec29eacb90768ddb9ed4a0585a6ae7a8504aa5f Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 3 Jul 2023 13:37:05 +0200 Subject: [PATCH 5/5] update NavList snapshot --- .../__snapshots__/NavList.test.tsx.snap | 24 ------------------- 1 file changed, 24 deletions(-) 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; }