Update Design Guidelines

simon commented

2026-10-15 20:01:07 +02:00

Owner

Description of the implemented changes

The changes were:

Bugfixing
New Feature
Breaking Change
Refactoring

Unify UI elements (#402): this is a planning change with no production code. It turns DESIGN_GUIDELINES.md into one consistent, decided UI pattern standard (dialogs, menus and popovers, tooltips, search and pickers, inline editing of small entities, table row actions, buttons, sections, help and hints, form controls, top bar and navigation, color tokens), aligns CODE_GUIDELINES.md with it, and adds an adoption plan with the follow-up issues that bring the code to the standard.

What has been changed?

Set one UI pattern standard and plan its adoption

Definition of Done

Code Quality

No new technical depths
Linting passed
Documentation is added were needed

Accessibility

New elements are properly defined with html-tags
Colour contrast follows WCAG criteria
Aria labels are added when needed
Everything is accessible by keyboard
Tab-Order is comprehensible
All interactive elements have a visible focus

Testing

Tests for new code are written
All tests pass
axe-core dev tools show no critical or major issues

Additional Notes

Documentation only: the diff touches DESIGN_GUIDELINES.md, CODE_GUIDELINES.md and the new docs/ui-patterns-adoption-plan.md; no code, so there are no new tests and the accessibility checklist applies to the follow-up issues, not to this PR.
One large commit (3 files, about 1,800 added lines): the standard, the aligned code guidelines and the adoption plan reference each other and only make sense together.
Sections 1–14 of DESIGN_GUIDELINES.md keep their numbers because code comments and other docs reference them; new patterns start at section 15.
Key decisions recorded in the standard: own CoreComponents on daisyUI 5 following WAI-ARIA APG (Doggo as reference, not a dependency); Mila petrol as brand color with an ink token for derived variants in dark mode; app-wide top bar; card-header sections; switches for immediate-effect settings, checkboxes for form values; small configuration entities edited on their own page with inline switches in tables.
Ten follow-up issues (U1–U10, starting with verified UI bug fixes) are drafted and will be filed separately; the adoption plan lists their order relative to the open refactoring issues (#538, #539, #540, #554, #541, #449, #549).
Pipeline notes: requirements were revisited once after the feature roadmap (branding, self-service) was added; the review loop ran four iterations (28 → 13 → 6 → 0 findings, all accepted).

## Description of the implemented changes The changes were: - [ ] Bugfixing - [ ] New Feature - [ ] Breaking Change - [ ] Refactoring Unify UI elements (#402): this is a planning change with no production code. It turns `DESIGN_GUIDELINES.md` into one consistent, decided UI pattern standard (dialogs, menus and popovers, tooltips, search and pickers, inline editing of small entities, table row actions, buttons, sections, help and hints, form controls, top bar and navigation, color tokens), aligns `CODE_GUIDELINES.md` with it, and adds an adoption plan with the follow-up issues that bring the code to the standard. ## What has been changed? - Set one UI pattern standard and plan its adoption ## Definition of Done ### Code Quality - [ ] No new technical depths - [x] Linting passed - [x] Documentation is added were needed ### Accessibility - [ ] New elements are properly defined with html-tags - [ ] Colour contrast follows WCAG criteria - [ ] Aria labels are added when needed - [ ] Everything is accessible by keyboard - [ ] Tab-Order is comprehensible - [ ] All interactive elements have a visible focus ### Testing - [ ] Tests for new code are written - [x] All tests pass - [ ] axe-core dev tools show no critical or major issues ## Additional Notes - Documentation only: the diff touches `DESIGN_GUIDELINES.md`, `CODE_GUIDELINES.md` and the new `docs/ui-patterns-adoption-plan.md`; no code, so there are no new tests and the accessibility checklist applies to the follow-up issues, not to this PR. - One large commit (3 files, about 1,800 added lines): the standard, the aligned code guidelines and the adoption plan reference each other and only make sense together. - Sections 1–14 of `DESIGN_GUIDELINES.md` keep their numbers because code comments and other docs reference them; new patterns start at section 15. - Key decisions recorded in the standard: own CoreComponents on daisyUI 5 following WAI-ARIA APG (Doggo as reference, not a dependency); Mila petrol as brand color with an ink token for derived variants in dark mode; app-wide top bar; card-header sections; switches for immediate-effect settings, checkboxes for form values; small configuration entities edited on their own page with inline switches in tables. - Ten follow-up issues (U1–U10, starting with verified UI bug fixes) are drafted and will be filed separately; the adoption plan lists their order relative to the open refactoring issues (#538, #539, #540, #554, #541, #449, #549). - Pipeline notes: requirements were revisited once after the feature roadmap (branding, self-service) was added; the review loop ran four iterations (28 → 13 → 6 → 0 findings, all accepted).

simon added 2 commits

2026-10-15 20:01:07 +02:00

docs(design): set one UI pattern standard and plan its adoption 0490b89250

Existing section numbers 1-14 of DESIGN_GUIDELINES.md are kept on purpose:
code comments and other docs reference them, so new patterns start at 15.

Merge remote-tracking branch 'origin/main' into issue/mitgliederverwaltung-402

continuous-integration/drone/push Build is passing

Details

d7ce12ffa3

simon merged commit 0462bf4d9d into main

2026-10-15 20:01:54 +02:00

simon deleted branch issue/mitgliederverwaltung-402

2026-10-15 20:01:54 +02:00

simon referenced this pull request from a commit

2026-10-15 20:01:56 +02:00

Merge pull request 'Update Design Guidelines' (#592) from issue/mitgliederverwaltung-402 into main

Rows
Columns

Update Design Guidelines #592