Show missing required asterisk in BitDatePicker's label (#9862) #9880
Conversation
WalkthroughThe pull request enhances the BitDatePicker component by enforcing required field validation. A new Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant D as BitDatePicker Component
participant S as Styling Logic
participant F as Form Validator
U->>D: Renders date picker with input field
D->>S: Register CSS class if (IsEnabled && Required)
U->>D: Interacts with input (enters date or leaves blank)
U->>D: Submits form
D->>F: Triggers built-in validation (required attribute)
F-->>D: Returns validation result (error if empty)
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor (1)
22-23: Consider enhancing the Required demo with form validation.While the basic demo shows how to set the Required attribute, it would be more helpful to demonstrate it within a form context showing validation behavior.
Consider adding validation example similar to the existing validation demo but specifically highlighting the Required functionality:
-<BitDatePicker Label="Required" Required /> +<EditForm Model="requiredModel" OnValidSubmit="HandleValidSubmit"> + <DataAnnotationsValidator /> + <BitDatePicker Label="Required Date" @bind-Value="requiredModel.Date" Required /> + <ValidationMessage For="@(() => requiredModel.Date)" /> + <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton> +</EditForm>src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss (1)
750-756: LGTM! Consider enhancing screen reader support.The implementation of the required field indicator is clean and follows the established patterns. The use of CSS variables and the spacing function maintains consistency.
Consider adding
aria-hidden="true"to the asterisk and including "(required)" in the label text for better screen reader support:.bit-dtp-req { .bit-dtp-lbl::after { content: "*"; + aria-hidden: true; color: $clr-req; margin-inline-start: spacing(0.625); } + .bit-dtp-lbl::before { + content: " (required)"; + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + } }src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.cs (1)
1248-1253: Verify Required property integration with form validation.The existing validation example uses the
[Required]attribute. Consider adding another example that demonstrates how theRequiredproperty of BitDatePicker integrates with form validation to ensure they work together correctly.Consider adding an example like this:
<EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit"> <DataAnnotationsValidator /> - <BitDatePicker @bind-Value="validationModel.Date" /> + <BitDatePicker @bind-Value="validationModel.Date" Required /> <ValidationMessage For="@(() => validationModel.Date)" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.scss(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.cs(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (3)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor (1)
37-37: LGTM! HTML5 required attribute properly implemented.The required attribute is correctly bound to the Required parameter, enabling native HTML5 form validation.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs (1)
505-505: LGTM! CSS class registration properly implemented.The CSS class registration correctly handles the required state by checking both IsEnabled and Required properties, following the component's established patterns.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.cs (1)
941-941: LGTM! Good example of the Required property.The example clearly demonstrates how to use the Required property with the BitDatePicker component, which aligns with the PR's objective of fixing the required asterisk display issue.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs
Show resolved
Hide resolved
msynk
changed the title
This closes #9862
Summary by CodeRabbit
New Features
Style