Merge 7301746 into 964db80

primer · Jun 7, 2024 · 0b9b997 · 0b9b997
2 parents 964db80 + 7301746
commit 0b9b997
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/.changeset/honest-olives-laugh.md b/.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.
diff --git a/packages/react/src/ActionList/Visuals.tsx b/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,
       )}

diff --git a/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx b/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 />

diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/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));
 }