From a41217751281ddb1c82c9345b09ab8958aa3a0a9 Mon Sep 17 00:00:00 2001 From: Bernt Date: Thu, 2 Jul 2026 08:46:07 +0000 Subject: [PATCH] docs: Component Architecture - Tiers, Inheritance, Minimalism - Add Component Architecture (chapter 8): - Tier 1 Canonical: Button, Input, Select, Card, Modal, Navigation, Table, Data Grid, Search, Map Panel (10 components) - Tier 2 Derived: Badge, Alert, Toast, Tooltip, Accordion, Tabs, Breadcrumb, Pagination, Empty State, Skeleton (10 components) - Tier 3 Domain: KPI Card, Map Overlay Panel, Layer Selector, Mission Status, Dataset Card, Geospatial Inspector, Asset Summary, Coordinate Picker, Timeline Panel (9 components) - Component Inheritance: visual hierarchy showing parent-child relationships (Button to Icon Button to Split Button, etc.) - New Component Rule: 4-step checklist before creating anything new - Principle: system shall be minimal, not maximal - Restructure component numbering: 8.3.x for specifications - Update table of contents with new structure Rationale: Components before colors (component structure drives color usage). Tiers prevent bloat. Inheritance prevents duplication. Minimalism principle reduces complexity. --- docs/design/LANDVEX_DESIGN_SPECIFICATION.md | 137 +++++++++++++++++--- 1 file changed, 119 insertions(+), 18 deletions(-) diff --git a/docs/design/LANDVEX_DESIGN_SPECIFICATION.md b/docs/design/LANDVEX_DESIGN_SPECIFICATION.md index be76745a1..387020e34 100644 --- a/docs/design/LANDVEX_DESIGN_SPECIFICATION.md +++ b/docs/design/LANDVEX_DESIGN_SPECIFICATION.md @@ -54,7 +54,11 @@ See `TOKEN_PHILOSOPHY.md` for the complete token governance rules. 7. [Iconography](#7-iconography) ### PART C — COMPONENTS -8. [Components](#8-components) +8. [Component Architecture](#8-component-architecture) + - 8.0 Component Tiers (Tier 1/2/3) + - 8.1 Component Inheritance + - 8.2 New Component Rule + - 8.3 Component Specifications 9. [Maps & Geospatial Layer](#9-maps--geospatial-layer) 10. [Accessibility](#10-accessibility) 11. [Responsive Behavior](#11-responsive-behavior) @@ -513,13 +517,110 @@ Dedicated palette for geospatial visualization: ## PART C — COMPONENTS -## 8. Components +## 8. Component Architecture -> **Status:** ⏳ Ej påbörjad +> **Status:** ✅ Specified +> **Principle:** The system shall be minimal, not maximal. Extend only when a recurring need cannot be solved with existing components. + +### 8.0 Component Tiers + +#### Tier 1 — Canonical Components + +These define the entire design system. If these are correct, everything else follows. + +| Component | Purpose | Inherits From | +|-----------|---------|---------------| +| **Button** | Primary action trigger | — | +| **Input** | Text entry, form fields | — | +| **Select** | Choice from predefined options | — | +| **Card** | Content container, elevation | — | +| **Modal** | Overlay dialog, focus trap | — | +| **Navigation** | Primary wayfinding | — | +| **Table** | Tabular data display | — | +| **Data Grid** | Complex data with sorting/filtering | Table | +| **Search** | Find and filter | Input | +| **Map Panel** | Geospatial information overlay | Card | + +#### Tier 2 — Derived Components + +These build primarily on Tier 1. They introduce no new visual rules. + +| Component | Purpose | Inherits From | +|-----------|---------|---------------| +| **Badge** | Status indicator | — | +| **Alert** | Contextual message | Card | +| **Toast** | Transient notification | Card | +| **Tooltip** | Contextual help | — | +| **Accordion** | Collapsible content sections | Card | +| **Tabs** | Content switching | — | +| **Breadcrumb** | Location indicator | — | +| **Pagination** | Page navigation | Button | +| **Empty State** | No content placeholder | Card | +| **Skeleton** | Loading placeholder | — | + +#### Tier 3 — Domain Components + +Landvex-specific. They explicitly build on Tier 1 and Tier 2. No new visual rules. + +| Component | Purpose | Inherits From | +|-----------|---------|---------------| +| **KPI Card** | Key metric display | Card | +| **Map Overlay Panel** | Geospatial tool panel | Map Panel | +| **Layer Selector** | Map layer toggle | Select | +| **Mission Status** | Mission state indicator | Badge | +| **Dataset Card** | Data source preview | Card | +| **Geospatial Inspector** | Feature detail view | Card | +| **Asset Summary** | Asset overview panel | Card | +| **Coordinate Picker** | Lat/long input | Input | +| **Timeline Panel** | Temporal data view | Card | + +### 8.1 Component Inheritance + +Components inherit visual properties, states, and behavior from their parent. Child components may add but never override parent rules. + +``` +Button +├── Icon Button (adds icon, keeps all Button states) +├── Split Button (adds dropdown, keeps primary action) +└── Floating Action Button (fixed position, keeps Button behavior) + +Card +├── KPI Card (adds metric layout, keeps Card elevation) +├── Dataset Card (adds metadata, keeps Card structure) +└── Mission Card (adds status, keeps Card padding) + +Table +├── Data Grid (adds sorting/filtering, keeps Table structure) +├── Inspection Grid (adds checkboxes, keeps Data Grid behavior) +└── Asset Grid (adds thumbnails, keeps Data Grid behavior) +``` + +### 8.2 New Component Rule + +**New component is the last resort.** + +Before a new component may be created, verify: + +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 may a new component be defined. + +**New components must:** +- Inherit from an existing component when possible +- Follow the three-tier hierarchy +- Include full specification (states, ARIA, keyboard, touch, animation, acceptance criteria) +- Pass Design Review Gate + +--- + +## 8.3 Component Specifications > **Princip:** Varje komponent har en egen specifikation med states, ARIA, keyboard, touch, animation och acceptance criteria. -### 8.1 Button +### 8.3.1 Button **States:** - Default @@ -562,33 +663,33 @@ Dedicated palette for geospatial visualization: - [ ] Disabled state is not focusable - [ ] Touch target meets 44px minimum -### 8.2 Input / Text Field +### 8.3.2 Input / Text Field -### 8.3 Select / Dropdown +### 8.3.3 Select / Dropdown -### 8.4 Checkbox +### 8.3.4 Checkbox -### 8.5 Radio Button +### 8.3.5 Radio Button -### 8.6 Toggle / Switch +### 8.3.6 Toggle / Switch -### 8.7 Card +### 8.3.7 Card -### 8.8 Modal / Dialog +### 8.3.8 Modal / Dialog -### 8.9 Toast / Notification +### 8.3.9 Toast / Notification -### 8.10 Tooltip +### 8.3.10 Tooltip -### 8.11 Data Table +### 8.3.11 Data Table -### 8.12 Tabs +### 8.3.12 Tabs -### 8.13 Navigation +### 8.3.13 Navigation -### 8.14 Sidebar +### 8.3.14 Sidebar -### 8.15 Map Overlay +### 8.3.15 Map Overlay ---