Align avatar to architecture goals#196
Merged
Merged
Conversation
|
📚 Storybook preview: https://pr-196-propel-storybook.vamsi-906.workers.dev |
Move className lookup maps out of component files and into variants.ts: - avatarIconVariants (cva): replaces the iconSizeByMagnitude Record in components/avatar; icon size is now driven through the variants system - avatarToneBgClass: consolidates the duplicate inline tone→bg map into variants.ts; the avatar.tsx re-export of initialsToneClass now delegates to that single source of truth Closes #118
The anonymous person-icon was rendered directly in the components-tier Avatar, which reached into ui/avatar/variants for avatarIconVariants and applied it as a className on a lucide User glyph. That put styling in the components tier and left the avatar fallback baking in its own icon child. Add an AvatarIcon ui part: a node-slot that sizes its single child to the magnitude's icon size via --node-size (Figma's explicit per-step icon px), tinted muted, and defaulting to a person glyph. The components-tier Avatar now composes <AvatarFallback><AvatarIcon /></AvatarFallback> with no className, and the ui story composes AvatarIcon for the anonymous state and registers it in subcomponents.
AvatarIcon baked a default person glyph via children ?? <User />. A ui part must render only its single child and bake no glyph. Move the default into the components-tier Avatar composition (passes <User /> as the AvatarIcon child) and have the ui story pass it explicitly too. Same glyph and size, just relocated.
lifeiscontent
force-pushed
the
align/avatar
branch
from
43b715d to
c4e109b
Compare
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
1 participant
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 #118
Designer spec recap
From bhaveshraja's comment on #118:
The component already correctly models the "always the same" items as baked-in behavior (shape via
rounded-full, border scaling inavatarVariants, content priority via Base UI'sAvatar.Root+AvatarFallbackfallback logic). This PR tightens the architecture on the remaining class-map violation.Architecture changes
iconSizeByMagnitudeRecord →avatarIconVariantscva (ui/avatar/variants.ts):The
components/avatarhad a rawRecord<AvatarMagnitude, string>for icon sizes. Per the architecture rule that all className composition lives in cva variants (never as Records in component files), this is nowavatarIconVariants— a proper cva exported fromvariants.ts. The components/avatar imports and calls it instead of a raw lookup.initialsToneClassRecord →avatarToneBgClassinvariants.ts:The tone→background-class map was defined inline in
ui/avatar/avatar.tsx. Sincevariants.tsis the single source of truth for className decisions, the map now lives there asavatarToneBgClass. The existinginitialsToneClassexport inavatar.tsxis preserved (soworkspace-avatarkeeps working) but now delegates to that source, eliminating the duplicate definition.No visual or behavioral changes. All existing stories and the CSS check play test remain intact.
vp check --fixpasses clean on all avatar files.Needs design approval from bhaveshraja before merge.