bcgov / bcgov/zeva2

ZEVA 2 - Dropdown component (Design System)

Open
#340 0 comments 0 reactions 1 assignee Claimed by @dallascrichmond View on GitHub
Medium Task
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.