docs: RFC-002 Input + Definition of Done + Compliance Matrix update
- RFC_DEFINITION_OF_DONE.md (v1.0, LOCKED): - 12 criteria for every RFC component - Sign-off roles: Author, Reviewer, Automated, QA - Exit criteria: all 12 must pass - RFC-002: Canonical Input Component: - Cognitive Purpose: captures free-form text/numeric data - When to Use/NOT Use: clear boundaries vs Select, Switch, Date Picker - Interaction Contract: click, type, tab, blur, enter, escape - Failure Behaviour: invalid, network, max length, required, disabled - Accessibility Contract: label, focus, error, required, screen reader - AI Contract: when to choose Input vs alternatives - Token Dependencies: 13 tokens (bg, border, text, padding, radius, sizes, states) - Layout, Sizes (sm/md/lg), Variants (default/ghost/filled), States (8 states) - Keyboard, Touch, Motion (with reduced motion) - Anti-Patterns: placeholder as label, validation only on submit, etc. - Related Components: Select, Textarea, Search, Form, Label - DDR References: DDR-001, DDR-002, DDR-003 - Acceptance Criteria: 10 checklist items - COMPLIANCE_MATRIX.md: Input updated to 33% (Governance 🟡, Tokens 🟡, Motion 🟡, Accessibility 🟡, AI ✅, QA ⏳) Rationale: Validate RFC-001 template works for different component types. Definition of Done ensures consistent quality. Compliance Matrix tracks progress visibly.
This commit is contained in:
Bernt
@@ -23,7 +23,7 @@
|
||||
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|
||||
|-----------|------------|--------|--------|---------------|-----|-----|---------|
|
||||
| Button | ✅ | ✅ | ✅ | 🟡 | ✅ | ⏳ | 82% |
|
||||
| Input | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
||||
| Input | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
|
||||
| Select | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
||||
| Card | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
||||
| Modal | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
|
||||
|
||||
@@ -0,0 +1,263 @@
|
||||
# RFC-002: Canonical Input Component
|
||||
|
||||
**Status:** 🟡 Draft — Under review
|
||||
**Tier:** 1 (Canonical)
|
||||
**Inherits From:** — (root component)
|
||||
**Author:** AI Agent
|
||||
**Date:** 2026-07-02
|
||||
|
||||
---
|
||||
|
||||
## 1. COGNITIVE PURPOSE
|
||||
|
||||
Input exists to capture free-form text or numeric data from the user. It is the primary interface for data entry in forms, filters, and search.
|
||||
|
||||
**Design Goal:** The user knows what to enter, where to enter it, and whether the entry is valid — without reading documentation.
|
||||
|
||||
---
|
||||
|
||||
## 2. WHEN TO USE
|
||||
|
||||
- Free-form text entry (name, address, description)
|
||||
- Numeric entry (quantity, price, coordinates)
|
||||
- Password entry
|
||||
- Search queries
|
||||
- Filter values
|
||||
|
||||
## 3. WHEN NOT TO USE
|
||||
|
||||
- Selection from predefined options (use Select)
|
||||
- Boolean toggle (use Switch or Checkbox)
|
||||
- Date/time selection (use Date Picker)
|
||||
- File upload (use File Input)
|
||||
- Rich text (use Rich Text Editor)
|
||||
|
||||
---
|
||||
|
||||
## 4. USER EXPECTATION
|
||||
|
||||
- Input field is identifiable as editable
|
||||
- Placeholder text hints at expected format
|
||||
- Focus state indicates where typing will appear
|
||||
- Validation errors are shown immediately or on blur
|
||||
- Required fields are marked
|
||||
- Disabled fields are visually distinct
|
||||
|
||||
---
|
||||
|
||||
## 5. INTERACTION CONTRACT
|
||||
|
||||
| Event | Response |
|
||||
|-------|----------|
|
||||
| Click | Focus input, place cursor |
|
||||
| Type | Character appears at cursor position |
|
||||
| Tab | Move focus to next field |
|
||||
| Shift+Tab | Move focus to previous field |
|
||||
| Blur | Validate (if configured), show error if invalid |
|
||||
| Enter | Submit form (if single-line), new line (if multi-line) |
|
||||
| Escape | Clear input (if configured), or cancel |
|
||||
|
||||
---
|
||||
|
||||
## 6. FAILURE BEHAVIOUR
|
||||
|
||||
| Scenario | Response |
|
||||
|----------|----------|
|
||||
| Invalid input on blur | Show error message below input, red border |
|
||||
| Invalid input on submit | Show error, scroll to first error, focus it |
|
||||
| Network validation fails | Show error, allow retry |
|
||||
| Input exceeds max length | Prevent further input, show character count |
|
||||
| Input is required but empty | Show error on blur or submit |
|
||||
| Input is disabled | Ignore all interactions, show disabled state |
|
||||
|
||||
---
|
||||
|
||||
## 7. ACCESSIBILITY CONTRACT
|
||||
|
||||
- **Label:** Every input MUST have an associated `<label>` or `aria-label`
|
||||
- **Focus:** Focus ring MUST be visible (WCAG 2.4.7)
|
||||
- **Error:** Error message MUST be associated with `aria-describedby`
|
||||
- **Required:** Required state MUST be communicated with `aria-required` or `required` attribute
|
||||
- **Screen reader:** MUST announce label, current value, and error state
|
||||
- **Color:** Error state MUST NOT rely on color alone (icon or text required)
|
||||
|
||||
---
|
||||
|
||||
## 8. AI CONTRACT
|
||||
|
||||
| Scenario | AI Choice |
|
||||
|----------|-----------|
|
||||
| Free-form text entry | Input |
|
||||
| Predefined options | Select |
|
||||
| Boolean toggle | Switch / Checkbox |
|
||||
| Date/time | Date Picker |
|
||||
| File upload | File Input |
|
||||
| Search with suggestions | Search (specialized component) |
|
||||
|
||||
---
|
||||
|
||||
## 9. TOKEN DEPENDENCIES
|
||||
|
||||
| Token | Semantic Reference | Usage |
|
||||
|-------|-------------------|-------|
|
||||
| `input-bg` | `surface-primary` | Background |
|
||||
| `input-border` | `border-default` | Default border |
|
||||
| `input-border-focus` | `brand-500` | Focus border |
|
||||
| `input-border-error` | `semantic-red-500` | Error border |
|
||||
| `input-text` | `text-primary` | Input text |
|
||||
| `input-placeholder` | `text-muted` | Placeholder text |
|
||||
| `input-padding` | `space-3` | Internal padding |
|
||||
| `input-radius` | `radius-md` | Border radius |
|
||||
| `input-height-sm` | `space-8` | Small height (32px) |
|
||||
| `input-height-md` | `space-10` | Medium height (40px) |
|
||||
| `input-height-lg` | `space-12` | Large height (48px) |
|
||||
| `input-error-bg` | `semantic-red-50` | Error background tint |
|
||||
| `input-disabled-bg` | `surface-secondary` | Disabled background |
|
||||
| `input-disabled-text` | `text-muted` | Disabled text |
|
||||
|
||||
---
|
||||
|
||||
## 10. LAYOUT
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Label (optional) │
|
||||
├─────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────┐ │
|
||||
│ │ Placeholder text... │ │
|
||||
│ └─────────────────────────────────┘ │
|
||||
│ Helper text / Error message │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
- **Label:** Above input, left-aligned, `text-sm`, `font-medium`
|
||||
- **Input:** Full width of container, padding `space-3`
|
||||
- **Helper/Error:** Below input, `text-xs`, `text-muted` (helper) or `semantic-red-500` (error)
|
||||
- **Gap:** `space-1` between label and input, `space-1` between input and helper
|
||||
|
||||
---
|
||||
|
||||
## 11. SIZES
|
||||
|
||||
| Size | Height | Font Size | Padding | Usage |
|
||||
|------|--------|-----------|---------|-------|
|
||||
| Small | 32px | 14px | `space-2` | Dense forms, tables |
|
||||
| Medium | 40px | 16px | `space-3` | Default, most forms |
|
||||
| Large | 48px | 18px | `space-4` | Mobile, touch-first |
|
||||
|
||||
---
|
||||
|
||||
## 12. VARIANTS
|
||||
|
||||
| Variant | Visual | Usage |
|
||||
|---------|--------|-------|
|
||||
| Default | Border, background | Standard form input |
|
||||
| Ghost | No border, underline only | Minimal UI, filters |
|
||||
| Filled | Solid background, no border | High-contrast forms |
|
||||
|
||||
---
|
||||
|
||||
## 13. STATES
|
||||
|
||||
| State | Visual | Motion |
|
||||
|-------|--------|--------|
|
||||
| Default | `input-border`, `input-bg` | — |
|
||||
| Hover | Border darkens slightly | `duration-instant` |
|
||||
| Focus | `input-border-focus`, focus ring | `duration-instant` |
|
||||
| Active | Same as focus | — |
|
||||
| Disabled | `input-disabled-bg`, `input-disabled-text` | — |
|
||||
| Error | `input-border-error`, `input-error-bg` | `duration-interaction` |
|
||||
| Loading | Spinner inside input, disabled | `duration-attention` |
|
||||
| Valid | Green checkmark icon (optional) | `duration-interaction` |
|
||||
|
||||
---
|
||||
|
||||
## 14. KEYBOARD
|
||||
|
||||
| Key | Action |
|
||||
|-----|--------|
|
||||
| `Tab` | Move focus to next field |
|
||||
| `Shift+Tab` | Move focus to previous field |
|
||||
| `Enter` | Submit form (single-line) |
|
||||
| `Escape` | Clear input (if clearable) |
|
||||
| `Ctrl+A` | Select all text |
|
||||
| `Ctrl+C/V/X` | Copy/paste/cut |
|
||||
|
||||
---
|
||||
|
||||
## 15. TOUCH
|
||||
|
||||
- Touch target: Minimum 40px height (Medium size)
|
||||
- Active state: Brief background tint
|
||||
- No gesture support (no swipe, pinch)
|
||||
|
||||
---
|
||||
|
||||
## 16. MOTION
|
||||
|
||||
| Transition | Animation | Duration | Easing |
|
||||
|-----------|-----------|----------|--------|
|
||||
| Focus | Border color change | `duration-instant` | `ease-out` |
|
||||
| Error appear | Border + background tint | `duration-interaction` | `ease-out` |
|
||||
| Error disappear | Revert to default | `duration-interaction` | `ease-in` |
|
||||
| Loading spinner | Rotate | `duration-background` | `linear` |
|
||||
|
||||
**Reduced Motion:** All transitions become instant (`duration-instant`).
|
||||
|
||||
---
|
||||
|
||||
## 17. ANTI-PATTERNS
|
||||
|
||||
- ❌ **Placeholder as label:** Placeholder disappears on typing, user loses context
|
||||
- ❌ **Validation only on submit:** User should know immediately if input is wrong
|
||||
- ❌ **No visual feedback on focus:** User cannot see where they are typing
|
||||
- ❌ **Error message in color only:** Screen reader users miss it
|
||||
- ❌ **Input without label:** Accessibility failure, unclear purpose
|
||||
- ❌ **Too many variations:** Stick to Default, Ghost, Filled
|
||||
|
||||
---
|
||||
|
||||
## 18. RELATED COMPONENTS
|
||||
|
||||
- **Select** — Predefined options instead of free-form
|
||||
- **Textarea** — Multi-line text entry
|
||||
- **Search** — Input with autocomplete and suggestions
|
||||
- **Form** — Groups inputs with validation logic
|
||||
- **Label** — Associated text for input
|
||||
|
||||
---
|
||||
|
||||
## 19. DDR REFERENCES
|
||||
|
||||
- **DDR-001:** Device Adaptive over Desktop First (affects input sizing)
|
||||
- **DDR-002:** Information-level typography (affects label and helper text)
|
||||
- **DDR-003:** Semantic color system (affects error and disabled states)
|
||||
|
||||
---
|
||||
|
||||
## 20. ACCEPTANCE CRITERIA
|
||||
|
||||
- [ ] All 12 Definition of Done criteria met
|
||||
- [ ] Works with screen reader (NVDA, VoiceOver, JAWS)
|
||||
- [ ] Keyboard navigation works (Tab, Shift+Tab, Enter, Escape)
|
||||
- [ ] Touch target minimum 40px on mobile
|
||||
- [ ] Error state visible without color alone
|
||||
- [ ] Placeholder does not replace label
|
||||
- [ ] Loading state prevents duplicate submission
|
||||
- [ ] Disabled state clearly distinct from enabled
|
||||
- [ ] Focus ring visible and logical
|
||||
- [ ] Reduced motion respected
|
||||
|
||||
---
|
||||
|
||||
## ÄNDRINGSHISTORIA
|
||||
|
||||
| Version | Datum | Beskrivning |
|
||||
|---------|-------|-------------|
|
||||
| 1.0 | 2026-07-02 | Initial RFC-002 following RFC-001 structure |
|
||||
|
||||
---
|
||||
|
||||
## STATUS
|
||||
|
||||
**DRAFT — Awaiting review**
|
||||
@@ -0,0 +1,60 @@
|
||||
# RFC DEFINITION OF DONE
|
||||
|
||||
**Quality Gate for Every RFC Component**
|
||||
|
||||
| | |
|
||||
|---|---|
|
||||
| **Version** | 1.0 |
|
||||
| **Status** | LOCKED |
|
||||
| **Scope** | All Tier 1, 2, 3 components |
|
||||
|
||||
---
|
||||
|
||||
## Checklist
|
||||
|
||||
| # | Criterion | Requirement | Verified By |
|
||||
|---|-----------|-------------|-------------|
|
||||
| 1 | **RFC Structure** | 100% complete per `COMPONENT_TEMPLATE.md` | Self-check + Review |
|
||||
| 2 | **Cognitive Purpose** | Documented — what problem does this solve? | Self-check + Review |
|
||||
| 3 | **User Expectation** | Documented — what does the user expect? | Self-check + Review |
|
||||
| 4 | **Interaction Contract** | Documented — events, responses, state machine | Self-check + Review |
|
||||
| 5 | **Failure Behaviour** | Documented — every failure mode handled | Self-check + Review |
|
||||
| 6 | **Accessibility Contract** | Documented — WCAG 2.1 AA compliance | Self-check + Review |
|
||||
| 7 | **AI Contract** | Documented — when AI chooses this component | Self-check + Review |
|
||||
| 8 | **Token Dependencies** | All tokens listed, no hardcoded values | Automated lint |
|
||||
| 9 | **Motion** | Follows Motion System v1, reduced motion included | Self-check + Review |
|
||||
| 10 | **Anti-Patterns** | Relevant anti-patterns listed and avoided | Self-check + Review |
|
||||
| 11 | **Compliance Matrix** | Updated in same PR | Self-check |
|
||||
| 12 | **Reference Example** | Working implementation or Storybook story | Implementation |
|
||||
|
||||
## Sign-Off
|
||||
|
||||
| Role | Responsibility |
|
||||
|------|---------------|
|
||||
| **Author** | Self-check all criteria before requesting review |
|
||||
| **Reviewer** | Verify criteria 1–7, 9–10 |
|
||||
| **Automated** | Verify criteria 8 (lint) |
|
||||
| **QA** | Verify criterion 12 |
|
||||
|
||||
## Exit Criteria
|
||||
|
||||
**MUST** pass all 12 criteria before component is marked "Complete" in Compliance Matrix.
|
||||
|
||||
**MAY** merge with criteria 12 pending if implementation is in separate PR.
|
||||
|
||||
---
|
||||
|
||||
## ÄNDRINGSHISTORIA
|
||||
|
||||
| Version | Datum | Beskrivning |
|
||||
|---------|-------|-------------|
|
||||
| 1.0 | 2026-07-02 | Initial Definition of Done for RFC components |
|
||||
|
||||
---
|
||||
|
||||
## STATUS
|
||||
|
||||
**LOCKED**
|
||||
|
||||
- Mindre revideringar: 1.x-serien
|
||||
- Brytande ändringar: Kräver Architecture Review, ny major-version (2.0+)
|
||||
Reference in New Issue
Block a user