87 lines
1.7 KiB
Markdown
87 lines
1.7 KiB
Markdown
# Story 9.5: Component Styling - Forms
|
|
|
|
## Epic Reference
|
|
**Epic 9:** Design & Branding Implementation
|
|
|
|
## User Story
|
|
As a **user**,
|
|
I want **consistent, accessible form styling**,
|
|
So that **data entry is intuitive and error states are clear**.
|
|
|
|
## Acceptance Criteria
|
|
|
|
### Input Fields
|
|
- [ ] Border: Charcoal Gray
|
|
- [ ] Focus: Gold border
|
|
- [ ] Border-radius: 6px
|
|
- [ ] Padding: 12px 16px
|
|
|
|
### Textareas
|
|
- [ ] Same styling as inputs
|
|
- [ ] Minimum height: 120px
|
|
|
|
### Select Dropdowns
|
|
- [ ] Custom styled (not native)
|
|
- [ ] Consistent with inputs
|
|
|
|
### Checkboxes & Radios
|
|
- [ ] Custom styled with gold accent
|
|
- [ ] Clear checked state
|
|
|
|
### Labels
|
|
- [ ] SemiBold weight
|
|
- [ ] Required indicator (*)
|
|
|
|
### Error States
|
|
- [ ] Red border
|
|
- [ ] Error message below field
|
|
|
|
### RTL Support
|
|
- [ ] All fields align correctly in RTL
|
|
|
|
## Technical Notes
|
|
|
|
```css
|
|
/* Form field styling */
|
|
.input-field {
|
|
@apply w-full border border-charcoal/30 rounded-md px-4 py-3
|
|
focus:border-gold focus:ring-2 focus:ring-gold/20
|
|
transition-colors outline-none;
|
|
}
|
|
|
|
.input-error {
|
|
@apply border-danger focus:border-danger focus:ring-danger/20;
|
|
}
|
|
|
|
.form-label {
|
|
@apply block text-sm font-semibold text-charcoal mb-2;
|
|
}
|
|
|
|
.form-label-required::after {
|
|
content: ' *';
|
|
@apply text-danger;
|
|
}
|
|
|
|
.error-message {
|
|
@apply text-sm text-danger mt-1;
|
|
}
|
|
|
|
/* Custom checkbox */
|
|
.checkbox-custom {
|
|
@apply w-5 h-5 rounded border-charcoal/30 text-gold
|
|
focus:ring-gold focus:ring-offset-0;
|
|
}
|
|
```
|
|
|
|
## Definition of Done
|
|
- [ ] Input styling consistent
|
|
- [ ] Textarea styling consistent
|
|
- [ ] Select styling works
|
|
- [ ] Checkbox/radio styled
|
|
- [ ] Error states clear
|
|
- [ ] RTL alignment correct
|
|
- [ ] Tests pass
|
|
|
|
## Estimation
|
|
**Complexity:** Medium | **Effort:** 3-4 hours
|