feat(components): introduce Avatar and AvatarGroup components

[desmondinho]

Description

Closes #172

Introducing the new Avatar and AvatarGroup components.

What's been done?

• Added a new Avatar component
• Added a new AvatarGroup component

Checklist

• My code follows the project's coding style and guidelines.
• I have included inline docs for my changes, where applicable.
• I have added, updated or removed tests according to my changes.
• All tests are passing.
• There's an open issue for the PR that I am making.

Additional Notes

Summary by CodeRabbit

• New Features

  • Introduced a versatile Avatar component with image, initials, and fallback capabilities.
  • Added advanced Avatar Group functionality allowing for configurable maximum display, grid layouts, and a dynamic count indicator for extra avatars.
  • Enhanced customization options with a new full border radius style and improved visual variants.

• Documentation

  • Launched a comprehensive Avatar documentation section featuring usage guides and interactive examples.

• Chores

  • Updated external styling dependencies to a specific stable Tailwind CSS version.

[coderabbitai]

Walkthrough

This PR introduces numerous enhancements and new features for the Lumex UI documentation and component library. The NavigationStore is updated to include a new LumexAvatar entry and to adjust statuses for existing components. A comprehensive set of documentation pages, examples, and interactive preview codes have been added for the Avatar component. Additionally, new source components for avatars and avatar groups, along with supporting context, slot, and utility classes, have been implemented. Updates to styling, JavaScript utilities, and extensive tests further reinforce the robustness of these changes.

Changes

File(s)	Change Summary
docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs	Added LumexAvatar to ComponentsCategory (with status New) and ComponentsApiCategory; modified LumexDropdown and LumexTabs entries to remove ComponentStatus.New.
docs/LumexUI.Docs.Client/Pages/Components/Avatar/Avatar.razor docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/...	Added new documentation page for Avatar along with various examples (Bordered, Colors, CustomFallback, CustomStyles, Fallbacks, GroupCustomCount, GroupGrid, GroupMaxCount, GroupUsage, Radii, Sizes, Usage).
docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/...	Introduced preview code Razor components for all Avatar examples, set to InteractiveWebAssembly render mode.
docs/LumexUI.Docs/LumexUI.Docs.csproj	Updated Tailwind CSS CLI URLs to explicitly reference version v4.0.9.
src/LumexUI/Common/Enums/Radius.cs src/LumexUI/Common/InitialsResolver.cs	Added new enum member Full to Radius and introduced the InitialsResolver delegate.
src/LumexUI/Components/Avatar/AvatarGroupContext.cs src/LumexUI/Components/Avatar/AvatarGroupSlots.cs src/LumexUI/Components/Avatar/AvatarSlots.cs src/LumexUI/Components/Avatar/LumexAvatar.razor src/LumexUI/Components/Avatar/LumexAvatar.razor.cs src/LumexUI/Components/Avatar/LumexAvatarGroup.razor src/LumexUI/Components/Avatar/LumexAvatarGroup.razor.cs	Introduced new LumexAvatar and LumexAvatarGroup components with enhanced rendering logic, registration with their contexts, fallback handling, and customizable parameters via slot and context classes.
src/LumexUI/Styles/Avatar.cs src/LumexUI/Styles/Utils.cs src/LumexUI/Utilities/ElementClass.cs	Added style definitions for Avatar and AvatarGroup, updated utility CSS class initializations, and introduced an implicit operator for ElementClass.
src/LumexUI/wwwroot/js/utils/dom.js	Added a new JavaScript function isImageLoaded to check image load status.
tests/LumexUI.Tests/Components/Avatar/AvatarGroupTests.razor tests/LumexUI.Tests/Components/Avatar/AvatarTests.razor tests/LumexUI.Tests/Extensions/AngleSharpExtensions.cs tests/LumexUI.Tests/LumexUI.Tests.csproj tests/LumexUI.Tests/_Imports.razor	Added new test classes for LumexAvatar and LumexAvatarGroup, updated helper methods (e.g., AngleSharpExtensions), and incorporated the Moq package along with new JSInterop imports.

