Naser Mansour
7f35297025
Naser confirmed all remaining QA Review / Draft rows (97 subtasks, 16
parent rollups) are done in substance: the site has been in production
for roughly a year. Overrides the conservative QA-Review/Draft mapping
from the prior takeover commit (0f9d12c) at his explicit instruction.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
34 lines
1.2 KiB
Markdown
34 lines
1.2 KiB
Markdown
---
|
|
id: 9-5
|
|
title: 9-5 Component Styling - Forms
|
|
status: Done
|
|
date: 2026-09-27
|
|
parent: 9
|
|
---
|
|
|
|
## Description
|
|
|
|
As a user, I want consistent, accessible form styling, So that data entry is intuitive and error states are clear. Full implementation history: docs/stories/story-9.5-component-styling-forms.md
|
|
|
|
## Acceptance Criteria
|
|
|
|
- [ ] Border: Charcoal Gray (`border-charcoal/30`)
|
|
- [ ] Focus: Gold border with subtle ring (`focus:border-gold focus:ring-gold/20`)
|
|
- [ ] Border-radius: 6px (`rounded-md`)
|
|
- [ ] Padding: 12px 16px (`px-4 py-3`)
|
|
- [ ] Same styling as inputs
|
|
- [ ] Minimum height: 120px (`min-h-[120px]`)
|
|
- [ ] Custom styled using Flux UI (not native browser)
|
|
- [ ] Consistent border/focus styling with inputs
|
|
- [ ] Custom styled with gold accent when checked
|
|
- [ ] Clear visual distinction between checked/unchecked states
|
|
- [ ] SemiBold weight (`font-semibold`)
|
|
- [ ] Required indicator (*) in danger color
|
|
- [ ] Red border (`border-danger`)
|
|
- [ ] Error message displayed below field
|
|
- [ ] Error ring on focus (`focus:ring-danger/20`)
|
|
- [ ] Labels align to the right in RTL mode
|
|
- [ ] Input text direction follows locale
|
|
- [ ] Error messages align correctly
|
|
- [ ] Padding swaps appropriately (use `ps-4 pe-4` instead of `px-4` if needed)
|