Prevents text color from changing on hover for "inactive" ActionMenu.Items of the "danger" variant (#4651)

* prevents inactive danger actionmenu items from changing color on hover

* adds changeset

Author: mperrotti

.changeset/honest-olives-laugh.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Prevents text color from changing on hover for "inactive" ActionMenu.Items of the "danger" variant. Before this change, the text color would change on hover. After this change, the text color remains the same on hover.

packages/react/src/ActionList/Visuals.tsx

@@ -38,9 +38,10 @@ export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({s
         {
           color: getVariantStyles(variant, disabled, inactive).iconColor,
           svg: {fontSize: 0},
-          '[data-variant="danger"]:hover &, [data-variant="danger"]:active &': {
-            color: getVariantStyles(variant, disabled, inactive).hoverColor,
-          },
+          '[data-variant="danger"]:not([aria-disabled]):not([data-inactive]):hover &, [data-variant="danger"]:active &':
+            {
+              color: getVariantStyles(variant, disabled, inactive).hoverColor,
+            },
         },
         sx as SxProp,
       )}

packages/react/src/ActionMenu/ActionMenu.features.stories.tsx

@@ -158,7 +158,11 @@ export const InactiveItems = () => (
             <GearIcon />
           </ActionList.LeadingVisual>
         </ActionList.LinkItem>
-        <ActionList.Item onSelect={() => alert('Make a copy clicked')} inactiveText="Unavailable due to an outage">
+        <ActionList.Item
+          variant="danger"
+          onSelect={() => alert('Make a copy clicked')}
+          inactiveText="Unavailable due to an outage"
+        >
           Make a copy
           <ActionList.LeadingVisual>
             <CopyIcon />

packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -652,7 +652,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   font-size: 12px;
 }
 
-[data-variant="danger"]:hover .c4,
+[data-variant="danger"]:not([aria-disabled]):not([data-inactive]):hover .c4,
 [data-variant="danger"]:active .c9 {
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }