Repository navigation
Form validation and helper colours from CSS variables - #365
Merged
Merged
Conversation
PDForm's label, validation indicator, helper icons, field error message and footer error count read --pd-form-* variables, each defaulting to the colour drawn before. A label can show a coloured edge, and carries pd-form-title-required or pd-form-title-invalid to tell a field still waiting for a value from a wrong one; the indicator carries pd-form-status. The Bootstrap text-info and text-danger classes, which no theme could override, are gone from PDFormBody, PDFormHeader and PDFormFooter. Under Bootstrap 5.3's dark mode the editor frame takes Bootstrap's dark border colour. The PDForm 6 demo page switches groups of the variables on and off, and the documentation lists them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Not up to standards ⛔🔴 Issues
|
| Category | Results |
|---|---|
| BestPractice | 1 medium |
| ErrorProne | 1 medium |
🟢 Metrics 13 complexity · 2 duplication
Metric Results Complexity 13 Duplication 2
🟢 Coverage 100.00% diff coverage · +0.00% coverage variation
Metric Results Coverage variation ✅ +0.00% coverage variation Diff coverage ✅ 100.00% diff coverage Coverage variation details
Coverable lines Covered lines Coverage Common ancestor commit (8e8a077) 19392 19261 99.32% Head commit (eeddfc5) 19400 (+8) 19269 (+8) 99.32% (+0.00%) Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch:
<coverage of head commit> - <coverage of common ancestor commit>Diff coverage details
Coverable lines Covered lines Diff coverage Pull request (#365) 9 9 100.00% Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified:
<covered lines added or modified>/<coverable lines added or modified> * 100%
AI Reviewer: run a review on demand. To trigger the first review automatically, go to your organization or repository integration settings. AI can make mistakes. Always validate suggestions.
TIP This summary will be updated as you push new changes.
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
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.
PDForm's validation and helper colours come from CSS variables a host can set, so a theme can make a form calm instead of Bootstrap's fixed pinks, yellows, greens and cyan. Every default is the colour drawn before, so existing hosts see no change.
--pd-form-title-error-bg,--pd-form-title-error-color--pd-form-title-edge-width(default 0),--pd-form-title-required-edge-color,--pd-form-title-invalid-edge-color; the label carriespd-form-title-requiredorpd-form-title-invalidbesidealert-danger--pd-form-status-{valid,required,invalid}-{bg,color}, with apd-form-statusclass--pd-form-helper-color, replacing Bootstrap'stext-info--pd-form-error-color, replacingtext-danger--pd-form-footer-error-*(colour, icon, background, border width and colour, edge, padding, radius), replacingtext-dangerdata-bs-theme="dark", the editor frame takes Bootstrap's dark border colour instead of a light greyThe new PDForm 6 (Colours) demo page switches each group on and off, with a Dark switch, and the PDForm documentation lists every variable.
Tests: new
PDFormBodyTests.Colours(label state classes, status class, helper classes), header and footer class checks, and stylesheet default rows inThemeVariableStylesheetTests. Full suite: 4,801 passed.🤖 Generated with Claude Code