diff --git a/.changeset/cyan-cycles-provide.md b/.changeset/cyan-cycles-provide.md new file mode 100644 index 00000000000..1793ad12fee --- /dev/null +++ b/.changeset/cyan-cycles-provide.md @@ -0,0 +1,7 @@ +--- +"@primer/react": patch +--- + +ActionList: Fix icon and description hover colors for danger variant + + diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png index f6f87ee3746..c152e5c5d8a 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png index fcc55a3c293..0b52cb4f626 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png index e31640f0ca5..a32f0a60545 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png index 4ac0ade59fa..26e2433389b 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png index d8aaa76f096..2d76b77114d 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png index 1ba151983b2..dcee55bc552 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png index b436e9a2f4b..58c62afa2f3 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png index 7a540c67d5d..febba64f9dd 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png index d16302c2d05..79b2e14a740 100644 Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png differ diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx index 4027ec22f58..adb72064beb 100644 --- a/src/ActionList/Description.tsx +++ b/src/ActionList/Description.tsx @@ -26,14 +26,22 @@ export const Description: React.FC {props.children} @@ -41,7 +49,7 @@ export const Description: React.FC( return ( - (styles, sxProp)} {...containerProps} {...props}> + (styles, sxProp)} + data-variant={variant === 'danger' ? variant : undefined} + {...containerProps} + {...props} + > {slots.leadingVisual} diff --git a/src/ActionList/Visuals.tsx b/src/ActionList/Visuals.tsx index 4a290b20f3e..7a485ad8bce 100644 --- a/src/ActionList/Visuals.tsx +++ b/src/ActionList/Visuals.tsx @@ -37,6 +37,9 @@ export const LeadingVisual: React.FC> = ({s { color: getVariantStyles(variant, disabled).iconColor, svg: {fontSize: 0}, + '[data-variant="danger"]:hover &, [data-variant="danger"]:active &': { + color: getVariantStyles(variant, disabled).hoverColor, + }, }, sx as SxProp, )} @@ -60,6 +63,9 @@ export const TrailingVisual: React.FC> = ({ color: getVariantStyles(variant, disabled).annotationColor, marginLeft: 2, fontWeight: 'initial', + '[data-variant="danger"]:hover &, [data-variant="danger"]:active &': { + color: getVariantStyles(variant, disabled).hoverColor, + }, }, sx as SxProp, )} diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index e648c07832c..51c4560234b 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -839,6 +839,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav font-weight: initial; } +[data-variant="danger"]:hover .c7, +[data-variant="danger"]:active .c7 { + color: #1F2328; +} + .c8 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); @@ -1290,6 +1295,11 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t font-weight: initial; } +[data-variant="danger"]:hover .c7, +[data-variant="danger"]:active .c7 { + color: #1F2328; +} + .c8 { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg);