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);