ActionList: Add more variant options to ActionList

.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`.

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 @@
       ]
     }
   ]
-}
+}

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);
   }

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: {

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));
   }

packages/react/src/ActionList/shared.ts

@@ -138,7 +138,7 @@ export type ActionListProps<As extends React.ElementType = 'ul'> = 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.
      */

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,17 +26,21 @@ 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<HTMLElement, NavListProps>(({children, ...props}, ref) => {
+const Root = React.forwardRef<HTMLElement, NavListProps>(({children, variant, ...props}, ref) => {
   return (
     <nav {...props} ref={ref} data-component="NavList">
       <ActionListContainerContext.Provider
         value={{
           container: 'NavList',
         }}
       >
-        <ActionList>{children}</ActionList>
+        <ActionList variant={variant}>{children}</ActionList>
       </ActionListContainerContext.Provider>
     </nav>
   )