Bernt
78436cecc2
- FOUNDATIONS-v1.0.md: - Freeze contract for Landvex Design System - Scope: Motion, AI Principles, Semantic Colors, Grid, Elevation, Typography, RFC Template, Definition of Done - Reference components: Button, Input, Select, Card (all ~83%) - Invariants: token rules, component rules, accessibility rules, AI rules - Change policy: no new foundation concepts without v2.0 RFC - Versioning: 1.0.x patches, 1.x.0 new components, 2.0.0 new foundations - Compatibility matrix for all foundations and components - Directory reorganization: - docs/design/foundations/ → frozen foundation documents - docs/design/components/ → component RFCs - docs/design/README.md → navigation and structure - Foundation documents moved: - TOKEN_PHILOSOPHY, SEMANTIC_COLOR_SYSTEM, GRID_ELEVATION - AI_DESIGN_PRINCIPLES, COMPONENT_TEMPLATE, RFC_DEFINITION_OF_DONE - DESIGN_ANTI_PATTERNS, COMPONENT_DECISION_TREE, GLOSSARY - BRAND_PALETTE, RELEASE_DEFINITION, SEMANTIC_COLOR_SYSTEM_REVIEW - Component RFCs moved: - RFC-002-Input, RFC-003-Select, RFC-004-Card Rationale: Clear separation between foundations (stable platform) and components (built on top). Foundations v1.0 frozen — components can be added freely within v1.x, but foundations require v2.0 RFC to change. This prevents gradual erosion of the design system architecture.
223 lines
7.0 KiB
Markdown
223 lines
7.0 KiB
Markdown
# 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+)
|