chore(UnderlinePanels): Adding the option to pass in className (#5686)

* chore(UnderlinePanels): Adding the option to pass in className

* Create fifty-deers-applaud.md

.changeset/fifty-deers-applaud.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+The `UnderlinePanels` component wasn't supporting passing in `className`. Adding to the prop list

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.test.tsx

@@ -5,6 +5,7 @@ import {render, screen} from '@testing-library/react'
 import UnderlinePanels from './UnderlinePanels'
 import {behavesAsComponent} from '../../utils/testing'
 import TabContainerElement from '@github/tab-container-element'
+import {FeatureFlags} from '../../FeatureFlags'
 
 TabContainerElement.prototype.selectTab = jest.fn()
 
@@ -158,4 +159,28 @@ describe('UnderlinePanels', () => {
     expect(spy).toHaveBeenCalled()
     spy.mockRestore()
   })
+  it('should support `className` on the outermost element', () => {
+    const Element = () => (
+      <UnderlinePanels className={'test-class-name'}>
+        <UnderlinePanels.Tab aria-selected={true}>Tab 1</UnderlinePanels.Tab>
+        <UnderlinePanels.Tab aria-selected={false}>Tab 2</UnderlinePanels.Tab>
+        <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>
+        <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>
+      </UnderlinePanels>
+    )
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).baseElement.firstChild?.firstChild?.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).baseElement.firstChild?.firstChild?.firstChild).toHaveClass('test-class-name')
+  })
 })

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx

@@ -27,6 +27,7 @@ import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 import {useFeatureFlag} from '../../FeatureFlags'
 import classes from './UnderlinePanels.module.css'
 import {toggleStyledComponent} from '../../internal/utils/toggleStyledComponent'
+import {clsx} from 'clsx'
 
 const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
@@ -51,6 +52,10 @@ export type UnderlinePanelsProps = {
    * Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift.
    */
   loadingCounters?: boolean
+  /**
+   * Class name for custom styling
+   */
+  className?: string
 } & SxProp
 
 export type TabProps = PropsWithChildren<{
@@ -89,6 +94,7 @@ const UnderlinePanels: FC<UnderlinePanelsProps> = ({
   children,
   loadingCounters,
   sx: sxProp = defaultSxProp,
+  className,
   ...props
 }) => {
   const [iconsVisible, setIconsVisible] = useState(true)
@@ -184,7 +190,7 @@ const UnderlinePanels: FC<UnderlinePanelsProps> = ({
           slot="tablist-wrapper"
           data-icons-visible={iconsVisible}
           sx={sxProp}
-          className={classes.StyledUnderlineWrapper}
+          className={clsx(className, classes.StyledUnderlineWrapper)}
           {...props}
         >
           <StyledUnderlineItemList ref={listRef} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} role="tablist">
@@ -214,6 +220,7 @@ const UnderlinePanels: FC<UnderlinePanelsProps> = ({
           },
           sxProp as SxProp,
         )}
+        className={className}
         {...props}
       >
         <StyledUnderlineItemList ref={listRef} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} role="tablist">