feat(ActionList): Combine Item and LinkItem into unified Item component

.changeset/shiny-pianos-wash.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+ActionList.Item now supports link functionality through href and other anchor attributes, deprecating the separate ActionList.LinkItem component.

packages/react/src/ActionList/ActionList.dev.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
 import {Item} from './Item'
-import {LinkItem} from './LinkItem'
 import {Group} from './Group'
 import {Divider} from './Divider'
 import {Description} from './Description'
@@ -14,7 +13,7 @@ import {AnchoredOverlay} from '../AnchoredOverlay'
 export default {
   title: 'Components/ActionList/Dev',
   component: ActionList,
-  subcomponents: {Item, LinkItem, Group, Divider, Description},
+  subcomponents: {Item, Group, Divider, Description},
 } as Meta<typeof ActionList>
 
 const users = [
@@ -261,15 +260,15 @@ export const ItemLabelStylesWithMixedDescriptions = () => (
             Item with inline description
             <ActionList.Description variant="block">Block description</ActionList.Description>
           </ActionList.LinkItem>
-          <ActionList.LinkItem>
+          <ActionList.Item>
             Item with inline description
             <ActionList.Description variant="block">Block description</ActionList.Description>
-          </ActionList.LinkItem>
-          <ActionList.LinkItem>Item with no description</ActionList.LinkItem>
-          <ActionList.LinkItem>
+          </ActionList.Item>
+          <ActionList.Item>Item with no description</ActionList.Item>
+          <ActionList.Item>
             Item with inline description
             <ActionList.Description variant="block">Block description</ActionList.Description>
-          </ActionList.LinkItem>
+          </ActionList.Item>
         </ActionList>
       </Stack.Item>
     </Stack>

packages/react/src/ActionList/ActionList.docs.json

@@ -108,8 +108,33 @@
           "required": false,
           "description": "id to attach to the root element of the Item",
           "defaultValue": ""
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "required": false,
+          "description": "URL to navigate to when the item is clicked. When provided, the item will render as a link.",
+          "defaultValue": ""
+        },
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "defaultValue": "\"a\"",
+          "required": false,
+          "description": "The underlying element to render."
+        },
+        {
+          "name": "to",
+          "type": "string",
+          "required": false,
+          "description": "Destination for React Router or other client-side routing libraries. When provided, the item will render as a link.",
+          "defaultValue": ""
         }
-      ]
+      ],
+      "passthrough": {
+        "element": "a",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes"
+      }
     },
     {
       "name": "ActionList.Heading",
@@ -349,4 +374,4 @@
       ]
     }
   ]
-}
+}

packages/react/src/ActionList/ActionList.examples.stories.tsx

@@ -51,53 +51,53 @@ export const ListLinkItem = () => (
       </ActionList.LeadingVisual>
       not a link, just an Item for comparison
     </ActionList.Item>
-    <ActionList.LinkItem href="https://github.com/primer" aria-keyshortcuts="g">
+    <ActionList.Item href="https://github.com/primer" aria-keyshortcuts="g">
       <ActionList.LeadingVisual>
         <LinkIcon />
       </ActionList.LeadingVisual>
-      ActionList.LinkItem
-    </ActionList.LinkItem>
-    <ActionList.LinkItem href="https://github.com/primer" target="_blank" rel="noopener noreferrer">
+      ActionList.Item with href
+    </ActionList.Item>
+    <ActionList.Item href="https://github.com/primer" target="_blank" rel="noopener noreferrer">
       <ActionList.LeadingVisual>
         <LinkIcon />
       </ActionList.LeadingVisual>
-      ActionList.LinkItem with anchor attributes
-    </ActionList.LinkItem>
-    <ActionList.LinkItem as={ReactRouterLikeLink} to="?path=/story/components-actionlist--default">
+      ActionList.Item with anchor attributes
+    </ActionList.Item>
+    <ActionList.Item as={ReactRouterLikeLink} to="?path=/story/components-actionlist--default">
       <ActionList.LeadingVisual>
         <LinkIcon />
       </ActionList.LeadingVisual>
       as ReactRouterLink
-    </ActionList.LinkItem>
+    </ActionList.Item>
     <NextJSLikeLink href="?path=/story/components-actionlist--default">
-      <ActionList.LinkItem>
+      <ActionList.Item>
         <ActionList.LeadingVisual>
           <LinkIcon />
         </ActionList.LeadingVisual>
         NextJS style Link
-      </ActionList.LinkItem>
+      </ActionList.Item>
     </NextJSLikeLink>
-    <ActionList.LinkItem href="?path=/story/components-actionlist--default">
+    <ActionList.Item href="?path=/story/components-actionlist--default">
       <ActionList.LeadingVisual>
         <LinkIcon />
       </ActionList.LeadingVisual>
       With inline description
       <ActionList.Description variant="inline">inline description</ActionList.Description>
-    </ActionList.LinkItem>
-    <ActionList.LinkItem href="?path=/story/components-actionlist--default">
+    </ActionList.Item>
+    <ActionList.Item 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.Item>
+    <ActionList.Item href="?path=/story/components-actionlist--default">
       <ActionList.LeadingVisual>
         <LinkIcon />
       </ActionList.LeadingVisual>
       Trailing visual
       <ActionList.TrailingVisual>⌘ + L</ActionList.TrailingVisual>
-    </ActionList.LinkItem>
+    </ActionList.Item>
   </ActionList>
 )
 ListLinkItem.storyName = 'Link Item'

packages/react/src/ActionList/ActionList.features.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
 import {Item} from './Item'
-import {LinkItem} from './LinkItem'
 import {Group} from './Group'
 import {Divider} from './Divider'
 import {Description} from './Description'
