Upgrade daisyUI to current 5.x, remove v4 leftovers and add the UI CI guard #597

New issue

Closed

opened 2026-10-16 22:26:39 +02:00 by simon · 0 comments

simon commented

2026-10-16 22:26:39 +02:00

Owner

Motivation

daisyUI is vendored at 5.0.8 (July 2025). Since then the dropdown opens on focus (5.2), button styles were rewritten (5.6), the modal supports popover and aria-current/aria-pressed get styling (5.7). Every component issue of the UI standard (#402) should be built once, against the current version. The codebase also carries 49 daisyUI 4 classes that do nothing in v5, dead CSS and code, and nine icon-size variants. Without a guard, these patterns come back.

Visible improvement

Controls that silently lost their v4 styling look as intended again; the file input gets a hover state; icons have consistent sizes.

Scope (ordered steps, `just ci-dev` green after each)

Upgrade assets/vendor/daisyui.js and daisyui-theme.js to the current 5.x release. Compare buttons, dropdowns and modals before/after in both themes (5.6 rewrote buttons); fix regressions.
Check whether the new version styles :hover on the file input's selector button; if not, add one commented local rule (DESIGN_GUIDELINES §1.5).
Replace all daisyUI 4 classes (form-control, label-text, label-text-alt, *-bordered, tabs-bordered, avatar placeholder) per the table in DESIGN_GUIDELINES §1.5.
Remove dead code and CSS: .member-filter-dropdown rules, the unused generic_list component (in MvWeb.CoreComponents; also drop it from the pinned surface in test/mv_web/components/import_surface_test.exs, which fails on purpose until the pin list matches), assets/tailwind.config.js (not loaded under Tailwind 4), translate German comments in app.css.
Icon sizes: migrate to size-4/size-5 (DESIGN_GUIDELINES §3.2), including the 12 legacy h-4 w-4; replace the search bar's inline SVG with <.icon>. Replace z-[100] with z-100.
CI guard (ratchet): a check that runs in just ci-dev and fails on daisyUI 4 classes, Tailwind palette colors, data-confirm and raw modal markup in lib/mv_web/live/** (matched by the class tokens modal/modal-open inside a class attribute, independent of the <dialog line: 12 of the 13 dialogs are formatted multi-line), with an exception list of today's remaining occurrences. Document how to remove entries, and the one way to add one: until U4, a new dialog that cannot wait for the components copies the legacy pattern exactly and the same change adds it with an entry naming U4 as the issue that removes it (DESIGN_GUIDELINES §10.3, CODE_GUIDELINES §8.11, adoption plan (g)). Decide whether the guard also scans the component modules (lib/mv_web/components/**: CoreComponents plus MvWeb.Components.Table, .Form, .Overlay, .Feedback since #539) for v4 classes and palette colors (today two text-zinc-* sit in the list component in core_components.ex). Decide the guard's form: a source-scanning ExUnit test next to the guards #539 added (test/mv_web/components/component_layering_test.exs, import_surface_test.exs, modeled on test/mv/architecture/layering_test.exs) runs inside ci-dev and keeps the exception list in the test; a separate just recipe is the alternative. Other raw daisyUI classes are out of the guard's scope; document that review covers them.
Component showcase skeleton: a dev-only route (not compiled into prod) rendering existing components (<.button>, <.badge>, <.input>, <.table>, <.header>) in both themes, with one section per component module (Core, Table, Form, Overlay, Feedback — the split from #539), so each later issue adds its components to the section of the module that owns them.

Out of scope

Theme token values and the button API (U3).
New components.

Acceptance criteria

DESIGN_GUIDELINES §1.5 (version, no v4 classes, overrides with reasons) and §3.2 (icon sizes) are met.
Before/after screenshots of buttons, dropdowns, the file input and the member overview in light and dark theme.
Keyboard check: dropdowns that now open on focus do not trap or surprise keyboard users (member overview toolbar, sidebar).
The guard fails on a newly added label-text, palette color, data-confirm or raw modal in a LiveView, including a multi-line <dialog whose class="modal modal-open" sits on its own line; the exception list is in the repo.
The showcase route exists in dev only and renders the listed components.
just ci-dev green after every step.

Dependencies

#539 (split core_components.ex) merged first, so the showcase and later components use the split modules.
#535 (split member_live/index.ex) merged first: most v4 classes and the .member-filter-dropdown markup sit in the member overview, which #535 moves into new modules.
Blocks U3–U10.

Anchors (verified against `main` @ `d9093a1f` and against the #539 branch; re-check file:line against `main` after #535 is merged, before filing)

assets/vendor/daisyui.js (version 5.0.8), assets/css/app.css:16,24,59 (plugin blocks)
.member-filter-dropdown: assets/css/app.css:260
assets/tailwind.config.js (no @config, no --config in config/config.exs:131)
v4 classes: 46 matches of label-text|form-control|-bordered|tabs-bordered under lib/mv_web (unchanged by #539; none in the component modules)
generic_list: lib/mv_web/components/core_components.ex, pinned at test/mv_web/components/import_surface_test.exs:37 (#539 branch)
palette colors in components: core_components.ex:502–503 (list, text-zinc-500/text-zinc-700, #539 branch)

Caution

The upgrade changes defaults. Screenshot comparison in both themes is the main safety net; ui-tagged browser tests should run once before merging.
Keep the guard's exception list explicit (file + pattern), so each later issue can shrink it.

## Motivation daisyUI is vendored at 5.0.8 (July 2025). Since then the dropdown opens on focus (5.2), button styles were rewritten (5.6), the modal supports `popover` and `aria-current`/`aria-pressed` get styling (5.7). Every component issue of the UI standard (#402) should be built once, against the current version. The codebase also carries 49 daisyUI 4 classes that do nothing in v5, dead CSS and code, and nine icon-size variants. Without a guard, these patterns come back. ## Visible improvement Controls that silently lost their v4 styling look as intended again; the file input gets a hover state; icons have consistent sizes. ## Scope (ordered steps, `just ci-dev` green after each) 1. Upgrade `assets/vendor/daisyui.js` and `daisyui-theme.js` to the current 5.x release. Compare buttons, dropdowns and modals before/after in both themes (5.6 rewrote buttons); fix regressions. 2. Check whether the new version styles `:hover` on the file input's selector button; if not, add one commented local rule (DESIGN_GUIDELINES §1.5). 3. Replace all daisyUI 4 classes (`form-control`, `label-text`, `label-text-alt`, `*-bordered`, `tabs-bordered`, avatar `placeholder`) per the table in DESIGN_GUIDELINES §1.5. 4. Remove dead code and CSS: `.member-filter-dropdown` rules, the unused `generic_list` component (in `MvWeb.CoreComponents`; also drop it from the pinned surface in `test/mv_web/components/import_surface_test.exs`, which fails on purpose until the pin list matches), `assets/tailwind.config.js` (not loaded under Tailwind 4), translate German comments in `app.css`. 5. Icon sizes: migrate to `size-4`/`size-5` (DESIGN_GUIDELINES §3.2), including the 12 legacy `h-4 w-4`; replace the search bar's inline SVG with `<.icon>`. Replace `z-[100]` with `z-100`. 6. **CI guard (ratchet):** a check that runs in `just ci-dev` and fails on daisyUI 4 classes, Tailwind palette colors, `data-confirm` and raw modal markup in `lib/mv_web/live/**` (matched by the class tokens `modal`/`modal-open` inside a `class` attribute, independent of the `<dialog` line: 12 of the 13 dialogs are formatted multi-line), with an exception list of today's remaining occurrences. Document how to remove entries, and the one way to add one: until U4, a new dialog that cannot wait for the components copies the legacy pattern exactly and the same change adds it with an entry naming U4 as the issue that removes it (DESIGN_GUIDELINES §10.3, CODE_GUIDELINES §8.11, adoption plan (g)). Decide whether the guard also scans the component modules (`lib/mv_web/components/**`: `CoreComponents` plus `MvWeb.Components.Table`, `.Form`, `.Overlay`, `.Feedback` since #539) for v4 classes and palette colors (today two `text-zinc-*` sit in the `list` component in `core_components.ex`). Decide the guard's form: a source-scanning ExUnit test next to the guards #539 added (`test/mv_web/components/component_layering_test.exs`, `import_surface_test.exs`, modeled on `test/mv/architecture/layering_test.exs`) runs inside `ci-dev` and keeps the exception list in the test; a separate `just` recipe is the alternative. Other raw daisyUI classes are out of the guard's scope; document that review covers them. 7. **Component showcase skeleton:** a dev-only route (not compiled into prod) rendering existing components (`<.button>`, `<.badge>`, `<.input>`, `<.table>`, `<.header>`) in both themes, with one section per component module (Core, Table, Form, Overlay, Feedback — the split from #539), so each later issue adds its components to the section of the module that owns them. ## Out of scope - Theme token values and the button API (U3). - New components. ## Acceptance criteria - DESIGN_GUIDELINES §1.5 (version, no v4 classes, overrides with reasons) and §3.2 (icon sizes) are met. - Before/after screenshots of buttons, dropdowns, the file input and the member overview in light and dark theme. - Keyboard check: dropdowns that now open on focus do not trap or surprise keyboard users (member overview toolbar, sidebar). - The guard fails on a newly added `label-text`, palette color, `data-confirm` or raw modal in a LiveView, including a multi-line `<dialog` whose `class="modal modal-open"` sits on its own line; the exception list is in the repo. - The showcase route exists in dev only and renders the listed components. - `just ci-dev` green after every step. ## Dependencies - #539 (split `core_components.ex`) merged first, so the showcase and later components use the split modules. - #535 (split `member_live/index.ex`) merged first: most v4 classes and the `.member-filter-dropdown` markup sit in the member overview, which #535 moves into new modules. - Blocks U3–U10. ## Anchors (verified against `main` @ `d9093a1f` and against the #539 branch; re-check file:line against `main` after #535 is merged, before filing) - `assets/vendor/daisyui.js` (version 5.0.8), `assets/css/app.css:16,24,59` (plugin blocks) - `.member-filter-dropdown`: `assets/css/app.css:260` - `assets/tailwind.config.js` (no `@config`, no `--config` in `config/config.exs:131`) - v4 classes: 46 matches of `label-text|form-control|-bordered|tabs-bordered` under `lib/mv_web` (unchanged by #539; none in the component modules) - `generic_list`: `lib/mv_web/components/core_components.ex`, pinned at `test/mv_web/components/import_surface_test.exs:37` (#539 branch) - palette colors in components: `core_components.ex:502–503` (`list`, `text-zinc-500`/`text-zinc-700`, #539 branch) ## Caution - The upgrade changes defaults. Screenshot comparison in both themes is the main safety net; `ui`-tagged browser tests should run once before merging. - Keep the guard's exception list explicit (file + pattern), so each later issue can shrink it.

simon added this to the Code and Test Refactoring | TI I milestone

2026-10-16 22:26:39 +02:00

simon added this to the Sprint 18: Oktober 2026 project

2026-10-16 22:26:39 +02:00

simon referenced this issue from a pull request that will close it,

2026-10-17 10:58:24 +02:00

Upgrade daisyUI to 5.7, remove daisyUI 4 leftovers and add a UI guard closes #597 #606

simon closed this issue

2026-10-17 11:14:36 +02:00

simon referenced this issue from a commit

2026-10-17 11:14:38 +02:00

Merge pull request 'Upgrade daisyUI to 5.7, remove daisyUI 4 leftovers and add a UI guard closes #597' (#606) from issue/mitgliederverwaltung-597 into main