Sequence Diagram(s)

sequenceDiagram
    participant G as LumexAvatarGroup
    participant C as AvatarGroupContext
    participant A as LumexAvatar

    G->>C: StartCollecting()
    loop For each avatar in group
        A->>C: Register()
    end
    G->>C: StopCollecting()
    alt Total avatars ≤ Max
        G->>A: Render each avatar
    else Total avatars > Max
        G->>A: Render first Max avatars
        G->>G: Display RemainingCount via CountContent
    end

Loading

sequenceDiagram
    participant A as LumexAvatar
    participant JS as IJSRuntime

    A->>JS: Call isImageLoaded(img)
    alt Image successfully loaded
        A->>A: Render image element
    else Image not loaded
        A->>A: Render fallback content (custom fallback, initials, or default icon)
    end

Loading

Possibly related PRs

• feat(docs): add the Customize Theme page #116: Modifies the NavigationStore class with changes to navigation categories related to LumexAvatar, indicating a direct connection at the code level with the current PR.

Poem

I’m a little rabbit with a code stash neat,
Hopping through avatars, making UI complete.
New pages, new tests, and styling so fine,
Each line of logic a sweet, rhythmic rhyme.
From fallback to group, I’m overjoyed in every beat! 🐰
Let’s code and hop to a future so bright!

Tip

⚡🧪 Multi-step agentic review comment chat (experimental)

• We're introducing multi-step agentic chat in review comments. This experimental feature enhances review discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments.
  - To enable this feature, set early_access to true under in the settings.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (20)

src/LumexUI/Common/InitialsResolver.cs (1)

8-8: Minor formatting inconsistency in parameter declaration

There's an extra space after the opening parenthesis in the delegate declaration.

-public delegate string InitialsResolver( string name );
+public delegate string InitialsResolver(string name);

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Radii.razor (1)

1-14: Implementation looks good! Consider using local assets for examples

The example correctly demonstrates the different radius options available for the LumexAvatar component in a clean, structured layout.

While the usage of pravatar.cc is common for examples, consider using local assets if you want to ensure consistent rendering regardless of external service availability.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Sizes.razor (1)

1-17: LGTM! Good example of avatar size variations.

The example clearly demonstrates multiple size options for the LumexAvatar component including:

• Custom sizing with utility classes (w-6 h-6)
• Predefined sizes (Small, Medium, Large)
• Another custom size (w-18 h-18)

All avatars consistently use the Bordered property and the flex layout provides a clear visual comparison.

Consider adding alt text to the avatars for accessibility:

<LumexAvatar Class="w-6 h-6"
             Bordered="@true"
+            Alt="Avatar example"
             Src="https://i.pravatar.cc/150?img=2" />

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/GroupGrid.razor (1)

1-11: Good demonstration of the LumexAvatarGroup grid layout.

This example shows the LumexAvatarGroup with:

• Grid layout enabled (Grid="@true")
• Maximum display limit (Max="7")
• Border styling (Bordered="@true")
• Multiple avatar instances (9 total, with 2 being hidden due to the Max setting)

The example effectively demonstrates the component's capabilities.

Consider adding alt text to avatars for accessibility:

<LumexAvatar Src="https://i.pravatar.cc/150?img=2" 
+           Alt="Team member avatar" />

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/GroupMaxCount.razor (1)

1-8: Good demonstration of the max count feature in LumexAvatarGroup.

This example clearly shows how to limit the visible avatars in a group using the Max property. With 6 avatars provided but Max="3", this should display 3 avatars plus a "+3" indicator.

Consider adding alt text for improved accessibility:

<LumexAvatar Src="https://i.pravatar.cc/150?img=2" 
+           Alt="Team member avatar" />

src/LumexUI/wwwroot/js/utils/dom.js (1)

57-63: Useful utility function for checking image load status.

The isImageLoaded function properly checks two critical conditions for successful image loading:

1. The image loading process is complete (img.complete)
2. The image has valid dimensions (img.naturalWidth !== 0)

This approach correctly handles both network errors and invalid images.

Consider adding JSDoc comments to improve documentation:

+/**
+ * Checks if an image element has successfully loaded.
+ * @param {HTMLElement} img - The image element to check
+ * @returns {boolean} - True if the image is fully loaded with valid dimensions
+ */
export function isImageLoaded(img) {
    if (!(img instanceof HTMLElement)) {
        return false;
    }

    return img.complete && img.naturalWidth !== 0;
}

src/LumexUI/Components/Avatar/AvatarGroupContext.cs (1)

1-35: Well-designed context implementation for AvatarGroup

The context pattern implementation is clean and follows good practices for managing component state:

• Proper encapsulation with private field for tracking collection state
• Clear registration control with StartCollecting/StopCollecting methods
• Efficient implementation of IsWithinMaxLimit using IndexOf to determine visibility

One small improvement suggestion:

Consider using an immutable collection for Items to prevent external modification:

-public List<LumexAvatar> Items { get; } = [];
+private readonly List<LumexAvatar> _items = [];
+public IReadOnlyList<LumexAvatar> Items => _items;

And updating the Register method:

public void Register( LumexAvatar avatar )
{
    if( !_collecting )
    {
        return;
    }

-   Items.Add( avatar );
+   _items.Add( avatar );
}

Also update StartCollecting method:

public void StartCollecting()
{
-   Items.Clear();
+   _items.Clear();
    _collecting = true;
}

src/LumexUI/Components/Avatar/AvatarGroupSlots.cs (1)

16-33: Well-structured slot definition with a minor inconsistency

The AvatarGroupSlots class follows the pattern used for component slots in LumexUI, with proper XML documentation and appropriate implementation of the ISlot interface.

There is a minor inconsistency between the property definitions:

• Root (obsolete) is defined with only a getter: public string? Root { get; }
• Base (the recommended replacement) has both getter and setter: public string? Base { get; set; }

Consider making Root consistent with Base by adding a setter, or clarify why the obsolete property should be read-only.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Usage.razor (1)

1-8: Add accessibility attributes to avatars with images

While the usage example is clear and demonstrates both image-based and name-based avatars, consider adding accessibility attributes like Alt for image-based avatars to improve screen reader support.

-<LumexAvatar Src="https://i.pravatar.cc/150?img=2" />
+<LumexAvatar Src="https://i.pravatar.cc/150?img=2" Alt="Profile avatar" />
-<LumexAvatar Src="https://i.pravatar.cc/150?img=6" />
+<LumexAvatar Src="https://i.pravatar.cc/150?img=6" Alt="Profile avatar" />
-<LumexAvatar Src="https://i.pravatar.cc/150?img=9" />
+<LumexAvatar Src="https://i.pravatar.cc/150?img=9" Alt="Profile avatar" />

src/LumexUI/Components/Avatar/AvatarSlots.cs (1)

18-22: Clarify implementation of obsolete Root property

The Root property is marked as obsolete but has a getter with no setter and returns null by default. Consider either providing a default value or adding a setter for consistency with other properties.

[Obsolete( "Deprecated. This will be removed in the future releases. Use the 'Base' slot instead." )]
-public string? Root { get; }
+public string? Root { get; set; }

src/LumexUI/Styles/Avatar.cs (2)

25-37: Confirm the choice of default text color.

Including "text-white" is effective for most background colors, but for lighter backgrounds or future brand theming, it may become illegible. Ensure there's a fallback or updated text color for light backgrounds if required.

---

85-99: Check size scaling for text.

When the avatar is scaled (e.g., large vs. small), consider also scaling the text proportionally. Currently, "text-tiny", "text-small", etc., might be slightly off if the avatar needs a more fluid or responsive approach.

