feat(ActionList): Combine Item and LinkItem into unified Item component by liuliu-dev · Pull Request #6999 · primer/react

liuliu-dev · 2025-10-13T22:27:17Z

Summary

Unifies ActionList.Item and ActionList.LinkItem into a single ActionList.Item component that handles both regular items and link items. Users can create link items by simply adding href or other anchor attributes to ActionList.Item, without needing to choose between two separate components.

All existing ActionList.LinkItem usage continues to work unchanged.

Closes https://github.com/github/primer/issues/5956

Implementation

Link Container
Created LinkItemContainerNoBox following the pattern of ButtonItemContainerNoBox /DivItemContainerNoBox, used as ItemWrapper when Item should be rendered as a link .

The structure is similar to _PrivateItemWrapper used in the LinkItem, but with some props changes : passing userOnClick and inactiveText which are no longer in scope.

Props Merging
The challenge is ActionListItemProps now includes both previous ActionListItemProps and LinkProps.

To avoid breaking current usage and support migration from ActionList.LinkItem to ActionList.Item with just the component name change (no props change), defined INTERACTIVE_ELEMENT_PROPS const in shared.ts. This const is used to strip LinkItem-specific props and only pass containerOnlyProps to container, avoiding props like href showing up in <li>.

Props are split into interactiveProps and containerOnlyProps.

Migration
Change component name, props stay the same:

// Before
<ActionList.LinkItem href="/path">Link</ActionList.LinkItem>

// After
<ActionList.Item href="/path">Link</ActionList.Item>

Breaking Changes

