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 diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index 8d5ce7f565c..6894a2f7132 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', }, 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; }