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 : {}),
     }