Merge 2faaf85 into a7d1e4f

primer · Jul 3, 2024 · 8b757d8 · 8b757d8
2 parents a7d1e4f + 2faaf85
commit 8b757d8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/.changeset/bright-islands-kick.md b/.changeset/bright-islands-kick.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for providing icons as an element to UnderlineNavItem
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.test.tsx b/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {render} from '@testing-library/react'
+import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type {IconProps} from '@primer/octicons-react'
 import {
@@ -186,6 +186,22 @@ describe('UnderlineNav', () => {
     // We are expecting a left value back, that way we know the `getAnchoredPosition` ran.
     expect(results).toEqual(expect.objectContaining({left: 0}))
   })
+
+  it('should support icons passed in as an element', () => {
+    render(
+      <UnderlineNav aria-label="Repository">
+        <UnderlineNav.Item aria-current="page" icon={<CodeIcon data-testid="page-one-icon" />}>
+          Page one
+        </UnderlineNav.Item>
+        <UnderlineNav.Item icon={<IssueOpenedIcon data-testid="page-two-icon" />}>Page two</UnderlineNav.Item>
+        <UnderlineNav.Item icon={<GitPullRequestIcon data-testid="page-three-icon" />}>Page three</UnderlineNav.Item>
+      </UnderlineNav>,
+    )
+
+    expect(screen.getByTestId('page-one-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('page-two-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('page-three-icon')).toBeInTheDocument()
+  })
 })
 
 describe('Keyboard Navigation', () => {

diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
@@ -38,7 +38,7 @@ export type UnderlineNavItemProps = {
   /**
    *  Icon before the text
    */
-  icon?: React.FunctionComponent<IconProps>
+  icon?: React.FunctionComponent<IconProps> | React.ReactElement
   /**
    * Renders `UnderlineNav.Item` as given component i.e. react-router's Link
    **/

diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -193,7 +193,7 @@ export type UnderlineItemProps = {
   iconsVisible?: boolean
   loadingCounters?: boolean
   counter?: number | string
-  icon?: FC<IconProps>
+  icon?: FC<IconProps> | React.ReactElement
   id?: string
 } & SxProp
 
@@ -213,11 +213,7 @@ export const UnderlineItem = forwardRef(
   ) => {
     return (
       <StyledUnderlineItem ref={forwardedRef} as={as} sx={sxProp} {...rest}>
-        {iconsVisible && Icon && (
-          <span data-component="icon">
-            <Icon />
-          </span>
-        )}
+        {iconsVisible && Icon && <span data-component="icon">{typeof Icon === 'function' ? <Icon /> : Icon}</span>}
         {children && (
           <span data-component="text" data-content={children}>
             {children}