ActionList: Ensure variant is respected when full (#4706)

* Fix `variant` issue when `full` and FF is enabled * Adjust width styles for FF * Add changeset * Add full variant vrt tests
primer · Jul 3, 2024 · 71859ed · 71859ed
1 parent 89c3a08
commit 71859ed
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 2 deletions.
diff --git a/.changeset/famous-zebras-train.md 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/.../ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-colorblind-linux.png b/.../ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-colorblind-linux.png
diff --git a/...ents/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-dimmed-linux.png b/...ents/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-dimmed-linux.png
diff --git a/...tionList.test.ts-snapshots/ActionList-Full-Variant-dark-high-contrast-linux.png b/...tionList.test.ts-snapshots/ActionList-Full-Variant-dark-high-contrast-linux.png
diff --git a/.../components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-linux.png b/.../components/ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-linux.png
diff --git a/.../ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-tritanopia-linux.png b/.../ActionList.test.ts-snapshots/ActionList-Full-Variant-dark-tritanopia-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Full-Variant-light-colorblind-linux.png b/...ActionList.test.ts-snapshots/ActionList-Full-Variant-light-colorblind-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-Full-Variant-light-high-contrast-linux.png b/...ionList.test.ts-snapshots/ActionList-Full-Variant-light-high-contrast-linux.png
diff --git a/...components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-linux.png b/...components/ActionList.test.ts-snapshots/ActionList-Full-Variant-light-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Full-Variant-light-tritanopia-linux.png b/...ActionList.test.ts-snapshots/ActionList-Full-Variant-light-tritanopia-linux.png
diff --git 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
@@ -792,3 +792,13 @@ export const WithTrailingAction = () => {
  </FeatureFlags>
  )
 }
+
+export const FullVariant = () => (
+ <ActionList variant="full">
+ <ActionList.Item>Copy link</ActionList.Item>
+ <ActionList.Item>Quote reply</ActionList.Item>
+ <ActionList.Item>Edit comment</ActionList.Item>
+ <ActionList.Divider />
+ <ActionList.Item variant="danger">Delete file</ActionList.Item>
+ </ActionList>
+)
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
@@ -183,8 +183,8 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
  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 : {}),
  }