refactor: migrate web Avatar to @makeplane/propel Avatar - #9724
refactor: migrate web Avatar to @makeplane/propel Avatar#9724anmolsinghbhatia wants to merge 1 commit into
Conversation
Replace @plane/ui Avatar and AvatarGroup with the published Propel
components across apps/web. 41 files, 51 Avatar sites, 4 group sites.
Propel's size scale is @plane/ui's shifted one step, so every enum maps
with no pixel change: sm(16)->2xs, md(20)->xs, base(24)->sm, lg(28)->md.
Unsized avatars took the old md default and become xs.
Notable mapping decisions:
- name -> alt plus fallback={name?.[0]?.toUpperCase()}, preserving the
initial that @plane/ui derived internally.
- Six numeric px sizes mapped to the nearest enum step. Five are exact;
the notification card avatar moves 42px -> xl (40px).
- Ten classNames removed, as published Propel takes no className. Seven
were already redundant with Propel's base class (shrink-0, bg-layer-1);
the remaining three overrode initials typography, which Propel now sets
per size.
- shape="circle" and fallback colour props dropped; Propel is always
circular and picks initials colours from a fixed palette.
AvatarGroup needs app chrome. @plane/ui defaulted to max={2}, rendering
two avatars plus a +N counter, while Propel's AvatarGroup renders every
child. No call site passed max explicitly, so all four relied on that
default and would have rendered entire member lists. The new
common/avatar-group-overflow.tsx restores the cap around Propel's group.
ButtonAvatars' size prop is narrowed to AvatarGroupSize accordingly;
no caller passes size.
Tooltips are intentionally not migrated. @plane/ui Avatar wrapped itself
in a Tooltip defaulting to on, and Propel has no built-in tooltip, so
roughly 29 direct sites plus the ButtonAvatars subtree lose a tooltip.
ButtonAvatars additionally inverted the flag (showTooltip={!showTooltip}),
so its callers passing false were the ones showing tooltips. Restoring
these is deliberately deferred to a follow-up.
|
React Doctor found 1 new issue in 1 file · 1 warning · score 81 / 100 (Needs work) · 0 fixed · vs 1 warning
Reviewed by React Doctor for commit |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (41)
Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review. 📝 WalkthroughWalkthroughMigrates web avatar usage from ChangesAvatar migration and grouping
Estimated code review effort: 3 (Moderate) | ~25 minutes Merge Risk: ⚪ Minimal · up to This PR replaces web avatar components without changing permissions, data handling, backend behavior, or deployment configuration. No actionable merge-blocking risk remains beyond normal checks and review. Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Description checkExplanation The description includes the change summary, selected change type, relevant test scenarios, and scope details. Screenshots and references are optional, and the final light/dark theme test item is slightly incomplete but does not prevent understanding the change.
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 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 |
Description
Replaces @plane/ui Avatar and AvatarGroup with the published Propel components across apps/web — 41 files, 51 avatar sites, 4 group sites. Propel's size scale is @plane/ui's shifted one step, so every enum maps with no pixel change
Type of Change
Test Scenarios
Summary by CodeRabbit