Show missing required asterisk in BitDateRangePicker's label (#9888)#9889
Conversation
WalkthroughThe changes introduce a new Changes
Sequence Diagram(s)sequenceDiagram
participant Demo as Demo Page
participant DTP as BitDateRangePicker
participant CSS as Stylesheet
Demo->>DTP: Render component with Required attribute
DTP->>DTP: Set <input> with required="@Required"
DTP->>DTP: Call RegisterCssClasses()
Note right of DTP: If Enabled & Required, add "bit-dtrp-req"
DTP->>CSS: Apply .bit-dtrp-req styles
CSS-->>DTP: Render asterisk indicator on label
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: 0
🔭 Outside diff range comments (1)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs (1)
5-431: 🛠️ Refactor suggestionAdd documentation for the Required property.
The
Requiredproperty should be documented in the component parameters list to maintain consistency with other parameters and provide clear documentation for users.Add the following parameter documentation:
private readonly List<ComponentParameter> componentParameters = new() { + new() + { + Name = "Required", + Type = "bool", + DefaultValue = "false", + Description = "Whether the DateRangePicker is required to have a value.", + }, new() { Name = "AllowTextInput", Type = "bool",
🧹 Nitpick comments (1)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss (1)
794-800: LGTM! Consider enhancing accessibility.The required field styling is well-implemented, following the codebase patterns and properly handling RTL layouts.
Consider adding
aria-hidden="true"to the asterisk to prevent screen readers from announcing it, while ensuring the required state is communicated through ARIA attributes on the input element:.bit-dtrp-req { .bit-dtrp-lbl::after { - content: "*"; + content: "*" / ""; /* The empty string after the slash will be used for aria-label */ color: $clr-req; margin-inline-start: spacing(0.625); } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.scss(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (4)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor (1)
22-23: LGTM! Good example of required field usage.The example clearly demonstrates how to use the new required field functionality.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor (1)
36-36: LGTM! Proper implementation of HTML5 required attribute.The required attribute is correctly bound to the Required property, enabling native form validation.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs (1)
568-568: LGTM! Well-implemented CSS class registration.The CSS class registration correctly handles both enabled and required states, following the component's established patterns.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs (1)
1012-1012: LGTM! The example demonstrates the Required property effectively.The example is well-placed within the basic examples section and follows the same pattern as other examples, making it easy for users to understand how to use the
Requiredproperty.
2 participants
This closes #9888
Summary by CodeRabbit