From 3069da58f6937ed4b0a9c8dd1b864820fe614bb5 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 16 Oct 2024 22:59:59 +0000
Subject: [PATCH 01/14] Test elements accept className

---
 packages/react/src/utils/testing.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx
index 5f5f1caa257..836b05d21ad 100644
--- a/packages/react/src/utils/testing.tsx
+++ b/packages/react/src/utils/testing.tsx
@@ -224,6 +224,11 @@ export function behavesAsComponent({Component, toRender, options}: BehavesAsComp
   it('sets a valid displayName', () => {
     expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX)
   })
+
+  it('should support `className` on the outermost element', () => {
+    const elem = React.cloneElement(getElement(), {className: 'test-class-name'})
+    expect(rendersClass(elem, 'test-class-name')).toBe(true)
+  })
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

From 60392ca5450ac548925b8554d7ddc3278e7efb28 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 16 Oct 2024 21:08:10 -0700
Subject: [PATCH 02/14] Create a test check for expectRendersWithClassname

---
 .../__tests__/TextInputWithTokens.test.tsx    |  8 +++++-
 packages/react/src/utils/testing.tsx          | 25 +++++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/__tests__/TextInputWithTokens.test.tsx b/packages/react/src/__tests__/TextInputWithTokens.test.tsx
index 10a21222184..f450bc9ded0 100644
--- a/packages/react/src/__tests__/TextInputWithTokens.test.tsx
+++ b/packages/react/src/__tests__/TextInputWithTokens.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {render} from '../utils/testing'
+import {expectRendersWithClassname, render} from '../utils/testing'
 import {render as HTMLRender, fireEvent, act} from '@testing-library/react'
 import axe from 'axe-core'
 import type {TokenSizeKeys} from '../Token/TokenBase'
