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

.changeset/full-berries-work.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Combines `ActionList.Item` and `ActionList.LinkItem` into a unified `ActionList.Item` component

eslint.config.mjs

@@ -116,7 +116,7 @@ const config = defineConfig([
       'primer-react/a11y-remove-disable-tooltip': 'error',
       'primer-react/a11y-use-next-tooltip': 'error',
       'primer-react/no-unnecessary-components': 'error',
-      'primer-react/prefer-action-list-item-onselect': 'error',
+      'primer-react/prefer-action-list-item-onselect': 'off', // Temporarily disabled while combining Item and LinkItem
     },
   },
 

packages/react/src/ActionBar/ActionBar.tsx

@@ -250,7 +250,6 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                       return (
                         <ActionList.Item
                           key={menuItemChildren}
-                          // eslint-disable-next-line primer-react/prefer-action-list-item-onselect
                           onClick={(event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
                             closeOverlay()
                             focusOnMoreMenuBtn()

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 = [
@@ -257,19 +256,19 @@ export const ItemLabelStylesWithMixedDescriptions = () => (
           <ActionList.Heading as="h2" size="small">
             Some link items have block description
           </ActionList.Heading>
-          <ActionList.LinkItem>
+          <ActionList.Item>
             Item with inline description
             <ActionList.Description variant="block">Block description</ActionList.Description>
-          </ActionList.LinkItem>
-          <ActionList.LinkItem>
+          </ActionList.Item>
+          <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

@@ -8,7 +8,7 @@
   "props": [
     {
       "name": "children",
-      "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]",
+      "type": "ActionList.Item[] | ActionList.Group[]",
       "defaultValue": "",
       "required": true,
       "description": ""
@@ -65,7 +65,7 @@
           "name": "onSelect",
           "type": "(event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void",
           "defaultValue": "",
-          "description": "Callback that is called when the item is selected using either the mouse or keyboard. `event.preventDefault()` will prevent a menu from closing when within an `<ActionMenu />`. This is not called for disabled or inactive items."
+          "description": "Callback that is called when the item is selected using either the mouse or keyboard. `event.preventDefault()` will prevent a menu from closing when within an `<ActionMenu />`. This is not called for disabled or inactive items. When link props are provided, this may not be called as the default link behavior takes precedence."
         },
         {
           "name": "selected",
@@ -108,8 +108,28 @@
           "required": false,
           "description": "id to attach to the root element of the Item",
           "defaultValue": ""
+        },
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "defaultValue": "\"button\"",
+          "description": "The component or element type to render as. When href, to, or other link props are provided, this defaults to \"a\"."
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "URL to navigate to when item is clicked. When provided, the item will render as a link using LinkItem internally."
+        },
+        {
+          "name": "to",
+          "type": "string",
+          "description": "React Router destination to navigate to when item is clicked. When provided, the item will render as a link using LinkItem internally."
         }
-      ]
+      ],
+      "passthrough": {
+        "element": "button | a",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes | https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes"
+      }
     },
     {
       "name": "ActionList.Heading",
@@ -137,44 +157,6 @@
         }
       ]
     },
-    {
-      "name": "ActionList.LinkItem",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual",
-          "defaultValue": "",
-          "required": true,
-          "description": ""
-        },
-        {
-          "name": "active",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Indicate whether the item is active. There should never be more than one active item."
-        },
-        {
-          "name": "ref",
-          "type": "React.RefObject<HTMLAnchorElement>"
-        },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "\"a\""
-        },
-        {
-          "name": "inactiveText",
-          "type": "string",
-          "required": false,
-          "description": "Text describing why the item is inactive. This may be used when an item's usual functionality\nis unavailable due to a system error such as a database outage.",
-          "defaultValue": ""
-        }
-      ],
-      "passthrough": {
-        "element": "a",
-        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes"
-      }
-    },
     {
       "name": "ActionList.LeadingVisual",
       "props": [
@@ -310,7 +292,7 @@
       "props": [
         {
           "name": "children",
-          "type": "ActionList.Item[] | ActionList.LinkItem[]",
+          "type": "ActionList.Item[]",
           "defaultValue": "",
           "required": true,
           "description": ""
@@ -349,4 +331,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
+    </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} />