avatar fallback and root with aschild support #1024
Conversation
WalkthroughThe changes introduce an optional Changes
Sequence Diagram(s)sequenceDiagram
participant A as Avatar Component
participant AP as Avatar Primitive Component
participant PS as Primitive.span
A->>AP: Pass asChild flag (default: false)
AP->>PS: Render using asChild prop
Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 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: 0
🧹 Nitpick comments (1)
src/core/primitives/Avatar/fragments/AvatarPrimitiveFallback.tsx (1)
14-14: Missing space after comma in parameter list.There should be a space after the comma between
color = ''andasChild = falsefor consistent formatting.-const AvatarPrimitiveFallback = ({ children, className = '', color = '',asChild = false }: AvatarPrimitiveFallbackProps) => { +const AvatarPrimitiveFallback = ({ children, className = '', color = '', asChild = false }: AvatarPrimitiveFallbackProps) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/ui/Avatar/Avatar.tsx(1 hunks)src/components/ui/Avatar/tests/Avatar.test.tsx(1 hunks)src/core/primitives/Avatar/fragments/AvatarPrimitiveFallback.tsx(1 hunks)src/core/primitives/Avatar/fragments/AvatarPrimitiveRoot.tsx(2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/core/primitives/Avatar/fragments/AvatarPrimitiveFallback.tsx (1)
src/core/primitives/Avatar/contexts/AvatarPrimitiveContext.tsx (1)
AvatarPrimitiveContext(13-13)
🔇 Additional comments (11)
src/components/ui/Avatar/tests/Avatar.test.tsx (1)
41-45: Good addition to test theasChildfunctionality.This test appropriately verifies that when
asChildis set to true, the Avatar.Root component correctly renders as the provided child element (a div) instead of its default element. The verification checks both the content and the element type, which is a thorough approach.src/components/ui/Avatar/Avatar.tsx (3)
18-18: Well-typed property addition.The
asChildproperty has been correctly added to the AvatarProps type definition as an optional boolean, which aligns with how this property is typically used in component libraries.
22-22: Proper default value forasChild.Setting the default value of
asChildtofalseensures backward compatibility with existing code that doesn't explicitly pass this prop.
27-27: Correctly passing theasChildprop to the primitive component.The
asChildprop is appropriately passed down to AvatarPrimitive.Root where it will be used to modify the rendering behavior.src/core/primitives/Avatar/fragments/AvatarPrimitiveFallback.tsx (3)
5-5: Necessary import forasChildfunctionality.The import of the Primitive component is required to enable the
asChildfunctionality.
11-11: Well-typed property addition.The
asChildproperty has been correctly added to the AvatarPrimitiveFallbackProps interface as an optional boolean.
21-21: Correctly using Primitive.span with asChild prop.The implementation properly uses Primitive.span instead of a regular span element, passing along the asChild prop to enable the polymorphic component behavior.
src/core/primitives/Avatar/fragments/AvatarPrimitiveRoot.tsx (4)
6-6: Necessary import forasChildfunctionality.The import of the Primitive component is required to enable the
asChildfunctionality.
13-13: Well-typed property addition.The
asChildproperty has been correctly added to the AvatarPrimitiveRootProps interface as an optional boolean.
16-16: Proper default value forasChild.Setting the default value of
asChildtofalseensures backward compatibility with existing usage of this component.
44-44: Correctly using Primitive.span with asChild prop.The implementation properly uses Primitive.span instead of a regular span element, passing along the asChild prop to enable the polymorphic component behavior.
kotAPI
added
the
automerge
2 participants
closes #580
Summary by CodeRabbit
New Features
asChildproperty, allowing for more flexible rendering options.Tests
asChildproperty in different scenarios.