From 8569ae93f844bdc3254a28874f80e80587786d12 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Mon, 10 Feb 2025 23:12:48 +0000
Subject: [PATCH 1/2] chore(UnderlinePanels): Adding the option to pass in
 className

---
 .../UnderlinePanels/UnderlinePanels.test.tsx  | 25 +++++++++++++++++++
 .../UnderlinePanels/UnderlinePanels.tsx       |  9 ++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.test.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.test.tsx
index ebda94ffbe2..ad3e726f8ac 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.test.tsx
+++ b/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')
+  })
 })
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
index 13fbb20c41e..de6ca596e42 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
+++ b/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">

From b596c3aa87e8aca626bdb7c94b6e87091d1505ff Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Mon, 10 Feb 2025 15:14:36 -0800
Subject: [PATCH 2/2] Create fifty-deers-applaud.md

---
 .changeset/fifty-deers-applaud.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fifty-deers-applaud.md

diff --git a/.changeset/fifty-deers-applaud.md b/.changeset/fifty-deers-applaud.md
new file mode 100644
index 00000000000..b8d3f6a0372
--- /dev/null
+++ b/.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