diff --git a/.changeset/famous-zebras-train.md b/.changeset/famous-zebras-train.md new file mode 100644 index 00000000000..b6bd542a8dd --- /dev/null +++ b/.changeset/famous-zebras-train.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +(Behind feature flag) ActionList: Fix for "full" variant when using button semantics diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-colorblind-linux.png new file mode 100644 index 00000000000..4394209efd0 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-dimmed-linux.png new file mode 100644 index 00000000000..e48d0cbe6b8 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ffb92c280a7 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-linux.png new file mode 100644 index 00000000000..f90400c614d Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-tritanopia-linux.png new file mode 100644 index 00000000000..f90400c614d Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-colorblind-linux.png new file mode 100644 index 00000000000..d73a708f0fc Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-high-contrast-linux.png new file mode 100644 index 00000000000..c66fa8c6917 Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-linux.png new file mode 100644 index 00000000000..15aae87e99d Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-tritanopia-linux.png new file mode 100644 index 00000000000..15aae87e99d Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-tritanopia-linux.png differ diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts index f961627d674..7fef2326cc3 100644 --- a/e2e/components/ActionList.test.ts +++ b/e2e/components/ActionList.test.ts @@ -654,4 +654,32 @@ test.describe('ActionList', () => { }) } }) + + test.describe('Full Variant', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-actionlist-features--full-variant', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`ActionList.Full Variant.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-actionlist-features--full-variant', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) }) diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx index 48c70e7c931..3f23e88166b 100644 --- a/packages/react/src/ActionList/ActionList.features.stories.tsx +++ b/packages/react/src/ActionList/ActionList.features.stories.tsx @@ -792,3 +792,13 @@ export const WithTrailingAction = () => { ) } + +export const FullVariant = () => ( + + Copy link + Quote reply + Edit comment + + Delete file + +) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index 0cf06a981c1..3cafefb6d6a 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -182,8 +182,8 @@ export const Item = React.forwardRef( display: 'flex', // show between 2 items ':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider}, - width: 'calc(100% - 16px)', - marginX: buttonSemantics ? '2' : '0', + width: buttonSemantics && listVariant !== 'full' ? 'calc(100% - 16px)' : '100%', + marginX: buttonSemantics && listVariant !== 'full' ? '2' : '0', ...(buttonSemantics ? hoverStyles : {}), }