feat: add support for size to ActionList

.changeset/action-list-small-size.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+ActionList: Add a `size` prop with a `small` option for compact lists.

e2e/components/ActionList.test.ts

@@ -40,6 +40,10 @@ const stories = [
     title: 'Simple List',
     id: 'components-actionlist-features--simple-list',
   },
+  {
+    title: 'Small List',
+    id: 'components-actionlist-features--small-list',
+  },
   {
     title: 'Single Divider',
     id: 'components-actionlist-features--single-divider',

packages/react/src/ActionList/ActionList.docs.json

@@ -25,6 +25,12 @@
       "defaultValue": "",
       "description": "Whether multiple items or a single item can be selected."
     },
+    {
+      "name": "size",
+      "type": "'small' | 'medium'",
+      "defaultValue": "'medium'",
+      "description": "The size of the ActionList items."
+    },
     {
       "name": "showDividers",
       "type": "boolean",
@@ -57,7 +63,7 @@
         },
         {
           "name": "size",
-          "type": "'medium' | 'large'",
+          "type": "'small' | 'medium' | 'large'",
           "defaultValue": "'medium'",
           "description": "The block size of the ActionList items."
         },
@@ -355,4 +361,4 @@
       ]
     }
   ]
-}
+}

packages/react/src/ActionList/ActionList.features.stories.tsx

@@ -50,6 +50,27 @@ export const SimpleList = () => (
   </ActionList>
 )
 
+export const SmallList = () => (
+  <ActionList size="small">
+    <ActionList.Item>
+      <ActionList.LeadingVisual>
+        <LinkIcon />
+      </ActionList.LeadingVisual>
+      Copy link
+    </ActionList.Item>
+    <ActionList.Item>
+      Quote reply
+      <ActionList.Description>Reply with selected text</ActionList.Description>
+    </ActionList.Item>
+    <ActionList.LinkItem href="https://github.com/primer/react">
+      <ActionList.LeadingVisual>
+        <BookIcon />
+      </ActionList.LeadingVisual>
+      View repository
+    </ActionList.LinkItem>
+  </ActionList>
+)
+
 export const WithVisualListHeading = () => (
   <ActionList>
     <ActionList.Heading as="h2" size="small">

packages/react/src/ActionList/ActionList.module.css

@@ -540,6 +540,16 @@
     padding-block: var(--control-large-paddingBlock);
   }
 
