ZEVA 2 - Dropdown component (Design System)
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 6
- Avg merge
- 14h 22m
- Merged PRs (30d)
- 32
Description
**Describe the task**
Review the existing Dropdown component in the UI library.
If a base Dropdown component already exists, it should be updated to match the [new Design System ](https://www.figma.com/design/7Qgou3rxcHHk5qbmD9538x/ZEVA-2?node-id=210-443&t=T1mVHExNUezbW908-1)specifications documented in Figma.
If no suitable base component exists, a new reusable Dropdown component should be created.
The component must be implemented as a standard selection input consistent with other DS inputs (Input, Textarea) while supporting dropdown-specific behavior and interaction patterns.
**Purpose**
To standardize selection inputs across the application by ensuring all dropdown fields use a consistent structure, interaction model, visual styling, and accessibility pattern aligned with the Design System.
**Acceptance Criteria**
- [x] Match the Figma Dropdown component visually and structurally.
- [x] Use Design System tokens only (colors, spacing, radius, typography, elevation).
- [x] Follow the same layout and interaction principles as Input and Textarea components.
- [x] Label: yes / no
- [x] Helper text: yes / no
- [x] Destructive: yes / no
- [x] Error notification: yes / no
State:
- [x] default
- [x] hover
- [x] pressed
- [x] focus
- [x] open
- [x] disabled
- [x] error
Trigger behavior
- [x] Dropdown opens on click.
- [x] Trigger follows standard interaction states: hover/ pressed/ focus /disabled
Selection behavior
- [x] Single selection only.
- [x] Selecting an option:
- [x] replaces placeholder text with selected value
- [x] closes dropdown
Closing rules
Dropdown closes when:
- [x] an option is selected
- [x] user clicks outside
Menu behavior
- [x] Options displayed in a vertical list.
- [x] Scroll appears if options exceed available height.
- [ ] Menu remains anchored to trigger.
Consistency rules
- [ ] Dropdown trigger must follow the same interaction states as Input components.
- [ ] Validation behavior must match Input/Textarea patterns.
- [ ] Spacing, typography, and border treatment must use DS tokens only.
**Additional context**
[Design Source of Truth: Figma Inputs / Dropdown](https://www.figma.com/design/7Qgou3rxcHHk5qbmD9538x/ZEVA-2?node-id=210-443&t=T1mVHExNUezbW908-1)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.