Add BitMessageBox component (#9624)#9629
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe pull request introduces a new Changes
Assessment against linked issues
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: 2
🧹 Nitpick comments (7)
src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor (2)
10-13: Consider adding an accessible label for the close button.
Currently, the close button relies solely on an icon. For improved accessibility, you could add an"aria-label"or incorporate text that screen readers can interpret.<BitButton OnClick="CloseModal" IconName="ChromeClose" + AriaLabel="Close message box" Color="BitColor.Tertiary" Variant="BitVariant.Text" />
21-23: Consider enabling localization for the Ok button text.
Hardcoding "Ok" is fine for demos, but in production scenarios, provide a localization key so that users can translate it.src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor.cs (2)
20-20: Use EventCallback instead of Action for improved async support in Blazor.
Action?works for synchronous callbacks, but switching toEventCallbackorEventCallback<T>could future-proof for asynchronous operations.-[Parameter] public Action? OnClose { get; set; } +[Parameter] public EventCallback OnClose { get; set; }
29-32: Rename method to better reflect component context.
The method nameCloseModalmight be confusing if this component is also used outside of a modal context. Consider using something likeCloseMessageBox.-private void CloseModal() +private void CloseMessageBox() { OnClose?.Invoke(); }src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor (1)
19-26: Confirm modal usage in more complex scenarios.
Demonstrating usage inside a basic modal is helpful. Consider adding a more complex scenario, such as passing dynamic content to the message box or handling asynchronous confirm/cancel flows.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs (1)
38-42: Consider raising an event instead of calling StateHasChanged directly.While directly calling
StateHasChanged()is a simple approach for re-rendering, for more complex scenarios it may be beneficial to raise a local UI event or use an event callback, providing consumers with better control over execution flow.src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.scss (1)
5-13: Consider adding a fallback for max-height.While using
$bit-env-height-availableis good for modern browsers, consider adding a fallback value for better browser compatibility..bit-msb { padding: spacing(2); min-width: spacing(40); - max-height: $bit-env-height-available; + max-height: $bit-env-height-available; + max-height: 100vh; /* Fallback for older browsers */ @include lt-md { min-width: unset; } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor(1 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor.cs(1 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.scss(1 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/LoadingComponent.razor(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (17)
src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor (1)
1-2: Namespace selection looks consistent.
Declaring the component underBit.BlazorUIaligns with the rest of the codebase and maintains a clean, predictable namespace structure.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor (1)
1-2: Great addition of a dedicated demo page.
Having a distinct route makes it easier for consumers to understand and try the component.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs (8)
1-4: Namespace and class structure look good.Well-structured partial class declaration. The file naming convention aligns well with the component name "BitMessageBoxDemo".
5-35: Parameter definitions are comprehensive and well-organized.The list of parameters covers essential fields like
Body,OkText,OnClose, andTitle. The usage ofList<ComponentParameter>provides clarity and expandability for future parameters.
44-55: Usage of BitModalService is well-integrated.The
ShowMessageBox()method demonstrates a clear approach to instantiating and displaying theBitMessageBoxvia the modal service. Adopting dictionary-based parameters is a flexible way to parameterize the message box.
59-62: Clean demonstration code snippet.This snippet shows a straightforward usage example of
BitMessageBoxwithout additional overhead, making it easy for newcomers to replicate.
64-68: Modal usage example is appropriate.Embedding
BitMessageBoxwithin<BitModal>exemplifies a typical scenario. This snippet is concise and effectively highlights how the component can be reused in modals.
69-74: Complementary C# snippet is coherent.Mirroring the code-behind side, this snippet ensures clarity for developers who want to replicate the same approach in their own components.
76-78: Method invocation snippet is straightforward.It cleanly demonstrates how a single button click triggers the
ShowMessageBox()method.
79-91: C# snippet effectively captures the modal pattern.The snippet parallels the code used in the class, helping users understand how to integrate the message box with the modal service in a real-world scenario.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs (1)
156-156: New navigation entry is consistent with existing structure.This addition to the "Extras" section seamlessly follows the established pattern, making the
MessageBoxeasy to discover in the nav menu.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor (1)
256-258: Link addition properly showcases the new component.The “MessageBox” link in the “Extras” section clearly directs users to the demo page, maintaining the consistent style of the existing links.
src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss (1)
5-5: Import statement correctly references the new MessageBox styles.This line ensures that the
BitMessageBoxcomponent’s SCSS is bundled appropriately with other component styles, preserving visual consistency.src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.scss (3)
1-3: LGTM! Imports are well-organized.The imports follow a logical order and include all necessary dependencies for styling.
15-35: LGTM! Container and header styles are well-structured.The flex layouts are appropriately used with consistent spacing and proper box model settings.
50-58: LGTM! Footer styles are well-implemented.The footer styling properly implements centering and maintains consistency with other sections.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json (1)
74-79: LGTM! Configuration entry is consistent.The new configuration entry for BitMessageBoxDemo follows the established pattern and maintains consistency with other demo components.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/LoadingComponent.razor
Show resolved
Hide resolved
src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.scss
Show resolved
Hide resolved
3 participants
closes #9624
Summary by CodeRabbit
New Features
BitMessageBoxcomponent for displaying message boxes in Blazor applicationsDocumentation
Styles