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,39 @@ 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()
+ })
+ })
+ }
+ })
 })

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

@@ -193,6 +193,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

@@ -840,6 +840,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);
@@ -1301,6 +1306,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);