From dbb4f5162a3a4bb18c837afa63418f22f584ada8 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 25 Jun 2024 09:03:56 -0400 Subject: [PATCH 1/7] Update NavList to support TrailingAction --- .../react/src/NavList/NavList.stories.tsx | 23 +++++++++++++++++++ packages/react/src/NavList/NavList.tsx | 16 ++++++++++++- 2 files changed, 38 insertions(+), 1 deletion(-) 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.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, }) From 1005c7403a1a4eb6f25977894e029b38a5a2a5b5 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 25 Jun 2024 09:04:14 -0400 Subject: [PATCH 2/7] Update conditional in ActionList to allow NavList to set TrailingAction --- packages/react/src/ActionList/Item.tsx | 4 ++-- packages/react/src/ActionList/index.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index c003f94c1409..c2965efd6cb1 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -129,7 +129,7 @@ export const Item = React.forwardRef( const itemRole = role || inferredItemRole if (slots.trailingAction) { - invariant(!container, `ActionList.TrailingAction can not be used within a ${container}.`) + invariant(container !== 'ActionMenu', `ActionList.TrailingAction can not be used within a ${container}.`) } /** Infer the proper selection attribute based on the item's role */ @@ -455,7 +455,7 @@ export const Item = React.forwardRef( {slots.blockDescription} - {!inactive && Boolean(slots.trailingAction) && !container && slots.trailingAction} + {!inactive && 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. From 8bce4b1d0ce30eb7ff8d0d8c8cf656a0bd8dc1e4 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 25 Jun 2024 09:22:10 -0400 Subject: [PATCH 3/7] add NavList.TrailingAction support --- packages/react/src/NavList/NavList.test.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) 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', () => { From a40e23def223e87ad1448cfc5193dc221ad55224 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 25 Jun 2024 09:48:41 -0400 Subject: [PATCH 4/7] Update packages/react/src/ActionList/Item.tsx --- packages/react/src/ActionList/Item.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index c2965efd6cb1..85e8cec0e8fc 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -129,7 +129,8 @@ export const Item = React.forwardRef( const itemRole = role || inferredItemRole if (slots.trailingAction) { - invariant(container !== 'ActionMenu', `ActionList.TrailingAction can not be used within a ${container}.`) + const menuContext = container === 'ActionMenu' || container === 'SelectPanel'` + invariant(!menuContext, `ActionList.TrailingAction can not be used within a ${container}.`) } /** Infer the proper selection attribute based on the item's role */ From 5e6a91414a24d6b95b89d9b5526009d58099fa3b Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 25 Jun 2024 09:50:52 -0400 Subject: [PATCH 5/7] Update packages/react/src/ActionList/Item.tsx --- packages/react/src/ActionList/Item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index 85e8cec0e8fc..5148dcc0d809 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -456,7 +456,7 @@ export const Item = React.forwardRef( {slots.blockDescription} - {!inactive && Boolean(slots.trailingAction) && slots.trailingAction} + {!inactive && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction} ) From 5a6beb400b1c4f8e247bb99e5a61d2c5dff42abc Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 25 Jun 2024 09:51:48 -0400 Subject: [PATCH 6/7] Create tender-parrots-refuse.md --- .changeset/tender-parrots-refuse.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tender-parrots-refuse.md 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 From d06db30baaf3c8e29253ac99ecc8d8b227e65455 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 25 Jun 2024 10:03:18 -0400 Subject: [PATCH 7/7] Fix syntax --- packages/react/src/ActionList/Item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index 5148dcc0d809..88b122b45ac3 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -127,9 +127,9 @@ export const Item = React.forwardRef( } const itemRole = role || inferredItemRole + const menuContext = container === 'ActionMenu' || container === 'SelectPanel' if (slots.trailingAction) { - const menuContext = container === 'ActionMenu' || container === 'SelectPanel'` invariant(!menuContext, `ActionList.TrailingAction can not be used within a ${container}.`) }