ActionList: Fix icon and description hover color for danger variant

.changeset/blue-elephants-sniff.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionList: Fix icon and description hover color for danger variant

e2e/components/ActionList.test.ts

@@ -478,4 +478,45 @@ test.describe('ActionList', () => {
       })
     }
   })
+
+  test.describe('All combinations', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-examples--all-combinations',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Resize to fit long page
+          await page.setViewportSize({width: 1000, height: 1000})
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ActionList.All combinations.${theme}.png`)
+
+          // Hover state
+          await page.getByRole('listitem', {name: 'Danger inline description'}).hover()
+          expect(await page.screenshot()).toMatchSnapshot(`ActionList.All combinations.${theme}.hover.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-features--all-combinations',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
 })

src/ActionList/ActionList.examples.stories.tsx

@@ -440,6 +440,16 @@ export function AllCombinations(): JSX.Element {
               <StarIcon />
             </ActionList.TrailingVisual>
           </ActionList.Item>
+          <ActionList.Item variant="danger">
+            <ActionList.LeadingVisual>
+              <StarIcon />
+            </ActionList.LeadingVisual>
+            Danger<ActionList.Description variant="inline">inline description</ActionList.Description>
+            <ActionList.Description variant="block">Block description</ActionList.Description>
+            <ActionList.TrailingVisual>
+              <StarIcon />
+            </ActionList.TrailingVisual>
+          </ActionList.Item>
         </ActionList>
       </Box>
     </>

src/ActionList/Description.tsx

@@ -26,23 +26,26 @@ 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',
+    },
   }
 
   return (
     <Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
-      {({blockDescriptionId, inlineDescriptionId, disabled}: ItemContext) =>
+      {({blockDescriptionId, inlineDescriptionId}: ItemContext) =>
         variant === 'block' ? (
-          <Box
-            as="span"
-            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
-            id={blockDescriptionId}
-          >
+          <Box as="span" 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

@@ -199,6 +199,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
             <LiBox
               ref={forwardedRef}
               sx={merge<BetterSystemStyleObject>(styles, sxProp)}
+              data-variant={variant === 'danger' ? variant : undefined}
               {...containerProps}
               {...props}
             >

src/ActionList/Visuals.tsx

@@ -38,6 +38,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,
           )}
@@ -64,6 +67,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

@@ -868,6 +868,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: #24292f;
+}
+
 .c8 {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
@@ -1343,6 +1348,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: #24292f;
+}
+
 .c8 {
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);