Merge 954abf3 into dc80aa6

primer · Sep 19, 2024 · 9b3a5da · 9b3a5da
2 parents dc80aa6 + 954abf3
commit 9b3a5da
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
@@ -12,12 +12,13 @@ import {AutocompleteContext} from './AutocompleteContext'
 import type {IconProps} from '@primer/octicons-react'
 import {PlusIcon} from '@primer/octicons-react'
 import VisuallyHidden from '../_VisuallyHidden'
+import {isElement} from 'react-is'
 
 type OnSelectedChange<T> = (item: T | T[]) => void
 export type AutocompleteMenuItem = MandateProps<ActionListItemProps, 'id'> & {
-  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
   text?: string
-  trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  trailingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
 }
 
 const getDefaultSortFn = (isItemSelectedFn: (itemId: string) => boolean) => (itemIdA: string, itemIdB: string) =>
@@ -352,13 +353,13 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
                   <ActionList.Item key={id} onSelect={() => onAction(item)} {...itemProps} id={id} data-id={id}>
                     {LeadingVisual && (
                       <ActionList.LeadingVisual>
-                        <LeadingVisual />
+                        {isElement(LeadingVisual) ? LeadingVisual : <LeadingVisual />}
                       </ActionList.LeadingVisual>
                     )}
                     {children ?? text}
                     {TrailingVisual && (
                       <ActionList.TrailingVisual>
-                        <TrailingVisual />
+                        {isElement(TrailingVisual) ? TrailingVisual : <TrailingVisual />}
                       </ActionList.TrailingVisual>
                     )}
                   </ActionList.Item>

diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -7,6 +7,7 @@ import type {SxProp} from '../sx'
 import sx, {merge} from '../sx'
 import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles'
 import {defaultSxProp} from '../utils/defaultSxProp'
+import {isElement} from 'react-is'
 
 export type SegmentedControlButtonProps = {
   /** The visible label rendered in the button */
@@ -16,7 +17,7 @@ export type SegmentedControlButtonProps = {
   /** Whether the segment is selected. This is used for uncontrolled `SegmentedControls` to pick one `SegmentedControlButton` that is selected on the initial render. */
   defaultSelected?: boolean
   /** The leading icon comes before item label */
-  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
 } & SxProp &
   ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
@@ -42,11 +43,7 @@ const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlB
         {...rest}
       >
         <span className="segmentedControl-content">
-          {LeadingIcon && (
-            <Box mr={1}>
-              <LeadingIcon />
-            </Box>
-          )}
+          {LeadingIcon && <Box mr={1}>{isElement(LeadingIcon) ? LeadingIcon : <LeadingIcon />}</Box>}
           <Box className="segmentedControl-text">{children}</Box>
         </span>
       </SegmentedControlButtonStyled>

diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -7,11 +7,12 @@ import sx, {merge} from '../sx'
 import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles'
 import Box from '../Box'
 import {defaultSxProp} from '../utils/defaultSxProp'
+import {isElement} from 'react-is'
 
 export type SegmentedControlIconButtonProps = {
   'aria-label': string
   /** The icon that represents the segmented control item */
-  icon: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  icon: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement
   /** Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl. */
   selected?: boolean
   /** Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render. */
@@ -53,9 +54,7 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
         sx={getSegmentedControlButtonStyles({selected, isIconOnly: true})}
         {...rest}
       >
-        <span className="segmentedControl-content">
-          <Icon />
-        </span>
+        <span className="segmentedControl-content">{isElement(Icon) ? Icon : <Icon />}</span>
       </SegmentedControlIconButtonStyled>
     </Box>
   )