+  &[data-size='small'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding-block: var(--control-small-paddingBlock);
+
+    & .ItemLabel,
+    & .TrailingVisual {
+      font-size: var(--text-body-size-small);
+    }
+  }
+
   /* collapsible item [aria-expanded] */
 
   &[aria-expanded='true'] {

packages/react/src/ActionList/ActionList.stories.tsx

@@ -30,6 +30,7 @@ export const Playground: StoryFn<ActionListProps> = args => (
   </ActionList>
 )
 Playground.args = {
+  size: 'medium',
   showDividers: false,
   selectionVariant: undefined,
   variant: 'inset',
@@ -46,6 +47,12 @@ Playground.argTypes = {
     },
     options: ['inset', 'horizontal-inset', 'full'],
   },
+  size: {
+    control: {
+      type: 'radio',
+    },
+    options: ['small', 'medium'],
+  },
   selectionVariant: {
     control: {
       type: 'radio',

packages/react/src/ActionList/ActionList.test.tsx

@@ -259,6 +259,24 @@ describe('ActionList', () => {
     expect(linkElements[1]).toHaveAttribute('data-size', 'medium')
     expect(linkElements[2]).toHaveAttribute('data-size', 'medium') // default should be medium
   })
+
+  it('should support size prop on ActionList', () => {
+    const {container} = HTMLRender(
+      <ActionList size="small">
+        <ActionList.Item>Small Item</ActionList.Item>
+        <ActionList.LinkItem href="//github.com">Small Link Item</ActionList.LinkItem>
+        <ActionList.Item size="large">Large Item</ActionList.Item>
+      </ActionList>,
+    )
+
+    const actionList = container.querySelector('[data-component="ActionList"]')
+    const itemElements = container.querySelectorAll('button, a')
+
+    expect(actionList).toHaveAttribute('data-size', 'small')
+    expect(itemElements[0]).toHaveAttribute('data-size', 'small')
+    expect(itemElements[1]).toHaveAttribute('data-size', 'small')
+    expect(itemElements[2]).toHaveAttribute('data-size', 'large')
+  })
 })
 
 describe('ActionList data-component attributes', () => {

packages/react/src/ActionList/Item.tsx

@@ -86,7 +86,7 @@ const listRoleTypes = ['listbox', 'menu', 'list', 'tree']
 const UnwrappedItem = <As extends React.ElementType = 'li'>(
   {
     variant = 'default',
-    size = 'medium',
+    size: sizeProp,
     disabled = false,
     inactiveText,
     selected = undefined,
@@ -118,8 +118,9 @@ const UnwrappedItem = <As extends React.ElementType = 'li'>(
   ) : null
   const trailingVisual = slots.trailingVisual ?? wrappedDefaultTrailingVisual
 
-  const {role: listRole, selectionVariant: listSelectionVariant} = React.useContext(ListContext)
+  const {role: listRole, selectionVariant: listSelectionVariant, size: listSize} = React.useContext(ListContext)
   const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
+  const size = sizeProp ?? listSize ?? 'medium'
   const inactive = Boolean(inactiveText)
   // TODO change `menuContext` check to ```listRole !== undefined && ['menu', 'listbox'].includes(listRole)```
   // once we have a better way to handle existing usage in dotcom that incorrectly use ActionList.TrailingAction

packages/react/src/ActionList/List.tsx

@@ -20,6 +20,7 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
     as: Component = 'ul',
     variant = 'inset',
     selectionVariant,
+    size = 'medium',
     showDividers = false,
     role,
     disableFocusZone = false,
@@ -62,11 +63,12 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
     () => ({
       variant,
       selectionVariant: selectionVariant || containerSelectionVariant,
+      size,
       showDividers,
       role: listRole,
       headingId,
     }),
-    [variant, selectionVariant, containerSelectionVariant, showDividers, listRole, headingId],
+    [variant, selectionVariant, containerSelectionVariant, size, showDividers, listRole, headingId],
   )
 
   // Replaces a CSS `:has([data-has-description])` selector that caused full-subtree
@@ -109,6 +111,7 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
         data-component="ActionList"
         data-dividers={showDividers}
         data-variant={variant}
+        data-size={size}
         data-item-gap={itemGapEnabled ? '' : undefined}
         {...restProps}
       >

packages/react/src/ActionList/shared.ts

@@ -33,7 +33,7 @@ export type ActionListItemProps<As extends React.ElementType = 'li'> = ExcludeSe
    * - `"danger"` - A destructive action `Item`.
    */
   variant?: 'default' | 'danger'
-  size?: 'medium' | 'large'
+  size?: 'small' | 'medium' | 'large'
   /**
    * Items that are disabled can not be clicked, selected, or navigated through.
    */
@@ -143,6 +143,10 @@ export type ActionListProps<As extends React.ElementType = 'ul'> = PolymorphicPr
      * Whether multiple Items or a single Item can be selected.
      */
     selectionVariant?: 'single' | 'radio' | 'multiple'
+    /**
+     * The size of the ActionList items.
+     */
+    size?: 'small' | 'medium'
     /**
      * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
      */
@@ -161,7 +165,7 @@ export type ActionListProps<As extends React.ElementType = 'ul'> = PolymorphicPr
 
 type ContextProps = Pick<
   ActionListProps<React.ElementType>,
-  'variant' | 'selectionVariant' | 'showDividers' | 'role'
+  'variant' | 'selectionVariant' | 'showDividers' | 'role' | 'size'
 > & {
   headingId?: string
 }