This pull-request implement animations for each of our `<ChevronDown />`
(and a few other chevrons) so that everything is uniform with
`<Autocomplete />`.
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"
/>
for #19397
dependency: #19635
This PR specifically covers components which open a popover that's
triggered by a click, rather than a hover.
---------
Co-authored-by: ケイラ <mckayla@hey.com>
## Changes made
- Patched React `CSSProperties` type to add support for custom CSS
properties
- Updated several of the components in the `components` directory to
Tailwind
- Updated most of the `WorkspacePageBuildView` component to Tailwind to
account for CSS specificity changes
- Updated `Search` to address accessibility violation and removed all
MUI logic
- Updated `Search` stories (added new story, decoupled all stories from
single decorator)
- Updated `autoFocus` behavior in `SearchField`
- Updated the styling for `WorkspacePageBuildView` to make sure the tabs
had enough padding
- Fixed layout effect in `WorkspacePageBuildView` to fire correctly
Kayla はな