diff --git a/.changeset/tender-parrots-refuse.md b/.changeset/tender-parrots-refuse.md new file mode 100644 index 000000000000..008900b4bbcb --- /dev/null +++ b/.changeset/tender-parrots-refuse.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Add TrailingAction support to NavList diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index c003f94c1409..88b122b45ac3 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -127,9 +127,10 @@ export const Item = React.forwardRef( } 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( {slots.blockDescription} - {!inactive && Boolean(slots.trailingAction) && !container && slots.trailingAction} + {!inactive && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction} ) diff --git a/packages/react/src/ActionList/index.ts b/packages/react/src/ActionList/index.ts index ad2d03c509da..e3ca7e4e333a 100644 --- a/packages/react/src/ActionList/index.ts +++ b/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. diff --git a/packages/react/src/NavList/NavList.stories.tsx b/packages/react/src/NavList/NavList.stories.tsx index 400cf8ae3fae..73e082038d02 100644 --- a/packages/react/src/NavList/NavList.stories.tsx +++ b/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 = () => ( ) +export const WithTrailingAction = () => { + return ( + + + + + + Item 1 + + + + Item 2 + + + + Item 3 + + + + ) +} + export default meta diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx index e69aed47ba6d..3344738d5254 100644 --- a/packages/react/src/NavList/NavList.test.tsx +++ b/packages/react/src/NavList/NavList.test.tsx @@ -65,6 +65,20 @@ describe('NavList', () => { ) expect(container).toMatchSnapshot() }) + + it('supports TrailingAction', async () => { + const {getByRole} = render( + + + Item 1 + + + , + ) + + const trailingAction = getByRole('button', {name: 'Some trailing action'}) + expect(trailingAction).toBeInTheDocument() + }) }) describe('NavList.Item', () => { diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index 908322fb4758..a41317964324 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/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, })