refactor: migrate space icons to @makeplane/propel - #9729
refactor: migrate space icons to @makeplane/propel#9729anmolsinghbhatia wants to merge 1 commit into
Conversation
Replace confirmed icon symbols in apps/space with their audited @makeplane/propel/icons targets. Unresolved symbols (StateGroupIcon, PriorityIcon, PlaneLockup, PlaneLogo, Circle, CircleDashed, SignalHigh) stay on their existing imports. Propel icons paint with fill rather than stroke, so stroke-placeholder classes become text-placeholder to preserve the rendered color. Lucide size props become explicit width/height, and one chevron gains an explicit height because Propel defaults to 1em where the legacy IconWrapper defaulted to 16. CycleGroupIcon is deliberately not migrated: it dispatches a different glyph and color per cycle status, which CyclesOutline cannot express.
|
React Doctor found no new issues. 🎉 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: Team Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (29)
Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review. 📝 WalkthroughWalkthroughThe space app adds ChangesPropel icon migration
Estimated code review effort: 2 (Simple) | ~10 minutes Merge Risk: ⚪ Minimal · up to This PR updates Space icons and their visual sizing and color presentation without changing application behavior, data, permissions, or deployment. 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: Docstring CoverageExplanation Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 28 files. (1 skipped: 1 unsupported.)
✨ 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 |
There was a problem hiding this comment.
Pull request overview
Migrates apps/space UI icon usage from Lucide / @plane/propel/icons to @makeplane/propel/icons for the audit-confirmed symbol set, aligning Space with the ongoing Propel icon standardization while keeping unresolved/legacy icon components on their existing imports.
Changes:
- Added
@makeplane/propelas anapps/spacedependency (and updated lockfile). - Replaced icon imports/usages across 28 Space components to
@makeplane/propel/icons, including converting Lucidesizeusage to explicitwidth/heightwhere needed. - Updated placeholder color classes for fill-painted icons (
stroke-placeholder→text-placeholder) where applicable.
Reviewed changes
Copilot reviewed 29 out of 30 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Locks @makeplane/propel dependency resolution for the workspace. |
| apps/space/package.json | Adds @makeplane/propel dependency for Space app icon usage. |
| apps/space/components/issues/reactions/issue-vote-reactions.tsx | Migrates vote arrow icons to @makeplane/propel/icons. |
| apps/space/components/issues/peek-overview/issue-properties.tsx | Migrates property header icons (state/priority/due date/link) to @makeplane/propel/icons, keeps legacy state/priority components where needed. |
| apps/space/components/issues/peek-overview/issue-activity.tsx | Migrates lock icon to @makeplane/propel/icons. |
| apps/space/components/issues/peek-overview/header.tsx | Migrates peek-mode and link icons to @makeplane/propel/icons. |
| apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx | Migrates comment/chat/edit action icons to @makeplane/propel/icons. |
| apps/space/components/issues/navbar/user-avatar.tsx | Migrates sign-out icon and replaces Lucide size with width/height. |
| apps/space/components/issues/navbar/theme.tsx | Migrates theme toggle icons to @makeplane/propel/icons. |
| apps/space/components/issues/navbar/root.tsx | Migrates project icon to @makeplane/propel/icons. |
| apps/space/components/issues/navbar/layout-icon.tsx | Migrates layout icons to @makeplane/propel/icons while preserving ISvgIcons-based props shape. |
| apps/space/components/issues/issue-layouts/utils.tsx | Migrates cycle/module group “None” icons to @makeplane/propel/icons while keeping dynamic cycle/status icons on legacy components. |
| apps/space/components/issues/issue-layouts/properties/modules.tsx | Migrates module icon to @makeplane/propel/icons. |
| apps/space/components/issues/issue-layouts/properties/member.tsx | Migrates members fallback icon to @makeplane/propel/icons. |
| apps/space/components/issues/issue-layouts/properties/labels.tsx | Migrates label property icon to @makeplane/propel/icons. |
| apps/space/components/issues/issue-layouts/properties/due-date.tsx | Migrates due date icon to @makeplane/propel/icons. |
| apps/space/components/issues/issue-layouts/properties/cycle.tsx | Migrates cycle icon to @makeplane/propel/icons. |
| apps/space/components/issues/issue-layouts/properties/all-properties.tsx | Migrates attachments/links/sub-issues icons to @makeplane/propel/icons. |
| apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx | Migrates kanban subgroup chevrons to @makeplane/propel/icons. |
| apps/space/components/issues/filters/selection.tsx | Migrates filter search/clear icons to @makeplane/propel/icons. |
| apps/space/components/issues/filters/helpers/filter-option.tsx | Migrates checked indicator icon to @makeplane/propel/icons. |
| apps/space/components/issues/filters/helpers/filter-header.tsx | Migrates filter section chevrons to @makeplane/propel/icons. |
| apps/space/components/issues/filters/applied-filters/state.tsx | Migrates applied-filter remove icon to @makeplane/propel/icons (keeps state glyph legacy). |
| apps/space/components/issues/filters/applied-filters/priority.tsx | Migrates applied-filter remove icon to @makeplane/propel/icons (keeps priority glyph legacy). |
| apps/space/components/issues/filters/applied-filters/label.tsx | Migrates applied-filter remove icon to @makeplane/propel/icons. |
| apps/space/components/issues/filters/applied-filters/filters-list.tsx | Migrates “clear” icons to @makeplane/propel/icons. |
| apps/space/components/account/auth-forms/unique-code.tsx | Migrates email clear + success icons and updates placeholder coloring for fill icons. |
| apps/space/components/account/auth-forms/password.tsx | Migrates email clear + show/hide icons and updates placeholder coloring for fill icons. |
| apps/space/components/account/auth-forms/email.tsx | Migrates clear + warning icons and updates placeholder coloring for fill icons. |
| apps/space/components/account/auth-forms/auth-banner.tsx | Migrates info/close icons to @makeplane/propel/icons. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| } ${multiple ? "rounded-xs" : "rounded-full"}`} | ||
| > | ||
| {isChecked && <CheckIcon width={10} height={10} strokeWidth={3} />} | ||
| {isChecked && <TickOutline width={10} height={10} strokeWidth={3} />} |
There was a problem hiding this comment.
strokeWidth is a no-op on @makeplane/propel/icons. These glyphs paint with fill="currentColor", not stroke — the prop lands on <svg> and never changes weight.
Here it used to matter: Lucide CheckIcon at 10px with strokeWidth={3} was intentionally fat. After the swap the tick is whatever optical weight is baked into the fill path, scaled from a 16 viewBox. Drop the prop so we do not pretend it still controls that.
Same leftover on:
filters/applied-filters/filters-list.tsxfilters/applied-filters/label.tsxfilters/applied-filters/priority.tsxfilters/applied-filters/state.tsxfilters/selection.tsxissue-layouts/kanban/headers/sub-group-by-card.tsxissue-layouts/properties/all-properties.tsxissue-layouts/properties/labels.tsxpeek-overview/comment/comment-detail-card.tsx
Strip strokeWidth from every @makeplane/propel/icons usage in this PR. Worth a glance at the 10×10 filter tick and chip X after — those were the sizes that relied on stroke weight.
| {showPassword?.password ? ( | ||
| <EyeOff | ||
| className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer" | ||
| <HideOutline |
There was a problem hiding this comment.
Propel icons bake aria-hidden="true" on the <svg>. Putting onClick on HideOutline / ShowOutline / CloseCircleOutline makes a control that mouse users can click and assistive tech skips: no button, no name, not in the tab order.
email.tsx in this PR already wraps the clear icon in a <button>. Do the same here (and the matching CloseCircleOutline in unique-code.tsx):
<button
type="button"
aria-label="Show password"
className="absolute right-3 ..."
onClick={() => handleShowPassword("password")}
>
<ShowOutline className="h-5 w-5 text-placeholder" />
</button>Keep aria-hidden on the SVG (decorative). Put the label + onClick on the button. Same for hide, confirm-password toggle, and both email-clear icons.
Description
Migrates the audit-confirmed icon symbols in
apps/space(28 files) to@makeplane/propel/iconsand adds the@makeplane/propelcatalog dependency.Unresolved symbols —
StateGroupIcon,PriorityIcon,PlaneLockup,PlaneLogo,Circle,CircleDashed,SignalHigh— stay on their existing imports.Propel icons paint with
fillrather thanstroke, so 7stroke-placeholderclasses becametext-placeholderto keep the rendered colour; Lucidesizeprops became explicitwidth/height.CycleGroupIconis not migrated: it dispatches a different glyph and colour per cycle status, whichCyclesOutlinecannot express.Icon mapping
SunAppearanceOutlineArrowDownArrowDownOutlineMoveRightArrowNarrowRightOutlinePaperclipAttachOutlineBoardLayoutIconBoardOutlineMessageSquareChatOutlineChevronDownIconChevronDownOutlineChevronUpIconChevronUpOutlineXCircleCloseCircleOutlineCloseIconCloseOutlineCycleIconCyclesOutlineDueDatePropertyIconDueDateOutlineFullScreenPanelIconFullScreenPeekOutlineEyeOffHideOutlineInfoInfoOutlineLabelPropertyIconLabelsOutlineLinkIconLinkOutlineListLayoutIconListOutlineLockLockOutlineLogOutLogOutOutlineMembersPropertyIconMembersOutlineCenterPanelIconModalPeekOutlineModuleIconModuleOutlineMoonMoonOutlineMoreVerticalMoreVerticalOutlinePriorityPropertyIconPriorityOutlineProjectIconProjectsOutlineSearchIconSearchOutlineEyeShowOutlineSidePanelIconSidePeekOutlineStatePropertyIconStateOutlineCircleCheckTickCircleOutlineCheckIconTickOutlineArrowUpTopArrowOutlineViewsIconViewsOutlineCircleAlertWarningCircleOutlineType of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Part of the community icon migration to
@makeplane/propel/icons. Mappings come from the icon audit manifest; none were inferred by name or appearance.🤖 Generated with Claude Code
Summary by CodeRabbit