Update Select stories to no longer use styled-components

[llastflowers]

Closes https://github.com/github/primer/issues/5625
Closes https://github.com/github/primer/issues/5626
Closes https://github.com/github/primer/issues/5627

Changelog

New

Added 2 new CSS modules

Changed

Changed Select.features.stories.tsx and Select.stories.tsx and Select.dev.stories.tsx to no longer use styled-components

Changed the className prop to be on TextInputWrapper instead of Select, so that using className on Select components styles the wrapper correctly (as was already happening when using the sx prop, which was correctly passed to TextInputWrapper).

Removed

Removed anything associated with styled-components

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	90.15 KB (-0.15% 🔽)
packages/react/dist/browser.umd.js	90.34 KB (-0.11% 🔽)

[Copilot]

Pull Request Overview

This PR removes styled-components dependencies from Select component stories by replacing styled-components usage with CSS modules and native HTML elements. The changes support migration away from styled-components while maintaining the same visual functionality.

• Replace Box as="form" with native <form> elements across all stories
• Replace sx prop styling with CSS modules for custom styling story
• Add new wrapperClassName prop to Select component to support custom styling

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
Select.tsx	Adds wrapperClassName prop to pass custom CSS classes to the wrapper element
Select.stories.tsx	Replaces styled-components Box with native form elements
Select.features.stories.tsx	Replaces styled-components usage and implements CSS module for custom styling
Select.features.stories.module.css	New CSS module defining custom select styling

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[jonrohan]

👍🏻

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!