docs: AI Principles restructured + Compliance Matrix + Platform governance + RFC-001 Button
- AI_DESIGN_PRINCIPLES.md:
- Restructured into 5 parts: A. Decision Process, B. Component Selection,
C. Token Usage, D. Design Review, E. Escalation
- All rules use RFC 2119 normative words (MUST/MUST NOT/SHOULD/MAY)
- Clearer escalation path: when to create DDR, when to flag uncertainty
- COMPLIANCE_MATRIX.md:
- Tracks readiness for all 29 components (Tier 1/2/3)
- 6 dimensions: Governance, Tokens, Motion, Accessibility, AI, QA
- Foundation documents tracked separately
- Button at 82% (reference for others)
- docs/platform/README.md:
- Reserved directory for cross-cutting governance
- Future: AI Governance, Product Governance, Review Process,
Quality Gates, Release Governance, Decision Frameworks
- Separates platform governance from design system
- LANDVEX_DESIGN_SPECIFICATION.md:
- Button renamed to RFC-001: Canonical Button Component
- Structured with: Cognitive Purpose, When to Use/NOT Use,
User Expectation, Interaction Contract, Failure Behaviour,
Accessibility Contract, AI Contract
- Sets standard for all future RFC component specs
Rationale: AI rules before components (AI writes components).
Compliance matrix makes progress visible. Platform governance
separates cross-cutting concerns from design system. RFC format
for components ensures production-ready specifications.
This commit is contained in:
@@ -772,56 +772,76 @@ Only then may a new component be defined.
|
||||
|
||||
> **Princip:** Varje komponent har en egen specifikation med states, ARIA, keyboard, touch, animation och acceptance criteria.
|
||||
|
||||
### 8.3.1 Button
|
||||
### RFC-001: Canonical Button Component
|
||||
|
||||
**Cognitive Purpose:** Button exists to trigger actions that modify state or advance workflow. It is the primary interface between user intent and system response.
|
||||
**Status:** ✅ Approved as reference implementation
|
||||
**Tier:** 1 (Canonical)
|
||||
**Inherits From:** — (root component)
|
||||
|
||||
---
|
||||
|
||||
#### Cognitive Purpose
|
||||
|
||||
Button exists to trigger actions that modify state or advance workflow. It is the primary interface between user intent and system response.
|
||||
|
||||
#### When to Use
|
||||
|
||||
**When to use:**
|
||||
- Primary user action (submit, confirm, save)
|
||||
- Form submission
|
||||
- Dialog confirmation
|
||||
- Action that requires explicit user commitment
|
||||
|
||||
**When NOT to use:**
|
||||
#### When NOT to Use
|
||||
|
||||
- Navigation (use Link)
|
||||
- Toggling state (use Switch)
|
||||
- Selecting from options (use Select)
|
||||
- Secondary information reveal (use Accordion)
|
||||
|
||||
**User Expectation:**
|
||||
#### User Expectation
|
||||
|
||||
- Button is clickable
|
||||
- Button responds immediately to press
|
||||
- Button indicates if action is in progress
|
||||
- Button indicates if action is unavailable
|
||||
|
||||
**Interaction Contract:**
|
||||
- Click → Action executes
|
||||
- Hover → Visual feedback (but action does not execute)
|
||||
- Focus → Keyboard can activate
|
||||
- Loading → Action is in progress, further clicks ignored
|
||||
- Disabled → Action is unavailable, reason explained elsewhere
|
||||
#### Interaction Contract
|
||||
|
||||
**Failure Behaviour:**
|
||||
- If action fails: Button returns to default state, error shown elsewhere (not on button)
|
||||
- If network fails: Button remains in loading state until timeout, then error
|
||||
- If validation fails: Button remains enabled, form shows errors
|
||||
| Event | Response |
|
||||
|-------|----------|
|
||||
| Click | Action executes |
|
||||
| Hover | Visual feedback only |
|
||||
| Focus | Keyboard can activate |
|
||||
| Loading | Further clicks ignored |
|
||||
| Disabled | Action unavailable |
|
||||
|
||||
#### Failure Behaviour
|
||||
|
||||
| Scenario | Response |
|
||||
|----------|----------|
|
||||
| Action fails | Button returns to default, error shown elsewhere |
|
||||
| Network fails | Button remains loading until timeout, then error |
|
||||
| Validation fails | Button remains enabled, form shows errors |
|
||||
|
||||
#### Accessibility Contract
|
||||
|
||||
**Accessibility Contract:**
|
||||
- Screen reader announces button role and label
|
||||
- Focus is visible and logical
|
||||
- Disabled state is communicated
|
||||
- Loading state is communicated
|
||||
|
||||
**AI Contract:**
|
||||
- AI chooses Button for primary actions
|
||||
- AI chooses Link for navigation
|
||||
- AI chooses Icon Button for toolbar actions
|
||||
- AI chooses Split Button for primary + secondary options
|
||||
- AI never uses Button for navigation
|
||||
#### AI Contract
|
||||
|
||||
| Scenario | AI Choice |
|
||||
|----------|-----------|
|
||||
| Primary action | Button |
|
||||
| Navigation | Link |
|
||||
| Toolbar action | Icon Button |
|
||||
| Primary + secondary options | Split Button |
|
||||
|
||||
---
|
||||
|
||||
**Token Dependencies:**
|
||||
#### Token Dependencies
|
||||
- `button-primary-bg` → `brand-500`
|
||||
- `button-primary-bg-hover` → `brand-600`
|
||||
- `button-primary-text` → `text-inverse`
|
||||
|
||||
Reference in New Issue
Block a user