diff --git a/.changeset/blue-elephants-sniff.md b/.changeset/blue-elephants-sniff.md
new file mode 100644
index 00000000000..434d4840ad7
--- /dev/null
+++ b/.changeset/blue-elephants-sniff.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionList: Fix icon and description hover color for danger variant
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png
new file mode 100644
index 00000000000..ecd3c11253f
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png
new file mode 100644
index 00000000000..28abfed3a0d
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png
new file mode 100644
index 00000000000..5e71401e473
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png
new file mode 100644
index 00000000000..f017de8e342
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png
new file mode 100644
index 00000000000..c27c125a55a
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..3660e55e177
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png
new file mode 100644
index 00000000000..64cf4d152e0
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png
new file mode 100644
index 00000000000..394ca58532a
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png
new file mode 100644
index 00000000000..64cf4d152e0
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..394ca58532a
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png
new file mode 100644
index 00000000000..dd7f4885e21
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png
new file mode 100644
index 00000000000..07953d86eac
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png
new file mode 100644
index 00000000000..43f258acb1a
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png
new file mode 100644
index 00000000000..a526cc0fd7a
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png
new file mode 100644
index 00000000000..ee7a8f41ed0
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png
new file mode 100644
index 00000000000..2df0c3bd2d1
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png
new file mode 100644
index 00000000000..0c9a394d76b
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png
new file mode 100644
index 00000000000..07953d86eac
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png differ
diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts
index 1d7dd8754d9..3679845b095 100644
--- a/e2e/components/ActionList.test.ts
+++ b/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()
+ })
+ })
+ }
+ })
})
diff --git a/src/ActionList/ActionList.examples.stories.tsx b/src/ActionList/ActionList.examples.stories.tsx
index ef5c79a08aa..bfda04d2801 100644
--- a/src/ActionList/ActionList.examples.stories.tsx
+++ b/src/ActionList/ActionList.examples.stories.tsx
@@ -440,6 +440,16 @@ export function AllCombinations(): JSX.Element {
+
+
+
+
+ Dangerinline description
+ Block description
+
+
+
+
>
diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx
index 63b89d4356b..229bfc9993e 100644
--- a/src/ActionList/Description.tsx
+++ b/src/ActionList/Description.tsx
@@ -26,23 +26,26 @@ export const Description: React.FC
- {({blockDescriptionId, inlineDescriptionId, disabled}: ItemContext) =>
+ {({blockDescriptionId, inlineDescriptionId}: ItemContext) =>
variant === 'block' ? (
-
+
{props.children}
) : (
(
(styles, sxProp)}
+ data-variant={variant === 'danger' ? variant : undefined}
{...containerProps}
{...props}
>
diff --git a/src/ActionList/Visuals.tsx b/src/ActionList/Visuals.tsx
index 5ca38b66943..0219eb251f8 100644
--- a/src/ActionList/Visuals.tsx
+++ b/src/ActionList/Visuals.tsx
@@ -38,6 +38,9 @@ export const LeadingVisual: React.FC> = ({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> = ({
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,
)}
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index 4901416b63a..46d3b4ff219 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/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);