bcgov / bcgov/zeva2

ZEVA 2 - Textarea Input Field

Open
#338 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 Textarea Input Field component in the UI library.
If a base Textarea component already exists, it should be updated to match the new Design System specifications documented in Figma.
If no suitable base component exists, a new reusable Textarea component should be created.

**Purpose**
To standardize multiline input fields across ZEVA 2 by ensuring that all textarea elements use a single, consistent component with shared styling, states, and behavior.

**Acceptance Criteria**
The component must support the following properties [(as defined in Figma)](https://www.figma.com/design/7Qgou3rxcHHk5qbmD9538x/ZEVA-2?node-id=210-443&t=T1mVHExNUezbW908-1):
- [x] Label: yes / no
- [x] Hint text: yes / no
- [x] Destructive: yes / no
- [x] State: default / hover / focus / typing / disabled / error
- [ ] Toolbar: yes / no
- [x] Button: yes / no
- [x] Error message: yes / no

Behavior & layout
- [x] Supports multiline text input.
- [x] Text wraps automatically.

Height behavior:
- [x] grows with content up to max height
- [x] after max height - internal scroll appears

Responsive width:
- [x] min-width: 280px
- [x] max-width: 700px

Interaction
- [x] Enter creates a new line.
- [x] Field expands vertically during typing
- [x] Placeholder disappears on typing.

**Additional context**
Design Source of Truth: Figma - [Inputs / Textarea input field (contains all variants).](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.