Add missing features to BitCard (#12251)#12252
Merged
msynk merged 6 commits intobitfoundation:developfrom Apr 13, 2026
Merged
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughThe BitCard component gains six new styling and layout parameters—Elevation (int? 1–24), Height, Width, NoPadding, Outlined, and Square—implemented across the component class, SCSS styles, parameter handler, demo page, and corresponding unit tests. Changes
Poem
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds the missing feature set to BitCard (elevation, outlined, square, no-padding, explicit width/height) and updates the demo/tests accordingly to close #12251.
Changes:
- Introduces new
BitCardparameters (Elevation,Outlined,Square,NoPadding,Width,Height) and wires them into class/style builders. - Adds corresponding SCSS classes (elevation levels, outlined/square/no-padding).
- Expands bUnit tests and updates the demo page to showcase the new options.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.razor.cs | Adds new parameters and registers the new CSS classes/styles. |
| src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCardParams.cs | Enables cascading parameter updates for the new BitCard parameters. |
| src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.scss | Adds elevation/outlined/square/no-padding styling. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Card/BitCardDemo.razor | Adds demo examples for elevation/outlined/square/no-padding/width-height. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Card/BitCardDemo.razor.cs | Updates documented parameters and code snippets for the new demos. |
| src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Card/BitCardTests.cs | Adds tests validating the new parameters’ rendered classes/styles. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Card/BitCardDemo.razor.cs (1)
163-176:⚠️ Potential issue | 🟡 MinorKeep the displayed snippets aligned with the live demo.
example2RazorCodeomits the padded wrapper used inBitCardDemo.razor, andexample9RazorCodeomits theStyle="overflow:hidden"attribute. Since these strings are the copy-paste docs for the demo, they currently won’t reproduce the rendered examples.Also applies to: 266-281
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Card/BitCardDemo.razor.cs` around lines 163 - 176, The embedded demo strings example2RazorCode and example9RazorCode do not match the live BitCardDemo.razor markup; update those string literals so they include the same padded wrapper around the BitCard used in BitCardDemo.razor and add the Style="overflow:hidden" attribute to the BitCard markup in example9RazorCode (and any other snippet(s) noted around the second range) so the copy-paste snippets reproduce the rendered examples exactly; locate and modify the readonly fields example2RazorCode, example2CSharpCode and example9RazorCode in BitCardDemo.razor.cs to mirror the actual markup/attributes used in the .razor demo.
🧹 Nitpick comments (1)
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.razor.cs (1)
115-135: Avoid emitting contradictory modifier classes.
Outlined/NoShadowcurrently coexist withbit-crd-e*, andOutlinedcan also coexist with thebit-crd-*-brclasses. That only works becauseBitCard.scsscurrently declares.bit-crd-nsd/.bit-crd-otlafter the elevation and border rules. Encoding the precedence here would make the behavior less fragile.♻️ Suggested refactor
- ClassBuilder.Register(() => Border switch - { - BitColorKind.Primary => "bit-crd-brd bit-crd-pbr", - BitColorKind.Secondary => "bit-crd-brd bit-crd-sbr", - BitColorKind.Tertiary => "bit-crd-brd bit-crd-tbr", - BitColorKind.Transparent => "bit-crd-brd bit-crd-rbr", - _ => "" - }); + ClassBuilder.Register(() => Outlined ? string.Empty : Border switch + { + BitColorKind.Primary => "bit-crd-brd bit-crd-pbr", + BitColorKind.Secondary => "bit-crd-brd bit-crd-sbr", + BitColorKind.Tertiary => "bit-crd-brd bit-crd-tbr", + BitColorKind.Transparent => "bit-crd-brd bit-crd-rbr", + _ => "" + }); - ClassBuilder.Register(() => Elevation is >= 1 and <= 24 ? $"bit-crd-e{Elevation}" : string.Empty); + ClassBuilder.Register(() => + Elevation is >= 1 and <= 24 && NoShadow is false && Outlined is false + ? $"bit-crd-e{Elevation}" + : string.Empty);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.razor.cs` around lines 115 - 135, The component currently emits potentially conflicting modifier classes; update the ClassBuilder.Register lambdas so Outlined and NoShadow suppress contradictory classes: change the Elevation registration (the lambda using Elevation) to return an empty string when Outlined || NoShadow is true (otherwise emit $"bit-crd-e{Elevation}" when in range), and change the Border registration (the lambda using Border) to return an empty string when Outlined is true (otherwise map Border to the appropriate "bit-crd-brd bit-crd-*-br" classes); keep other registrations unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Card/BitCardDemo.razor.cs`:
- Around line 163-176: The embedded demo strings example2RazorCode and
example9RazorCode do not match the live BitCardDemo.razor markup; update those
string literals so they include the same padded wrapper around the BitCard used
in BitCardDemo.razor and add the Style="overflow:hidden" attribute to the
BitCard markup in example9RazorCode (and any other snippet(s) noted around the
second range) so the copy-paste snippets reproduce the rendered examples
exactly; locate and modify the readonly fields example2RazorCode,
example2CSharpCode and example9RazorCode in BitCardDemo.razor.cs to mirror the
actual markup/attributes used in the .razor demo.
---
Nitpick comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.razor.cs`:
- Around line 115-135: The component currently emits potentially conflicting
modifier classes; update the ClassBuilder.Register lambdas so Outlined and
NoShadow suppress contradictory classes: change the Elevation registration (the
lambda using Elevation) to return an empty string when Outlined || NoShadow is
true (otherwise emit $"bit-crd-e{Elevation}" when in range), and change the
Border registration (the lambda using Border) to return an empty string when
Outlined is true (otherwise map Border to the appropriate "bit-crd-brd
bit-crd-*-br" classes); keep other registrations unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: be4ce7ac-d1c6-4e84-acc6-31b38d558512
📒 Files selected for processing (6)
src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.razor.cssrc/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.scsssrc/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCardParams.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Card/BitCardDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Card/BitCardDemo.razor.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Card/BitCardTests.cs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #12251
Summary by CodeRabbit
New Features
Tests