ActionList.LinkItem deprecated (still works but will show deprecation warnings)
ActionListItemProps now includes link props. And removed unused type prop from LinkProps, it caused type conflicts(https://github.com/github/github-ui/blob/b6bf6d94ab0a339243ebdcad5e6eeefce2b93f48/packages/copilot-chat/components/autocomplete/FileSuggestion.tsx#L8) when extending the interface.

Notes

The ESLint rule primer-react/prefer-action-list-item-onselect will need to be updated to allow onClick when link props are present.
Are these conditions sufficient to detect link items? Should any other props trigger link behavior?

  const isLinkItem = Boolean(
    props.href ||
      props.download ||
      props.target ||
      props.rel ||
      props.hrefLang ||
      props.to ||
      (typeof props.as === 'string' && props.as.toLowerCase() === 'a') ||
      role === 'link',
  )

Rollout strategy

Major release; if selected, include a written rollout or migration plan

…ories and checked DOM rendering

…structure.

…-and-item-in-actionlist

changeset-bot · 2025-10-13T22:27:21Z

🦋 Changeset detected

Latest commit: c6f608b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Major
@primer/styled-react	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-10-13T22:27:52Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

…//github.com/primer/react into liuliu/merge-linkitem-and-item-in-actionlist

…-and-item-in-actionlist

github-actions · 2025-10-20T23:28:42Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

siddharthkp

Big PR with tricky changes, well done!

Left some questions to understand the changes better

siddharthkp · 2025-10-21T12:48:59Z

-      <ActionList.LinkItem
+      <ActionList.Item
        ref={ref}
+        as="a"


This has as="a" but does not have an href or to, should we throw a typescript error when that happens?

I think it makes sense to validate for href or to when as="a" is used

I added validation in Item.tsx:

if (typeof props.as === 'string' && props.as.toLowerCase() === 'a' && !inactiveText) { invariant( props.href || props.to, 'ActionList.Item with as="a" must have an href or to prop for proper link semantics and accessibility.', ) }

However, this will break existing usages in github-ui where NavList.Item is used without href (like this example).

siddharthkp · 2025-10-21T13:24:01Z

+                      <ActionList.Item
                        key={menuItemChildren}
                        style={menuItemStyles}
+                        /* eslint-disable-next-line primer-react/prefer-action-list-item-onselect */


(non blocker) worth asking @pksjce or @broccolinisoup if there is a reason to prefer onClick over onSelect or if we can use onSelect here

siddharthkp · 2025-10-21T13:25:59Z

            Item with inline description
            <ActionList.Description variant="block">Block description</ActionList.Description>
-          </ActionList.LinkItem>
+          </ActionList.Item>


I think we should keep one story for LinkItem in ActionList.dev.stories so that we don't accidentally break it before it's time to remove ActionList.LinkItem.

siddharthkp · 2025-10-21T13:30:15Z

+      props.hrefLang ||
+      props.to ||
+      (typeof props.as === 'string' && props.as.toLowerCase() === 'a') ||
+      role === 'link',


can we reduce this list to the main things that make it anchor tag

For example, having hrefLang without href does not make it a link. I imagine the list is just href, as and to.

siddharthkp · 2025-10-21T13:35:05Z

+ * - Test identifiers
+ */
+export const INTERACTIVE_ELEMENT_PROPS = [
+  // Link-specific props from LinkProps


How can we make sure this list is exhaustive?

siddharthkp · 2025-10-21T13:35:28Z

+  'aria-keyshortcuts',
+  // Styling props (should be on the interactive element)
+  'style',
+  'sx',


just checking, do we still want sx here?

siddharthkp · 2025-10-21T13:41:37Z

+  const interactiveProps: Record<string, unknown> = {}
+
+  for (const [key, value] of Object.entries(props)) {
+    if (interactivePropsSet.has(key)) {


Sorry, just curious, is there a benefit of converting the array into a set to use Set.has instead of Array.includes? Took me a second to follow the trail 😅

siddharthkp · 2025-10-21T13:45:25Z

+  // 3. default - regular button/div behavior
+
+  // Create a Set for lookup of interactive-only props
+  const interactivePropsSet = new Set<string>(INTERACTIVE_ELEMENT_PROPS)


This is a longer list than what we checked before, are there any props that were earlier going to the <li> that will now end up on <a>? Especially in instances where ActionList.Item was used to act like a Link

For example: ActionList.Item as="a" href="" or ActionList.Item onClick={...}

siddharthkp · 2025-10-21T13:49:01Z

-      }
+    : isLinkItem
+      ? {
+          ...props,


just checking, do we want to spread all the props here? Or only some of the props?

siddharthkp · 2025-10-21T13:49:12Z

+          ...props,
+          ...menuItemProps,
+          inactiveText,
+          userOnClick: interactiveProps.onClick as ((event: React.MouseEvent<HTMLAnchorElement>) => void) | undefined,


Are we also using the other props in interactiveProps somewhere else? I could only spot onClick?

siddharthkp · 2025-10-21T13:54:14Z

ci completed with status success.

Heads up! There seem to be more tests that are failing in the integration PR that the comment does not know about: https://github.com/github/github-ui/pull/5128. I have not checked if they are related to changes in this PR, may or may not be.

…-and-item-in-actionlist

…tem story

github-actions · 2025-10-21T18:53:51Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-10-29T22:17:06Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-10-29T22:34:39Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-10-29T23:04:56Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

github-actions · 2025-10-29T23:35:21Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

primer-integration · 2025-10-30T00:07:19Z

🔴 ci completed with status failure.

primer-integration · 2025-10-31T16:33:55Z

😢 Hi from github/github-ui. The integration workflow has failed: https://github.com/github/github-ui/actions/runs/18978867808

liuliu-dev added 5 commits October 10, 2025 15:06

draft: LinkItemContainerNoBox, replaced all LinkItem in ActionList st…

1e2f576

…ories and checked DOM rendering

add back _PrivateItemWrapper, change api in stories and test the dom …

d779acf

…structure.

fix tests for missing role

1f686e8

Merge remote-tracking branch 'origin/main' into liuliu/merge-linkitem…

1704d0d

…-and-item-in-actionlist

fix lint

e1a6a6b

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 13, 2025

liuliu-dev deployed to github-pages October 13, 2025 22:35 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-6999 October 13, 2025 22:35 Inactive

liuliu-dev added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 13, 2025

test(vrt): update snapshots

35dc470

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 13, 2025

primer Bot deployed to github-pages October 13, 2025 23:06 View deployment

github-actions Bot temporarily deployed to storybook-preview-6999 October 13, 2025 23:06 Inactive

liuliu-dev added 2 commits October 14, 2025 13:42

update Breadcrumbs, NavList, UnderlineNav to use ActionList.Item

24995ef

Merge branch 'liuliu/merge-linkitem-and-item-in-actionlist' of https:…

02f7861

…//github.com/primer/react into liuliu/merge-linkitem-and-item-in-actionlist

liuliu-dev deployed to github-pages October 14, 2025 20:52 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-6999 October 14, 2025 20:53 Inactive

liuliu-dev added 2 commits October 14, 2025 15:56

some clean up and add changeset

1c904ac

Merge remote-tracking branch 'origin/main' into liuliu/merge-linkitem…

ebb427f

…-and-item-in-actionlist

liuliu-dev added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 14, 2025

github-actions Bot requested a deployment to storybook-preview-6999 October 14, 2025 23:00 Abandoned

test(vrt): update snapshots

9883e75

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 14, 2025

github-actions Bot temporarily deployed to storybook-preview-6999 October 14, 2025 23:08 Inactive

primer Bot deployed to github-pages October 14, 2025 23:16 View deployment

github-actions Bot temporarily deployed to storybook-preview-6999 October 14, 2025 23:16 Inactive

github-actions Bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 14, 2025

h4 -> h2, not exporting MenuItemProps

61eb1f1

github-actions Bot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 20, 2025

liuliu-dev deployed to github-pages October 20, 2025 23:37 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-6999 October 20, 2025 23:38 Inactive

github-actions Bot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 20, 2025

siddharthkp requested changes Oct 21, 2025

View reviewed changes

liuliu-dev added 2 commits October 21, 2025 11:49

Merge remote-tracking branch 'origin/main' into liuliu/merge-linkitem…

2a1be72

…-and-item-in-actionlist

check for href and to on as a, clean up props logic, add back 1 linki…

d1f1272

…tem story

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 21, 2025

liuliu-dev deployed to github-pages October 21, 2025 19:02 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-6999 October 21, 2025 19:03 Inactive

remove href check for a

54ee453

liuliu-dev deployed to github-pages October 21, 2025 22:51 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-6999 October 21, 2025 22:52 Inactive

Merge branch 'main' into liuliu/merge-linkitem-and-item-in-actionlist

c6f608b

liuliu-dev deployed to github-pages October 23, 2025 21:43 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-6999 October 23, 2025 21:43 Inactive

Uh oh!

Conversation

liuliu-dev commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Implementation

Breaking Changes

Notes

Rollout strategy

Uh oh!

changeset-bot Bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Oct 13, 2025

Uh oh!

github-actions Bot commented Oct 20, 2025

Uh oh!

siddharthkp left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siddharthkp commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 21, 2025

Uh oh!

github-actions Bot commented Oct 29, 2025

Uh oh!

github-actions Bot commented Oct 29, 2025

Uh oh!

github-actions Bot commented Oct 29, 2025

Uh oh!

github-actions Bot commented Oct 29, 2025

Uh oh!

primer-integration Bot commented Oct 30, 2025

Uh oh!

primer-integration Bot commented Oct 31, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

liuliu-dev commented Oct 13, 2025 •

edited

Loading

changeset-bot Bot commented Oct 13, 2025 •

edited

Loading

siddharthkp left a comment •

edited

Loading

siddharthkp commented Oct 21, 2025 •

edited

Loading