@@ -36,6 +36,12 @@ const LabelledTextInputWithTokens: React.FC<React.PropsWithChildren<TextInputWit
 jest.useFakeTimers()
 
 describe('TextInputWithTokens', () => {
+  it('should support `className` on the outermost element', () => {
+    const onRemoveMock = jest.fn()
+    const elem = <TextInputWithTokens className={'test-class-name'} tokens={[]} onTokenRemove={onRemoveMock} />
+    expectRendersWithClassname(elem, 'test-class-name')
+  })
+
   it('renders without tokens', () => {
     const onRemoveMock = jest.fn()
     expect(render(<TextInputWithTokens tokens={[]} onTokenRemove={onRemoveMock} />)).toMatchSnapshot()
diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx
index 836b05d21ad..6622e2f58ab 100644
--- a/packages/react/src/utils/testing.tsx
+++ b/packages/react/src/utils/testing.tsx
@@ -8,6 +8,7 @@ import customRules from '@github/axe-github'
 import {ThemeProvider} from '..'
 import {default as defaultTheme} from '../theme'
 import type {LiveRegionElement} from '@primer/live-region-element'
+import {FeatureFlags} from '../FeatureFlags'
 
 type ComputedStyles = Record<string, string | Record<string, string>>
 
@@ -224,11 +225,6 @@ export function behavesAsComponent({Component, toRender, options}: BehavesAsComp
   it('sets a valid displayName', () => {
     expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX)
   })
-
-  it('should support `className` on the outermost element', () => {
-    const elem = React.cloneElement(getElement(), {className: 'test-class-name'})
-    expect(rendersClass(elem, 'test-class-name')).toBe(true)
-  })
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -240,6 +236,25 @@ export function checkExports(path: string, exports: Record<any, any>): void {
   })
 }
 
+export function expectRendersWithClassname(element: React.ReactElement, className: string) {
+  const Element = () => element
+  const FeatureFlagElement = () => {
+    return (
+      <FeatureFlags
+        flags={{
+          primer_react_css_modules_team: true,
+          primer_react_css_modules_staff: true,
+          primer_react_css_modules_ga: true,
+        }}
+      >
+        <Element />
+      </FeatureFlags>
+    )
+  }
+  expect(HTMLRender(<Element />).container.firstChild).toHaveClass(className)
+  expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass(className)
+}
+
 axe.configure(customRules)
 
 export function checkStoriesForAxeViolations(name: string, storyDir?: string) {

From acb93bb62dc4436166fbcda5bd939992c3c96990 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 16 Oct 2024 21:10:56 -0700
Subject: [PATCH 03/14] Create three-jokes-bow.md

---
 .changeset/three-jokes-bow.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/three-jokes-bow.md

diff --git a/.changeset/three-jokes-bow.md b/.changeset/three-jokes-bow.md
new file mode 100644
index 00000000000..20a3dbe9e18
--- /dev/null
+++ b/.changeset/three-jokes-bow.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Make sure all components accept `className` as a prop on outermost component element.

From 07439138ae9cc19c02511a24dd8f87b4ad3770d9 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 04:57:45 +0000
Subject: [PATCH 04/14] Check test on Avatar

---
 packages/react/src/__tests__/Avatar.test.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/__tests__/Avatar.test.tsx b/packages/react/src/__tests__/Avatar.test.tsx
index 10b902fea2a..3fe069301db 100644
--- a/packages/react/src/__tests__/Avatar.test.tsx
+++ b/packages/react/src/__tests__/Avatar.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {Avatar} from '..'
 import theme from '../theme'
-import {px, render, behavesAsComponent, checkExports} from '../utils/testing'
+import {px, render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 
@@ -12,6 +12,11 @@ describe('Avatar', () => {
     default: Avatar,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const element = <Avatar src="primer.png" className={'test-class-name'} />
+    expectRendersWithClassname(element, 'test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Avatar src="primer.png" />)
     const results = await axe.run(container)

From d1cd42a6df19f52cac5a86df4b4f0b76c3ab11bb Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 05:01:14 +0000
Subject: [PATCH 05/14] Add test for AvatarPair

---
 packages/react/src/__tests__/AvatarStack.test.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/__tests__/AvatarStack.test.tsx b/packages/react/src/__tests__/AvatarStack.test.tsx
index c04aa672470..688b94137a1 100644
--- a/packages/react/src/__tests__/AvatarStack.test.tsx
+++ b/packages/react/src/__tests__/AvatarStack.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {AvatarStack} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 
@@ -33,6 +33,18 @@ describe('Avatar', () => {
     default: AvatarStack,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const element = (
+      <AvatarStack className={'test-class-name'}>
+        <img src="https://avatars.githubusercontent.com/primer" alt="" />
+        <img src="https://avatars.githubusercontent.com/github" alt="" />
+        <img src="https://avatars.githubusercontent.com/primer" alt="" />
+        <img src="https://avatars.githubusercontent.com/github" alt="" />
+      </AvatarStack>
+    )
+    expectRendersWithClassname(element, 'test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(avatarComp)
     const results = await axe.run(container)

From 21dfd369745adc9cc1015239cd00ac4b64148afb Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 05:21:57 +0000
Subject: [PATCH 06/14] Add more tests

---
 packages/react/src/Banner/Banner.test.tsx                  | 5 +++--
 .../react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx   | 7 ++++++-
 packages/react/src/Button/__tests__/Button.test.tsx        | 7 ++++++-
 packages/react/src/Checkbox/Checkbox.test.tsx              | 7 ++++++-
 packages/react/src/CounterLabel/CounterLabel.test.tsx      | 7 ++++++-
 packages/react/src/Heading/__tests__/Heading.test.tsx      | 7 ++++++-
 packages/react/src/Link/__tests__/Link.test.tsx            | 7 ++++++-
 packages/react/src/__tests__/Box.test.tsx                  | 7 ++++++-
 packages/react/src/__tests__/Label.test.tsx                | 6 +++++-
 packages/react/src/__tests__/Popover.test.tsx              | 7 ++++++-
 10 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx
index 7771c22cf3c..16a7a6473b9 100644
--- a/packages/react/src/Banner/Banner.test.tsx
+++ b/packages/react/src/Banner/Banner.test.tsx
@@ -2,6 +2,7 @@ import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import {Banner} from '../Banner'
+import {expectRendersWithClassname} from '../utils/testing'
 
 describe('Banner', () => {
   let spy: jest.SpyInstance
@@ -30,8 +31,8 @@ describe('Banner', () => {
   })
 
   it('should support a custom `className` on the outermost element', () => {
-    const {container} = render(<Banner title="test" className="test" />)
-    expect(container.firstChild).toHaveClass('test')
+    const element = <Banner title="test" className="test-class-name" />
+    expectRendersWithClassname(element, 'test-class-name')
   })
 
   it('should label the landmark element with the corresponding variant label text', () => {
diff --git a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
index 2c92fd0badf..f8358e8092d 100644
--- a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
+++ b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Breadcrumbs, {Breadcrumb} from '..'
-import {render, behavesAsComponent, checkExports} from '../../utils/testing'
+import {render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 
@@ -12,6 +12,11 @@ describe('Breadcrumbs', () => {
     Breadcrumb,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const element = <Breadcrumbs className={'test-class-name'} />
+    expectRendersWithClassname(element, 'test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Breadcrumbs />)
     const results = await axe.run(container)
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
index 4705433bde0..52d1714557a 100644
--- a/packages/react/src/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -4,7 +4,7 @@ import axe from 'axe-core'
 import React from 'react'
 import {IconButton, Button, LinkButton} from '../../Button'
 import type {ButtonProps} from '../../Button'
-import {behavesAsComponent} from '../../utils/testing'
+import {behavesAsComponent, expectRendersWithClassname} from '../../utils/testing'
 import {FeatureFlags} from '../../FeatureFlags'
 
 type StatefulLoadingButtonProps = {
@@ -31,6 +31,11 @@ describe('Button', () => {
     options: {skipSx: true, skipAs: true},
   })
 
+  it('should support `className` on the outermost element', () => {
+    const element = <Button className={'test-class-name'} />
+    expectRendersWithClassname(element, 'test-class-name')
+  })
+
   it('renders a <button>', () => {
     const container = render(<Button id="test-button">Default</Button>)
     const button = container.getByRole('button')
diff --git a/packages/react/src/Checkbox/Checkbox.test.tsx b/packages/react/src/Checkbox/Checkbox.test.tsx
index 085fae85432..783c37bbc7f 100644
--- a/packages/react/src/Checkbox/Checkbox.test.tsx
+++ b/packages/react/src/Checkbox/Checkbox.test.tsx
@@ -2,7 +2,7 @@ import {render} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import Checkbox from '../Checkbox'
-import {behavesAsComponent, checkExports} from '../utils/testing'
+import {behavesAsComponent, checkExports, expectRendersWithClassname} from '../utils/testing'
 
 describe('Checkbox', () => {
   beforeEach(() => {
@@ -14,6 +14,11 @@ describe('Checkbox', () => {
     default: Checkbox,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const element = <Checkbox className={'test-class-name'} />
+    expectRendersWithClassname(element, 'test-class-name')
+  })
+
   it('renders a valid checkbox input', () => {
     const {getByRole} = render(<Checkbox />)
 
diff --git a/packages/react/src/CounterLabel/CounterLabel.test.tsx b/packages/react/src/CounterLabel/CounterLabel.test.tsx
index 78ae5497bbe..cb3fd24d6d5 100644
--- a/packages/react/src/CounterLabel/CounterLabel.test.tsx
+++ b/packages/react/src/CounterLabel/CounterLabel.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {CounterLabel} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
+import {behavesAsComponent, checkExports, expectRendersWithClassname} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 
@@ -11,6 +11,11 @@ describe('CounterLabel', () => {
     default: CounterLabel,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const element = <CounterLabel className={'test-class-name'} />
+    expectRendersWithClassname(element, 'test-class-name')
+  })
+
   it('renders a <span>', () => {
     const {container} = HTMLRender(<CounterLabel>1234</CounterLabel>)
     expect(container.firstChild?.nodeName).toEqual('SPAN')
diff --git a/packages/react/src/Heading/__tests__/Heading.test.tsx b/packages/react/src/Heading/__tests__/Heading.test.tsx
index 63a2484d050..ec800ad3af6 100644
--- a/packages/react/src/Heading/__tests__/Heading.test.tsx
+++ b/packages/react/src/Heading/__tests__/Heading.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {Heading} from '../..'
-import {render, behavesAsComponent, checkExports} from '../../utils/testing'
+import {render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../../utils/testing'
 import {render as HTMLRender, screen} from '@testing-library/react'
 import axe from 'axe-core'
 import ThemeProvider from '../../ThemeProvider'
@@ -35,6 +35,11 @@ describe('Heading', () => {
     default: Heading,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const element = <Heading className={'test-class-name'} />
+    expectRendersWithClassname(element, 'test-class-name')
+  })
+
   it('renders <h2> by default', () => {
     expect(render(<Heading />).type).toEqual('h2')
   })
diff --git a/packages/react/src/Link/__tests__/Link.test.tsx b/packages/react/src/Link/__tests__/Link.test.tsx
index fb5e59f2b32..b9061e7d5ff 100644
--- a/packages/react/src/Link/__tests__/Link.test.tsx
+++ b/packages/react/src/Link/__tests__/Link.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Link from '..'
-import {render, behavesAsComponent, checkExports} from '../../utils/testing'
+import {render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 
@@ -11,6 +11,11 @@ describe('Link', () => {
     default: Link,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const element = <Link href="#" className={'test-class-name'} />
+    expectRendersWithClassname(element, 'test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Link href="www.github.com">GitHub</Link>)
     const results = await axe.run(container)
diff --git a/packages/react/src/__tests__/Box.test.tsx b/packages/react/src/__tests__/Box.test.tsx
index edaf2fda5ab..03f57108e2d 100644
--- a/packages/react/src/__tests__/Box.test.tsx
+++ b/packages/react/src/__tests__/Box.test.tsx
@@ -3,7 +3,7 @@ import axe from 'axe-core'
 import React from 'react'
 import {Box} from '..'
 import theme from '../theme'
-import {behavesAsComponent, checkExports, render} from '../utils/testing'
+import {behavesAsComponent, checkExports, expectRendersWithClassname, render} from '../utils/testing'
 
 describe('Box', () => {
   behavesAsComponent({Component: Box})
@@ -12,6 +12,11 @@ describe('Box', () => {
     default: Box,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const element = <Box className={'test-class-name'} />
+    expectRendersWithClassname(element, 'test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Box />)
     const results = await axe.run(container)
diff --git a/packages/react/src/__tests__/Label.test.tsx b/packages/react/src/__tests__/Label.test.tsx
index ec4550880e7..ae247badbbb 100644
--- a/packages/react/src/__tests__/Label.test.tsx
+++ b/packages/react/src/__tests__/Label.test.tsx
@@ -3,9 +3,13 @@ import {render} from '@testing-library/react'
 import axe from 'axe-core'
 import type {LabelColorOptions} from '../Label'
 import Label, {variants} from '../Label'
-import {renderStyles} from '../utils/testing'
+import {expectRendersWithClassname, renderStyles} from '../utils/testing'
 
 describe('Label', () => {
+  it('should support `className` on the outermost element', () => {
+    const element = <Label className={'test-class-name'} />
+    expectRendersWithClassname(element, 'test-class-name')
+  })
   it('renders text node child', () => {
     const container = render(<Label>Default</Label>)
     const label = container.baseElement
diff --git a/packages/react/src/__tests__/Popover.test.tsx b/packages/react/src/__tests__/Popover.test.tsx
index bb1265b25ca..ee3da5575b1 100644
--- a/packages/react/src/__tests__/Popover.test.tsx
+++ b/packages/react/src/__tests__/Popover.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type {PopoverProps} from '../Popover'
 import Popover from '../Popover'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
 
@@ -22,6 +22,11 @@ describe('Popover', () => {
     behavesAsComponent({Component: Popover.Content, toRender: () => comp})
   })
 
+  it('should support `className` on the outermost element', () => {
+    const element = <Popover className={'test-class-name'}></Popover>
+    expectRendersWithClassname(element, 'test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(
       <Popover caret="top" open>

From cb469b6b24ae7348d1d39c088575ac6ed44ddf60 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 16:26:23 +0000
Subject: [PATCH 07/14] Remove duplicate test

---
 packages/react/src/Heading/__tests__/Heading.test.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/react/src/Heading/__tests__/Heading.test.tsx b/packages/react/src/Heading/__tests__/Heading.test.tsx
index ec800ad3af6..956f4e63492 100644
--- a/packages/react/src/Heading/__tests__/Heading.test.tsx
+++ b/packages/react/src/Heading/__tests__/Heading.test.tsx
@@ -154,11 +154,6 @@ describe('Heading', () => {
     expect(screen.getByText('test')).not.toHaveClass(/^Heading__StyledHeading/)
   })
 
-  it('should support `className` on the outermost element', () => {
-    const {container} = HTMLRender(<Heading className="test">test</Heading>)
-    expect(container.firstChild).toHaveClass('test')
-  })
-
   it('should support overrides with sx if provided', () => {
     HTMLRender(
       <Heading

From 5c2f44d17e50ae34c8351085adc58a1b49f84c29 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 17:21:24 +0000
Subject: [PATCH 08/14] Remove helper

---
 packages/react/src/Banner/Banner.test.tsx     | 20 +++++++++++++++---
 .../__tests__/Breadcrumbs.test.tsx            | 21 ++++++++++++++++---
 .../src/Button/__tests__/Button.test.tsx      | 20 +++++++++++++++---
 packages/react/src/Checkbox/Checkbox.test.tsx | 21 ++++++++++++++++---
 .../src/CounterLabel/CounterLabel.test.tsx    | 21 ++++++++++++++++---
 .../src/Heading/__tests__/Heading.test.tsx    | 21 ++++++++++++++++---
 .../react/src/Link/__tests__/Link.test.tsx    | 21 ++++++++++++++++---
 packages/react/src/__tests__/Avatar.test.tsx  | 21 ++++++++++++++++---
 .../react/src/__tests__/AvatarStack.test.tsx  | 21 ++++++++++++++++---
 packages/react/src/__tests__/Box.test.tsx     | 21 ++++++++++++++++---
 packages/react/src/__tests__/Label.test.tsx   | 21 ++++++++++++++++---
 packages/react/src/__tests__/Popover.test.tsx | 21 ++++++++++++++++---
 .../__tests__/TextInputWithTokens.test.tsx    | 21 ++++++++++++++++---
 packages/react/src/utils/testing.tsx          | 19 -----------------
 14 files changed, 232 insertions(+), 58 deletions(-)

diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx
index 16a7a6473b9..13fecdc6fb8 100644
--- a/packages/react/src/Banner/Banner.test.tsx
+++ b/packages/react/src/Banner/Banner.test.tsx
@@ -2,7 +2,7 @@ import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import {Banner} from '../Banner'
-import {expectRendersWithClassname} from '../utils/testing'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Banner', () => {
   let spy: jest.SpyInstance
@@ -31,8 +31,22 @@ describe('Banner', () => {
   })
 
   it('should support a custom `className` on the outermost element', () => {
-    const element = <Banner title="test" className="test-class-name" />
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <Banner title="test" className="test-class-name" />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('should label the landmark element with the corresponding variant label text', () => {
diff --git a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
index f8358e8092d..e3fd9c693f7 100644
--- a/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
+++ b/packages/react/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import Breadcrumbs, {Breadcrumb} from '..'
-import {render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../../utils/testing'
+import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../../FeatureFlags'
 
 describe('Breadcrumbs', () => {
   behavesAsComponent({Component: Breadcrumbs, options: {skipAs: true}})
@@ -13,8 +14,22 @@ describe('Breadcrumbs', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const element = <Breadcrumbs className={'test-class-name'} />
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <Breadcrumbs className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('should have no axe violations', async () => {
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
index 52d1714557a..d1a0fe74ee0 100644
--- a/packages/react/src/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -4,7 +4,7 @@ import axe from 'axe-core'
 import React from 'react'
 import {IconButton, Button, LinkButton} from '../../Button'
 import type {ButtonProps} from '../../Button'
-import {behavesAsComponent, expectRendersWithClassname} from '../../utils/testing'
+import {behavesAsComponent} from '../../utils/testing'
 import {FeatureFlags} from '../../FeatureFlags'
 
 type StatefulLoadingButtonProps = {
@@ -32,8 +32,22 @@ describe('Button', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const element = <Button className={'test-class-name'} />
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <Button className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('renders a <button>', () => {
diff --git a/packages/react/src/Checkbox/Checkbox.test.tsx b/packages/react/src/Checkbox/Checkbox.test.tsx
index 783c37bbc7f..bf115bfd6ec 100644
--- a/packages/react/src/Checkbox/Checkbox.test.tsx
+++ b/packages/react/src/Checkbox/Checkbox.test.tsx
@@ -2,7 +2,8 @@ import {render} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import Checkbox from '../Checkbox'
-import {behavesAsComponent, checkExports, expectRendersWithClassname} from '../utils/testing'
+import {behavesAsComponent, checkExports} from '../utils/testing'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Checkbox', () => {
   beforeEach(() => {
@@ -15,8 +16,22 @@ describe('Checkbox', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const element = <Checkbox className={'test-class-name'} />
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <Checkbox className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('renders a valid checkbox input', () => {
diff --git a/packages/react/src/CounterLabel/CounterLabel.test.tsx b/packages/react/src/CounterLabel/CounterLabel.test.tsx
index cb3fd24d6d5..17ba502ed01 100644
--- a/packages/react/src/CounterLabel/CounterLabel.test.tsx
+++ b/packages/react/src/CounterLabel/CounterLabel.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import {CounterLabel} from '..'
-import {behavesAsComponent, checkExports, expectRendersWithClassname} from '../utils/testing'
+import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('CounterLabel', () => {
   behavesAsComponent({Component: CounterLabel, options: {skipAs: true, skipSx: true}})
@@ -12,8 +13,22 @@ describe('CounterLabel', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const element = <CounterLabel className={'test-class-name'} />
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <CounterLabel className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('renders a <span>', () => {
diff --git a/packages/react/src/Heading/__tests__/Heading.test.tsx b/packages/react/src/Heading/__tests__/Heading.test.tsx
index 956f4e63492..732e235cb73 100644
--- a/packages/react/src/Heading/__tests__/Heading.test.tsx
+++ b/packages/react/src/Heading/__tests__/Heading.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import {Heading} from '../..'
-import {render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../../utils/testing'
+import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender, screen} from '@testing-library/react'
 import axe from 'axe-core'
 import ThemeProvider from '../../ThemeProvider'
+import {FeatureFlags} from '../../FeatureFlags'
 
 const theme = {
   breakpoints: ['400px', '640px', '960px', '1280px'],
@@ -36,8 +37,22 @@ describe('Heading', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const element = <Heading className={'test-class-name'} />
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <Heading className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('renders <h2> by default', () => {
diff --git a/packages/react/src/Link/__tests__/Link.test.tsx b/packages/react/src/Link/__tests__/Link.test.tsx
index b9061e7d5ff..72c3c873f4c 100644
--- a/packages/react/src/Link/__tests__/Link.test.tsx
+++ b/packages/react/src/Link/__tests__/Link.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import Link from '..'
-import {render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../../utils/testing'
+import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../../FeatureFlags'
 
 describe('Link', () => {
   behavesAsComponent({Component: Link})
@@ -12,8 +13,22 @@ describe('Link', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const element = <Link href="#" className={'test-class-name'} />
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <Link href="#" className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('should have no axe violations', async () => {
diff --git a/packages/react/src/__tests__/Avatar.test.tsx b/packages/react/src/__tests__/Avatar.test.tsx
index 3fe069301db..1f26fd82535 100644
--- a/packages/react/src/__tests__/Avatar.test.tsx
+++ b/packages/react/src/__tests__/Avatar.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import {Avatar} from '..'
 import theme from '../theme'
-import {px, render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../utils/testing'
+import {px, render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Avatar', () => {
   behavesAsComponent({Component: Avatar})
@@ -13,8 +14,22 @@ describe('Avatar', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const element = <Avatar src="primer.png" className={'test-class-name'} />
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <Avatar src="primer.png" className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('should have no axe violations', async () => {
diff --git a/packages/react/src/__tests__/AvatarStack.test.tsx b/packages/react/src/__tests__/AvatarStack.test.tsx
index 688b94137a1..2807a9b76aa 100644
--- a/packages/react/src/__tests__/AvatarStack.test.tsx
+++ b/packages/react/src/__tests__/AvatarStack.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import {AvatarStack} from '..'
-import {render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../utils/testing'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../FeatureFlags'
 
 const avatarComp = (
   <AvatarStack>
@@ -34,7 +35,7 @@ describe('Avatar', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const element = (
+    const Element = () => (
       <AvatarStack className={'test-class-name'}>
         <img src="https://avatars.githubusercontent.com/primer" alt="" />
         <img src="https://avatars.githubusercontent.com/github" alt="" />
@@ -42,7 +43,21 @@ describe('Avatar', () => {
         <img src="https://avatars.githubusercontent.com/github" alt="" />
       </AvatarStack>
     )
-    expectRendersWithClassname(element, 'test-class-name')
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('should have no axe violations', async () => {
diff --git a/packages/react/src/__tests__/Box.test.tsx b/packages/react/src/__tests__/Box.test.tsx
index 03f57108e2d..ef739d508f8 100644
--- a/packages/react/src/__tests__/Box.test.tsx
+++ b/packages/react/src/__tests__/Box.test.tsx
@@ -3,7 +3,8 @@ import axe from 'axe-core'
 import React from 'react'
 import {Box} from '..'
 import theme from '../theme'
-import {behavesAsComponent, checkExports, expectRendersWithClassname, render} from '../utils/testing'
+import {behavesAsComponent, checkExports, render} from '../utils/testing'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Box', () => {
   behavesAsComponent({Component: Box})
@@ -13,8 +14,22 @@ describe('Box', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const element = <Box className={'test-class-name'} />
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <Box className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('should have no axe violations', async () => {
diff --git a/packages/react/src/__tests__/Label.test.tsx b/packages/react/src/__tests__/Label.test.tsx
index ae247badbbb..61467d8a924 100644
--- a/packages/react/src/__tests__/Label.test.tsx
+++ b/packages/react/src/__tests__/Label.test.tsx
@@ -3,12 +3,27 @@ import {render} from '@testing-library/react'
 import axe from 'axe-core'
 import type {LabelColorOptions} from '../Label'
 import Label, {variants} from '../Label'
-import {expectRendersWithClassname, renderStyles} from '../utils/testing'
+import {renderStyles} from '../utils/testing'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Label', () => {
   it('should support `className` on the outermost element', () => {
-    const element = <Label className={'test-class-name'} />
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <Label className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
   it('renders text node child', () => {
     const container = render(<Label>Default</Label>)
diff --git a/packages/react/src/__tests__/Popover.test.tsx b/packages/react/src/__tests__/Popover.test.tsx
index ee3da5575b1..8d3b028b71a 100644
--- a/packages/react/src/__tests__/Popover.test.tsx
+++ b/packages/react/src/__tests__/Popover.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import type {PopoverProps} from '../Popover'
 import Popover from '../Popover'
-import {render, behavesAsComponent, checkExports, expectRendersWithClassname} from '../utils/testing'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../FeatureFlags'
 
 const comp = (
   <Popover caret="top" open>
@@ -23,8 +24,22 @@ describe('Popover', () => {
   })
 
   it('should support `className` on the outermost element', () => {
-    const element = <Popover className={'test-class-name'}></Popover>
-    expectRendersWithClassname(element, 'test-class-name')
+    const Element = () => <Popover className={'test-class-name'}></Popover>
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('should have no axe violations', async () => {
diff --git a/packages/react/src/__tests__/TextInputWithTokens.test.tsx b/packages/react/src/__tests__/TextInputWithTokens.test.tsx
index f450bc9ded0..9e9a6b98026 100644
--- a/packages/react/src/__tests__/TextInputWithTokens.test.tsx
+++ b/packages/react/src/__tests__/TextInputWithTokens.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {expectRendersWithClassname, render} from '../utils/testing'
+import {render} from '../utils/testing'
 import {render as HTMLRender, fireEvent, act} from '@testing-library/react'
 import axe from 'axe-core'
 import type {TokenSizeKeys} from '../Token/TokenBase'
@@ -8,6 +8,7 @@ import {IssueLabelToken} from '../Token'
 import type {TextInputWithTokensProps} from '../TextInputWithTokens'
 import TextInputWithTokens from '../TextInputWithTokens'
 import {MarkGithubIcon} from '@primer/octicons-react'
+import {FeatureFlags} from '../FeatureFlags'
 
 const mockTokens = [
   {text: 'zero', id: 0},
@@ -38,8 +39,22 @@ jest.useFakeTimers()
 describe('TextInputWithTokens', () => {
   it('should support `className` on the outermost element', () => {
     const onRemoveMock = jest.fn()
-    const elem = <TextInputWithTokens className={'test-class-name'} tokens={[]} onTokenRemove={onRemoveMock} />
-    expectRendersWithClassname(elem, 'test-class-name')
+    const Element = () => <TextInputWithTokens className={'test-class-name'} tokens={[]} onTokenRemove={onRemoveMock} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('renders without tokens', () => {
diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx
index 6622e2f58ab..2de2fc01062 100644
--- a/packages/react/src/utils/testing.tsx
+++ b/packages/react/src/utils/testing.tsx
@@ -236,25 +236,6 @@ export function checkExports(path: string, exports: Record<any, any>): void {
   })
 }
 
-export function expectRendersWithClassname(element: React.ReactElement, className: string) {
-  const Element = () => element
-  const FeatureFlagElement = () => {
-    return (
-      <FeatureFlags
-        flags={{
-          primer_react_css_modules_team: true,
-          primer_react_css_modules_staff: true,
-          primer_react_css_modules_ga: true,
-        }}
-      >
-        <Element />
-      </FeatureFlags>
-    )
-  }
-  expect(HTMLRender(<Element />).container.firstChild).toHaveClass(className)
-  expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass(className)
-}
-
 axe.configure(customRules)
 
 export function checkStoriesForAxeViolations(name: string, storyDir?: string) {

From 5d69f3a2fcda65e9817162d993dbeb4e520b0ddf Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 17:35:30 +0000
Subject: [PATCH 09/14] Add more className tests

---
 .../react/src/__tests__/ProgressBar.test.tsx  | 22 +++++++++++++
 packages/react/src/__tests__/Radio.test.tsx   | 20 ++++++++++++
 packages/react/src/__tests__/Select.test.tsx  | 32 +++++++++++++++++++
 packages/react/src/__tests__/Spinner.test.tsx | 20 ++++++++++++
 4 files changed, 94 insertions(+)

diff --git a/packages/react/src/__tests__/ProgressBar.test.tsx b/packages/react/src/__tests__/ProgressBar.test.tsx
index be373f9feb2..498154a56ea 100644
--- a/packages/react/src/__tests__/ProgressBar.test.tsx
+++ b/packages/react/src/__tests__/ProgressBar.test.tsx
@@ -3,6 +3,7 @@ import {ProgressBar} from '..'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('ProgressBar', () => {
   behavesAsComponent({Component: ProgressBar})
@@ -12,6 +13,27 @@ describe('ProgressBar', () => {
     ProgressBar,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => (
+      <ProgressBar progress={80} barSize="small" aria-label="Upload test.png" className={'test-class-name'} />
+    )
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<ProgressBar progress={80} barSize="small" aria-label="Upload test.png" />)
     const results = await axe.run(container)
diff --git a/packages/react/src/__tests__/Radio.test.tsx b/packages/react/src/__tests__/Radio.test.tsx
index 31d83184b8b..7fdad2d5e83 100644
--- a/packages/react/src/__tests__/Radio.test.tsx
+++ b/packages/react/src/__tests__/Radio.test.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {Radio} from '..'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render, fireEvent} from '@testing-library/react'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Radio', () => {
   const defaultProps = {
@@ -19,6 +20,25 @@ describe('Radio', () => {
     default: Radio,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <Radio {...defaultProps} className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('renders a valid radio input', () => {
     const {getByRole} = render(<Radio {...defaultProps} />)
 
diff --git a/packages/react/src/__tests__/Select.test.tsx b/packages/react/src/__tests__/Select.test.tsx
index d8cd830f67d..2168c37c2d0 100644
--- a/packages/react/src/__tests__/Select.test.tsx
+++ b/packages/react/src/__tests__/Select.test.tsx
@@ -1,8 +1,40 @@
 import React from 'react'
 import {Select} from '..'
 import {render} from '@testing-library/react'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Select', () => {
+  it('should support `className` on the outermost element', () => {
+    const Element = () => (
+      <>
+        <label htmlFor="default">Choice</label>
+        <Select id="default" data-testid="select-default" className={'test-class-name'}>
+          <Select.Option value="one">Choice one</Select.Option>
+          <Select.Option value="two">Choice two</Select.Option>
+          <Select.Option value="three">Choice three</Select.Option>
+          <Select.Option value="four">Choice four</Select.Option>
+          <Select.Option value="five">Choice five</Select.Option>
+          <Select.Option value="six">Choice six</Select.Option>
+        </Select>
+      </>
+    )
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).getAllByTestId('select-default')[0]).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).getAllByTestId('select-default')[0]).toHaveClass('test-class-name')
+  })
+
   it('renders a select input', () => {
     const {getByLabelText} = render(
       <>
diff --git a/packages/react/src/__tests__/Spinner.test.tsx b/packages/react/src/__tests__/Spinner.test.tsx
index 568c563e4a5..e35fa9d10d7 100644
--- a/packages/react/src/__tests__/Spinner.test.tsx
+++ b/packages/react/src/__tests__/Spinner.test.tsx
@@ -4,6 +4,7 @@ import type {SpinnerProps} from '..'
 import {Spinner} from '..'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, screen} from '@testing-library/react'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Spinner', () => {
   behavesAsComponent({
@@ -14,6 +15,25 @@ describe('Spinner', () => {
     default: Spinner,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <Spinner className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild?.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild?.firstChild).toHaveClass('test-class-name')
+  })
+
   it('should label the spinner with default loading text', async () => {
     const {getByLabelText} = HTMLRender(<Spinner />)
 

From 3f82342f1d757ae2b4be7c7c28455b554a1b7391 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 17:35:43 +0000
Subject: [PATCH 10/14] Add classname support to Spinner

---
 packages/react/src/Spinner/Spinner.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index 46e55968e50..63cd0d33304 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -19,10 +19,17 @@ export type SpinnerProps = {
   srText?: string | null
   /** @deprecated Use `srText` instead. */
   'aria-label'?: string
+  className?: string
 } & HTMLDataAttributes &
   SxProp
 
-function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ariaLabel, ...props}: SpinnerProps) {
+function Spinner({
+  size: sizeKey = 'medium',
+  srText = 'Loading',
+  'aria-label': ariaLabel,
+  className,
+  ...props
+}: SpinnerProps) {
   const size = sizeMap[sizeKey]
   const hasHiddenLabel = srText !== null && ariaLabel === undefined
   const labelId = useId()
@@ -38,6 +45,7 @@ function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ar
         aria-hidden
         aria-label={ariaLabel ?? undefined}
         aria-labelledby={hasHiddenLabel ? labelId : undefined}
+        className={className}
         {...props}
       >
         <circle

From bb2e343ddb17235b9586b17782eae4586c176d5f Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 17:36:05 +0000
Subject: [PATCH 11/14] Remove unused import

---
 packages/react/src/utils/testing.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx
index 2de2fc01062..5f5f1caa257 100644
--- a/packages/react/src/utils/testing.tsx
+++ b/packages/react/src/utils/testing.tsx
@@ -8,7 +8,6 @@ import customRules from '@github/axe-github'
 import {ThemeProvider} from '..'
 import {default as defaultTheme} from '../theme'
 import type {LiveRegionElement} from '@primer/live-region-element'
-import {FeatureFlags} from '../FeatureFlags'
 
 type ComputedStyles = Record<string, string | Record<string, string>>
 

From 5f4bb30757cbaa437c9b65db7896a00260a2b62c Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 18:02:00 +0000
Subject: [PATCH 12/14] Add support to Textarea for className

---
 packages/react/src/Textarea/Textarea.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 2e58a7ef26b..773b877c8e8 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -31,6 +31,7 @@ export type TextareaProps = {
    * apply a high contrast color to background
    */
   contrast?: boolean
+  className?: string
 } & TextareaHTMLAttributes<HTMLTextAreaElement> &
   SxProp
 
@@ -79,6 +80,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       resize = DEFAULT_TEXTAREA_RESIZE,
       block,
       contrast,
+      className,
       ...rest
     }: TextareaProps,
     ref,
@@ -100,6 +102,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           disabled={disabled}
           rows={rows}
           cols={cols}
+          className={className}
           {...rest}
         />
       </TextInputBaseWrapper>

From 8a0524d25d1e202ff3009a1304ce106ac0eb4edc Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 18:02:11 +0000
Subject: [PATCH 13/14] Add more className tests

---
 packages/react/src/__tests__/SubNav.test.tsx  | 20 +++++++++++++++++++
 .../react/src/__tests__/TextInput.test.tsx    | 20 +++++++++++++++++++
 .../react/src/__tests__/Textarea.test.tsx     | 20 +++++++++++++++++++
 3 files changed, 60 insertions(+)

diff --git a/packages/react/src/__tests__/SubNav.test.tsx b/packages/react/src/__tests__/SubNav.test.tsx
index d1eb196efc7..b3ca29f5d7a 100644
--- a/packages/react/src/__tests__/SubNav.test.tsx
+++ b/packages/react/src/__tests__/SubNav.test.tsx
@@ -3,6 +3,7 @@ import {SubNav} from '..'
 import {render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('SubNav', () => {
   behavesAsComponent({Component: SubNav})
@@ -11,6 +12,25 @@ describe('SubNav', () => {
     default: SubNav,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <SubNav className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<SubNav />)
     const results = await axe.run(container)
diff --git a/packages/react/src/__tests__/TextInput.test.tsx b/packages/react/src/__tests__/TextInput.test.tsx
index 866e00cb09f..5f13d2dfc34 100644
--- a/packages/react/src/__tests__/TextInput.test.tsx
+++ b/packages/react/src/__tests__/TextInput.test.tsx
@@ -5,6 +5,7 @@ import axe from 'axe-core'
 import React from 'react'
 import {TextInput} from '..'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('TextInput', () => {
   behavesAsComponent({Component: TextInput, options: {skipAs: true}})
@@ -13,6 +14,25 @@ describe('TextInput', () => {
     default: TextInput,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <TextInput className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<TextInput aria-label="Zipcode" name="zipcode" variant="small" />)
     const results = await axe.run(container)
diff --git a/packages/react/src/__tests__/Textarea.test.tsx b/packages/react/src/__tests__/Textarea.test.tsx
index 04a6ae9ce0d..d030b07d979 100644
--- a/packages/react/src/__tests__/Textarea.test.tsx
+++ b/packages/react/src/__tests__/Textarea.test.tsx
@@ -4,6 +4,7 @@ import {behavesAsComponent, checkExports, renderStyles} from '../utils/testing'
 import {render} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {DEFAULT_TEXTAREA_ROWS, DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE} from '../Textarea'
+import {FeatureFlags} from '../FeatureFlags'
 
 describe('Textarea', () => {
   beforeEach(() => {
@@ -21,6 +22,25 @@ describe('Textarea', () => {
     DEFAULT_TEXTAREA_RESIZE,
   })
 
+  it('should support `className` on the outermost element', () => {
+    const Element = () => <Textarea className={'test-class-name'} />
+    const FeatureFlagElement = () => {
+      return (
+        <FeatureFlags
+          flags={{
+            primer_react_css_modules_team: true,
+            primer_react_css_modules_staff: true,
+            primer_react_css_modules_ga: true,
+          }}
+        >
+          <Element />
+        </FeatureFlags>
+      )
+    }
+    expect(render(<Element />).container.firstChild?.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild?.firstChild).toHaveClass('test-class-name')
+  })
+
   it('renders a valid textarea input', () => {
     const {getByRole} = render(<Textarea />)
 

From cfb314ddde16f01544e990f5329123f1cc1d1449 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 17 Oct 2024 19:26:15 +0000
Subject: [PATCH 14/14] Fix Textarea test

---
 packages/react/src/Textarea/Textarea.tsx       | 1 -
 packages/react/src/__tests__/Textarea.test.tsx | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index a6b835e3e06..ff39ed078b9 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -106,7 +106,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
           disabled={disabled}
           rows={rows}
           cols={cols}
-          className={className}
           {...rest}
         />
       </TextInputBaseWrapper>
diff --git a/packages/react/src/__tests__/Textarea.test.tsx b/packages/react/src/__tests__/Textarea.test.tsx
index d030b07d979..2bc0c7f6e20 100644
--- a/packages/react/src/__tests__/Textarea.test.tsx
+++ b/packages/react/src/__tests__/Textarea.test.tsx
@@ -37,8 +37,8 @@ describe('Textarea', () => {
         </FeatureFlags>
       )
     }
-    expect(render(<Element />).container.firstChild?.firstChild).toHaveClass('test-class-name')
-    expect(render(<FeatureFlagElement />).container.firstChild?.firstChild).toHaveClass('test-class-name')
+    expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+    expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
   })
 
   it('renders a valid textarea input', () => {