fix trailing visual as text + add test

primer · Dec 18, 2024 · a4b11b0 · a4b11b0
1 parent e91e3ff
commit a4b11b0
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts
@@ -773,4 +773,32 @@ test.describe('ActionList', () => {
       })
     }
   })
+
+  test.describe('Link Item Options', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-examples--list-link-item',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Link Item Options.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-examples--list-link-item',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })
diff --git a/packages/react/src/ActionList/ActionList.examples.stories.tsx b/packages/react/src/ActionList/ActionList.examples.stories.tsx
@@ -94,9 +94,21 @@ export const ListLinkItem = () => (
       <ActionList.LeadingVisual>
         <LinkIcon />
       </ActionList.LeadingVisual>
-      ActionList.LinkItem with everything
+      With inline description
       <ActionList.Description variant="inline">inline description</ActionList.Description>
+    </ActionList.LinkItem>
+    <ActionList.LinkItem href="?path=/story/components-actionlist--default">
+      <ActionList.LeadingVisual>
+        <LinkIcon />
+      </ActionList.LeadingVisual>
+      With block description
       <ActionList.Description variant="block">Block description</ActionList.Description>
+    </ActionList.LinkItem>
+    <ActionList.LinkItem href="?path=/story/components-actionlist--default">
+      <ActionList.LeadingVisual>
+        <LinkIcon />
+      </ActionList.LeadingVisual>
+      Trailing visual
       <ActionList.TrailingVisual>⌘ + L</ActionList.TrailingVisual>
     </ActionList.LinkItem>
   </ActionList>

diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css
@@ -584,6 +584,7 @@ default block */
 span wrapping svg or text */
 .VisualWrap {
   display: flex;
+  min-width: max-content;
   min-height: var(--control-medium-lineBoxHeight);
   /* stylelint-disable-next-line primer/typography */
   line-height: 20px; /* temporary until we fix line-height rounding in primitives */