feat(blazorui): show missing required asterisk in BitDatePicker's label

#9862 (#9880)
bitfoundation · Feb 12, 2025 · 58a192e · 58a192e
1 parent 517f45f
commit 58a192e
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 0 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor
@@ -34,6 +34,7 @@
                        id="@_inputId"
                        role="combobox"
                        tabindex="@TabIndex"
+                       required="@Required"
                        aria-haspopup="dialog"
                        aria-label="@AriaLabel"
                        placeholder="@Placeholder"

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs
@@ -501,6 +501,8 @@ protected override void RegisterCssClasses()
         ClassBuilder.Register(() => Standalone ? "bit-dtp-sta" : string.Empty);
 
         ClassBuilder.Register(() => _hasFocus ? $"bit-dtp-foc {Classes?.Focused}" : string.Empty);
+
+        ClassBuilder.Register(() => IsEnabled && Required ? "bit-dtp-req" : string.Empty);
     }
 
     protected override void RegisterCssStyles()

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss
@@ -747,6 +747,13 @@
     }
 }
 
+.bit-dtp-req {
+    .bit-dtp-lbl::after {
+        content: "*";
+        color: $clr-req;
+        margin-inline-start: spacing(0.625);
+    }
+}
 
 .bit-dtp-res {
     @include lt-sm {

diff --git a/.../Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor b/.../Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor
@@ -19,6 +19,8 @@
             <br /><br />
             <BitDatePicker Label="Disabled" IsEnabled="false" />
             <br /><br />
+            <BitDatePicker Label="Required" Required />
+            <br /><br />
             <BitDatePicker Label="PlaceHolder" Placeholder="Select a date" />
             <br /><br />
             <BitDatePicker Label="Week numbers" ShowWeekNumbers />

diff --git a/...t.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.cs b/...t.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.cs
@@ -938,6 +938,7 @@ private void HandleInvalidSubmit()
     private readonly string example1RazorCode = @"
 <BitDatePicker Label=""Basic DatePicker"" />
 <BitDatePicker Label=""Disabled"" IsEnabled=""false"" />
+<BitDatePicker Label=""Required"" Required />
 <BitDatePicker Label=""PlaceHolder"" Placeholder=""Select a date"" />
 <BitDatePicker Label=""Week numbers"" ShowWeekNumbers />
 <BitDatePicker Label=""Highlight months"" HighlightCurrentMonth HighlightSelectedMonth />