diff --git a/.changeset/honest-olives-laugh.md b/.changeset/honest-olives-laugh.md new file mode 100644 index 00000000000..2a27e35fa02 --- /dev/null +++ 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 index 146515fc744..5ec5e6f61f3 100644 --- a/packages/react/src/ActionList/Visuals.tsx +++ b/packages/react/src/ActionList/Visuals.tsx @@ -38,9 +38,10 @@ export const LeadingVisual: React.FC> = ({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 index 670e3b49cc8..ff7ea0c382c 100644 --- 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 = () => ( - alert('Make a copy clicked')} inactiveText="Unavailable due to an outage"> + alert('Make a copy clicked')} + inactiveText="Unavailable due to an outage" + > Make a copy diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index b8b62001e1f..0a6cc2ab235 100644 --- 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)); }