From 94b359844ccf6546fba409000214f3c71172e789 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Fri, 5 Jun 2026 10:55:41 -0400 Subject: [PATCH 1/4] Add more variant options to ActionList --- ...ctionlist-variant-start-end-vertical-inset.md | 7 +++++++ .../react/src/ActionList/ActionList.docs.json | 2 +- .../react/src/ActionList/ActionList.module.css | 16 ++++++++++++++++ .../react/src/ActionList/ActionList.stories.tsx | 2 +- packages/react/src/ActionList/Heading.module.css | 4 ++-- packages/react/src/ActionList/shared.ts | 2 +- packages/react/src/NavList/NavList.tsx | 9 +++++++-- 7 files changed, 35 insertions(+), 7 deletions(-) create mode 100644 .changeset/actionlist-variant-start-end-vertical-inset.md diff --git a/.changeset/actionlist-variant-start-end-vertical-inset.md b/.changeset/actionlist-variant-start-end-vertical-inset.md new file mode 100644 index 00000000000..a1aeebccbec --- /dev/null +++ b/.changeset/actionlist-variant-start-end-vertical-inset.md @@ -0,0 +1,7 @@ +--- +'@primer/react': minor +--- + +ActionList: Add `start`, `end`, and `vertical-inset` options to the `variant` prop. `start` and `end` offset only the start or end edge (`margin-inline-start` / `margin-inline-end`) respectively, and `vertical-inset` offsets items vertically but not horizontally from the list's edges. + +NavList: Add a `variant` prop that is forwarded to the underlying `ActionList`. diff --git a/packages/react/src/ActionList/ActionList.docs.json b/packages/react/src/ActionList/ActionList.docs.json index ccaf7865466..3afa4a428c9 100644 --- a/packages/react/src/ActionList/ActionList.docs.json +++ b/packages/react/src/ActionList/ActionList.docs.json @@ -15,7 +15,7 @@ }, { "name": "variant", - "type": "'inset' | 'horizontal-inset' | 'full'", + "type": "'inset' | 'horizontal-inset' | 'vertical-inset' | 'full' | 'start' | 'end'", "defaultValue": "'inset'", "description": "`inset` children are offset (vertically and/or horizontally) from list edges. `full` children are flush (vertically and horizontally) with list edges" }, diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css index fcc0bfda7e0..34572d5a97a 100644 --- a/packages/react/src/ActionList/ActionList.module.css +++ b/packages/react/src/ActionList/ActionList.module.css @@ -15,6 +15,10 @@ padding-block: var(--base-size-8); } + &:where([data-variant='vertical-inset']) { + padding-block: var(--base-size-8); + } + &:where([data-variant='inset'], [data-variant='horizontal-inset']) { /* this is only to match default experience */ & .ActionListItem { @@ -22,6 +26,18 @@ } } + &:where([data-variant='start']) { + & .ActionListItem { + margin-inline-start: var(--base-size-8); + } + } + + &:where([data-variant='end']) { + & .ActionListItem { + margin-inline-end: var(--base-size-8); + } + } + &:where([data-variant='horizontal-inset']) { padding-bottom: var(--base-size-8); } diff --git a/packages/react/src/ActionList/ActionList.stories.tsx b/packages/react/src/ActionList/ActionList.stories.tsx index 7d846aaa26c..668c594b394 100644 --- a/packages/react/src/ActionList/ActionList.stories.tsx +++ b/packages/react/src/ActionList/ActionList.stories.tsx @@ -44,7 +44,7 @@ Playground.argTypes = { control: { type: 'radio', }, - options: ['inset', 'horizontal-inset', 'full'], + options: ['inset', 'horizontal-inset', 'vertical-inset', 'full', 'start', 'end'], }, selectionVariant: { control: { diff --git a/packages/react/src/ActionList/Heading.module.css b/packages/react/src/ActionList/Heading.module.css index 1a95511f228..d6ca57449cc 100644 --- a/packages/react/src/ActionList/Heading.module.css +++ b/packages/react/src/ActionList/Heading.module.css @@ -1,11 +1,11 @@ .ActionListHeader { margin-block-end: var(--base-size-8); - &:where([data-list-variant='full']) { + &:where([data-list-variant='full'], [data-list-variant='vertical-inset'], [data-list-variant='end']) { margin-inline-start: var(--base-size-8); } - &:where([data-list-variant='inset'], [data-list-variant='horizontal-inset']) { + &:where([data-list-variant='inset'], [data-list-variant='horizontal-inset'], [data-list-variant='start']) { /* stylelint-disable-next-line primer/spacing */ margin-inline-start: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-8)); } diff --git a/packages/react/src/ActionList/shared.ts b/packages/react/src/ActionList/shared.ts index af98c9cd30a..5d7aeca997d 100644 --- a/packages/react/src/ActionList/shared.ts +++ b/packages/react/src/ActionList/shared.ts @@ -138,7 +138,7 @@ export type ActionListProps = PolymorphicPr /** * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges */ - variant?: 'inset' | 'horizontal-inset' | 'full' + variant?: 'inset' | 'horizontal-inset' | 'vertical-inset' | 'full' | 'start' | 'end' /** * Whether multiple Items or a single Item can be selected. */ diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index 524281f4018..3d0cd88c11b 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/packages/react/src/NavList/NavList.tsx @@ -3,6 +3,7 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti import React, {isValidElement} from 'react' import {clsx} from 'clsx' import type { + ActionListProps, ActionListTrailingActionProps, ActionListDividerProps, ActionListLeadingVisualProps, @@ -25,9 +26,13 @@ import {fixedForwardRef, type PolymorphicProps} from '../utils/modern-polymorphi export type NavListProps = { children: React.ReactNode + /** + * Style variations for the underlying `ActionList`. See `ActionList`'s `variant` prop for details. + */ + variant?: ActionListProps['variant'] } & React.ComponentProps<'nav'> -const Root = React.forwardRef(({children, ...props}, ref) => { +const Root = React.forwardRef(({children, variant, ...props}, ref) => { return ( ) From d939612ca605fc72f1970b01eef0b3598eccf0a0 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Fri, 5 Jun 2026 11:18:27 -0400 Subject: [PATCH 2/4] Ensure `start` and `end` have padding --- packages/react/src/ActionList/ActionList.docs.json | 2 +- packages/react/src/ActionList/ActionList.module.css | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/react/src/ActionList/ActionList.docs.json b/packages/react/src/ActionList/ActionList.docs.json index 3afa4a428c9..ecf2b74cb57 100644 --- a/packages/react/src/ActionList/ActionList.docs.json +++ b/packages/react/src/ActionList/ActionList.docs.json @@ -349,4 +349,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css index 34572d5a97a..04241992905 100644 --- a/packages/react/src/ActionList/ActionList.module.css +++ b/packages/react/src/ActionList/ActionList.module.css @@ -11,11 +11,7 @@ list-style: none; } - &:where([data-variant='inset']) { - padding-block: var(--base-size-8); - } - - &:where([data-variant='vertical-inset']) { + &:where([data-variant='inset'], [data-variant='vertical-inset'], [data-variant="start"], [data-variant="end"]) { padding-block: var(--base-size-8); } From 71b5140d4654839e9d8393c6e2917c806a1feeae Mon Sep 17 00:00:00 2001 From: TylerJDev <26746305+TylerJDev@users.noreply.github.com> Date: Fri, 5 Jun 2026 15:24:37 +0000 Subject: [PATCH 3/4] chore: auto-fix lint and formatting issues --- packages/react/src/ActionList/ActionList.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ActionList/ActionList.module.css b/packages/react/src/ActionList/ActionList.module.css index 04241992905..8b51800a342 100644 --- a/packages/react/src/ActionList/ActionList.module.css +++ b/packages/react/src/ActionList/ActionList.module.css @@ -11,7 +11,7 @@ list-style: none; } - &:where([data-variant='inset'], [data-variant='vertical-inset'], [data-variant="start"], [data-variant="end"]) { + &:where([data-variant='inset'], [data-variant='vertical-inset'], [data-variant='start'], [data-variant='end']) { padding-block: var(--base-size-8); } From 9797f4f11e1f1a7816508ab643da24209dba7bc0 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 15 Jun 2026 11:15:06 -0400 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .changeset/actionlist-variant-start-end-vertical-inset.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/actionlist-variant-start-end-vertical-inset.md b/.changeset/actionlist-variant-start-end-vertical-inset.md index a1aeebccbec..5c3c2167b10 100644 --- a/.changeset/actionlist-variant-start-end-vertical-inset.md +++ b/.changeset/actionlist-variant-start-end-vertical-inset.md @@ -2,6 +2,6 @@ '@primer/react': minor --- -ActionList: Add `start`, `end`, and `vertical-inset` options to the `variant` prop. `start` and `end` offset only the start or end edge (`margin-inline-start` / `margin-inline-end`) respectively, and `vertical-inset` offsets items vertically but not horizontally from the list's edges. +ActionList: Add `start`, `end`, and `vertical-inset` values to the `variant` prop. These allow applying inset to only the start edge, only the end edge, or only vertically. NavList: Add a `variant` prop that is forwarded to the underlying `ActionList`.