Add className support to UnderlineNav.Item component (#6129)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
Co-authored-by: Jon Rohan <yes@jonrohan.codes>
Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 4 people

.changeset/strange-lions-end.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+UnderlineNav.Item accepts className prop without overriding existing styling

packages/react/src/UnderlineNav/UnderlineNav.test.tsx

@@ -197,6 +197,17 @@ describe('UnderlineNav', () => {
     expect(screen.getByLabelText('Page two icon')).toBeInTheDocument()
     expect(screen.getByLabelText('Page three icon')).toBeInTheDocument()
   })
+
+  it('adds className prop to item classes', () => {
+    render(
+      <UnderlineNav aria-label="Repository">
+        <UnderlineNav.Item className="custom-class">Item 1</UnderlineNav.Item>
+      </UnderlineNav>,
+    )
+    const item = screen.getByRole('link', {name: 'Item 1'})
+    expect(item).toHaveClass('custom-class')
+    expect(item.className).toContain('UnderlineItem')
+  })
 })
 
 describe('Keyboard Navigation', () => {

packages/react/src/internal/components/UnderlineTabbedInterface.tsx

@@ -101,12 +101,19 @@ export const UnderlineItem = forwardRef(
       iconsVisible,
       loadingCounters,
       sx: sxProp = defaultSxProp,
+      className,
       ...rest
     }: PropsWithChildren<UnderlineItemProps>,
     forwardedRef,
   ) => {
     return (
-      <BoxWithFallback ref={forwardedRef} as={as} sx={sxProp} className={classes.UnderlineItem} {...rest}>
+      <BoxWithFallback
+        ref={forwardedRef}
+        as={as}
+        sx={sxProp}
+        className={clsx(classes.UnderlineItem, className)}
+        {...rest}
+      >
         {iconsVisible && Icon && <span data-component="icon">{isElement(Icon) ? Icon : <Icon />}</span>}
         {children && (
           <span data-component="text" data-content={children}>