From 35767cf1c177eed9e6dd868b89aa6400f8a01f3a Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 6 Aug 2025 12:47:38 -0700
Subject: [PATCH 1/9] Update Select.features.stories.tsx to no longer use
 styled-components

---
 .../Select/Select.features.stories.module.css |  5 ++
 .../src/Select/Select.features.stories.tsx    | 49 ++++++++++---------
 packages/react/src/Select/Select.tsx          |  4 +-
 3 files changed, 33 insertions(+), 25 deletions(-)
 create mode 100644 packages/react/src/Select/Select.features.stories.module.css

diff --git a/packages/react/src/Select/Select.features.stories.module.css b/packages/react/src/Select/Select.features.stories.module.css
new file mode 100644
index 00000000000..210cb5989e9
--- /dev/null
+++ b/packages/react/src/Select/Select.features.stories.module.css
@@ -0,0 +1,5 @@
+.CustomSelect {
+  border-radius: var(--borderRadius-large);
+  /* stylelint-disable-next-line primer/colors */
+  border: var(--borderWidth-default) dashed #000;
+}
diff --git a/packages/react/src/Select/Select.features.stories.tsx b/packages/react/src/Select/Select.features.stories.tsx
index ab78140a838..37ca2151385 100644
--- a/packages/react/src/Select/Select.features.stories.tsx
+++ b/packages/react/src/Select/Select.features.stories.tsx
@@ -1,12 +1,13 @@
-import {FormControl, Box, Heading} from '..'
+import {FormControl, Heading} from '..'
 import Select from './Select'
+import classes from './Select.features.stories.module.css'
 
 export default {
   title: 'Components/Select/Features',
 }
 
 export const WithOptionGroups = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <Select>
@@ -22,11 +23,11 @@ export const WithOptionGroups = () => (
         </Select.OptGroup>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )
 
 export const Disabled = () => (
-  <Box as="form">
+  <form>
     <FormControl disabled>
       <FormControl.Label>Default label</FormControl.Label>
       <Select>
@@ -38,11 +39,11 @@ export const Disabled = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )
 
 export const WithCaption = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <FormControl.Caption>This is a caption</FormControl.Caption>
@@ -55,11 +56,11 @@ export const WithCaption = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )
 
 export const VisuallyHiddenLabel = () => (
-  <Box as="form">
+  <form>
     <Heading as="h2" variant="small">
       Primer form title
     </Heading>
@@ -75,11 +76,11 @@ export const VisuallyHiddenLabel = () => (
       </Select>
       <FormControl.Caption>Label is visually hidden; the title describes the purpose visually</FormControl.Caption>
     </FormControl>
-  </Box>
+  </form>
 )
 
 export const Error = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <Select>
@@ -92,11 +93,11 @@ export const Error = () => (
       </Select>
       <FormControl.Validation variant="error">Something went wrong</FormControl.Validation>
     </FormControl>
-  </Box>
+  </form>
 )
 
 export const Success = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <Select>
@@ -109,11 +110,11 @@ export const Success = () => (
       </Select>
       <FormControl.Validation variant="success">Success</FormControl.Validation>
     </FormControl>
-  </Box>
+  </form>
 )
 
 export const Block = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <Select block>
@@ -125,11 +126,11 @@ export const Block = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )
 
 export const Small = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <Select size="small">
@@ -141,11 +142,11 @@ export const Small = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )
 
 export const Large = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <Select size="large">
@@ -157,14 +158,14 @@ export const Large = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )
 
 export const WithCustomStyling = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
-      <Select sx={{borderRadius: '12px', border: '1px dashed #000000'}}>
+      <Select wrapperClassName={classes.CustomSelect}>
         <Select.Option value="one">Choice one</Select.Option>
         <Select.Option value="two">Choice two</Select.Option>
         <Select.Option value="three">Choice three</Select.Option>
@@ -173,11 +174,11 @@ export const WithCustomStyling = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )
 
 export const WithPlaceholderOption = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <Select placeholder="No choice selected">
