platform-admin/boc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Motion System v1 + Button gold standard + Component Template + Decision Tree

Browse Source 
- Motion System v1 (chapter 5):
  - Motion principles: when to animate, when NOT to animate
  - Duration scale (instant to slower: 0ms to 500ms)
  - Easing functions (linear, in, out, in-out, spring)
  - Component-specific motion: Button, Modal, Drawer, Map, Skeleton,
    Progress, Error/Success
  - Reduced motion support (prefers-reduced-motion)
  - Interruption rules (animations must be interruptible)
  - Error/success animations (shake, checkmark, pulse)

- Button gold standard (chapter 8.3.1):
  - Full specification: purpose, design goal, token dependencies,
    layout, sizes, variants, states, keyboard, touch, accessibility,
    anti-patterns, related components, DDR references
  - Sets the bar for all future component specifications

- COMPONENT_TEMPLATE.md (v1.0, LOCKED):
  - Standard template for all component specifications
  - Sections: purpose, tokens, layout, sizes, variants, states,
    keyboard, touch, accessibility, motion, acceptance criteria,
    anti-patterns, related components, DDR references

- COMPONENT_DECISION_TREE.md (v1.0, LOCKED):
  - Decision trees for: user actions, information display, user input,
    feedback, navigation, Landvex-specific
  - Quick reference table mapping needs to components
  - Prevents invention of unnecessary components

