Add missing features to BitPersona (#12250)#12264
Merged
msynk merged 6 commits intobitfoundation:developfrom Apr 19, 2026
Merged
Add missing features to BitPersona (#12250)#12264msynk merged 6 commits intobitfoundation:developfrom
msynk merged 6 commits intobitfoundation:developfrom
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 BitPersona component gains new features including AutoCoinColor with deterministic hashing, image event callbacks (OnImageLoad, OnImageError), and HTML image attributes (ImageLoading, ImageSrcSet). The CoinShape enum is removed and replaced with a Squared boolean parameter. Styles are refactored and demo pages are updated to showcase the new capabilities. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 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 |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs (1)
376-380:⚠️ Potential issue | 🟡 MinorHonor
Reversedfor squared custom-size presence positioning.Line 379 always writes inline
right, which can override the.bit-prs-rvsleft-side positioning whenSquared,Reversed, andCoinSizeare used together.🐛 Proposed fix
if (Squared) { var presentationPosition = presentationSize / 3D; - position = FormattableString.Invariant($"right:-{presentationPosition}px;bottom:-{presentationPosition}px;"); + var side = Reversed ? "left" : "right"; + position = FormattableString.Invariant($"{side}:-{presentationPosition}px;bottom:-{presentationPosition}px;"); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs` around lines 376 - 380, The squared presence positioning in BitPersona.razor.cs currently always writes "right:..." which conflicts with the .bit-prs-rvs left-side layout when Reversed is true; update the Squared block that computes presentationPosition and sets position to conditionally use "left:-{presentationPosition}px;" when the Reversed property is true and "right:-{presentationPosition}px;" otherwise (preserving the "bottom:-{presentationPosition}px;" part), so the positioning honors the Reversed flag for custom CoinSize scenarios.src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss (1)
64-90:⚠️ Potential issue | 🟠 MajorKeep the hover overlay above the positioned image.
Line 89 makes the image absolutely positioned. Since the overlay is rendered before the image and is also positioned, the image can paint above it and hide the hover action overlay.
🐛 Proposed fix
.bit-prs-imo { width: 100%; height: 100%; display: none; font-weight: 400; position: absolute; + z-index: 1; align-items: center; justify-content: center; font-size: spacing(1.75); transition: all 0.1s linear; color: var(--bit-prs-coin-clr-txt); @@ .bit-prs-img { top: 0; left: 0; opacity: 1; width: 100%; height: 100%; display: block; position: absolute; + z-index: 0; object-fit: cover; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss` around lines 64 - 90, The hover overlay (.bit-prs-imo) is being painted under the absolutely positioned image (.bit-prs-img); add stacking rules so the overlay sits above the image by giving .bit-prs-imo a higher z-index (e.g., z-index: 2) and ensure .bit-prs-img has a lower z-index (e.g., z-index: 1) or no z-index, so the overlay remains visible on hover; update the CSS rules for .bit-prs-imo and/or .bit-prs-img accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor`:
- Line 88: The current style binding in BitPersona.razor sets style to null when
_isLoaded is true, which drops consumer-provided Styles.Image; change the
binding to call the helper GetImageStyle() instead of using null so that it
always returns Styles?.Image and only adds "opacity:0;" while loading. Update
the usage of _isLoaded and Styles.Image in the style attribute to use
GetImageStyle(), ensuring GetImageStyle() composes Styles.Image with the opacity
override when _isLoaded is false and otherwise returns Styles.Image intact.
---
Outside diff comments:
In
`@src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs`:
- Around line 376-380: The squared presence positioning in BitPersona.razor.cs
currently always writes "right:..." which conflicts with the .bit-prs-rvs
left-side layout when Reversed is true; update the Squared block that computes
presentationPosition and sets position to conditionally use
"left:-{presentationPosition}px;" when the Reversed property is true and
"right:-{presentationPosition}px;" otherwise (preserving the
"bottom:-{presentationPosition}px;" part), so the positioning honors the
Reversed flag for custom CoinSize scenarios.
In `@src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss`:
- Around line 64-90: The hover overlay (.bit-prs-imo) is being painted under the
absolutely positioned image (.bit-prs-img); add stacking rules so the overlay
sits above the image by giving .bit-prs-imo a higher z-index (e.g., z-index: 2)
and ensure .bit-prs-img has a lower z-index (e.g., z-index: 1) or no z-index, so
the overlay remains visible on hover; update the CSS rules for .bit-prs-imo
and/or .bit-prs-img accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 34208009-2a78-43db-b21d-edb5200002c9
📒 Files selected for processing (7)
src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razorsrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersonaCoinShape.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs
💤 Files with no reviewable changes (1)
- src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersonaCoinShape.cs
Contributor
There was a problem hiding this comment.
Pull request overview
Adds the missing BitPersona features requested in #12250 by extending the component API (auto coin coloring, image events, image loading/srcset, and squared coin shape) and updating the demo to showcase these capabilities.
Changes:
- Added new BitPersona parameters:
AutoCoinColor,Squared,OnImageLoad,OnImageError,ImageLoading, andImageSrcSet. - Updated BitPersona styling to make circular the default and adjust image positioning.
- Updated the demo page and samples to document and demonstrate the new features; removed the old
BitPersonaCoinShapeenum.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs | Introduces new parameters/behaviors (auto coin color, squared shape, image events, loading/srcset) and related logic. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor | Wires new <img> attributes and event callbacks; adjusts image visibility behavior. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss | Makes circular default, removes circular wrapper class, and changes image positioning rules. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersonaCoinShape.cs | Removes the enum formerly used to control coin shape. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs | Updates the demo’s parameter documentation for the new API surface. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor | Adds new demo sections/examples for AutoCoinColor and image-related features; updates squared example. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs | Updates displayed code snippets to match new features and example ordering. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fills feature gaps in BitPersona by adding auto coin color generation, image lifecycle callbacks, and image loading/srcset support, while simplifying coin shape customization from an enum to a boolean (Squared). It updates the demo pages and adds bUnit tests to cover the new behaviors.
Changes:
- Added
AutoCoinColor,OnImageLoad/OnImageError,ImageLoading(BitImageLoading?), andImageSrcSettoBitPersona. - Replaced
CoinShape(enum) withSquared(bool) and updated styling to make circular the default via base CSS. - Expanded demo content and added/extended bUnit tests for the new API surface.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs | Adds new parameters/behavior (auto color, image events, squared) and image load/error handling. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor | Renders srcset/loading and switches image visibility behavior to opacity-based hiding. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss | Updates shape styling defaults and refactors image/overlay positioning. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersonaCoinShape.cs | Removes the old BitPersonaCoinShape enum. |
| src/BlazorUI/Bit.BlazorUI/Components/BitImageLoading.cs | Introduces BitImageLoading enum for HTML loading attribute mapping. |
| src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs | Adds tests for squared shape, auto coin color, image loading/srcset, and image events/visibility. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor | Updates demo to showcase new features and Squared usage. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs | Updates demo parameter docs and adds BitImageLoading enum documentation section. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs | Updates code samples and adds new snippets for the added features. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR completes the feature parity work for BitPersona by adding missing image-related capabilities and coin styling options, along with updating demos and adding bUnit coverage to validate the new behaviors.
Changes:
- Added
AutoCoinColor, image lifecycle callbacks (OnImageLoad/OnImageError), and image attributes (ImageLoading,ImageSrcSet) toBitPersona. - Replaced
CoinShapeenum with a simplifiedSquaredboolean and updated styling to make circular the default shape. - Expanded bUnit tests and updated demo pages/samples to showcase and document the new parameters.
Reviewed changes
Copilot reviewed 16 out of 17 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs | Adds new parameters (auto color, image events, loading/srcset, squared) and related logic/state handling. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor | Renders loading/srcset attributes and switches to opacity-based visibility during image loading. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss | Updates shape defaults and stacking/positioning for image/overlay/presence; adjusts spacing via gap. |
| src/BlazorUI/Bit.BlazorUI/Components/BitImageLoading.cs | Introduces BitImageLoading enum used for img loading attribute mapping. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersonaCoinShape.cs | Removes the old CoinShape enum. |
| src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs | Adds test coverage for squared rendering, auto coin color determinism/precedence, image loading/srcset, and load/error callbacks. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs | Updates documented parameters (adds new ones, replaces CoinShape with Squared, adds BitImageLoading enum docs). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs | Adds/rewrites sample snippets for squared, auto color, image events, loading/srcset. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor | Reorganizes demo sections and adds new demo examples for the newly added parameters. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor(.cs) | Updates the displayed Persona name in the shimmer demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor(.cs) | Updates the displayed Persona name in timeline option demos. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor(.samples.cs) | Updates the displayed Persona name in timeline item demos. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor(.samples.cs) | Updates the displayed Persona name in timeline custom demos. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds several missing BitPersona capabilities (auto coin coloring, image lifecycle callbacks, responsive/lazy image attributes) and updates the demos/tests/styles accordingly, while also simplifying the coin shape API from an enum to a boolean.
Changes:
- Added
AutoCoinColor,OnImageLoad/OnImageError,ImageLoading, andImageSrcSettoBitPersonaplus supporting styling/behavior changes. - Replaced
CoinShapewithSquared, removed the old enum, and expanded bUnit test coverage for the new API/behaviors. - Updated multiple demo pages/samples to reflect the new parameters and renamed sample persona text.
Reviewed changes
Copilot reviewed 16 out of 17 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs | Adds new BitPersona parameters/logic (auto coin color hashing, image callbacks, squared coin). |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor | Renders new loading/srcset attributes and changes image visibility behavior during load. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.scss | Updates layout and layering for image/overlay/presence and refactors sizing spacing. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersonaCoinShape.cs | Removes the old BitPersonaCoinShape enum (API simplification). |
| src/BlazorUI/Bit.BlazorUI/Components/BitImageLoading.cs | Introduces BitImageLoading enum used by BitPersona (aligns with BitImage). |
| src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Persona/BitPersonaTests.cs | Adds tests for Squared, AutoCoinColor, image loading/srcset, load/error callbacks, and load-visibility behavior. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.cs | Updates demo parameter metadata/sub-enums for new BitPersona API. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor.samples.cs | Adds/reshuffles sample snippets to demonstrate new persona features. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Persona/BitPersonaDemo.razor | Reorganizes demo sections to include new features and updates sample usage. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Progress/Shimmer/BitShimmerDemo.razor(.cs) | Updates displayed persona name in the shimmer demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor(.cs) | Updates displayed persona name in timeline option demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor(.samples.cs) | Updates displayed persona name in timeline item demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor(.samples.cs) | Updates displayed persona name in timeline custom demo. |
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 #12250
Summary by CodeRabbit
New Features
AutoCoinColorparameter.OnImageLoad,OnImageError) for lifecycle tracking.ImageLoadingandImageSrcSetparameters for optimized image loading and responsive images.Bug Fixes
Refactor
CoinShapeenum parameter with simplifiedSquaredboolean parameter.