@@ -189,5 +190,5 @@ export const WithPlaceholderOption = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index ff0e1c7379e..4b64d2685a0 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -11,6 +11,7 @@ export type SelectProps = Omit<
   'multiple' | 'hasLeadingVisual' | 'hasTrailingVisual' | 'as'
 > & {
   placeholder?: string
+  wrapperClassName?: string
 }
 
 const ArrowIndicatorSVG: React.FC<React.PropsWithChildren<{className?: string}>> = ({className}) => {
@@ -46,6 +47,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       required,
       validationStatus,
       sx,
+      wrapperClassName,
       ...rest
     }: SelectProps,
     ref,
@@ -57,7 +59,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         disabled={disabled}
         size={size}
         validationStatus={validationStatus}
-        className={classes.TextInputWrapper}
+        className={clsx(classes.TextInputWrapper, wrapperClassName)}
         sx={sx}
       >
         <select

From e137db3034acb245a3fba9af470541bb59e86961 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 6 Aug 2025 12:49:17 -0700
Subject: [PATCH 2/9] Update Select.stories.tsx to no longer use
 styled-components

---
 packages/react/src/Select/Select.stories.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Select/Select.stories.tsx b/packages/react/src/Select/Select.stories.tsx
index d3c4523c71f..a3a4cbd7999 100644
--- a/packages/react/src/Select/Select.stories.tsx
+++ b/packages/react/src/Select/Select.stories.tsx
@@ -1,5 +1,5 @@
 import type {Meta} from '@storybook/react-vite'
-import {FormControl, Box} from '..'
+import {FormControl} from '..'
 import Select from './Select'
 import type {SelectProps} from './Select'
 import type {FormControlArgs} from '../utils/form-story-helpers'
@@ -9,6 +9,7 @@ import {
   getFormControlArgsByChildComponent,
   inputWrapperArgTypes,
 } from '../utils/form-story-helpers'
+import classes from './Select.stories.module.css'
 
 export default {
   title: 'Components/Select',
@@ -24,7 +25,7 @@ export const Playground = (args: FormControlArgs<SelectProps>) => {
   const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args)
 
   return (
-    <Box as="form">
+    <form>
       <FormControl {...parentArgs}>
         <FormControl.Label {...labelArgs} />
         <Select {...args}>
@@ -40,7 +41,7 @@ export const Playground = (args: FormControlArgs<SelectProps>) => {
           <FormControl.Validation {...validationArgs} variant={validationArgs.variant} />
         )}
       </FormControl>
-    </Box>
+    </form>
   )
 }
 Playground.args = {
@@ -52,7 +53,7 @@ Playground.argTypes = {
 }
 
 export const Default = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <Select>
@@ -64,5 +65,5 @@ export const Default = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )

From 2651e2554b32896fb26ad2cd637e4452a6092149 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 6 Aug 2025 13:03:19 -0700
Subject: [PATCH 3/9] remove unused import

---
 packages/react/src/Select/Select.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/Select/Select.stories.tsx b/packages/react/src/Select/Select.stories.tsx
index a3a4cbd7999..84e1f3170c8 100644
--- a/packages/react/src/Select/Select.stories.tsx
+++ b/packages/react/src/Select/Select.stories.tsx
@@ -9,7 +9,6 @@ import {
   getFormControlArgsByChildComponent,
   inputWrapperArgTypes,
 } from '../utils/form-story-helpers'
