mirror of
https://github.com/coder/coder.git
synced 2026-11-03 22:25:31 +08:00
Jake Howell
4fe64213c3
This pull-request refactors filter-related dropdown and input components from MUI to our Tailwind-based design system. This is more inline with the Figma design, controversially we are changing the button group for canned filters and input to two seperate components. - **InputGroup**: Complete rewrite to a compound component pattern (`InputGroup`, `InputGroupAddon`, `InputGroupInput`, `InputGroupButton`) using Tailwind and CVA, replacing the old CSS-in-JS approach - **SearchField**: Migrated from MUI TextField to use the new InputGroup components, with a simplified API and proper ref forwarding - **Filter/PresetMenu**: Replaced MUI Menu with our DropdownMenu component, and updated icon to `SlidersHorizontal` ### Changes | Component | Before | After | |-----------|--------|-------| | InputGroup | CSS-in-JS with MUI margin hacks | Compound component with Tailwind group states | | SearchField | MUI TextField + InputAdornment | InputGroup + InputGroupAddon composition | | PresetMenu | MUI Menu/MenuItem | DropdownMenu/DropdownMenuItem | | MenuSearch | Complex CSS overrides | Single Tailwind class | <img src="https://github.com/user-attachments/assets/5b819027-2dca-4dcc-b6d6-7096fa3775c0" />