Skip to content

refactor: migrate web Avatar to @makeplane/propel Avatar - #9724

Open
anmolsinghbhatia wants to merge 1 commit into
previewfrom
refactor/avatar-to-propel-avatar
Open

refactor: migrate web Avatar to @makeplane/propel Avatar#9724
anmolsinghbhatia wants to merge 1 commit into
previewfrom
refactor/avatar-to-propel-avatar

Conversation

@anmolsinghbhatia

@anmolsinghbhatia anmolsinghbhatia commented Aug 31, 2026

Copy link
Copy Markdown
Contributor

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

  • Code refactoring

Test Scenarios

  • Project card: member stack caps at 2 + +N; counter renders fully, not clipped by the adjacent avatar
  • Cycle sidebar / cycle list: assignee stacks cap correctly
  • Member dropdowns (assignee, lead, created-by): single and grouped avatars
  • Applied-filter chips across issues / modules / project / inbox
  • Notification card (42→40px) and profile sidebar header (32px) — check ring gap and initials
  • Editor @ mentions and Power-K member menu
  • Users without an avatar image: initials render, colour now from Propel's palette (was hardcoded teal)
  • Light and dark

Summary by CodeRabbit

  • UI Improvements
    • Updated avatars throughout the app with more consistent sizing and presentation.
    • Avatars now show clearer fallback initials when profile images are unavailable.
    • Improved avatar displays in member lists, filters, comments, notifications, mentions, and profile areas.
    • Added consistent overflow indicators for avatar groups, showing how many additional members are hidden.

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.
@github-actions

Copy link
Copy Markdown

React Doctor found 1 new issue in 1 file · 1 warning · score 81 / 100 (Needs work) · 0 fixed · vs preview

1 warning

core/components/workspace-notifications/sidebar/notification-card/item.tsx

  • ⚠️ L21 Import from a barrel file no-barrel-import

Reviewed by React Doctor for commit 72e6bfa. See inline comments for fixes.

@coderabbitai

coderabbitai Bot commented Aug 31, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: cc533fd8-f5e8-4ecc-8e81-4a66afb1f546

📥 Commits

Reviewing files that changed from the base of the PR and between bc2fce4 and 72e6bfa.

📒 Files selected for processing (41)
  • apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
  • apps/web/core/components/comments/card/display.tsx
  • apps/web/core/components/common/applied-filters/members.tsx
  • apps/web/core/components/common/avatar-group-overflow.tsx
  • apps/web/core/components/common/filters/created-by.tsx
  • apps/web/core/components/core/description-versions/dropdown-item.tsx
  • apps/web/core/components/core/description-versions/modal.tsx
  • apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
  • apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
  • apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
  • apps/web/core/components/cycles/list/cycle-list-item-action.tsx
  • apps/web/core/components/dropdowns/member/avatar.tsx
  • apps/web/core/components/dropdowns/member/member-options.tsx
  • apps/web/core/components/editor/embeds/mentions/user.tsx
  • apps/web/core/components/home/widgets/recents/page.tsx
  • apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
  • apps/web/core/components/inbox/inbox-filter/filters/members.tsx
  • apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
  • apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
  • apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
  • apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
  • apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
  • apps/web/core/components/issues/issue-layouts/utils.tsx
  • apps/web/core/components/modules/applied-filters/members.tsx
  • apps/web/core/components/modules/dropdowns/filters/lead.tsx
  • apps/web/core/components/modules/dropdowns/filters/members.tsx
  • apps/web/core/components/pages/list/block-item-action.tsx
  • apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx
  • apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
  • apps/web/core/components/power-k/menus/members.tsx
  • apps/web/core/components/project/applied-filters/members.tsx
  • apps/web/core/components/project/card.tsx
  • apps/web/core/components/project/dropdowns/filters/lead.tsx
  • apps/web/core/components/project/dropdowns/filters/members.tsx
  • apps/web/core/components/project/member-select.tsx
  • apps/web/core/components/project/send-project-invitation-modal.tsx
  • apps/web/core/components/settings/profile/sidebar/header.tsx
  • apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
  • apps/web/core/components/workspace/sidebar/user-menu-root.tsx
  • apps/web/core/hooks/editor/use-editor-mention.tsx
  • apps/web/core/hooks/work-item-filters/use-work-item-filters-config.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.


📝 Walkthrough

Walkthrough

Migrates web avatar usage from @plane/ui to Propel. Avatar props now use alt, fallback, and named sizes. Shared grouped-avatar views use the new AvatarGroupOverflow component.

Changes

Avatar migration and grouping

Layer / File(s) Summary
Avatar group overflow component
apps/web/core/components/common/avatar-group-overflow.tsx
Adds configurable avatar limits, child slicing, size-specific overflow styling, and remaining-avatar counters.
Grouped avatar integrations
apps/web/core/components/cycles/..., apps/web/core/components/dropdowns/member/avatar.tsx, apps/web/core/components/project/card.tsx
Replaces legacy avatar groups with AvatarGroupOverflow and updates grouped avatars to the Propel API.
Individual avatar API migration
apps/web/core/components/**, apps/web/core/hooks/**
Moves avatar imports to Propel and replaces legacy props with alt, fallback, and named sizes across application views and hooks.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Merge Risk: ⚪ Minimal · up to 72e6b

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: sriramveeraghanta

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 41 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main change: migrating web Avatar usage to the published Propel Avatar component.
Description check ✅ Passed 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 slig…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

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.

  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch refactor/avatar-to-propel-avatar

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

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant