Merge branch 'main' into VanAnderson/action-menu-external-open

Author: VanAnderson

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

.changeset/long-chefs-bathe.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Export useConfirm hook and ConfirmationDialog component from index.

src/ActionList/Item.tsx

@@ -4,7 +4,6 @@ import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {ItemInput} from './List'
 import styled from 'styled-components'
-import {themeGet} from '..'
 
 /**
  * Contract for props passed to the `Item` component.
@@ -13,7 +12,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`.
@@ -75,9 +74,9 @@ export interface ItemProps extends React.ComponentPropsWithoutRef<'div'>, SxProp
 const getItemVariant = (variant = 'default', disabled?: boolean) => {
   if (disabled) {
     return {
-      color: themeGet('colors.text.disabled'),
-      iconColor: themeGet('colors.text.disabled'),
-      annotationColor: themeGet('colors.text.disabled'),
+      color: get('colors.text.disabled'),
+      iconColor: get('colors.text.disabled'),
+      annotationColor: get('colors.text.disabled'),
       hoverBackground: 'inherit',
       hoverCursor: 'default'
     }
@@ -86,18 +85,18 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => {
   switch (variant) {
     case 'danger':
       return {
-        color: themeGet('colors.text.danger'),
-        iconColor: themeGet('colors.icon.danger'),
-        annotationColor: themeGet('colors.text.disabled'),
-        hoverBackground: themeGet('colors.bg.danger'),
+        color: get('colors.text.danger'),
+        iconColor: get('colors.icon.danger'),
+        annotationColor: get('colors.text.disabled'),
+        hoverBackground: get('colors.bg.danger'),
         hoverCursor: 'pointer'
       }
     default:
       return {
         color: 'inherit',
-        iconColor: themeGet('colors.text.disabled'),
-        annotationColor: themeGet('colors.text.disabled'),
-        hoverBackground: themeGet('colors.selectMenu.tapHighlight'),
+        iconColor: get('colors.text.disabled'),
+        annotationColor: get('colors.text.disabled'),
+        hoverBackground: get('colors.selectMenu.tapHighlight'),
         hoverCursor: 'pointer'
       }
   }
@@ -179,6 +178,7 @@ export function Item(itemProps: Partial<ItemProps> & {item?: ItemInput}): JSX.El
     disabled,
     onAction,
     onKeyPress,
+    children,
     onClick,
     ...props
   } = itemProps
@@ -224,10 +224,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/Dialog/ConfirmationDialog.tsx

@@ -1,12 +1,12 @@
 import React, {useCallback} from 'react'
 import ReactDOM from 'react-dom'
 import styled from 'styled-components'
-import {Box, ThemeProvider, useTheme} from '..'
+import Box from '../Box'
+import {ThemeProvider, useTheme, ThemeProviderProps} from '../ThemeProvider'
 import {FocusKeys} from '../behaviors/focusZone'
 import {get} from '../constants'
 import {Dialog, DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/Dialog'
 import {useFocusZone} from '../hooks/useFocusZone'
-import {ThemeProviderProps} from '../ThemeProvider'
 
 /**
  * Props to customize the ConfirmationDialog.

src/Dialog/Dialog.tsx

@@ -1,6 +1,8 @@
 import React, {useCallback, useEffect, useRef} from 'react'
 import styled from 'styled-components'
-import {Button, ButtonPrimary, ButtonDanger, ButtonProps, Flex, Box} from '..'
+import Button, {ButtonPrimary, ButtonDanger, ButtonProps} from '../Button'
+import Flex from '../Flex'
+import Box from '../Box'
 import {get, SystemCommonProps, SystemPositionProps, COMMON, POSITION} from '../constants'
 import {useOnEscapePress} from '../hooks'
 import {useFocusTrap} from '../hooks/useFocusTrap'

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/index.ts

@@ -24,6 +24,7 @@ export {useOnOutsideClick} from './hooks/useOnOutsideClick'
 export {useOpenAndCloseFocus} from './hooks/useOpenAndCloseFocus'
 export {useOnEscapePress} from './hooks/useOnEscapePress'
 export {useOverlay} from './hooks/useOverlay'
+export {useConfirm} from './Dialog/ConfirmationDialog'
 
 // Components
 export {ActionList} from './ActionList'
@@ -71,6 +72,7 @@ export {default as Details} from './Details'
 export type {DetailsProps} from './Details'
 export {default as Dialog} from './Dialog'
 export type {DialogProps, DialogHeaderProps} from './Dialog'
+export {ConfirmationDialog} from './Dialog/ConfirmationDialog'
 export {default as Dropdown} from './Dropdown'
 export type {
   DropdownProps,

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

@@ -49,7 +49,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 (
     <>
@@ -86,7 +86,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 (
     <>
@@ -156,7 +156,7 @@ ExternalOpenState.storyName = 'External Open State'
 export function ComplexListStory(): JSX.Element {
   const [option, setOption] = useState('Select an option')
   const onAction = (itemProps: ItemProps) => {
-    setOption(itemProps.text)
+    setOption(itemProps.text || '')
   }
   return (
     <>
@@ -217,7 +217,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 (
     <>