Adds className prop to UnderlineNav component. (#5931)

Author: jamieshark

.changeset/yummy-files-look.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds className prop to UnderlineNav component.

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

@@ -55,7 +55,7 @@ const ResponsiveUnderlineNav = ({
 
   return (
     <div>
-      <UnderlineNav aria-label="Repository" loadingCounters={loadingCounters}>
+      <UnderlineNav aria-label="Repository" className="foo" loadingCounters={loadingCounters}>
         {items.map(item => (
           <UnderlineNav.Item
             key={item.navigation}
@@ -142,6 +142,12 @@ describe('UnderlineNav', () => {
     expect(counter).toHaveAttribute('aria-hidden', 'true')
   })
 
+  it('adds className prop to base wrapper classes', () => {
+    const {getByRole} = render(<ResponsiveUnderlineNav />)
+    const nav = getByRole('navigation')
+    expect(nav).toHaveAttribute('class', 'UnderlineWrapper foo')
+  })
+
   it('renders the content of visually hidden span properly for screen readers', () => {
     const {getByRole} = render(<ResponsiveUnderlineNav />)
     const item = getByRole('link', {name: 'Issues (120)'})

packages/react/src/UnderlineNav/UnderlineNav.tsx

@@ -26,6 +26,7 @@ export type UnderlineNavProps = {
   children: React.ReactNode
   'aria-label'?: React.AriaAttributes['aria-label']
   as?: React.ElementType
+  className?: string
   sx?: SxProp['sx']
   /**
    * loading state for all counters. It displays loading animation for individual counters (UnderlineNav.Item) until all are resolved. It is needed to prevent multiple layout shift.
@@ -140,6 +141,7 @@ export const UnderlineNav = forwardRef(
       'aria-label': ariaLabel,
       sx: sxProp = defaultSxProp,
       loadingCounters = false,
+      className,
       children,
     }: UnderlineNavProps,
     forwardedRef,
@@ -306,7 +308,7 @@ export const UnderlineNav = forwardRef(
         }}
       >
         {ariaLabel && <VisuallyHidden as="h2">{`${ariaLabel} navigation`}</VisuallyHidden>}
-        <UnderlineWrapper as={as} aria-label={ariaLabel} ref={navRef} sx={sxProp}>
+        <UnderlineWrapper as={as} aria-label={ariaLabel} className={className} ref={navRef} sx={sxProp}>
           <UnderlineItemList ref={listRef} role="list">
             {listItems}
             {menuItems.length > 0 && (