Update Select stories to no longer use styled-components

.changeset/strong-falcons-design.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update Select component to correctly pass className to TextInputWraper for styling purposes

packages/react/src/Select/Select.dev.stories.module.css

@@ -0,0 +1,3 @@
+.DangerText {
+  color: var(--fgColor-danger);
+}

packages/react/src/Select/Select.dev.stories.tsx

@@ -1,17 +1,18 @@
 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',
   component: Select,
 } as Meta
 
 export const Default = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
-      <Select sx={{color: 'danger.fg'}}>
+      <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>
@@ -20,5 +21,5 @@ export const Default = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )

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;
+}

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 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>
@@ -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>
 )

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'
@@ -24,7 +24,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 +40,7 @@ export const Playground = (args: FormControlArgs<SelectProps>) => {
           <FormControl.Validation {...validationArgs} variant={validationArgs.variant} />
         )}
       </FormControl>
-    </Box>
+    </form>
   )
 }
 Playground.args = {
@@ -52,7 +52,7 @@ Playground.argTypes = {
 }
 
 export const Default = () => (
-  <Box as="form">
+  <form>
     <FormControl>
       <FormControl.Label>Default label</FormControl.Label>
       <Select>
@@ -64,5 +64,5 @@ export const Default = () => (
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
     </FormControl>
-  </Box>
+  </form>
 )

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', () => {

packages/react/src/Select/Select.tsx

@@ -57,7 +57,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         disabled={disabled}
         size={size}
         validationStatus={validationStatus}
-        className={classes.TextInputWrapper}
+        className={clsx(classes.TextInputWrapper, className)}
         sx={sx}
       >
         <select
@@ -66,7 +66,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}
         >