From eeddfc5673077f3e2f0a5dcea7e47186ca75bc5b Mon Sep 17 00:00:00 2001 From: Roland Banks Date: Thu, 12 Nov 2026 12:44:32 +0700 Subject: [PATCH] Form validation and helper colours from CSS variables 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 --- .../Pages/PDFormDocumentation.razor | 21 ++++- .../Pages/PDFormPage6.razor | 91 ++++++++++++++++++ .../Pages/PDFormPage6.razor.cs | 93 +++++++++++++++++++ .../Pages/PDFormPage6.razor.css | 35 +++++++ .../Shared/NavMenu.razor | 5 + .../Components/PDFormBodyTests.Colours.cs | 73 +++++++++++++++ .../Components/PDFormBodyTests.cs | 2 +- .../Components/PDFormFooterTests.Rendering.cs | 1 + .../Components/PDFormHeaderTests.cs | 1 + .../ThemeVariableStylesheetTests.cs | 15 ++- PanoramicData.Blazor/PDFormBody.razor | 12 +-- PanoramicData.Blazor/PDFormBody.razor.cs | 13 +++ PanoramicData.Blazor/PDFormBody.razor.css | 47 +++++++--- .../PDFormFieldEditor.razor.css | 5 + PanoramicData.Blazor/PDFormFooter.razor | 2 +- PanoramicData.Blazor/PDFormFooter.razor.css | 15 ++- PanoramicData.Blazor/PDFormHeader.razor | 4 +- PanoramicData.Blazor/PDFormHeader.razor.css | 5 + .../PanoramicData.Blazor.csproj | 2 +- 19 files changed, 411 insertions(+), 31 deletions(-) create mode 100644 PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor create mode 100644 PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor.cs create mode 100644 PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor.css create mode 100644 PanoramicData.Blazor.Test/Components/PDFormBodyTests.Colours.cs diff --git a/PanoramicData.Blazor.Demo/Pages/PDFormDocumentation.razor b/PanoramicData.Blazor.Demo/Pages/PDFormDocumentation.razor index 17273d56c..9827bde2f 100644 --- a/PanoramicData.Blazor.Demo/Pages/PDFormDocumentation.razor +++ b/PanoramicData.Blazor.Demo/Pages/PDFormDocumentation.razor @@ -214,13 +214,28 @@

Colours

- The frame around each field's editor comes from a CSS variable, so a host can match it to its own control - borders on :root or on a theme class, for example on a dark theme. + The form's frames, validation state and helper icons take their colours from CSS variables, so a host can + match them to its own theme on :root or on a theme class. Each default is the colour the form + drew before. PDForm 6 in the demo turns groups of them on and off.

- + + + + + + + + + + + + + + +
VariableDefaultDescription
--pd-form-editor-border-color#ced4daThe border around a field's editor, to the right of its label
--pd-form-editor-border-color#ced4da, and Bootstrap's border colour under its dark modeThe border around a field's editor, to the right of its label
--pd-form-title-error-bg, --pd-form-title-error-colorBootstrap's danger alert coloursThe label of a field with errors, whether still waiting for a value or holding a wrong one
--pd-form-title-edge-width0The width of an edge down the left of such a label; none unless set
--pd-form-title-required-edge-colortransparentThe edge while a field is still waiting for a value (label class pd-form-title-required)
--pd-form-title-invalid-edge-colortransparentThe edge once a field holds a wrong value (label class pd-form-title-invalid)
--pd-form-status-valid-bg, --pd-form-status-valid-colorBootstrap's success alert coloursThe validation indicator at the end of a valid field (class pd-form-status)
--pd-form-status-required-bg, --pd-form-status-required-colorBootstrap's warning alert coloursThe indicator, an asterisk, while a field is still waiting for a value
--pd-form-status-invalid-bg, --pd-form-status-invalid-colorBootstrap's danger alert coloursThe indicator once a field holds a wrong value
--pd-form-helper-colorBootstrap's info colourThe help link, helper and copy icons beside a label, and the header's help icon
--pd-form-error-colorBootstrap's danger colourThe message under a field with a wrong value
--pd-form-footer-error-color, --pd-form-footer-error-icon-colorBootstrap's danger colourThe footer's error count and its icon
--pd-form-footer-error-bgtransparentBehind the footer's error count
--pd-form-footer-error-border-width, --pd-form-footer-error-border-color0 0 1px 0, the text colourIts border, a line underneath by default
--pd-form-footer-error-edge-colorthe border colourIts left border, for a coloured edge
--pd-form-footer-error-padding, --pd-form-footer-error-radius0.25rem 0, 0Its padding and corners
diff --git a/PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor b/PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor new file mode 100644 index 000000000..dc003bbc3 --- /dev/null +++ b/PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor @@ -0,0 +1,91 @@ +@page "/pdform6" + +

