344 lines
14 KiB
Markdown
344 lines
14 KiB
Markdown
# Gruppenregeln
|
|
|
|
Status: Entwurf
|
|
|
|
Gruppenregeln gelten fuer Komponenten-Bereiche wie Actions, Form Inputs, Data Display, Feedback, Overlays, Navigation, Layout, Typography, Utility und Patterns.
|
|
|
|
Der Komponenten-Index ist nur eine Link- und Statusuebersicht. Wiederverwendbare Regeln stehen hier oder in [[03_Benennung]].
|
|
|
|
## Format fuer neue Regeln
|
|
|
|
Neue Gruppenregeln sollen diese Struktur nutzen:
|
|
|
|
```md
|
|
## Bereichsname
|
|
|
|
### Regel: [kurzer Regelname]
|
|
|
|
Status: Offen
|
|
|
|
Gilt fuer:
|
|
|
|
- [[Components/Component Name]]
|
|
|
|
Komponenten-Notizen:
|
|
|
|
| Komponente | Notiz | Status |
|
|
| --- | --- | --- |
|
|
| [[Components/Component Name]] | | Offen |
|
|
```
|
|
|
|
## Bereiche
|
|
|
|
| Bereich | Tag | Zweck |
|
|
| --- | --- | --- |
|
|
| Actions | `#Actions` | Aktions-Komponenten wie Buttons und Links |
|
|
| Form Inputs | `#FormInputs` | Inputs, Selects, Toggles, Upload, Field Groups |
|
|
| Data Display | `#DataDisplay` | Tables, Badges, Avatars, Cards, Empty States |
|
|
| Feedback | `#Feedback` | Alerts, Toasts, Loader, Skeletons, Error States |
|
|
| Overlays | `#Overlays` | Dialoge, Drawer, Side Panels, Confirmation Flows |
|
|
| Navigation | `#Navigation` | Sidebar, Tabs, Breadcrumbs, Page Navigation |
|
|
| Layout | `#Layout` | Cards, Divider, Collapsibles, Page Templates |
|
|
| Typography | `#Typography` | Labels und textbezogene Komponenten |
|
|
| Utility | `#Utility` | Utility Controls wie Theme Toggle |
|
|
| Patterns | `#Patterns` | Zusammengesetzte Patterns aus mehreren Komponenten |
|
|
|
|
## Uebergreifende Control-Regeln
|
|
|
|
### Regel: Control-Hoehen fuer Button und Form Inputs
|
|
|
|
Status: Teilweise entschieden
|
|
|
|
Diese Regel definiert konkrete Hoehen fuer Button und ausgewaehlte Form-Input-Controls.
|
|
Die Size-Namen selbst sind global in [[03_Benennung]] definiert.
|
|
Feste Hoehen sind bisher nur fuer `Small`, `Medium` und `Large` entschieden.
|
|
Sie gilt fuer einzeilige Controls und Trigger, nicht fuer mehrzeilige oder stark spezialisierte Eingabeflaechen.
|
|
|
|
| Size | Height | Height Mode | Status |
|
|
| --- | --- | --- | --- |
|
|
| `3X Small` | Offen | Offen | Werte offen |
|
|
| `2X Small` | Offen | Offen | Werte offen |
|
|
| `Extra Small` | Offen | Offen | Werte offen |
|
|
| `Small` | 32px | Exact | Entschieden |
|
|
| `Medium` | 36px | Exact | Entschieden |
|
|
| `Large` | 48px | Exact | Entschieden |
|
|
| `Extra Large` | Offen | Offen | Werte offen |
|
|
| `2X Large` | Offen | Offen | Werte offen |
|
|
| `3X Large` | Offen | Offen | Werte offen |
|
|
|
|
Gilt fuer:
|
|
|
|
- [[Components/Button]]
|
|
- [[Components/Button Group]]
|
|
- [[Components/Icon Button]]
|
|
- [[Components/Text Input]]
|
|
- [[Components/Number Input]]
|
|
- [[Components/Select]]
|
|
- [[Components/Multiselect]]
|
|
- [[Components/Multiselect Tags]]
|
|
- [[Components/Combobox Autocomplete]]
|
|
- [[Components/Search Input]]
|
|
- [[Components/Date Picker]]
|
|
- [[Components/Toggle Group Segmented Control]]
|
|
|
|
Komponenten-Notizen:
|
|
|
|
| Komponente | Notiz | Status |
|
|
| --- | --- | --- |
|
|
| [[Components/Button]] | Referenz fuer Action-Control-Hoehen | Entschieden |
|
|
| [[Components/Button Group]] | Einzelne Buttons folgen derselben Size-Regel | Entschieden |
|
|
| [[Components/Icon Button]] | Square Control folgt derselben Size-Regel; Breite entspricht Hoehe | Entschieden |
|
|
| [[Components/Text Input]] | Input-Hoehe folgt derselben Size-Regel | Entschieden |
|
|
| [[Components/Number Input]] | Einzeiliger Input folgt derselben Size-Regel | Entschieden |
|
|
| [[Components/Select]] | Select-Hoehe folgt derselben Size-Regel | Entschieden |
|
|
| [[Components/Multiselect]] | Control-Hoehe folgt derselben Size-Regel | Entschieden |
|
|
| [[Components/Multiselect Tags]] | Tags/Chips muessen zur Control-Hoehe passen | Offen |
|
|
| [[Components/Combobox Autocomplete]] | Trigger/Input folgt derselben Size-Regel | Entschieden |
|
|
| [[Components/Search Input]] | Suchfeld folgt derselben Size-Regel | Entschieden |
|
|
| [[Components/Date Picker]] | Single-date Trigger folgt derselben Size-Regel; Range-Version separat klaeren | Teilweise entschieden |
|
|
| [[Components/Toggle Group Segmented Control]] | Erstmal gleiche Hoehen; spaeter visuell pruefen | Offen |
|
|
|
|
## Actions
|
|
|
|
### Regel: Actions nutzen Action-Sprache
|
|
|
|
Status: Offen
|
|
|
|
Gilt fuer:
|
|
|
|
- [[Components/Button]]
|
|
- [[Components/Button Group]]
|
|
- [[Components/Link]]
|
|
|
|
Komponenten-Notizen:
|
|
|
|
| Komponente | Notiz | Status |
|
|
| --- | --- | --- |
|
|
| [[Components/Button]] | Hauptkomponente fuer Actions | Offen |
|
|
| [[Components/Button Group]] | Gruppierte Actions | Offen |
|
|
| [[Components/Link]] | Unterschied zwischen Link- und Button-Verhalten klaeren | Offen |
|
|
|
|
## Form Inputs
|
|
|
|
### Regel: Form Inputs teilen eine Field-Anatomy
|
|
|
|
Status: Entschieden
|
|
|
|
Gilt fuer Komponenten mit `#FormInputs`, wenn sie in einem Field-Kontext mit Label, Help text oder Message verwendet werden.
|
|
Die Regel steuert die aeussere Field-Struktur, nicht die interne Geometrie des eigentlichen Controls.
|
|
|
|
Field-Anatomy:
|
|
|
|
| Element | Name in der Konvention | Position | Typografie / Abstand | Status |
|
|
| --- | --- | --- | --- | --- |
|
|
| Label | `label` | Oberhalb von Help text oder Control | Abstand zu `helpText`: 8px | Entschieden |
|
|
| Help text | `helpText` | Zwischen Label und Control | Abstand zum Control: 6px | Entschieden |
|
|
| Input / Control | Komponenten-Control | Zwischen Help text und Message | Abstand zu `message`: 4px | Entschieden |
|
|
| Message | `message` | Unterhalb des Controls | 12px, Medium | Entschieden |
|
|
|
|
Naming:
|
|
|
|
- Der untere Field-Text heisst immer `message`.
|
|
- `message` wird fuer Props, Slots, Layer-Namen und Dokumentation verwendet.
|
|
- Der untere Field-Text heisst nicht `label`, `helper`, `helpText` oder `massage`.
|
|
- `helpText` ist ausschliesslich der Hilfetext oberhalb des Controls.
|
|
|
|
Komponenten-Notizen:
|
|
|
|
| Komponente | Notiz | Status |
|
|
| --- | --- | --- |
|
|
| [[Components/Text Input]] | Hauptreferenz fuer Field-Anatomy | Entschieden |
|
|
| [[Components/Textarea]] | Mehrzeilige Texteingabe; nutzt dieselbe aeussere Field-Anatomy | Entschieden |
|
|
| [[Components/Number Input]] | Einzeiliges Zahlenfeld mit optionalen Steppern, Prefix oder Suffix | Entschieden |
|
|
| [[Components/Select]] | Auswahlfeld | Entschieden |
|
|
| [[Components/Multiselect]] | Auswahlfeld mit mehreren Werten | Entschieden |
|
|
| [[Components/Multiselect Tags]] | Mehrfachauswahl mit sichtbaren Tags/Chips | Entschieden |
|
|
| [[Components/Combobox Autocomplete]] | Textfeld mit Such- und Auswahlverhalten | Entschieden |
|
|
| [[Components/Search Input]] | Spezialisierte Texteingabe fuer Suche | Entschieden |
|
|
| [[Components/Date Picker]] | Single-date Field nutzt die Field-Anatomy; Range-Version separat klaeren | Teilweise entschieden |
|
|
| [[Components/File Upload]] | Spezialisierter Input mit gleicher aeusserer Field-Anatomy | Entschieden |
|
|
| [[Components/Input OTP Pin Code]] | Spezialisiertes Code-Field mit gleicher aeusserer Field-Anatomy | Entschieden |
|
|
| [[Components/Form Group Input Group]] | Wrapper fuer Label, Help text, Control und Message | Entschieden |
|
|
| [[Components/Checkbox]] | Nutzt die Field-Anatomy nur, wenn Label, Help text oder Message im Field-Kontext vorkommen | Entschieden |
|
|
| [[Components/Checkbox Group]] | Nutzt die Field-Anatomy fuer Gruppen-Label, Help text und Message | Entschieden |
|
|
| [[Components/Radio Group]] | Nutzt die Field-Anatomy fuer Gruppen-Label, Help text und Message | Entschieden |
|
|
| [[Components/Switch]] | Nutzt die Field-Anatomy nur im Field-Kontext; interne Switch-Struktur bleibt separat | Entschieden |
|
|
| [[Components/Slider Range Slider]] | Nutzt die Field-Anatomy nur im Field-Kontext; Slider-Geometrie bleibt separat | Entschieden |
|
|
| [[Components/Toggle Group Segmented Control]] | Nutzt die Field-Anatomy nur im Field-Kontext; interne Toggle-Geometrie bleibt separat | Entschieden |
|
|
|
|
### Regel: Form Inputs nutzen definierte Standardbreiten
|
|
|
|
Status: Entschieden
|
|
|
|
Diese Regel definiert Min Width und Default Max Width fuer textnahe Form Inputs.
|
|
`Fill Container` ist optional: Die Komponente darf bei Bedarf die verfuegbare Containerbreite ausfuellen, soll aber nicht automatisch ohne Kontext auf volle Breite gehen.
|
|
|
|
| Feld | Min Width | Default Max Width | Fill Container | Status |
|
|
| ------------------------------------ | ------------- | ----------------- | -------------- | ----------- |
|
|
| [[Components/Text Input]] | 12rem / 192px | 20rem / 320px | optional | Entschieden |
|
|
| [[Components/Textarea]] | 12rem / 192px | 36rem / 576px | optional | Entschieden |
|
|
| [[Components/Number Input]] | 12rem / 192px | 12rem / 192px | optional | Entschieden |
|
|
| [[Components/Select]] | 12rem / 192px | 20rem / 320px | optional | Entschieden |
|
|
| [[Components/Multiselect]] | 12rem / 192px | 24rem / 384px | optional | Entschieden |
|
|
| [[Components/Multiselect Tags]] | 12rem / 192px | 36rem / 576px | optional | Entschieden |
|
|
| [[Components/Combobox Autocomplete]] | 12rem / 192px | 24rem / 384px | optional | Entschieden |
|
|
| [[Components/Search Input]] | 12rem / 192px | 24rem / 384px | optional | Entschieden |
|
|
| [[Components/Date Picker]] | 12rem / 192px | 20rem / 320px | optional | Entschieden fuer Single Date; Range offen |
|
|
|
|
### Regel: Form Inputs nutzen horizontales Innenpadding
|
|
|
|
Status: Entschieden
|
|
|
|
Diese Regel definiert horizontales Innenpadding fuer einzeilige textnahe Form Inputs.
|
|
Sie gilt fuer Inputs mit Textinhalt und optionale linke oder rechte Icons.
|
|
Textarea wird nicht ueber diese Regel gesteuert, weil vertikales Padding und mehrzeilige Hoehe separat geklaert werden muessen.
|
|
|
|
| Fall | Wert | Mode | Status |
|
|
| ------------------------------ | ---- | ----- | ----------- |
|
|
| Linkes Innenpadding ohne Icon | 12px | Exact | Entschieden |
|
|
| Rechtes Innenpadding ohne Icon | 12px | Exact | Entschieden |
|
|
| Linker Rand zu linkem Icon | 12px | Exact | Entschieden |
|
|
| Rechtes Icon zu rechtem Rand | 12px | Exact | Entschieden |
|
|
| Icon zu Text | 8px | Exact | Entschieden |
|
|
|
|
Gilt fuer:
|
|
|
|
- [[Components/Text Input]]
|
|
- [[Components/Number Input]]
|
|
- [[Components/Select]]
|
|
- [[Components/Multiselect]]
|
|
- [[Components/Multiselect Tags]]
|
|
- [[Components/Combobox Autocomplete]]
|
|
- [[Components/Search Input]]
|
|
- [[Components/Date Picker]]
|
|
|
|
Komponenten-Notizen:
|
|
|
|
| Komponente | Notiz | Status |
|
|
| --- | --- | --- |
|
|
| [[Components/Text Input]] | Standard-Referenz fuer einzeiliges Padding | Entschieden |
|
|
| [[Components/Number Input]] | Folgt dem einzeiligen Input-Padding | Entschieden |
|
|
| [[Components/Select]] | Folgt dem einzeiligen Input-Padding | Entschieden |
|
|
| [[Components/Multiselect]] | Folgt dem einzeiligen Input-Padding | Entschieden |
|
|
| [[Components/Multiselect Tags]] | Padding muss mit Tags/Chips zusammen funktionieren | Entschieden |
|
|
| [[Components/Combobox Autocomplete]] | Folgt dem einzeiligen Input-Padding | Entschieden |
|
|
| [[Components/Search Input]] | Folgt dem einzeiligen Input-Padding | Entschieden |
|
|
| [[Components/Date Picker]] | Single-date Trigger folgt dem einzeiligen Input-Padding; Range-Version separat klaeren | Teilweise entschieden |
|
|
|
|
### Regel: Form Inputs nutzen Radius Small
|
|
|
|
Status: Entschieden
|
|
|
|
Diese Regel definiert den Standard-Corner-Radius fuer Form Inputs.
|
|
Der Token ist global in [[03_Benennung]] definiert.
|
|
|
|
| Property | Token | Wert | Mode | Status |
|
|
| --- | --- | --- | --- | --- |
|
|
| Corner Radius | `Radius Small` | 4px | Exact | Entschieden |
|
|
|
|
Gilt fuer:
|
|
|
|
- [[Components/Text Input]]
|
|
- [[Components/Textarea]]
|
|
- [[Components/Number Input]]
|
|
- [[Components/Select]]
|
|
- [[Components/Multiselect]]
|
|
- [[Components/Multiselect Tags]]
|
|
- [[Components/Combobox Autocomplete]]
|
|
- [[Components/Search Input]]
|
|
- [[Components/Date Picker]]
|
|
|
|
Komponenten-Notizen:
|
|
|
|
| Komponente | Notiz | Status |
|
|
| --- | --- | --- |
|
|
| [[Components/Text Input]] | Nutzt `Radius Small` | Entschieden |
|
|
| [[Components/Textarea]] | Nutzt `Radius Small`; mehrzeilige Hoehe separat klaeren | Entschieden |
|
|
| [[Components/Number Input]] | Nutzt `Radius Small` | Entschieden |
|
|
| [[Components/Select]] | Nutzt `Radius Small` | Entschieden |
|
|
| [[Components/Multiselect]] | Nutzt `Radius Small` | Entschieden |
|
|
| [[Components/Multiselect Tags]] | Nutzt `Radius Small` | Entschieden |
|
|
| [[Components/Combobox Autocomplete]] | Nutzt `Radius Small` | Entschieden |
|
|
| [[Components/Search Input]] | Nutzt `Radius Small` | Entschieden |
|
|
| [[Components/Date Picker]] | Single-date Trigger nutzt `Radius Small`; Range-Version separat klaeren | Teilweise entschieden |
|
|
|
|
## Data Display
|
|
|
|
### Regel: Data Display braucht Regeln fuer Inhaltszustaende
|
|
|
|
Status: Offen
|
|
|
|
Gilt fuer Komponenten mit `#DataDisplay`.
|
|
|
|
Komponenten-Notizen:
|
|
|
|
| Komponente | Notiz | Status |
|
|
| --- | --- | --- |
|
|
| [[Components/Table]] | Hauptreferenz fuer Loading, Empty, Hover und Selection States | Offen |
|
|
| [[Components/Badge Feedback]] | Benennungsueberschneidung mit Feedback pruefen | Offen |
|
|
| [[Components/Empty State]] | Kann auch zu Feedback gehoeren | Offen |
|
|
|
|
## Feedback
|
|
|
|
### Regel: Feedback-Severity-Namen muessen konsistent bleiben
|
|
|
|
Status: Offen
|
|
|
|
Gilt fuer Komponenten mit `#Feedback`.
|
|
|
|
Komponenten-Notizen:
|
|
|
|
| Komponente | Notiz | Status |
|
|
| --- | --- | --- |
|
|
| [[Components/Banner Alert]] | Beziehung zu [[Components/Alert]] klaeren | Offen |
|
|
| [[Components/Toast]] | Temporaeres Feedback | Offen |
|
|
| [[Components/Alert]] | Inline oder persistentes Feedback | Offen |
|
|
|
|
## Overlays
|
|
|
|
### Regel: Overlays brauchen klare Verhaltensregeln
|
|
|
|
Status: Offen
|
|
|
|
Gilt fuer Komponenten mit `#Overlays`.
|
|
|
|
Komponenten-Notizen:
|
|
|
|
| Komponente | Notiz | Status |
|
|
| --- | --- | --- |
|
|
| [[Components/Modal Dialog]] | Hauptkandidat fuer Dialog-Regeln | Offen |
|
|
| [[Components/Confirm Dialog]] | Bestaetigungs-Flow fuer kritische Actions | Offen |
|
|
| [[Components/Slide Over Side Panel]] | Side-Panel-Verhalten | Offen |
|
|
|
|
## Navigation
|
|
|
|
Noch keine Gruppenregel entschieden.
|
|
|
|
## Layout
|
|
|
|
Noch keine Gruppenregel entschieden.
|
|
|
|
## Typography
|
|
|
|
Noch keine Gruppenregel entschieden.
|
|
|
|
## Utility
|
|
|
|
Noch keine Gruppenregel entschieden.
|
|
|
|
## Patterns
|
|
|
|
### Regel: Patterns dokumentieren Flows, nicht einzelne Komponenten
|
|
|
|
Status: Offen
|
|
|
|
Gilt fuer Eintraege mit `#Patterns`.
|
|
|
|
Komponenten-Notizen:
|
|
|
|
| Pattern | Notiz | Status |
|
|
| --- | --- | --- |
|
|
| [[Components/Bulk Actions Table Multi Select]] | Nutzt Table, Checkbox, Button, Confirm Dialog | Offen |
|
|
| [[Components/Search Filter Bar]] | Nutzt Search Input, Select, Badge, Button | Offen |
|
|
| [[Components/Error Recovery]] | Nutzt Feedback- und Retry-Patterns | Offen |
|