Rationale: Motion before brand (affects every interaction). Button as
reference implementation. Template ensures consistency. Decision tree
guides AI agents and developers to correct component choice.
This commit is contained in:
Bernt
2026-07-02 08:53:20 +00:00
parent 48236658e8
commit 1e40d384ca
3 changed files with 547 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/COMPONENT_DECISION_TREE.md
+222
View File
@@ -0,0 +1,222 @@
# COMPONENT DECISION TREE
**Which Component Should I Use?**
| | |
|---|---|
| **Version** | 1.0 |
| **Status** | LOCKED |
| **Scope** | All Landvex & quiXzoom products |
---
## How to Use This Document
Start at the top. Answer each question. Follow the path to the recommended component.
If no existing component fits, apply the **New Component Rule** (see Design Specification §8.2):
1. Can an existing component be used?
2. Can a variant be created?
3. Can a modifier be used?
4. Can a new state solve the problem?
Only then define a new component.
---
## User Actions
```
Need user action?
├── Yes → Primary action?
│ ├── Yes → Button (Primary)
│ └── No → Multiple options?
│ ├── Yes → Select / Dropdown
│ └── No → Toggle state?
│ ├── Yes → Switch / Checkbox
│ └── No → Navigation?
│ ├── Yes → Navigation / Sidebar
│ └── No → Search?
│ ├── Yes → Search
│ └── No → Command Palette
└── No → Need information display?
└── Yes → See Information Display
```
## Information Display
```
Need to display information?
├── Yes → Tabular data?
│ ├── Yes → Simple table?
│ │ ├── Yes → Table
│ │ └── No → Sorting, filtering, pagination?
│ │ ├── Yes → Data Grid
│ │ └── No → Table
│ └── No → Spatial data?
│ ├── Yes → Map Panel
│ └── No → Summary metric?
│ ├── Yes → KPI Card
│ └── No → Grouped content?
│ ├── Yes → Card / Accordion
│ └── No → Single item?
│ ├── Yes → Badge / Alert
│ └── No → Tooltip
└── No → Need user input?
└── Yes → See User Input
```
## User Input
```
Need user input?
├── Yes → Text input?
│ ├── Yes → Single line?
│ │ ├── Yes → Input
│ │ └── No → Textarea
│ └── No → Choice from options?
│ ├── Yes → Single choice?
│ │ ├── Yes → Radio / Select
│ │ └── No → Multiple choice?
│ │ ├── Yes → Checkbox / Multi-select
│ │ └── No → Toggle?
│ │ ├── Yes → Switch
│ │ └── No → Date / time?
│ │ ├── Yes → Date Picker
│ │ └── No → Coordinate?
│ │ ├── Yes → Coordinate Picker
│ │ └── No → File?
│ │ ├── Yes → File Upload
│ │ └── No → Input (custom)
│ └── No → Search / filter?
│ ├── Yes → Search
│ └── No → Command Palette
└── No → Need feedback?
└── Yes → See Feedback
```
## Feedback
```
Need to provide feedback?
├── Yes → Blocking action?
│ ├── Yes → Modal / Dialog
│ └── No → Transient notification?
│ ├── Yes → Toast
│ └── No → Contextual message?
│ ├── Yes → Alert (inline) / Tooltip
│ └── No → Status indicator?
│ ├── Yes → Badge
│ └── No → Progress?
│ ├── Yes → Progress / Skeleton
│ └── No → Empty State
└── No → Navigation or structure?
└── Yes → See Navigation
```
## Navigation
```
Need navigation?
├── Yes → Primary navigation?
│ ├── Yes → Top-level sections?
│ │ ├── Yes → Navigation
│ │ └── No → Sidebar
│ └── No → Secondary navigation?
│ ├── Yes → Tabs / Breadcrumb
│ └── No → Contextual navigation?
│ ├── Yes → Pagination / Menu
│ └── No → Command Palette
└── No → Consider: is this a new component?
└── Apply New Component Rule
```
## Landvex-Specific (Domain Components)
```
Need Landvex-specific component?
├── Yes → Geospatial data?
│ ├── Yes → Map visualization?
│ │ ├── Yes → Map Panel
│ │ └── No → Layer control?
│ │ ├── Yes → Layer Selector
│ │ └── No → Feature inspection?
│ │ ├── Yes → Geospatial Inspector
│ │ └── No → Coordinate input?
│ │ └── Yes → Coordinate Picker
│ └── No → Mission data?
│ ├── Yes → Mission status?
│ │ ├── Yes → Mission Status
│ │ └── No → Mission timeline?
│ │ └── Yes → Timeline Panel
│ └── No → Asset data?
│ ├── Yes → Asset summary?
│ │ ├── Yes → Asset Summary
│ │ └── No → Dataset preview?
│ │ └── Yes → Dataset Card
│ └── No → KPI display?
│ └── Yes → KPI Card
└── No → See general decision trees above
```
---
## Quick Reference Table
| Need | Component | Tier |
|------|-----------|------|
| Primary action | Button | 1 |
| Text input | Input | 1 |
| Choice from list | Select | 1 |
| Content container | Card | 1 |
| Overlay dialog | Modal | 1 |
| Navigation | Navigation / Sidebar | 1 |
| Tabular data | Table / Data Grid | 1 |
| Search | Search | 1 |
| Map display | Map Panel | 1 |
| Status indicator | Badge | 2 |
| Message | Alert / Toast | 2 |
| Help text | Tooltip | 2 |
| Collapsible content | Accordion | 2 |
| Content switching | Tabs | 2 |
| Location indicator | Breadcrumb | 2 |
| Page navigation | Pagination | 2 |
| No content | Empty State | 2 |
| Loading | Skeleton | 2 |
| Key metric | KPI Card | 3 |
| Map tools | Map Overlay Panel | 3 |
| Layer control | Layer Selector | 3 |
| Mission state | Mission Status | 3 |
| Data preview | Dataset Card | 3 |
| Feature details | Geospatial Inspector | 3 |
| Asset overview | Asset Summary | 3 |
| Coordinate input | Coordinate Picker | 3 |
| Time data | Timeline Panel | 3 |
---
## Relationship to Other Documents
| Document | Role |
|----------|------|
| `LANDVEX_DESIGN_SPECIFICATION.md` §8 | Component tiers and inheritance |
| `COMPONENT_TEMPLATE.md` | How to document a component |
| `DESIGN_ANTI_PATTERNS.md` | What not to do |
| `COMPONENT_DECISION_TREE.md` | Which component to use |
---
## ÄNDRINGSHISTORIA
| Version | Datum | Beskrivning |
|---------|-------|-------------|
| 1.0 | 2026-07-02 | Initial decision trees for actions, information, input, feedback, navigation, and Landvex-specific |
---
## STATUS
**LOCKED**
- Mindre revideringar: 1.x-serien
- Brytande ändringar: Kräver Architecture Review, ny major-version (2.0+)