PDForm

+ + + +

+ The form's validation and helper colours come from --pd-form-* CSS variables. Each switch below sets + one group of them on the box around the form. With every switch off the form uses Bootstrap's alert and info + colours, as it always has. +

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + diff --git a/PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor.cs b/PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor.cs new file mode 100644 index 000000000..e5873f63b --- /dev/null +++ b/PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor.cs @@ -0,0 +1,93 @@ +using PanoramicData.Blazor.Services; +using System.ComponentModel.DataAnnotations; + +namespace PanoramicData.Blazor.Demo.Pages; + +public partial class PDFormPage6 +{ + private PDForm? _form; + private bool _dark; + private bool _neutralLabels; + private bool _labelEdges; + private bool _quietStatus; + private bool _mutedHelpers; + private bool _footerBox; + + private readonly DelegatedDataProviderService _dataProvider = new() + { + CreateAsync = (_, _) => Task.FromResult(new OperationResponse { Success = true }) + }; + + private readonly FormFieldHelper _folderHelper = new() + { + IconCssClass = "fas fa-fw fa-folder-open", + ToolTip = "Choose a folder", + Click = _ => new FormFieldResult { NewValue = "/Reports" } + }; + + private string WrapperCssClass => string.Join(' ', new[] + { + _neutralLabels ? "neutral-labels" : null, + _labelEdges ? "label-edges" : null, + _quietStatus ? "quiet-status" : null, + _mutedHelpers ? "muted-helpers" : null, + _footerBox ? "footer-box" : null + }.Where(x => x is not null)); + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await ResetFormAsync().ConfigureAwait(true); + } + } + + private async Task ResetFormAsync() + { + if (_form is not null) + { + await _form.EditItemAsync(new FormColoursModel(), FormModes.Create).ConfigureAwait(true); + } + } + + private void AllOn() => SetAll(true); + + private void AllOff() => SetAll(false); + + private void SetAll(bool value) + { + _neutralLabels = value; + _labelEdges = value; + _quietStatus = value; + _mutedHelpers = value; + _footerBox = value; + } + + /// + /// A schedule-like item with required fields, a valid one and an invalid one, to show every validation state. + /// + public class FormColoursModel + { + /// Gets or sets the name, which is required. + [Required] + public string Name { get; set; } = string.Empty; + + /// Gets or sets the description, which starts valid. + public string Description { get; set; } = "Weekly summary"; + + /// Gets or sets the input folder, which is required. + [Required] + public string InputFolder { get; set; } = string.Empty; + + /// Gets or sets the output folder, which is required. + [Required] + public string OutputFolder { get; set; } = string.Empty; + + /// Gets or sets the address to notify, which starts invalid. + [EmailAddress] + public string NotifyEmail { get; set; } = "not-an-address"; + + /// Gets or sets free-text notes. + public string Notes { get; set; } = "Copy me"; + } +} diff --git a/PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor.css b/PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor.css new file mode 100644 index 000000000..f7f259af3 --- /dev/null +++ b/PanoramicData.Blazor.Demo/Pages/PDFormPage6.razor.css @@ -0,0 +1,35 @@ +/* Each switch on the page sets one group of the form's colour variables; they inherit into the form */ +.form-colours-demo.neutral-labels { + --pd-form-title-error-bg: var(--bs-tertiary-bg); + --pd-form-title-error-color: var(--bs-body-color); +} + +.form-colours-demo.label-edges { + --pd-form-title-edge-width: 4px; + --pd-form-title-required-edge-color: var(--bs-warning); + --pd-form-title-invalid-edge-color: var(--bs-danger); +} + +.form-colours-demo.quiet-status { + --pd-form-status-valid-bg: var(--bs-tertiary-bg); + --pd-form-status-valid-color: var(--bs-secondary-color); + --pd-form-status-required-bg: var(--bs-tertiary-bg); + --pd-form-status-required-color: var(--bs-warning-text-emphasis); + --pd-form-status-invalid-bg: var(--bs-tertiary-bg); + --pd-form-status-invalid-color: var(--bs-danger-text-emphasis); +} + +.form-colours-demo.muted-helpers { + --pd-form-helper-color: var(--bs-secondary-color); +} + +.form-colours-demo.footer-box { + --pd-form-footer-error-color: var(--bs-body-color); + --pd-form-footer-error-icon-color: var(--bs-danger); + --pd-form-footer-error-bg: var(--bs-body-bg); + --pd-form-footer-error-border-width: 1px 1px 1px 4px; + --pd-form-footer-error-border-color: var(--bs-border-color); + --pd-form-footer-error-edge-color: var(--bs-danger); + --pd-form-footer-error-padding: 0.375rem 0.75rem; + --pd-form-footer-error-radius: 0.375rem; +} diff --git a/PanoramicData.Blazor.Demo/Shared/NavMenu.razor b/PanoramicData.Blazor.Demo/Shared/NavMenu.razor index f075cfcab..ab2a2991a 100644 --- a/PanoramicData.Blazor.Demo/Shared/NavMenu.razor +++ b/PanoramicData.Blazor.Demo/Shared/NavMenu.razor @@ -157,6 +157,11 @@ PDForm 5 +
  • + + PDForm 6 (Colours) + +
  • PDForm Title Test diff --git a/PanoramicData.Blazor.Test/Components/PDFormBodyTests.Colours.cs b/PanoramicData.Blazor.Test/Components/PDFormBodyTests.Colours.cs new file mode 100644 index 000000000..97d744615 --- /dev/null +++ b/PanoramicData.Blazor.Test/Components/PDFormBodyTests.Colours.cs @@ -0,0 +1,73 @@ +using AwesomeAssertions; +using Bunit; +using PanoramicData.Blazor.Models; + +namespace PanoramicData.Blazor.Test.Components; + +/// +/// The classes gives a host to colour its validation state and helper icons by. +/// +public partial class PDFormBodyTests +{ + /// A label keeps alert-danger and says whether the field is still waiting for a value or holds a wrong one. + /// Whether the field's errors are suppressed, as they are until the user edits it. + /// The state class the label should have. + /// The state class it should not have. + [Theory] + [InlineData(true, "pd-form-title-required", "pd-form-title-invalid")] + [InlineData(false, "pd-form-title-invalid", "pd-form-title-required")] + public async Task A_label_in_error_says_which_state_it_is_in(bool suppressed, string stateClass, string otherClass) + { + var host = RenderForm([Field(x => x.Name)]); + await Edit(host, FormModes.Edit); + var form = FormOf(host); + + await host.InvokeAsync(() => + { + form.Fields[0].SuppressErrors = suppressed; + form.SetFieldErrors(nameof(Person.Name), "Required"); + }); + host.Render(); + + host.Find(".title-box").ClassList.Should().Contain("alert-danger").And.Contain(stateClass).And.NotContain(otherClass); + } + + /// A valid field's label has no state class, and its validation indicator has the status class. + [Fact] + public async Task A_valid_label_has_no_state_class_and_the_indicator_has_the_status_class() + { + var host = RenderForm([Field(x => x.Name)]); + + await Edit(host, FormModes.Edit); + + host.Find(".title-box").ClassList.Should().NotContain("pd-form-title-required").And.NotContain("pd-form-title-invalid"); + host.Find(".d-table.input-group-text").ClassList.Should().Contain("pd-form-status").And.Contain("alert-success"); + } + + /// The help link, helper and copy icons, and a field's error message, carry the library's classes rather than Bootstrap's fixed colours. + [Fact] + public async Task Helper_icons_and_messages_use_themable_classes() + { + var helper = new FormFieldHelper { IconCssClass = "fa-helper", ToolTip = "Pick" }; + var host = RenderForm([Field(x => x.Name, extra: new() + { + [nameof(PDField.HelpUrl)] = "https://help/", + [nameof(PDField.Helper)] = helper, + [nameof(PDField.ShowCopyButton)] = (Func)(_ => true) + })]); + await Edit(host, FormModes.Edit); + var form = FormOf(host); + + await host.InvokeAsync(() => + { + form.Fields[0].SuppressErrors = false; + form.SetFieldErrors(nameof(Person.Name), "Too short"); + }); + host.Render(); + + host.Find(".fa-external-link-alt").ClassList.Should().Contain("pd-form-helper").And.NotContain("text-info"); + host.Find("i.fa-helper").ClassList.Should().Contain("pd-form-helper").And.NotContain("text-info"); + host.Find(".pdClipboard-button").ClassList.Should().Contain("pd-form-helper").And.NotContain("text-info"); + host.Find(".pd-form-field-form-error-message").ClassList.Should().NotContain("text-danger"); + } +} diff --git a/PanoramicData.Blazor.Test/Components/PDFormBodyTests.cs b/PanoramicData.Blazor.Test/Components/PDFormBodyTests.cs index 7510c48a8..5b601d819 100644 --- a/PanoramicData.Blazor.Test/Components/PDFormBodyTests.cs +++ b/PanoramicData.Blazor.Test/Components/PDFormBodyTests.cs @@ -79,7 +79,7 @@ public async Task Validation_indicator_options() ]); await Edit(host, FormModes.Edit); - host.FindAll(".d-table.input-group-text").Should().AllSatisfy(e => e.ClassList.Length.Should().Be(3)); + host.FindAll(".d-table.input-group-text").Should().AllSatisfy(e => e.ClassList.Where(c => c.StartsWith("alert-", StringComparison.Ordinal)).Should().BeEmpty()); var hidden = RenderForm([Field(x => x.Name)], showValidationIndicator: false); await Edit(hidden, FormModes.Edit); diff --git a/PanoramicData.Blazor.Test/Components/PDFormFooterTests.Rendering.cs b/PanoramicData.Blazor.Test/Components/PDFormFooterTests.Rendering.cs index a6c8f3adc..7f4008148 100644 --- a/PanoramicData.Blazor.Test/Components/PDFormFooterTests.Rendering.cs +++ b/PanoramicData.Blazor.Test/Components/PDFormFooterTests.Rendering.cs @@ -100,6 +100,7 @@ public async Task Errors_are_counted_named_and_disable_save() form.WaitForAssertion(() => form.Find(".pd-form-footer-errors").TextContent.Should() .Contain("Please correct the highlighted fields")); + form.Find(".pd-form-footer-errors").ClassList.Should().NotContain("text-danger", "its colours come from --pd-form-footer-error-* variables"); ButtonFor(form, "Save").HasAttribute("disabled").Should().BeTrue(); } diff --git a/PanoramicData.Blazor.Test/Components/PDFormHeaderTests.cs b/PanoramicData.Blazor.Test/Components/PDFormHeaderTests.cs index 1deeb52d6..62931f611 100644 --- a/PanoramicData.Blazor.Test/Components/PDFormHeaderTests.cs +++ b/PanoramicData.Blazor.Test/Components/PDFormHeaderTests.cs @@ -157,6 +157,7 @@ public async Task ToggleHelp_ShowsAndHidesTheHelpText(FormModes mode) await EditAsync(form, mode); form.Markup.Should().NotContain("Fill in the name."); + form.Find("i.fa-question-circle").ClassList.Should().Contain("pd-form-header-help").And.NotContain("text-info"); form.Find("i.fa-question-circle").Click(); form.Find(".pd-form-header .small.text-muted").TextContent.Trim().Should().Be("Fill in the name."); form.Instance.ShowHelp.Should().BeTrue(); diff --git a/PanoramicData.Blazor.Test/ThemeVariableStylesheetTests.cs b/PanoramicData.Blazor.Test/ThemeVariableStylesheetTests.cs index ce35f73af..99ba793d7 100644 --- a/PanoramicData.Blazor.Test/ThemeVariableStylesheetTests.cs +++ b/PanoramicData.Blazor.Test/ThemeVariableStylesheetTests.cs @@ -3,8 +3,8 @@ namespace PanoramicData.Blazor.Test; /// -/// The tree, combo box and context menu take their colours from CSS variables a host can set, and each default is the -/// colour the component had before, so a host that sets nothing sees no change. +/// The tree, combo box, context menu and form take their colours from CSS variables a host can set, and each default is +/// the colour the component had before, so a host that sets nothing sees no change. /// public class ThemeVariableStylesheetTests { @@ -23,6 +23,17 @@ public class ThemeVariableStylesheetTests [InlineData("PDContextMenu.razor.css", "color: var(--pd-contextmenu-disabled-color, #6c757d);")] [InlineData("PDContextMenu.razor.css", "border-bottom: 1px solid var(--pd-contextmenu-border-color, rgba(0,0,0,.125));")] [InlineData("PDFormFieldEditor.razor.css", "border-top: 1px solid var(--pd-form-editor-border-color, #ced4da);")] + [InlineData("PDFormFieldEditor.razor.css", "border-color: var(--pd-form-editor-border-color, var(--bs-border-color, #495057));")] + [InlineData("PDFormBody.razor.css", "background-color: var(--pd-form-title-error-bg, var(--bs-danger-bg-subtle)) !important;")] + [InlineData("PDFormBody.razor.css", "background-color: var(--pd-form-status-invalid-bg, var(--bs-danger-bg-subtle)) !important;")] + [InlineData("PDFormBody.razor.css", "background-color: var(--pd-form-status-required-bg, var(--bs-warning-bg-subtle)) !important;")] + [InlineData("PDFormBody.razor.css", "background-color: var(--pd-form-status-valid-bg, var(--bs-success-bg-subtle)) !important;")] + [InlineData("PDFormBody.razor.css", "box-shadow: inset var(--pd-form-title-edge-width, 0) 0 0 0 var(--pd-form-title-invalid-edge-color, transparent);")] + [InlineData("PDFormBody.razor.css", "color: var(--pd-form-helper-color, var(--bs-info, #0dcaf0));")] + [InlineData("PDFormBody.razor.css", "color: var(--pd-form-error-color, var(--bs-danger, #dc3545));")] + [InlineData("PDFormHeader.razor.css", "color: var(--pd-form-helper-color, var(--bs-info, #0dcaf0));")] + [InlineData("PDFormFooter.razor.css", "color: var(--pd-form-footer-error-color, var(--bs-danger, #dc3545));")] + [InlineData("PDFormFooter.razor.css", "border-width: var(--pd-form-footer-error-border-width, 0 0 1px 0);")] public void A_colour_reads_its_variable_with_the_original_default(string stylesheet, string declaration) => Read(stylesheet).Should().Contain(declaration); diff --git a/PanoramicData.Blazor/PDFormBody.razor b/PanoramicData.Blazor/PDFormBody.razor index 9e81b16dc..1879f1a84 100644 --- a/PanoramicData.Blazor/PDFormBody.razor +++ b/PanoramicData.Blazor/PDFormBody.razor @@ -36,12 +36,12 @@ else if (Form.Mode != FormModes.Hidden)
    @* label *@ -
    +
    @fieldGroup.GetTitle(Form?.GetItemWithUpdates())
    @foreach (var f in fieldGroup.Fields.Where(x => !string.IsNullOrWhiteSpace(x.HelpUrl))) { - } @foreach (var f in fieldGroup.Fields.Where(x => x.Helper != null)) @@ -51,13 +51,13 @@ else if (Form.Mode != FormModes.Hidden) : f.Helper!.IconCssClass2(Form.Item); var css = $"{(f.Helper.Click == null ? "" : "cursor-pointer")}"; var tooltip = Form?.Item is null || f.Helper.ToolTip2 is null ? f.Helper.ToolTip : f.Helper.ToolTip2(Form.Item); - } @if (fieldGroup.Fields.Any(x => x.ShowCopyButton(Form?.Item))) { - + }
    @@ -74,7 +74,7 @@ else if (Form.Mode != FormModes.Hidden) @if (ShowValidationIndicator && Form?.Mode != FormModes.Delete) { var cssCls = GetValidationCssClass(fieldGroup.Fields); - + } @@ -96,7 +96,7 @@ else if (Form.Mode != FormModes.Hidden) { foreach (var message in Form.Errors[fn]) { -
    @message
    +
    @message
    } } } diff --git a/PanoramicData.Blazor/PDFormBody.razor.cs b/PanoramicData.Blazor/PDFormBody.razor.cs index c50314c06..4b280fba2 100644 --- a/PanoramicData.Blazor/PDFormBody.razor.cs +++ b/PanoramicData.Blazor/PDFormBody.razor.cs @@ -289,6 +289,19 @@ private string GetValidationCssClass(IEnumerable> fields) return classes.Contains("alert-success") ? "alert-success" : string.Empty; } + // alert-danger keeps the label's look for existing hosts; the state class tells a field still waiting for a value from a wrong one + private string GetTitleCssClass(FieldGroup fieldGroup) + { + if (!fieldGroup.HasErrors(Form)) + { + return string.Empty; + } + + return GetValidationCssClass(fieldGroup.Fields) == "alert-warning" + ? "alert-danger pd-form-title-required" + : "alert-danger pd-form-title-invalid"; + } + private static string GetValidationIconForCssClass(string cssClass) => "d-table-cell pt-1 fas fa-fw " + cssClass switch { "alert-danger" => "fa-exclamation-circle", diff --git a/PanoramicData.Blazor/PDFormBody.razor.css b/PanoramicData.Blazor/PDFormBody.razor.css index 828638115..786d5a4d5 100644 --- a/PanoramicData.Blazor/PDFormBody.razor.css +++ b/PanoramicData.Blazor/PDFormBody.razor.css @@ -9,23 +9,44 @@ /* BS5 alert-* classes only define CSS variables; without .alert they are not applied. Apply colour and background directly so dark mode works without touching layout. - !important needed to override .input-group-text's own color/background-color rules. */ -.title-box.alert-danger, -.input-group-text.alert-danger { - color: var(--bs-danger-text-emphasis) !important; - background-color: var(--bs-danger-bg-subtle) !important; + !important needed to override .input-group-text's own color/background-color rules. + Each colour reads a --pd-form-* variable a host can set, defaulting to Bootstrap's alert colours. */ +.title-box.alert-danger { + color: var(--pd-form-title-error-color, var(--bs-danger-text-emphasis)) !important; + background-color: var(--pd-form-title-error-bg, var(--bs-danger-bg-subtle)) !important; } -.title-box.alert-warning, -.input-group-text.alert-warning { - color: var(--bs-warning-text-emphasis) !important; - background-color: var(--bs-warning-bg-subtle) !important; +.pd-form-status.alert-danger { + color: var(--pd-form-status-invalid-color, var(--bs-danger-text-emphasis)) !important; + background-color: var(--pd-form-status-invalid-bg, var(--bs-danger-bg-subtle)) !important; } -.title-box.alert-success, -.input-group-text.alert-success { - color: var(--bs-success-text-emphasis) !important; - background-color: var(--bs-success-bg-subtle) !important; +.pd-form-status.alert-warning { + color: var(--pd-form-status-required-color, var(--bs-warning-text-emphasis)) !important; + background-color: var(--pd-form-status-required-bg, var(--bs-warning-bg-subtle)) !important; +} + +.pd-form-status.alert-success { + color: var(--pd-form-status-valid-color, var(--bs-success-text-emphasis)) !important; + background-color: var(--pd-form-status-valid-bg, var(--bs-success-bg-subtle)) !important; +} + +/* An edge down the label of a field still waiting for a value, or holding a wrong one; none unless the host gives it a width */ +.title-box.pd-form-title-required { + box-shadow: inset var(--pd-form-title-edge-width, 0) 0 0 0 var(--pd-form-title-required-edge-color, transparent); +} + +.title-box.pd-form-title-invalid { + box-shadow: inset var(--pd-form-title-edge-width, 0) 0 0 0 var(--pd-form-title-invalid-edge-color, transparent); +} + +/* The help link, helper and copy icons beside a label, and the message under a field: Bootstrap's info and danger colours unless the host sets its own */ +.pd-form-body ::deep .pd-form-helper { + color: var(--pd-form-helper-color, var(--bs-info, #0dcaf0)); +} + +.pd-form-field-form-error-message { + color: var(--pd-form-error-color, var(--bs-danger, #dc3545)); } diff --git a/PanoramicData.Blazor/PDFormFieldEditor.razor.css b/PanoramicData.Blazor/PDFormFieldEditor.razor.css index bc3dbf64f..beaf83012 100644 --- a/PanoramicData.Blazor/PDFormFieldEditor.razor.css +++ b/PanoramicData.Blazor/PDFormFieldEditor.razor.css @@ -10,6 +10,11 @@ vertical-align: middle; } +/* Bootstrap 5.3's dark mode: its own border colour, as its inputs have, unless the host sets the variable */ +[data-bs-theme="dark"] .editor { + border-color: var(--pd-form-editor-border-color, var(--bs-border-color, #495057)); +} + /* The editors are mostly child components (PDTextBox, PDDateTime, Monaco, ...), so the rules that style them live in wwwroot/css/main.scss, anchored to the .pd-form-field-editor root class. */ diff --git a/PanoramicData.Blazor/PDFormFooter.razor b/PanoramicData.Blazor/PDFormFooter.razor index 4a326b339..cbe923689 100644 --- a/PanoramicData.Blazor/PDFormFooter.razor +++ b/PanoramicData.Blazor/PDFormFooter.razor @@ -8,7 +8,7 @@ else if (Form.Mode != FormModes.Hidden && Form.Mode != FormModes.Empty)
    @if (ShowErrorCount && ShowSave && (Form.Mode == FormModes.Create || Form.Mode == FormModes.Edit) && _errorCount > 0) { -
    +
    @(string.Format(ErrorCountMessage, _errorCount, _errorCount == 1 ? "" : "s", _errorFieldNames))
    diff --git a/PanoramicData.Blazor/PDFormFooter.razor.css b/PanoramicData.Blazor/PDFormFooter.razor.css index 25d082c6a..180483912 100644 --- a/PanoramicData.Blazor/PDFormFooter.razor.css +++ b/PanoramicData.Blazor/PDFormFooter.razor.css @@ -2,11 +2,22 @@ width: 100%; } +/* Danger-coloured text over a line by default; a host can make it a box, for example with a coloured edge */ .pd-form-footer-errors { font-size: 0.875rem; - padding: 0.25rem 0; + padding: var(--pd-form-footer-error-padding, 0.25rem 0); margin-bottom: 0.75rem; - border-bottom: 1px solid currentColor; + color: var(--pd-form-footer-error-color, var(--bs-danger, #dc3545)); + background-color: var(--pd-form-footer-error-bg, transparent); + border-style: solid; + border-width: var(--pd-form-footer-error-border-width, 0 0 1px 0); + border-color: var(--pd-form-footer-error-border-color, currentColor); + border-left-color: var(--pd-form-footer-error-edge-color, var(--pd-form-footer-error-border-color, currentColor)); + border-radius: var(--pd-form-footer-error-radius, 0); +} + +.pd-form-footer-errors i { + color: var(--pd-form-footer-error-icon-color, inherit); } /* The footer's PDToolbar is styled in wwwroot/css/main.scss. */ diff --git a/PanoramicData.Blazor/PDFormHeader.razor b/PanoramicData.Blazor/PDFormHeader.razor index 970c23e25..8f3077b3d 100644 --- a/PanoramicData.Blazor/PDFormHeader.razor +++ b/PanoramicData.Blazor/PDFormHeader.razor @@ -25,7 +25,7 @@ else if (Form.Mode != FormModes.Hidden && Form.Mode != FormModes.Empty) @if (Form.HelpTextMode == HelpTextMode.Toggle) { - + } } else if (Form.Mode == FormModes.Cancel) @@ -68,7 +68,7 @@ else if (Form.Mode != FormModes.Hidden && Form.Mode != FormModes.Empty) @if (Form.HelpTextMode == HelpTextMode.Toggle) { - + } }
    diff --git a/PanoramicData.Blazor/PDFormHeader.razor.css b/PanoramicData.Blazor/PDFormHeader.razor.css index a3b8ab13d..6d24be38f 100644 --- a/PanoramicData.Blazor/PDFormHeader.razor.css +++ b/PanoramicData.Blazor/PDFormHeader.razor.css @@ -2,4 +2,9 @@ font-weight: bold; font-size: 1.2rem; width: 100%; +} + +/* Bootstrap's info colour unless the host sets its own */ +.pd-form-header-help { + color: var(--pd-form-helper-color, var(--bs-info, #0dcaf0)); } \ No newline at end of file diff --git a/PanoramicData.Blazor/PanoramicData.Blazor.csproj b/PanoramicData.Blazor/PanoramicData.Blazor.csproj index 7eb6d36c1..cef01cf23 100644 --- a/PanoramicData.Blazor/PanoramicData.Blazor.csproj +++ b/PanoramicData.Blazor/PanoramicData.Blazor.csproj @@ -28,7 +28,7 @@ true snupkg README.md - PDTree, PDComboBox, PDContextMenu and PDFormFieldEditor take the colours they drew in fixed values from CSS variables a host can set on :root or on a theme class. Each defaults to the colour drawn before, so nothing changes for existing hosts. PDTree: --pd-tree-selected-bg and --pd-tree-selected-color for the selected node, and --pd-tree-node-radius and --pd-tree-node-inset-end for the shape its hover and selection share. PDComboBox: --pdcb-focus-border and --pdcb-focus-ring for the focused input. PDContextMenu: --pd-contextmenu-bg, --pd-contextmenu-color, --pd-contextmenu-hover-bg, --pd-contextmenu-border-color and --pd-contextmenu-disabled-color, which also win under Bootstrap 5.3's dark mode, where the existing dark colours stay the defaults. PDFormFieldEditor: --pd-form-editor-border-color for the frame around a field's editor. Each component's documentation page lists its variables. + PDForm's validation and helper colours come from CSS variables a host can set on :root or on a theme class, each defaulting to the colour drawn before, so nothing changes for existing hosts. A field's label (--pd-form-title-error-bg, --pd-form-title-error-color) and validation indicator (--pd-form-status-valid-, -required- and -invalid-bg and -color) can be recoloured, and a label can show a coloured edge (--pd-form-title-edge-width, --pd-form-title-required-edge-color, --pd-form-title-invalid-edge-color) that tells a field still waiting for a value from one holding a wrong value; the label carries pd-form-title-required or pd-form-title-invalid to match. The help link, helper, copy and header help icons (--pd-form-helper-color), a field's error message (--pd-form-error-color) and the footer's error count (--pd-form-footer-error-*) no longer use Bootstrap's fixed text-info and text-danger classes. Under Bootstrap 5.3's dark mode the frame around a field's editor now takes Bootstrap's dark border colour instead of a light grey, unless --pd-form-editor-border-color is set. The documentation lists every variable, and the PDForm 6 demo page turns groups of them on and off.