refactor(ui): #150 remove DaisyUI v4 dead classes, adopt v5 names#151
Merged
Conversation
DaisyUI 5.0.0-beta.9 renamed/removed several v4 classes the components still carried. Verified against the compiled CSS that the removed classes emit zero rules in v5 (so removal is visually neutral) and that the renames map to existing v5 classes. - card-bordered -> card-border, card-compact -> card-sm (renames). Also updates the custom .card-bordered a11y rule in colorblind-patterns.css so colorblind-mode bordered cards keep their 2px border. - Remove dead input-bordered / textarea-bordered / select-bordered (the base .input/.textarea/.select are bordered by default in v5). One ValidatedInput usage that had only input-bordered (no base) is fixed by dropping the dead class — the component supplies .input itself. - Remove dead form-control wrappers and label-text / label-text-alt spans; kept the div/label/span structure and real Tailwind utilities (text-error, text-warning, font-medium, spacing). Empty className="" left behind by the strip were removed. 32 files. Gates: type-check, lint, build clean; 24 Card tests + 125 form/molecular tests pass; sign-in form render-checked (inputs still bordered, labels intact). Closes #150 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The class strip in the previous commit broke E2E selectors that keyed on removed DaisyUI v4 classes: - form-submission.spec.ts: required-indicator selector was `.label-text-alt.text-error` → 0 matches after label-text-alt removal. Now matches `label.label span.text-error` filtered by the "*" text (verified 4 matches in the SSG'd contact HTML; error-message spans use role=alert and don't contain "*"). - ComponentsPage.ts: formControl/formHelp page-object selectors updated off the removed .form-control / .label-text-alt (unused today, kept accurate). - mobile-form-inputs.spec.ts: form-group selector retargeted to fieldset/label wrappers instead of .form-control. Root cause of the chromium-gen 5/6 failure on this branch; no app behavior change — selectors only. Refs #150 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #150.
What
DaisyUI
beta(5.0.0-beta.9) renamed or removed several v4 class names that components still carried. This removes the dead ones and adopts the v5 names. 32 files.Verified against the compiled app CSS that the removed classes emit zero rules in v5 (so removal is provably visually neutral), and that the rename targets exist.
Changes
Renames (classes that have CSS):
card-bordered→card-bordercard-compact→card-sm.card-borderedaccessibility rule insrc/styles/colorblind-patterns.css→.card-border, so colorblind-mode bordered cards keep their 2px border.Dead-class removals (0 CSS rules in v5):
input-bordered/textarea-bordered/select-bordered— the base.input/.textarea/.selectare bordered by default in v5. OneValidatedInputusage that carried onlyinput-bordered(no base class) is fixed by dropping it — the component supplies.inputitself.form-controlwrappers andlabel-text/label-text-altspans — kept thediv/label/spanstructure and the real Tailwind utilities on them (text-error,text-warning,font-medium, spacing). EmptyclassName=""left behind by the strip were removed.Verification
type-check, ✅lint, ✅build(clean)card-sm/card-border) + 125 form/molecular/auth tests pass.input), labels intact, no layout shiftWhy this was safe
The bulk of the removals were no-op classes — DaisyUI v5 emits no CSS for them, so the layouts already relied entirely on base classes + Tailwind utilities. The screenshot confirms the rendered result is unchanged.
🤖 Generated with Claude Code