Merge d06db30 into db72a71

.changeset/tender-parrots-refuse.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add TrailingAction support to NavList

packages/react/src/ActionList/Item.tsx

@@ -127,9 +127,10 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
     }
 
     const itemRole = role || inferredItemRole
+    const menuContext = container === 'ActionMenu' || container === 'SelectPanel'
 
     if (slots.trailingAction) {
-      invariant(!container, `ActionList.TrailingAction can not be used within a ${container}.`)
+      invariant(!menuContext, `ActionList.TrailingAction can not be used within a ${container}.`)
     }
 
     /** Infer the proper selection attribute based on the item's role */
@@ -455,7 +456,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
               {slots.blockDescription}
             </Box>
           </ItemWrapper>
-          {!inactive && Boolean(slots.trailingAction) && !container && slots.trailingAction}
+          {!inactive && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction}
         </LiBox>
       </ItemContext.Provider>
     )

packages/react/src/ActionList/index.ts

@@ -16,6 +16,7 @@ export type {ActionListDividerProps} from './Divider'
 export type {ActionListDescriptionProps} from './Description'
 export type {ActionListLeadingVisualProps, ActionListTrailingVisualProps} from './Visuals'
 export type {ActionListHeadingProps} from './Heading'
+export type {ActionListTrailingActionProps} from './TrailingAction'
 
 /**
  * Collection of list-related components.

packages/react/src/NavList/NavList.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryFn} from '@storybook/react'
 import React from 'react'
 import {PageLayout} from '../PageLayout'
 import {NavList} from './NavList'
+import {ArrowRightIcon, ArrowLeftIcon, BookIcon, FileDirectoryIcon} from '@primer/octicons-react'
 
 const meta: Meta = {
   title: 'Components/NavList',
@@ -246,4 +247,26 @@ export const WithGroup = () => (
   </PageLayout>
 )
 
+export const WithTrailingAction = () => {
+  return (
+    <NavList>
+      <NavList.Item>
+        <NavList.LeadingVisual>
+          <FileDirectoryIcon />
+        </NavList.LeadingVisual>
+        Item 1
+        <NavList.TrailingAction label="Expand sidebar" icon={ArrowLeftIcon} />
+      </NavList.Item>
+      <NavList.Item>
+        Item 2
+        <NavList.TrailingAction as="a" href="#" label="Some action" icon={ArrowRightIcon} />
+      </NavList.Item>
+      <NavList.Item>
+        Item 3
+        <NavList.TrailingAction label="Another action" icon={BookIcon} />
+      </NavList.Item>
+    </NavList>
+  )
+}
+
 export default meta

packages/react/src/NavList/NavList.test.tsx

@@ -65,6 +65,20 @@ describe('NavList', () => {
     )
     expect(container).toMatchSnapshot()
   })
+
+  it('supports TrailingAction', async () => {
+    const {getByRole} = render(
+      <NavList>
+        <NavList.Item>
+          Item 1
+          <NavList.TrailingAction label="Some trailing action" />
+        </NavList.Item>
+      </NavList>,
+    )
+
+    const trailingAction = getByRole('button', {name: 'Some trailing action'})
+    expect(trailingAction).toBeInTheDocument()
+  })
 })
 
 describe('NavList.Item', () => {

packages/react/src/NavList/NavList.tsx

@@ -2,7 +2,12 @@ import {ChevronDownIcon} from '@primer/octicons-react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import React, {isValidElement} from 'react'
 import styled from 'styled-components'
-import type {ActionListDividerProps, ActionListLeadingVisualProps, ActionListTrailingVisualProps} from '../ActionList'
+import type {
+  ActionListTrailingActionProps,
+  ActionListDividerProps,
+  ActionListLeadingVisualProps,
+  ActionListTrailingVisualProps,
+} from '../ActionList'
 import {ActionList} from '../ActionList'
 import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
 import Box from '../Box'
@@ -251,6 +256,14 @@ const Divider = ActionList.Divider
 
 Divider.displayName = 'NavList.Divider'
 
+// NavList.TrailingAction
+
+export type NavListTrailingActionProps = ActionListTrailingActionProps
+
+const TrailingAction = ActionList.TrailingAction
+
+TrailingAction.displayName = 'NavList.TrailingAction'
+
 // ----------------------------------------------------------------------------
 // NavList.Group
 
@@ -285,6 +298,7 @@ export const NavList = Object.assign(Root, {
   SubNav,
   LeadingVisual,
   TrailingVisual,
+  TrailingAction,
   Divider,
   Group,
 })