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..5c3c2167b10 --- /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` 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`. diff --git a/packages/react/src/ActionList/ActionList.docs.json b/packages/react/src/ActionList/ActionList.docs.json index ccaf7865466..ecf2b74cb57 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" }, @@ -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 6195a4a1bb8..79c43fdda85 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']) { + &:where([data-variant='inset'], [data-variant='vertical-inset'], [data-variant='start'], [data-variant='end']) { padding-block: var(--base-size-8); } @@ -22,6 +22,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 6af6985976b..89193cc684f 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 ( )