-import classes from './Select.stories.module.css'
 
 export default {
   title: 'Components/Select',

From c1b5d7354cf36a463decb968e5f9b6d1aeb5c5a8 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 6 Aug 2025 13:39:57 -0700
Subject: [PATCH 4/9] Update Select.dev.stories.tsx to no longer use
 styled-components

---
 packages/react/src/Select/Select.dev.stories.module.css | 3 +++
 packages/react/src/Select/Select.dev.stories.tsx        | 9 +++++----
 2 files changed, 8 insertions(+), 4 deletions(-)
 create mode 100644 packages/react/src/Select/Select.dev.stories.module.css

diff --git a/packages/react/src/Select/Select.dev.stories.module.css b/packages/react/src/Select/Select.dev.stories.module.css
new file mode 100644
index 00000000000..c4f454d2aa5
--- /dev/null
+++ b/packages/react/src/Select/Select.dev.stories.module.css
@@ -0,0 +1,3 @@
+.DangerText {
+  color: var(--fgColor-danger);
+}
diff --git a/packages/react/src/Select/Select.dev.stories.tsx b/packages/react/src/Select/Select.dev.stories.tsx
index 3217b59839e..3c2b2f763ab 100644
--- a/packages/react/src/Select/Select.dev.stories.tsx
+++ b/packages/react/src/Select/Select.dev.stories.tsx
@@ -1,6 +1,7 @@
 import type {Meta} from '@storybook/react-vite'
-import {FormControl, Box} from '..'
+import {FormControl} from '..'
 import Select from './Select'
+import classes from './Select.dev.stories.module.css'
 
 export default {
   title: 'Components/Select/Dev',
@@ -8,10 +9,10 @@ export default {
 } as Meta
 
 export const Default = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
-      <Select sx={{color: 'danger.fg'}}>
+      <Select wrapperClassName={classes.DangerText}>
         <Select.Option value="one">Choice one</Select.Option>
         <Select.Option value="two">Choice two</Select.Option>
         <Select.Option value="three">Choice three</Select.Option>
@@ -20,5 +21,5 @@ export const Default = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )

From 48aa490b3e4614167fd8467b1fa93e746f284eda Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 7 Aug 2025 10:42:31 -0700
Subject: [PATCH 5/9] update to move className prop from Select to
 TextInputWrapper for direct Select styling

---
 packages/react/src/Select/Select.dev.stories.tsx      | 2 +-
 packages/react/src/Select/Select.features.stories.tsx | 2 +-
 packages/react/src/Select/Select.tsx                  | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/Select/Select.dev.stories.tsx b/packages/react/src/Select/Select.dev.stories.tsx
index 3c2b2f763ab..6ff19d2baec 100644
--- a/packages/react/src/Select/Select.dev.stories.tsx
+++ b/packages/react/src/Select/Select.dev.stories.tsx
@@ -12,7 +12,7 @@ export const Default = () => (
   <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
-      <Select wrapperClassName={classes.DangerText}>
+      <Select className={classes.DangerText}>
         <Select.Option value="one">Choice one</Select.Option>
         <Select.Option value="two">Choice two</Select.Option>
         <Select.Option value="three">Choice three</Select.Option>
diff --git a/packages/react/src/Select/Select.features.stories.tsx b/packages/react/src/Select/Select.features.stories.tsx
index 37ca2151385..79e492b386b 100644
--- a/packages/react/src/Select/Select.features.stories.tsx
+++ b/packages/react/src/Select/Select.features.stories.tsx
@@ -165,7 +165,7 @@ export const WithCustomStyling = () => (
   <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
-      <Select wrapperClassName={classes.CustomSelect}>
+      <Select className={classes.CustomSelect}>
         <Select.Option value="one">Choice one</Select.Option>
         <Select.Option value="two">Choice two</Select.Option>
         <Select.Option value="three">Choice three</Select.Option>
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index 4b64d2685a0..12b19a327f2 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -59,7 +59,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         disabled={disabled}
         size={size}
         validationStatus={validationStatus}
-        className={clsx(classes.TextInputWrapper, wrapperClassName)}
+        className={clsx(classes.TextInputWrapper, className)}
         sx={sx}
       >
         <select
@@ -68,7 +68,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
           required={required}
           disabled={disabled}
           aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
-          className={clsx(className, classes.Select, disabled && classes.Disabled)}
+          className={clsx(classes.Select, disabled && classes.Disabled)}
           data-hasplaceholder={Boolean(placeholder)}
           defaultValue={defaultValue ?? placeholder ?? undefined}
         >

From d0d59387242e8fa2b4efb51392bd531ef4e76bc3 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 7 Aug 2025 10:47:43 -0700
Subject: [PATCH 6/9] remove extra prop everywhere oops

---
 packages/react/src/Select/Select.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index 12b19a327f2..7b79c7ef4f7 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -11,7 +11,6 @@ export type SelectProps = Omit<
   'multiple' | 'hasLeadingVisual' | 'hasTrailingVisual' | 'as'
 > & {
   placeholder?: string
-  wrapperClassName?: string
 }
 
 const ArrowIndicatorSVG: React.FC<React.PropsWithChildren<{className?: string}>> = ({className}) => {
@@ -47,7 +46,6 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       required,
       validationStatus,
       sx,
-      wrapperClassName,
       ...rest
     }: SelectProps,
     ref,

From 214fc4bf6396417d1cd3b84f693b353ea159f31b Mon Sep 17 00:00:00 2001
From: "Brittany L. Houtz" <55068883+llastflowers@users.noreply.github.com>
Date: Thu, 7 Aug 2025 10:49:58 -0700
Subject: [PATCH 7/9] Fix Select component className prop

---
 .changeset/strong-falcons-design.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/strong-falcons-design.md

diff --git a/.changeset/strong-falcons-design.md b/.changeset/strong-falcons-design.md
new file mode 100644
index 00000000000..672d642e1c0
--- /dev/null
+++ b/.changeset/strong-falcons-design.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update Select component to correctly pass className to TextInputWraper for styling purposes

From 9e76b8c970414228011da1873d5e87c55cf44de4 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 7 Aug 2025 11:16:46 -0700
Subject: [PATCH 8/9] update test to look for className on the correct element;
 TextInputWrapper

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

diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index 7b79c7ef4f7..88a9a00d773 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -11,6 +11,7 @@ export type SelectProps = Omit<
   'multiple' | 'hasLeadingVisual' | 'hasTrailingVisual' | 'as'
 > & {
   placeholder?: string
+  'data-testid'?: string
 }
 
 const ArrowIndicatorSVG: React.FC<React.PropsWithChildren<{className?: string}>> = ({className}) => {
@@ -46,6 +47,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       required,
       validationStatus,
       sx,
+      'data-testid': dataTestId,
       ...rest
     }: SelectProps,
     ref,
@@ -59,6 +61,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         validationStatus={validationStatus}
         className={clsx(classes.TextInputWrapper, className)}
         sx={sx}
+        data-testid={dataTestId}
       >
         <select
           {...rest}

From 10339d7cbcf7132d1309a061128caa62c1b961af Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 7 Aug 2025 12:11:51 -0700
Subject: [PATCH 9/9] remove testid prop and instead update test to check for
 the className on the outer span wrapper of the select, which is
 TextInputWrapper

---
 packages/react/src/Select/Select.test.tsx | 8 ++++++--
 packages/react/src/Select/Select.tsx      | 3 ---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Select/Select.test.tsx b/packages/react/src/Select/Select.test.tsx
index 381d2d9d10a..1b1bab2d34f 100644
--- a/packages/react/src/Select/Select.test.tsx
+++ b/packages/react/src/Select/Select.test.tsx
@@ -8,7 +8,7 @@ describe('Select', () => {
     const Element = () => (
       <>
         <label htmlFor="default">Choice</label>
-        <Select id="default" data-testid="select-default" className={'test-class-name'}>
+        <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>
@@ -18,7 +18,11 @@ describe('Select', () => {
         </Select>
       </>
     )
-    expect(render(<Element />).getAllByTestId('select-default')[0]).toHaveClass('test-class-name')
+    const {container} = render(<Element />)
+    const select = container.querySelector('select')
+    const wrapper = container.querySelector('span.test-class-name')
+    expect(wrapper).toContainElement(select)
+    expect(wrapper).toHaveClass('test-class-name')
   })
 
   it('renders a select input', () => {
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index 88a9a00d773..7b79c7ef4f7 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -11,7 +11,6 @@ export type SelectProps = Omit<
   'multiple' | 'hasLeadingVisual' | 'hasTrailingVisual' | 'as'
 > & {
   placeholder?: string
-  'data-testid'?: string
 }
 
 const ArrowIndicatorSVG: React.FC<React.PropsWithChildren<{className?: string}>> = ({className}) => {
@@ -47,7 +46,6 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       required,
       validationStatus,
       sx,
-      'data-testid': dataTestId,
       ...rest
     }: SelectProps,
     ref,
@@ -61,7 +59,6 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         validationStatus={validationStatus}
         className={clsx(classes.TextInputWrapper, className)}
         sx={sx}
-        data-testid={dataTestId}
       >
         <select
           {...rest}