From f1b3e6fcb4321b6259f1a3d584b23a6fb37640b0 Mon Sep 17 00:00:00 2001 From: Baoshuo Ren Date: Fri, 21 Jun 2024 09:45:52 +0800 Subject: [PATCH 1/2] fix: hover background in ActionList.Item When using `styled-components` 6.x, the background when hovering is not correct. --- packages/react/src/ActionList/Item.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index 720343000a3..389b521b26a 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -187,7 +187,7 @@ export const Item = React.forwardRef( marginY: 'unset', '@media (hover: hover) and (pointer: fine)': { - ':hover:not([aria-disabled]):not([data-inactive])': { + '&:hover:not([aria-disabled]):not([data-inactive])': { backgroundColor: `actionListItem.${variant}.hoverBg`, color: getVariantStyles(variant, disabled, inactive).hoverColor, boxShadow: `inset 0 0 0 max(1px, 0.0625rem) ${theme?.colors.actionListItem.default.activeBorder}`, @@ -197,7 +197,7 @@ export const Item = React.forwardRef( border: `2 solid`, boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`, }, - ':active:not([aria-disabled]):not([data-inactive])': { + '&:active:not([aria-disabled]):not([data-inactive])': { backgroundColor: `actionListItem.${variant}.activeBg`, color: getVariantStyles(variant, disabled, inactive).hoverColor, }, From 02d6fd35c3e9edee50736ff0d9e27689a0cdd960 Mon Sep 17 00:00:00 2001 From: Baoshuo Date: Fri, 21 Jun 2024 09:54:58 +0800 Subject: [PATCH 2/2] add changeset --- .changeset/sixty-onions-share.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sixty-onions-share.md diff --git a/.changeset/sixty-onions-share.md b/.changeset/sixty-onions-share.md new file mode 100644 index 00000000000..10c54dc457a --- /dev/null +++ b/.changeset/sixty-onions-share.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +fix: hover background in ActionList.Item