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
primer · Jun 17, 2024 · b13bbb3 · b13bbb3
1 parent 623b16e
commit b13bbb3
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));
 }