[FEATURE] Unify Dropdown/Select Styling Across Control Bar #115
Description
Is your feature request related to a problem?
The control bar currently uses inconsistent implementations and styling for different dropdown components, leading to code duplication, maintenance overhead, and inconsistent UX. Each dropdown has its own CSS classes, HTML structure, and toggle logic.
Current State
Currently we have 5+ different dropdown/select implementations:
- Projection dropdown - Custom styled with
.projection-trigger,.projection-menu,.projection-option - Color By dropdown - Native
<select>with basic styling (#feature-select) - Plane dropdown - Native
<select>with basic styling (#plane-select) - Filter dropdown - Custom styled with
.filter-menu, nested checkboxes and sub-menus - Export dropdown - Custom styled with
.export-menu,.export-menu-list-item-button - Search bar - Custom component with
.search-container
Describe the solution you'd like
Create a unified dropdown component system that:
- Provides consistent visual styling across all dropdowns
- Reduces code duplication
- Maintains/improves accessibility
- Supports different dropdown variants (simple select, checkbox lists, nested menus)
Acceptance Criteria
- All dropdowns use unified component/styling system
- Visual appearance remains consistent (or improved)
- Keyboard navigation works (Arrow keys, Enter, Escape, Tab)
- ARIA attributes properly implemented
- No regression in existing functionality
- Documentation/examples for using the unified dropdown
Code of Conduct
- I agree to follow this project's Code of Conduct