From bbe3d16aa1c99a4acf870f79a82ac30d001402ed Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Thu, 25 Jul 2024 14:11:15 -0700 Subject: [PATCH 1/3] remove selector --- packages/react/src/ActionList/Item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index e52cb2fd95f..a6e53ea6980 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -222,7 +222,7 @@ export const Item = React.forwardRef( // hide divider after dividers & group header, with higher importance! '[data-component="ActionList.Divider"] + &': {'--divider-color': 'transparent !important'}, // hide border on current and previous item - '&:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), &:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), &[data-focus-visible-added]:not([aria-disabled]):not([data-inactive])': + '&:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), &[data-focus-visible-added]:not([aria-disabled]):not([data-inactive])': { '--divider-color': 'transparent', }, From 09f8e20b3a188779f824695e509d6fa913f254b1 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Thu, 25 Jul 2024 14:12:54 -0700 Subject: [PATCH 2/3] Create popular-apples-look.md --- .changeset/popular-apples-look.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/popular-apples-look.md diff --git a/.changeset/popular-apples-look.md b/.changeset/popular-apples-look.md new file mode 100644 index 00000000000..ec157b67c03 --- /dev/null +++ b/.changeset/popular-apples-look.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Bug fix: ActionList divider disappears on selected items From 0e18d89d727fadb6c5c10e7f25d59aa255ac6ace Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Thu, 25 Jul 2024 14:15:12 -0700 Subject: [PATCH 3/3] snaps --- .../react/src/NavList/__snapshots__/NavList.test.tsx.snap | 8 -------- .../__tests__/__snapshots__/Autocomplete.test.tsx.snap | 6 ------ 2 files changed, 14 deletions(-) diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index b52856e870b..e271f9f9a53 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -115,7 +115,6 @@ exports[`NavList renders a simple list 1`] = ` } .c2:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c2:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c2[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -208,7 +207,6 @@ exports[`NavList renders a simple list 1`] = ` } .c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c7:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c7[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -563,7 +561,6 @@ exports[`NavList renders with groups 1`] = ` } .c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c6:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c6[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -656,7 +653,6 @@ exports[`NavList renders with groups 1`] = ` } .c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c11:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -1042,7 +1038,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav } .c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c11:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -1135,7 +1130,6 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav } .c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c4:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c4[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -1514,7 +1508,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t } .c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c11:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -1617,7 +1610,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t } .c4:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c4:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c4[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 477ad74b801..79e8df9352e 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -778,7 +778,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = } .c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c3:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -1555,7 +1554,6 @@ exports[`snapshots renders a multiselect input 1`] = ` } .c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c3:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -2304,7 +2302,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` } .c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c3:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -2386,7 +2383,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` } .c8:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c8:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c8[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -3080,7 +3076,6 @@ exports[`snapshots renders a single select input 1`] = ` } .c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c3:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; } @@ -3551,7 +3546,6 @@ exports[`snapshots renders with a custom text input component 1`] = ` } .c3:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]), -.c3:focus:not([aria-disabled]):not([data-inactive]):not([data-loading]), .c3[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) { --divider-color: transparent; }