CC-41: <Select/> is Missing size Prop

[ianpaschal]

Fixes CC-41

Summary by CodeRabbit

• New Features

  • The Select component now supports three configurable size variants—small, normal, and large—providing flexible options for various layout requirements.

• Style

  • Enhanced Select trigger styling with improved layout handling, better width management, and refined user selection behavior.
  • Updated padding calculations for improved visual consistency and alignment.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 06121c03-e55f-49c9-a3a3-d1d0c76ac8e2

📥 Commits

Reviewing files that changed from the base of the PR and between 1e91a50 and 46f1a27.

📒 Files selected for processing (4)

• src/components/Select/Select.module.scss
• src/components/Select/Select.stories.tsx
• src/components/Select/Select.tsx
• src/style/sizes.module.scss

💤 Files with no reviewable changes (1)

• src/components/Select/Select.module.scss

---

Walkthrough

This PR adds a configurable size prop to the Select component with values 'small', 'normal', or 'large'. The SelectProps interface is extended with an optional size?: ElementSize field, while the prop is excluded from inherited InputHTMLAttributes to avoid passing it to the native select element. The sizing infrastructure is updated by modifying the common mixin's padding calculation to use separate vertical and horizontal values. The Select component defaults size to 'normal', passes it to getStyleClassNames for style application, and adjusts option label matching logic for null/undefined equivalence. Storybook stories are configured with the size argType and updated to include size: 'normal' in their default arguments.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly describes the main change: adding a missing size prop to the <Select/> component, which aligns with the primary modifications across all affected files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ian/cc-41-select-is-missing-size-prop

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.11.0)

src/style/sizes.module.scss

ConfigurationError: Could not find "stylelint-config-clean-order". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:29:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:285:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:252:25)
at async augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:85:20)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:138:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:127:22)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}