tests/LumexUI.Tests/Components/Avatar/AvatarGroupTests.razor (1)

23-57: Impressive approach for testing image loading.

Stubbing JSRuntime to return true in a sequence covers multiple images well. Consider adding a test scenario with at least one failing image load to confirm fallback rendering in groups.

src/LumexUI/Components/Avatar/LumexAvatar.razor (3)

16-35: Optionally integrate lazy-loading for images.

If performance is a concern for large image sets, you could consider using native loading="lazy" attribute or a recommended library approach to minimize resource usage.

---

44-54: Assess fallback animations or transitions.

When fallback content is displayed, you might want transitions or fade-ins. Current setup is straightforward, but adding a small fade might improve user experience.

---

56-64: Check placeholder length in Name fallback.

If a user's name is longer or doesn't conform to a typical two-word pattern, the Initials(Name) might produce undesired placeholders. Consider bounding logic for or customizing how many initials are extracted.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/GroupUsage.razor (1)

1-8: Example demonstrates the AvatarGroup component well

The example shows clearly how to use the LumexAvatarGroup component with multiple avatar instances and the bordered property.

However, consider adding alt text to the images for accessibility:

-<LumexAvatar Src="https://i.pravatar.cc/150?img=2" />
+<LumexAvatar Src="https://i.pravatar.cc/150?img=2" Alt="Avatar 2" />

tests/LumexUI.Tests/Components/Avatar/AvatarTests.razor (1)

23-47: Image rendering test could be improved

The test correctly verifies that an image is rendered when a source URL is provided. However, it would be more robust to also test the failure case.

Consider adding a test that verifies fallback behavior when image loading fails:

[Fact]
public void ShouldRenderFallbackWhenImageFailsToLoad()
{
    var jsRuntimeMock = new Mock<IJSRuntime>();
    var jsObjectMock = new Mock<IJSObjectReference>();

    jsRuntimeMock
        .Setup(js => js.InvokeAsync<IJSObjectReference>("import", It.IsAny<object[]>()))
        .ReturnsAsync(jsObjectMock.Object);

    jsObjectMock
        .SetupSequence(js => js.InvokeAsync<bool>("isImageLoaded", It.IsAny<object[]>()))
        .ReturnsAsync(false);

    Services.AddSingleton(jsRuntimeMock.Object);

    var cut = Render(
        @<LumexAvatar Src="https://invalid-url.com" Name="Fallback" />
    );

    var fallback = cut.FindBySlot("fallback");
    var img = cut.FindBySlot("img");

    img.GetAttribute("data-loaded").Should().Be("false");
    fallback.Should().NotBeNull();
}

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Avatar.razor (1)

37-42: Consider adding code examples for fallback options

While the explanation of fallbacks is good, it would be helpful to include inline code examples to demonstrate the syntax.

Consider adding code examples like:

<!-- With name for initials -->
<LumexAvatar Name="John Doe" />

<!-- With default icon -->
<LumexAvatar />

<!-- With ShowFallback set to false -->
<LumexAvatar Src="invalid-url.jpg" ShowFallback="false" />

src/LumexUI/Components/Avatar/LumexAvatar.razor.cs (1)

137-141: Avoid unintended override of user-provided Alt text.

When Name is non-empty, the logic forcibly sets Alt = value, even if the user explicitly provided a different Alt. Consider making this conditional to preserve custom alt text:

if (parameters.TryGetValue<string>(nameof(Name), out var value) 
    && !string.IsNullOrWhiteSpace(value)) 
{
-   Alt = value;
+   if (Alt == "avatar") 
+   { 
+       Alt = value; 
+   }
}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8d21401 and 8482b6a.

📒 Files selected for processing (45)

• docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs (2 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Avatar.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Bordered.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Colors.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/CustomFallback.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/CustomStyles.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Fallbacks.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/GroupCustomCount.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/GroupGrid.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/GroupMaxCount.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/GroupUsage.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Radii.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Sizes.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Usage.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Bordered.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Colors.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/CustomFallback.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/CustomStyles.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Fallbacks.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/GroupCustomCount.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/GroupGrid.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/GroupMaxCount.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/GroupUsage.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Radii.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Sizes.razor (1 hunks)
• docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Usage.razor (1 hunks)
• docs/LumexUI.Docs/LumexUI.Docs.csproj (1 hunks)
• src/LumexUI/Common/Enums/Radius.cs (1 hunks)
• src/LumexUI/Common/InitialsResolver.cs (1 hunks)
• src/LumexUI/Components/Avatar/AvatarGroupContext.cs (1 hunks)
• src/LumexUI/Components/Avatar/AvatarGroupSlots.cs (1 hunks)
• src/LumexUI/Components/Avatar/AvatarSlots.cs (1 hunks)
• src/LumexUI/Components/Avatar/LumexAvatar.razor (1 hunks)
• src/LumexUI/Components/Avatar/LumexAvatar.razor.cs (1 hunks)
• src/LumexUI/Components/Avatar/LumexAvatarGroup.razor (1 hunks)
• src/LumexUI/Components/Avatar/LumexAvatarGroup.razor.cs (1 hunks)
• src/LumexUI/Styles/Avatar.cs (1 hunks)
• src/LumexUI/Styles/Utils.cs (1 hunks)
• src/LumexUI/Utilities/ElementClass.cs (1 hunks)
• src/LumexUI/wwwroot/js/utils/dom.js (1 hunks)
• tests/LumexUI.Tests/Components/Avatar/AvatarGroupTests.razor (1 hunks)
• tests/LumexUI.Tests/Components/Avatar/AvatarTests.razor (1 hunks)
• tests/LumexUI.Tests/Extensions/AngleSharpExtensions.cs (1 hunks)
• tests/LumexUI.Tests/LumexUI.Tests.csproj (2 hunks)
• tests/LumexUI.Tests/_Imports.razor (1 hunks)

🔇 Additional comments (53)

tests/LumexUI.Tests/_Imports.razor (1)

2-2: Appropriate addition of JSInterop import

Adding the Microsoft.JSInterop namespace is appropriate for supporting the new Avatar component which likely uses JS interop for image loading functionality.

src/LumexUI/Common/InitialsResolver.cs (1)

1-8: Well-defined delegate with proper documentation

The InitialsResolver delegate is properly defined with clear XML documentation explaining its purpose, parameters, and return value.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Sizes.razor (1)

1-5: Properly structured preview code for Avatar sizes

The component is correctly set up to display size variations of the Avatar component using the InteractiveWebAssembly render mode.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Bordered.razor (1)

1-5: Properly structured preview code for bordered Avatars

The component is correctly set up to display bordered variations of the Avatar component using the InteractiveWebAssembly render mode.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Radii.razor (1)

1-5: Implementation looks good!

This preview code component correctly uses InteractiveWebAssembly rendermode and references the Radii example component. The structure follows the project's documentation pattern for component examples.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Fallbacks.razor (1)

1-5: Implementation looks good!

This preview code component correctly uses InteractiveWebAssembly rendermode and references the Fallbacks example component. The structure follows the project's documentation pattern for component examples.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/GroupGrid.razor (1)

1-5: Implementation looks good!

This preview code component correctly uses InteractiveWebAssembly rendermode and references the GroupGrid example component. The structure follows the project's documentation pattern for component examples.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/CustomStyles.razor (1)

1-5: Clean implementation for Avatar custom styles preview.

The code correctly implements a preview component for demonstrating custom styles for the Avatar component. The InteractiveWebAssembly render mode is appropriate for interactive components, and the structure follows documentation conventions.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/GroupMaxCount.razor (1)

1-5: Clean implementation for AvatarGroup max count preview.

The preview component properly demonstrates the max count feature of the AvatarGroup component. The implementation follows the established pattern for documentation examples.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/GroupCustomCount.razor (1)

1-5: Clean implementation for AvatarGroup custom count preview.

The preview component correctly implements documentation for the custom count feature of the AvatarGroup component. The structure is consistent with other preview components.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/CustomFallback.razor (1)

1-5: Clean implementation for Avatar custom fallback preview.

The preview component properly demonstrates how to use custom fallback content with the Avatar component. The implementation adheres to documentation standards for the project.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/GroupUsage.razor (1)

1-5: LGTM: Clean implementation of the avatar group preview code

The component correctly uses InteractiveWebAssembly render mode and properly references the Group usage example. This is a well-structured code preview component for documentation.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Bordered.razor (1)

1-8: LGTM: Well-structured avatar example with border styling

The example provides a good demonstration of bordered avatars with both image and name fallbacks. The layout using flex with appropriate spacing creates a clean presentation.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/CustomStyles.razor (1)

1-9: LGTM: Excellent demonstration of avatar styling customization

This example effectively demonstrates the slot-based styling approach. The implementation shows how to customize both the base avatar background with a gradient and the icon color.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Colors.razor (1)

1-23: LGTM: Comprehensive color variants demonstration

The example clearly demonstrates all theme color variants for the avatar component with consistent formatting and structure. The flex layout presents the variations in a user-friendly way.

tests/LumexUI.Tests/LumexUI.Tests.csproj (2)

20-20: Good addition of Moq for unit testing.

Adding the Moq library as a package reference is appropriate for testing the new Avatar components. The version used (4.20.72) is a stable release.

---

33-33: Nice addition of the global using directive.

Adding a global Using directive for Moq makes the test code cleaner by eliminating the need for repeated imports in individual test files.

src/LumexUI/Utilities/ElementClass.cs (1)

136-137: Good addition of the implicit string conversion operator.

This implicit conversion operator enhances usability by allowing ElementClass instances to be seamlessly used in string contexts without explicit ToString() calls. The implementation follows good practices by delegating to the existing ToString() method.

src/LumexUI/Common/Enums/Radius.cs (1)

30-38: Good addition of the Full radius option.

Adding the Full radius option is appropriate for Avatar components which typically support circular shapes. The documentation is clear, and I particularly appreciate the remark indicating that not all components support this radius option.

The trailing comma after Large is also good practice as it makes future enum additions cleaner in source control diffs.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Colors.razor (1)

1-5: Properly structured preview code for Avatar colors.

The component is correctly set up with InteractiveWebAssembly rendermode and uses the PreviewCode component to demonstrate color options for the Avatar component. This follows the project's documentation pattern.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/CustomFallback.razor (1)

1-10: Well-structured example demonstrating fallback scenarios

This example effectively showcases three different fallback scenarios for the LumexAvatar component:

1. Custom fallback with an animated camera icon
2. Default fallback with name
3. Disabled fallback with name

The flex layout provides a clean presentation of these variations side by side.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/PreviewCodes/Usage.razor (1)

1-5: Clean implementation of Avatar usage preview

The implementation follows the standard pattern for component documentation with InteractiveWebAssembly rendering mode and proper embedding of the example component.

tests/LumexUI.Tests/Extensions/AngleSharpExtensions.cs (1)

23-32: Good error handling improvement for FindBySlot method

The updated method now properly handles exceptions when an element with the specified slot cannot be found, consistent with the FindByTestId method above. The return type change to IElement? correctly indicates that the method might return null.

docs/LumexUI.Docs/LumexUI.Docs.csproj (1)

31-31: Good practice to pin Tailwind CSS to a specific version

Updating from latest to a specific version (v4.0.9) for the Tailwind CSS CLI download URLs is a good change. Using fixed versions improves build reproducibility and prevents unexpected changes when new versions are released.

Also applies to: 35-35

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/GroupCustomCount.razor (1)

1-13: Well-structured example for AvatarGroup with custom count display

This example effectively demonstrates:

1. Limiting the number of displayed avatars with Max="3"
2. Custom styling for the overflow count with the CountContent template
3. Proper use of the Bordered property

The example shows good practices for implementing avatar groups with a limit, which is a common UI pattern.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Examples/Fallbacks.razor (1)

1-5: Good demonstration of Avatar fallback behaviors

This example effectively shows three different fallback scenarios:

1. Default fallback for a broken image
2. Name-based fallback with initials
3. Disabled fallback behavior with ShowFallback="@false"

These examples provide valuable guidance for handling image loading failures in production applications.

src/LumexUI/Components/Avatar/LumexAvatarGroup.razor (2)

1-30: Well-structured component with clear cascading pattern

The cascading context pattern is implemented properly, with appropriate start/stop collection methods. The comment explaining why IsFixed is not set to true is helpful for future maintainers.

---

32-52: Implement CountContent method for better code completeness

The Render method references CountContent(RemainingCount) but this method and the RemainingCount property are not defined in the provided code. These should be defined to ensure the component functions properly.

Can you verify that the CountContent method and RemainingCount property are defined in a partial class or base class? If not, they should be implemented here to complete the component's functionality.

src/LumexUI/Styles/Utils.cs (3)

7-8: Great accessibility improvement with screen reader and motion support

The refactored VisuallyHidden property using "sr-only" and the new ReduceMotion property enhance accessibility for users with screen readers and those who prefer reduced motion.

---

10-12: Good implementation of disabled state styling

The new Disabled utility provides consistent styling for disabled elements with appropriate opacity and pointer-events settings.

---

14-27: Consistent focus styling implementation

The refactored focus styles maintain the same functionality while using a more consistent instantiation pattern.

src/LumexUI/Components/Avatar/AvatarSlots.cs (1)

11-47: Well-documented slots implementation with appropriate XML documentation

The slots implementation is well-structured with clear XML documentation for each property.

src/LumexUI/Styles/Avatar.cs (3)

14-15: Kudos on the new class introduction!

Introducing static classes for styling is a neat approach to ensure clarity and organization within the codebase.

---

19-24:

Details

✅ Verification successful

Validate default variant usage.

The call to create a variant with twVariants.Create(new VariantConfig() {... }) is straightforward, but consider verifying that references to Avatar.Style() indeed consume or override these defaults as expected throughout the rest of the codebase, especially if the styling is extended in other components.

---

🏁 Script executed:

#!/bin/bash
# Description: Search for all Avatar.Style() usages in the codebase to confirm consistent usage and overrides.
rg --context 3 "Avatar\.Style\(" 

Length of output: 572

---

Confirmed: Default Avatar Variant Consumed as Expected

The default variant created in src/LumexUI/Styles/Avatar.cs is being used as intended. Our verification shows that the only consumption—found in src/LumexUI/Components/Avatar/LumexAvatar.razor.cs—calls Styles.Avatar.Style(TwMerge) and then applies an override (e.g., via passing properties like [nameof(Size)] = Size.ToString()) when computing the component slots. This usage aligns with the expected styling behavior. Please ensure that any future extensions or components consuming this variant follow the same pattern.

---

185-194:

Details

❓ Verification inconclusive

Ensure ring color classes for each variant are tested.

You've defined compound variants to adjust ring colors when the avatar is bordered. Make sure there's a test covering each color scenario, e.g., ThemeColor.Primary with Bordered = true.

---

🏁 Script executed:

#!/bin/bash
# Description: Identify usage of each ring color in tests to ensure coverage.
rg --context 3 "ring-primary|ring-secondary|ring-success|ring-warning|ring-danger|ring-info"

Length of output: 5118

---

Ensure Comprehensive Test Coverage for Avatar Ring Variants

The code correctly defines compound variants for applying different ring classes (e.g., ring-primary, ring-secondary, ring-success, ring-warning, ring-danger, and ring-info) when the avatar is bordered. However, based on the grep results, while these classes are referenced in the source and documentation examples, there isn’t clear evidence that dedicated automated tests cover each variant scenario. Please confirm that each variant is tested—especially verifying that setting properties (like ThemeColor.Primary with Bordered = true) results in the expected ring color class. If such tests are missing, consider adding them to ensure robust coverage.

• Verify that for every compound variant in src/LumexUI/Styles/Avatar.cs, an automated test checks the proper application of the corresponding ring class.
• Ensure test assertions cover scenarios such as:
  • ThemeColor.Primary with Bordered = true applies "ring-primary"
  • ThemeColor.Secondary with Bordered = true applies "ring-secondary"
  • …and similarly for the other variants.

tests/LumexUI.Tests/Components/Avatar/AvatarGroupTests.razor (3)

13-21: Well-structured test for rendering check.

This test effectively ensures that LumexAvatarGroup doesn't throw exceptions upon rendering. Good coverage of basic functionality.

---

59-76: Validate boundary logic for the remaining count.

This is a crucial feature: verifying that when Max is exceeded, the last avatar becomes a count indicator. Ensure there's coverage for edge cases (e.g., Max = 0 or negative) if relevant in broader usage.

---

94-117: Great custom count test.

The custom count logic is well-tested for Max="2". Keep in mind to confirm text content is localized or i18n-friendly if required by your project’s guidelines.

src/LumexUI/Components/Avatar/LumexAvatar.razor (2)

6-13: Context registration logic is clear.

It’s nice that you handle conditional rendering depending on _isCounter and Context. This approach helps avoid oversubscribing multiple components to the same context in large lists.

---

67-73: Good fallback to icon.

You gracefully handle the scenario of no FallbackContent and no Name by showing an icon. Since icons can be updated or localized, ensure an appropriate label or tooltip for accessibility if crucial to your app’s domain.

docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs (1)

26-26: Navigation updates look good!

The Avatar component has been properly added to both navigation categories with the "New" designation, and the "New" status has been correctly removed from the Dropdown and Tabs components.

Also applies to: 34-34, 44-44, 51-51

tests/LumexUI.Tests/Components/Avatar/AvatarTests.razor (5)

5-11: Constructor setup looks good

The test constructor correctly sets up the TwMerge service and mocks the JavaScript interop for image loading checks.

---

13-21: Basic rendering test is appropriate

This test verifies that the component renders without throwing exceptions, which is a good basic test.

---

49-95: Name and initials tests are comprehensive

The tests for single-word names, multi-word names, custom initials, and fallback to name when no source is provided are all well-implemented.

---

97-107: Default icon test is good

This test correctly verifies that a default icon is rendered when neither a name nor an image source is provided.

---

109-135: Fallback content tests are well implemented

These tests correctly verify that custom fallback content is rendered when specified and that no fallback is shown when ShowFallback is false.

docs/LumexUI.Docs.Client/Pages/Components/Avatar/Avatar.razor (6)

1-3: Page setup is correct

The page routing and layout are properly configured.

---

4-6: Documentation structure is well organized

The composition section at the beginning provides a good overview of the available components.

---

8-56: Avatar usage documentation is comprehensive

The documentation covers all key aspects of the Avatar component: basic usage, borders, sizes, radius options, colors, and fallback behaviors.

---

58-76: Avatar Group documentation is thorough

The documentation for the AvatarGroup component properly covers its various features including basic usage, max count limitation, custom count display, and grid layout.

---

78-115: Custom styles documentation is detailed and helpful

The documentation clearly explains how to apply custom styles using slots and class parameters, which is essential for component customization.

---

117-181: Code organization is clean and well-structured

The code section is well-organized with clear definitions of component composition, headings, slots, and API components. The OnInitialized method properly sets up the layout.

src/LumexUI/Components/Avatar/LumexAvatar.razor.cs (1)

248-264: Excellent async disposal for JS module.

Using DisposeAsync with a try/catch to handle JSDisconnectedException is a best practice, gracefully avoiding errors if the client disconnects. Nicely done!