Add BitMediaQuery component (#10037)#10044
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 WalkthroughThis pull request reformats internal visibility entries in the project file and introduces a responsive media query feature. A new Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant ML as MainLayout
participant Demo as MediaQueryDemo Page
participant BM as BitMediaQuery Component
U->>ML: Click "MediaQuery" link
ML->>Demo: Load demo page (/components/mediaquery)
Demo->>BM: Render BitMediaQuery with BitScreenQuery.Sm
BM-->>Demo: Build render tree and output "This is SM!"
Demo-->>U: Display rendered content
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 (2)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/MediaQuery/BitMediaQueryDemo.razor (1)
10-12: Consider expanding the demo with more examples.The basic example demonstrates the component's usage well, but consider adding more examples showcasing different query types (LtMd, GtSm, etc.) to better illustrate the component's capabilities.
src/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.scss (1)
8-102: Consider using more specific display property instead ofunsetUsing
display: unsetwill revert to the element's default display value, which might cause inconsistent behavior across different HTML elements.Consider using a more specific display value like
display: blockor allowing the display property to be configurable. For example:.bit-mdq-xs { @include xs { - display: unset; + display: block; } }Alternatively, you could add an additional class that can be used to specify the display type when the condition is met.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.scss(1 hunks)src/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitScreenQuery.cs(1 hunks)src/BlazorUI/Bit.BlazorUI/Styles/components.scss(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/MediaQuery/BitMediaQueryDemo.razor(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/MediaQuery/BitMediaQueryDemo.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/MainLayout.razor.NavItems.cs(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/BlazorUI/Bit.BlazorUI/Styles/components.scss
- src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (6)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs (1)
140-140: Navigation item for MediaQuery correctly added.The navigation item for the new MediaQuery component is properly placed in the Utilities section, following the same pattern as other items.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor (1)
229-231: MediaQuery link added with consistent styling.The link to the MediaQuery component follows the same structure and styling pattern as other utility components.
src/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitScreenQuery.cs (1)
6-87: Well-structured enum with clear documentation.The BitScreenQuery enum is well-designed with comprehensive XML documentation for each value. The breakpoints chosen are standard and the naming conventions (Xs, Sm, Md, etc.) align with industry patterns. The inclusion of both specific sizes and comparative queries (LtSm, GtMd, etc.) provides good flexibility.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/compilerconfig.json (1)
434-439: LGTM! New media query demo configuration added correctly.The configuration entry for the BitMediaQueryDemo component follows the same pattern as other components, with correct path references and consistent formatting.
src/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.cs (1)
1-63: Good implementation of the media query componentThe component is well-structured, following the project's established patterns and conventions. The switch expression for mapping enum values to CSS class names is a clean approach.
src/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.scss (1)
4-6: Base class hides elements by defaultThe use of
display: noneas the default state for the media query component is appropriate, as it ensures elements are hidden until media query conditions are met.
...t.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/MediaQuery/BitMediaQueryDemo.razor.cs
Show resolved
Hide resolved
src/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.cs
Show resolved
Hide resolved
1 participant
closes #10037
Summary by CodeRabbit
New Features
Chores