ActionList: Fix icon and description hover color for danger variant (#…

…3505)

* Add fixtures for #3044

* test(vrt): update snapshots

* oops my bad!

* Fix for icon and description

* Create cyan-cycles-provide.md

* update jest snapshots

* test(vrt): update snapshots

* Update cyan-cycles-provide.md

* update snapshots!

* test(vrt): update snapshots

---------

Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>

.changeset/cyan-cycles-provide.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+ActionList: Fix icon and description hover colors for danger variant
+
+<!-- Changed components: ActionList -->

src/ActionList/Description.tsx

@@ -26,22 +26,30 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
     flexBasis: 0,
     minWidth: 0,
     marginLeft: variant === 'block' ? 0 : 2,
+    color: 'fg.muted',
+    'li[aria-disabled="true"] &': {
+      color: 'inherit',
+    },
+    'li[data-variant="danger"]:hover &, li[data-variant="danger"]:active &': {
+      color: 'inherit',
+    },
   }
 
-  const {blockDescriptionId, inlineDescriptionId, disabled} = React.useContext(ItemContext)
+  const {blockDescriptionId, inlineDescriptionId} = React.useContext(ItemContext)
 
   return variant === 'block' ? (
     <Box
       as="span"
-      sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
+      // huh why?
+      sx={merge(styles, sx as SxProp)}
       id={blockDescriptionId}
     >
       {props.children}
     </Box>
   ) : (
     <Truncate
       id={inlineDescriptionId}
-      sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
+      sx={merge(styles, sx as SxProp)}
       title={props.children as string}
       inline={true}
       maxWidth="100%"

src/ActionList/Item.tsx

@@ -203,7 +203,13 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
     return (
       <ItemContext.Provider value={{variant, disabled, inlineDescriptionId, blockDescriptionId}}>
-        <LiBox ref={forwardedRef} sx={merge<BetterSystemStyleObject>(styles, sxProp)} {...containerProps} {...props}>
+        <LiBox
+          ref={forwardedRef}
+          sx={merge<BetterSystemStyleObject>(styles, sxProp)}
+          data-variant={variant === 'danger' ? variant : undefined}
+          {...containerProps}
+          {...props}
+        >
           <ItemWrapper {...wrapperProps}>
             <Selection selected={selected} />
             {slots.leadingVisual}

src/ActionList/Visuals.tsx

@@ -37,6 +37,9 @@ export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({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<React.PropsWithChildren<VisualProps>> = ({
           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,
       )}

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);