Allow custom children in ActionItem (#1196)

Co-authored-by: Clay Miller <clay@smockle.com>
Co-authored-by: Trevor Gau <trevorsg@gmail.com>

.changeset/happy-plums-work.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Allow custom `children` in `ActionItem`.  `text` and `description` can still be provided as a shortcut, but `children` is now available if you need more control over the rending of the item, without sacrificing benefits from `Item` by using `renderItem`.

src/ActionList/Item.tsx

@@ -13,7 +13,7 @@ export interface ItemProps extends React.ComponentPropsWithoutRef<'div'>, SxProp
   /**
    * Primary text which names an `Item`.
    */
-  text: string
+  text?: string
 
   /**
    * Secondary text which provides additional information about an `Item`.
@@ -179,6 +179,7 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
     disabled,
     onAction,
     onKeyPress,
+    children,
     onClick,
     ...props
   } = itemProps
@@ -224,10 +225,13 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
           <LeadingVisual />
         </LeadingVisualContainer>
       )}
-      <StyledTextContainer descriptionVariant={descriptionVariant}>
-        <div>{text}</div>
-        {description && <DescriptionContainer>{description}</DescriptionContainer>}
-      </StyledTextContainer>
+      {children}
+      {(text || description) && (
+        <StyledTextContainer descriptionVariant={descriptionVariant}>
+          {text && <div>{text}</div>}
+          {description && <DescriptionContainer>{description}</DescriptionContainer>}
+        </StyledTextContainer>
+      )}
       {(TrailingIcon || trailingText) && (
         <TrailingVisualContainer variant={variant} disabled={disabled}>
           {trailingText && <div>{trailingText}</div>}

src/__tests__/ActionMenu.tsx

@@ -78,7 +78,7 @@ describe('ActionMenu', () => {
     })
     portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
     expect(portalRoot).toBeTruthy()
-    const menuItem = await menu.queryByText(items[0].text)
+    const menuItem = await menu.queryByText(items[0].text!)
     act(() => {
       fireEvent.click(menuItem as Element)
     })

src/stories/ActionList.stories.tsx

@@ -7,12 +7,14 @@ import {
   NoteIcon,
   ProjectIcon,
   FilterIcon,
-  GearIcon
+  GearIcon,
+  ArrowRightIcon,
+  ArrowLeftIcon
 } from '@primer/octicons-react'
 import {Meta} from '@storybook/react'
 import React from 'react'
 import styled from 'styled-components'
-import {ThemeProvider} from '..'
+import {Label, ThemeProvider} from '..'
 import {ActionList as _ActionList} from '../ActionList'
 import {Header} from '../ActionList/Header'
 import BaseStyles from '../BaseStyles'
@@ -238,3 +240,27 @@ export function HeaderStory(): JSX.Element {
   )
 }
 HeaderStory.storyName = 'Header'
+
+export function CustomItemChildren(): JSX.Element {
+  return (
+    <>
+      <h1>Custom Item Children</h1>
+      <ErsatzOverlay>
+        <ActionList
+          items={[
+            {
+              leadingVisual: ArrowRightIcon,
+              children: (
+                <Label outline borderColor="border.success">
+                  Choose this one
+                </Label>
+              ),
+              trailingIcon: ArrowLeftIcon
+            }
+          ]}
+        />
+      </ErsatzOverlay>
+    </>
+  )
+}
+CustomItemChildren.storyName = 'Custom Item Children'

src/stories/ActionMenu.stories.tsx

@@ -48,7 +48,7 @@ const ErsatzOverlay = styled.div`
 export function ActionsStory(): JSX.Element {
   const [option, setOption] = useState('Select an option')
   const onAction = (itemProps: ItemProps) => {
-    setOption(itemProps.text)
+    setOption(itemProps.text ?? '')
   }
   return (
     <>
@@ -85,7 +85,7 @@ ActionsStory.storyName = 'Actions'
 export function SimpleListStory(): JSX.Element {
   const [option, setOption] = useState('Select an option')
   const onAction = (itemProps: ItemProps) => {
-    setOption(itemProps.text)
+    setOption(itemProps.text || '')
   }
   return (
     <>
@@ -116,7 +116,7 @@ SimpleListStory.storyName = 'Simple List'
 export function ComplexListStory(): JSX.Element {
   const [option, setOption] = useState('Select an option')
   const onAction = (itemProps: ItemProps) => {
-    setOption(itemProps.text)
+    setOption(itemProps.text || '')
   }
   return (
     <>
@@ -177,7 +177,7 @@ export function CustomTrigger(): JSX.Element {
   const customAnchor = (props: LinkProps) => <Link {...props} sx={{cursor: 'pointer'}} />
   const [option, setOption] = useState('Select an option')
   const onAction = useCallback((itemProps: ItemProps) => {
-    setOption(itemProps.text)
+    setOption(itemProps.text || '')
   }, [])
   return (
     <>