@@ -35,7 +34,7 @@ import classes from './ActionList.features.stories.module.css'
 export default {
   title: 'Components/ActionList/Features',
   component: ActionList,
-  subcomponents: {Item, LinkItem, Group, Divider, Description},
+  subcomponents: {Item, Group, Divider, Description},
 } as Meta<typeof ActionList>
 
 export const SimpleList = () => (
@@ -111,36 +110,36 @@ export const WithCustomHeading = () => (
       Details
     </Heading>
     <ActionList aria-labelledby="list-heading">
-      <ActionList.LinkItem href="https://github.com/primer/react#readme">
+      <ActionList.Item href="https://github.com/primer/react#readme">
         <ActionList.LeadingVisual>
           <BookIcon />
         </ActionList.LeadingVisual>
         Readme
-      </ActionList.LinkItem>
-      <ActionList.LinkItem href="https://github.com/primer/react/blob/main/LICENSE">
+      </ActionList.Item>
+      <ActionList.Item href="https://github.com/primer/react/blob/main/LICENSE">
         <ActionList.LeadingVisual>
           <LawIcon />
         </ActionList.LeadingVisual>
         MIT License
-      </ActionList.LinkItem>
-      <ActionList.LinkItem href="https://github.com/primer/react/stargazers">
+      </ActionList.Item>
+      <ActionList.Item href="https://github.com/primer/react/stargazers">
         <ActionList.LeadingVisual>
           <StarIcon />
         </ActionList.LeadingVisual>
         <strong>1.5k</strong> stars
-      </ActionList.LinkItem>
-      <ActionList.LinkItem href="https://github.com/primer/react/watchers">
+      </ActionList.Item>
+      <ActionList.Item href="https://github.com/primer/react/watchers">
         <ActionList.LeadingVisual>
           <EyeIcon />
         </ActionList.LeadingVisual>
         <strong>21</strong> watching
-      </ActionList.LinkItem>
-      <ActionList.LinkItem href="https://github.com/primer/react/network/members">
+      </ActionList.Item>
+      <ActionList.Item href="https://github.com/primer/react/network/members">
         <ActionList.LeadingVisual>
           <RepoForkedIcon />
         </ActionList.LeadingVisual>
         <strong>225</strong> forks
-      </ActionList.LinkItem>
+      </ActionList.Item>
     </ActionList>
   </>
 )
@@ -513,36 +512,36 @@ export const Links = () => (
     <ActionList.Heading as="h1" className={classes.HeadingSmall}>
       Details
     </ActionList.Heading>
-    <ActionList.LinkItem href="https://github.com/primer/react#readme">
+    <ActionList.Item href="https://github.com/primer/react#readme">
       <ActionList.LeadingVisual>
         <BookIcon />
       </ActionList.LeadingVisual>
       Readme
-    </ActionList.LinkItem>
-    <ActionList.LinkItem href="https://github.com/primer/react/blob/main/LICENSE">
+    </ActionList.Item>
+    <ActionList.Item href="https://github.com/primer/react/blob/main/LICENSE">
       <ActionList.LeadingVisual>
         <LawIcon />
       </ActionList.LeadingVisual>
       MIT License
-    </ActionList.LinkItem>
-    <ActionList.LinkItem href="https://github.com/primer/react/stargazers">
+    </ActionList.Item>
+    <ActionList.Item href="https://github.com/primer/react/stargazers">
       <ActionList.LeadingVisual>
         <StarIcon />
       </ActionList.LeadingVisual>
       <strong>1.5k</strong> stars
-    </ActionList.LinkItem>
-    <ActionList.LinkItem href="https://github.com/primer/react/watchers">
+    </ActionList.Item>
+    <ActionList.Item href="https://github.com/primer/react/watchers">
       <ActionList.LeadingVisual>
         <EyeIcon />
       </ActionList.LeadingVisual>
       <strong>21</strong> watching
-    </ActionList.LinkItem>
-    <ActionList.LinkItem href="https://github.com/primer/react/network/members">
+    </ActionList.Item>
+    <ActionList.Item href="https://github.com/primer/react/network/members">
       <ActionList.LeadingVisual>
         <RepoForkedIcon />
       </ActionList.LeadingVisual>
       <strong>225</strong> forks
-    </ActionList.LinkItem>
+    </ActionList.Item>
   </ActionList>
 )
 
@@ -909,15 +908,15 @@ export const WithTrailingAction = () => {
           </ActionList.Description>
           <ActionList.TrailingAction label="Apply settings" loading={loadingState} />
         </ActionList.Item>
-        <ActionList.LinkItem href="#">
+        <ActionList.Item href="#">
           LinkItem 1
           <ActionList.Description>
             with TrailingAction this is a long description and should not cause horizontal scroll on smaller screen
             sizes
           </ActionList.Description>
           <ActionList.TrailingAction label="Another action" />
-        </ActionList.LinkItem>
-        <ActionList.LinkItem href="#">
+        </ActionList.Item>
+        <ActionList.Item href="#">
           LinkItem 2
           <ActionList.Description>
             with TrailingVisual this is a long description and should not cause horizontal scroll on smaller screen
@@ -926,7 +925,7 @@ export const WithTrailingAction = () => {
           <ActionList.TrailingVisual>
             <TableIcon />
           </ActionList.TrailingVisual>
-        </ActionList.LinkItem>
+        </ActionList.Item>
         <ActionList.Item inactiveText="Unavailable due to an outage">
           Inactive Item<ActionList.Description>With TrailingAction</ActionList.Description>
           <ActionList.TrailingAction as="a" href="#" label="Some action 8" icon={ArrowRightIcon} />

packages/react/src/ActionList/ActionList.stories.tsx

@@ -2,7 +2,6 @@ import type {StoryFn, Meta} from '@storybook/react-vite'
 import type {ActionListProps, ActionListGroupProps} from '.'
 import {ActionList} from '.'
 import {Item} from './Item'
-import {LinkItem} from './LinkItem'
 import {Group} from './Group'
 import {Divider} from './Divider'
 import {Description} from './Description'
@@ -11,7 +10,7 @@ import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon}
 export default {
   title: 'Components/ActionList',
   component: ActionList,
-  subcomponents: {Item, LinkItem, Group, Divider, Description},
+  subcomponents: {Item, Group, Divider, Description},
 } as Meta<typeof ActionList>
 
 export const Default = () => (
@@ -214,11 +213,11 @@ export const LinkItemPlayground = args => {
 
   return (
     <ActionList>
-      <ActionList.LinkItem {...args}>
+      <ActionList.Item {...args}>
         {leadingVisual && <ActionList.LeadingVisual>{leadingVisual}</ActionList.LeadingVisual>}
         Action list item
         {trailingVisual && <ActionList.TrailingVisual>{trailingVisual}</ActionList.TrailingVisual>}
-      </ActionList.LinkItem>
+      </ActionList.Item>
     </ActionList>
   )
 }

packages/react/src/ActionList/ActionList.test.tsx

@@ -95,9 +95,9 @@ describe('ActionList', () => {
           </ActionList.TrailingAction>
         </ActionList.Item>
         <ActionList.Divider className="divider" />
-        <ActionList.LinkItem className="link" href="//github.com" title="anchor" aria-keyshortcuts="d">
+        <ActionList.Item className="link" href="//github.com" title="anchor" aria-keyshortcuts="d">
           Link Item
-        </ActionList.LinkItem>
+        </ActionList.Item>
         <ActionList.Group className="group">
           <ActionList.GroupHeading as="h2" className="group_heading">
             Group Heading
@@ -177,16 +177,16 @@ describe('ActionList', () => {
     expect(descriptions[2]).not.toHaveAttribute('title')
   })
 
-  it('should support size prop on LinkItem', () => {
+  it('should support size prop on Item', () => {
     const {container} = HTMLRender(
       <ActionList>
-        <ActionList.LinkItem href="//github.com" size="large">
+        <ActionList.Item href="//github.com" size="large">
           Large Link Item
-        </ActionList.LinkItem>
-        <ActionList.LinkItem href="//github.com" size="medium">
+        </ActionList.Item>
+        <ActionList.Item href="//github.com" size="medium">
           Medium Link Item
-        </ActionList.LinkItem>
-        <ActionList.LinkItem href="//github.com">Default Link Item</ActionList.LinkItem>
+        </ActionList.Item>
+        <ActionList.Item href="//github.com">Default Link Item</ActionList.Item>
       </ActionList>,
     )
 

packages/react/src/ActionList/Item.test.tsx

@@ -13,9 +13,9 @@ function SimpleActionList(): JSX.Element {
       <ActionList.Item>Copy link</ActionList.Item>
       <ActionList.Item>Edit file</ActionList.Item>
       <ActionList.Item variant="danger">Delete file</ActionList.Item>
-      <ActionList.LinkItem href="//github.com" title="anchor" aria-keyshortcuts="d">
+      <ActionList.Item href="//github.com" title="anchor" aria-keyshortcuts="d">
         Link Item
-      </ActionList.LinkItem>
+      </ActionList.Item>
       <ActionList.Item inactiveText="Unavailable due to an outage">Inactive item</ActionList.Item>
       <ActionList.Item inactiveText="Unavailable due to an outage" loading>
         Loading and inactive item
@@ -185,9 +185,10 @@ describe('ActionList.Item', () => {
     const onClick = vi.fn()
     const component = HTMLRender(
       <ActionList role="listbox">
-        <ActionList.LinkItem role="link" onClick={onClick}>
+        {/* eslint-disable-next-line primer-react/prefer-action-list-item-onselect */}
+        <ActionList.Item role="link" onClick={onClick}>
           Primer React
-        </ActionList.LinkItem>
+        </ActionList.Item>
       </ActionList>,
     )
     const link = await waitFor(() => component.getByRole('link'))