[WEB-4840] chore: icon migration from @plane/ui to @plane/propel/icons#7721
[WEB-4840] chore: icon migration from @plane/ui to @plane/propel/icons#7721sriramveeraghanta merged 8 commits intopreviewfrom
Conversation
@plane/propel/icons)
anmolsinghbhatia
requested review from
prateekshourya29,
sriramveeraghanta and
vamsikrishnamathala
WalkthroughReplace many icon/logo imports across apps to import from Changes
Sequence Diagram(s)(Skipped — changes are import-source and signature updates only; no control-flow or new runtime interactions to illustrate.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items
Comment Automatically Generated by Plane |
There was a problem hiding this comment.
Pull Request Overview
Complete migration of icon components from @plane/ui package to @plane/propel/icons package across the entire codebase. This refactoring separates icon components from UI components for better modularity and organization.
- Migration of all icon and logo components from @plane/ui to @plane/propel/icons
- Updated imports across 100+ files spanning web, space, and admin applications
- Removed icon exports from @plane/ui package index
Reviewed Changes
Copilot reviewed 136 out of 220 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/utils/src/string.ts | Reordered import statements to follow consistent style |
| packages/ui/src/index.ts | Removed icon exports from UI package index |
| packages/ui/src/emoji/*.tsx | Updated icon imports to use @plane/propel/icons |
| packages/ui/src/collapsible/*.tsx | Updated icon imports to use @plane/propel/icons |
| packages/ui/src/breadcrumbs/*.tsx | Updated icon imports to use @plane/propel/icons |
| packages/propel/tsdown.config.ts | Added icons entry point to build configuration |
| packages/propel/src/icons/*.tsx | Reordered imports for consistency |
| packages/propel/package.json | Added icons export to package exports |
| apps/web/core/**/*.tsx | Updated all icon imports across web application |
| apps/space/core/**/*.tsx | Updated all icon imports across space application |
| apps/admin/app/**/*.tsx | Updated all icon imports across admin application |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (10)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx (1)
1-1: Remove remaining icon/logo imports from @plane/ui.Found 6 stray imports—migrate these to @plane/propel/icons:
- packages/editor/src/core/extensions/callout/logo-selector.tsx (line 2)
- packages/editor/src/core/extensions/callout/utils.ts (line 2)
- apps/web/core/components/project/form.tsx (line 12)
- apps/web/core/components/pages/modals/page-form.tsx (line 9)
- apps/web/core/components/pages/editor/header/root.tsx (line 5)
- apps/web/core/components/pages/editor/header/logo-picker.tsx (line 4)
Icon-related types (ISvgIcons, TIssuePriorities, TModuleStatus) have been fully migrated.
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx (1)
19-29: Replace leftover @plane/ui icon/logo imports with @plane/propel/icons
The following files still import icon/logo types from @plane/ui; update them to import from @plane/propel/icons instead:
- apps/web/core/components/project/form.tsx (line 12): EmojiIconPickerTypes
- apps/web/core/components/pages/modals/page-form.tsx (line 9): EmojiIconPicker, EmojiIconPickerTypes
- apps/web/core/components/pages/editor/header/logo-picker.tsx (line 4): EmojiIconPicker, EmojiIconPickerTypes
- apps/web/core/components/pages/editor/header/root.tsx (line 5): EmojiIconPicker, EmojiIconPickerTypes
- packages/editor/src/core/extensions/callout/utils.ts (line 2): TEmojiLogoProps
- packages/editor/src/core/extensions/callout/logo-selector.tsx (line 2): EmojiIconPicker, EmojiIconPickerTypes, Logo, TEmojiLogoProps
apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx (1)
130-141: Fix potential crash when assignee_ids is undefined.
Optional chaining is missing before includes().- {issueDetails?.assignee_ids.includes(currentUser?.id ?? "") ? ( + {issueDetails?.assignee_ids?.includes(currentUser?.id ?? "") ? (apps/web/core/components/global/product-updates/footer.tsx (1)
15-18: Add rel="noopener noreferrer" to external links opened in new tabs.Prevents reverse tabnabbing and improves security.
- target="_blank" + target="_blank" rel="noopener noreferrer" ... - target="_blank" + target="_blank" rel="noopener noreferrer" ... - target="_blank" + target="_blank" rel="noopener noreferrer" ... - target="_blank" + target="_blank" rel="noopener noreferrer" ... - target="_blank" + target="_blank" rel="noopener noreferrer"Also applies to: 25-31, 36-41, 46-51, 54-63
apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx (2)
120-123: Bug: guard references undefined identifier ‘module’. Should be ‘moduleId’.This will throw/TS-error and short-circuit valid updates.
Apply:
- const handleUpdateLink = async (formData: ModuleLink, linkId: string) => { - if (!workspaceSlug || !projectId || !module) return; + const handleUpdateLink = async (formData: ModuleLink, linkId: string) => { + if (!workspaceSlug || !projectId || !moduleId) return;
141-144: Same bug in delete handler: ‘module’ is undefined.Use moduleId to match upstream usage.
- const handleDeleteLink = async (linkId: string) => { - if (!workspaceSlug || !projectId || !module) return; + const handleDeleteLink = async (linkId: string) => { + if (!workspaceSlug || !projectId || !moduleId) return;apps/web/core/components/modules/analytics-sidebar/root.tsx (2)
121-123: Bug: guard references undefined ‘module’. Should be ‘moduleId’.Prevents update flow; likely a long-standing typo.
- const handleUpdateLink = async (formData: ModuleLink, linkId: string) => { - if (!workspaceSlug || !projectId || !module) return; + const handleUpdateLink = async (formData: ModuleLink, linkId: string) => { + if (!workspaceSlug || !projectId || !moduleId) return;
142-144: Same bug in delete handler.Use moduleId consistently.
- const handleDeleteLink = async (linkId: string) => { - if (!workspaceSlug || !projectId || !module) return; + const handleDeleteLink = async (linkId: string) => { + if (!workspaceSlug || !projectId || !moduleId) return;apps/web/core/components/modules/module-card-item.tsx (1)
191-197: Fix runtime ReferenceError: undefined identifier "module".
issueCountchecksmodule, which is not defined in this scope. It should referencemoduleDetails.- const issueCount = module + const issueCount = moduleDetails ? !moduleTotalIssues || moduleTotalIssues === 0 ? `0 work items` : moduleTotalIssues === moduleCompletedIssues ? `${moduleTotalIssues} Work item${moduleTotalIssues > 1 ? `s` : ``}` : `${moduleCompletedIssues}/${moduleTotalIssues} Work items` : `0 work items`;apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx (1)
94-99: Fix user-facing grammar in tooltip.
Current: “There are X … in project's archived.” Suggest: proper is/are and “the project's archives”.- tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "work items" : "work item"} in project's archived`} + tooltipContent={`There ${issueCount === 1 ? "is" : "are"} ${issueCount} ${issueCount === 1 ? "work item" : "work items"} in the project's archives`}
🧹 Nitpick comments (37)
apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx (1)
27-32: Nit: simplify toggle handler and remove dead guard
filteredOptionsis always an array; the null check is redundant.- const handleViewToggle = () => { - if (!filteredOptions) return; - - if (itemsToRender === filteredOptions.length) setItemsToRender(5); - else setItemsToRender(filteredOptions.length); - }; + const handleViewToggle = () => { + setItemsToRender((n) => (n === filteredOptions.length ? 5 : filteredOptions.length)); + };apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx (1)
31-31: Nit: avoid trailing space in title when count is 0- title={`Priority ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`} + title={`Priority${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}apps/web/ce/constants/project/settings/features.tsx (1)
40-40: Unify icon sizing: prefer className-based sizes for consistency- icon: <DiceIcon width={20} height={20} className="flex-shrink-0 text-custom-text-300" />, + icon: <DiceIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,apps/web/core/components/auth-screens/header.tsx (1)
42-44: A11y: add an aria-label to the home link (optional)- <Link href="/"> + <Link href="/" aria-label="Plane home"> <PlaneLockup height={20} width={95} className="text-custom-text-100" /> </Link>apps/space/core/components/issues/issue-layouts/properties/cycle.tsx (1)
4-6: Update import section comment for accuracy.The comment says “plane ui” but this line now imports from @plane/propel/icons. Recommend renaming to “plane icons” for clarity.
Apply:
-// plane ui +// plane iconsapps/space/core/components/issues/issue-layouts/properties/priority.tsx (1)
47-64: Optional: unify fallback rendering.Consider rendering PriorityIcon with a “none” variant instead of SignalHigh for visual consistency across priorities.
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx (1)
11-11: Remove stale section comment.The // icons comment is now empty after moving the import above. Safe to delete.
-// iconsapps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx (1)
33-39: Add accessible label to the remove button.Improves screen-reader UX without changing behavior.
- <button - type="button" + <button + type="button" + aria-label="Remove module filter" className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" onClick={() => handleRemove(moduleId)} >apps/web/core/components/common/switcher-label.tsx (2)
2-2: Useimport typefor erased types to avoid accidental runtime import.-import { ISvgIcons } from "@plane/propel/icons"; +import type { ISvgIcons } from "@plane/propel/icons";
28-33: Minor image perf: lazy-load and async-decode remote logos.<img src={getFileURL(logo_url)} alt="logo" className="rounded-sm object-cover" - style={{ height: size, width: size }} + style={{ height: size, width: size }} + loading="lazy" + decoding="async" />apps/web/core/components/auth-screens/footer.tsx (1)
11-24: Optional: add accessible names for logos.Add aria-label or title to each brand logo to improve a11y for screen readers.
- icon: <ZerodhaLogo className="h-7 w-24 text-[#387ED1]" />, + icon: <ZerodhaLogo aria-label="Zerodha" className="h-7 w-24 text-[#387ED1]" />,apps/web/ce/components/relations/index.tsx (1)
13-14: Prefer a unified size prop if supported.If RelatedIcon supports size, switch from width/height to size for consistency with lucide-react usage.
- icon: (size) => <RelatedIcon height={size} width={size} className="text-custom-text-200" />, + icon: (size) => <RelatedIcon size={size} className="text-custom-text-200" />,apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx (1)
7-7: Import migration looks good; tighten types to drop the cast.Works as-is. You can avoid the cast by narrowing Props.values to the union.
type Props = { handleRemove: (val: string) => void; - values: string[]; + values: TIssuePriorities[]; editable: boolean | undefined; }; ... - <PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} /> + <PriorityIcon priority={priority} className="h-3 w-3" />Verification: ensure PriorityIcon’s prop type accepts TIssuePriorities in @plane/propel/icons (tsc/typecheck should confirm).
Also applies to: 11-15, 24-24
apps/web/core/components/onboarding/tour/root.tsx (1)
9-11: PlaneLockup migration LGTM.Split imports are correct; no behavior change expected.
To prevent regressions, consider enforcing the icon-path rule repo-wide (see ESLint selector suggestion in another comment).
apps/web/core/components/command-palette/actions/issue-actions/change-priority.tsx (1)
10-10: Import OK; tiny UI consistency tweak (optional).To match sizing elsewhere, consider setting explicit size via className.
- <PriorityIcon priority={priority.key} /> + <PriorityIcon priority={priority.key} className="h-3 w-3" />Also applies to: 48-48
apps/web/ce/components/breadcrumbs/project-feature.tsx (1)
7-8: Use type-only imports for ISvgIcons (and FC)Switch to a type-only import to avoid pulling the icon barrel at runtime:
-import { ISvgIcons } from "@plane/propel/icons"; +import type { ISvgIcons } from "@plane/propel/icons";And if you import
FCfrom React, change it to a type-only import:-import { FC } from "react"; +import type { FC } from "react";
TNavigationItem.iconisReact.ElementType, so your casts toFC<ISvgIcons>remain valid, and there are no other icon imports from@plane/ui.apps/web/core/components/modules/applied-filters/status.tsx (1)
8-8: ModuleStatusIcon import updated — verify prop parityDouble-check that the Propel version still accepts { status, width, height }. Optional: prefer Tailwind className sizing (e.g., "size-3") for consistency with the rest of the codebase.
apps/web/ce/components/issues/issue-layouts/utils.tsx (1)
68-82: Minor naming nitKeys "CalenderDays" and "CalenderCheck2" look misspelled. If they’re externally referenced, ignore; otherwise consider correcting to "CalendarDays" / "CalendarCheck2".
apps/web/core/components/inbox/inbox-filter/filters/priority.tsx (1)
7-7: PriorityIcon import OK; align TIssuePriorities source if migrated.PR notes say TIssuePriorities moved with icons. If that’s true repo-wide, consider importing TIssuePriorities from @plane/propel/icons for consistency; otherwise keep as-is.
apps/web/core/components/modules/gantt-chart/blocks.tsx (1)
8-8: ModuleStatusIcon migration LGTM; confirm sizing API.You pass height/width="16px". Ensure the Propel icon honors these (or switch to Tailwind className sizing for consistency with other icons).
apps/web/core/components/issues/peek-overview/header.tsx (1)
30-46: Type/value consistency in CustomSelect (optional).PEEK_OPTIONS.icon is typed as any and CustomSelect value is currentMode (object) while Option value is mode.key (string). Verify CustomSelect expects string keys; if so, pass peekMode as value and onChange to setPeekMode directly, and type icon as React.ComponentType<{ className?: string }>.
Also applies to: 193-217
apps/web/core/components/automation/auto-close-automation.tsx (3)
169-169: Fix stray class "ppy" (likely a typo).
Removes a no-op class that might affect intended spacing.- <div className="ppy sm:py-10 flex w-full items-center justify-between gap-2 px-5 py-4"> + <div className="sm:py-10 flex w-full items-center justify-between gap-2 px-5 py-4">
108-129: Wrap toggle handler in try/catch and track failures.
Currently success is always tracked even if handleChange rejects.<ToggleSwitch value={autoCloseStatus} - onChange={async () => { - if (currentProjectDetails?.close_in === 0) { - await handleChange({ close_in: 1, default_state: defaultState }); - } else { - await handleChange({ close_in: 0, default_state: null }); - } - captureElementAndEvent({ - element: { - elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.AUTOMATIONS_CLOSE_TOGGLE_BUTTON, - }, - event: { - eventName: PROJECT_SETTINGS_TRACKER_EVENTS.auto_close_workitems, - state: "SUCCESS", - }, - }); - }} + onChange={async () => { + try { + if (currentProjectDetails?.close_in === 0) { + await handleChange({ close_in: 1, default_state: defaultState }); + } else { + await handleChange({ close_in: 0, default_state: null }); + } + captureElementAndEvent({ + element: { + elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.AUTOMATIONS_CLOSE_TOGGLE_BUTTON, + }, + event: { + eventName: PROJECT_SETTINGS_TRACKER_EVENTS.auto_close_workitems, + state: "SUCCESS", + }, + }); + } catch { + captureElementAndEvent({ + element: { + elementName: PROJECT_SETTINGS_TRACKER_ELEMENTS.AUTOMATIONS_CLOSE_TOGGLE_BUTTON, + }, + event: { + eventName: PROJECT_SETTINGS_TRACKER_EVENTS.auto_close_workitems, + state: "FAILED", + }, + }); + } + }} size="sm" disabled={!isAdmin} />
40-40: Rename setter to camelCase for consistency.
Minor readability polish.- const [monthModal, setmonthModal] = useState(false); + const [monthModal, setMonthModal] = useState(false); @@ - handleClose={() => setmonthModal(false)} + handleClose={() => setMonthModal(false)} @@ - onClick={() => setmonthModal(true)} + onClick={() => setMonthModal(true)}Also applies to: 92-92, 160-160
apps/web/core/components/cycles/transfer-issues-modal.tsx (1)
121-123: Add aria-label to close button for accessibility.- <button onClick={handleClose}> + <button onClick={handleClose} aria-label="Close modal">apps/admin/app/(all)/(home)/auth-header.tsx (1)
8-10: Add aria-label on the logo link.
Improves accessibility for screen readers.- <Link href="/"> + <Link href="/" aria-label="Go to home">apps/web/core/components/core/filters/date-filter-select.tsx (2)
17-18: Tighten type for icon field.
Use ReactNode instead of any.- icon: any; + icon: React.ReactNode;
51-53: Use stable key instead of array index.
Prevents unnecessary re-renders on reordering.- {dueDateRange.map((option, index) => ( - <CustomSelect.Option key={index} value={option.value}> + {dueDateRange.map((option) => ( + <CustomSelect.Option key={option.value} value={option.value}>apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx (1)
247-259: Minor: useMenuItemFactory identity invalidates downstream useMemo dependencies each render.Factory returns a new object per render; memoized menus depending on [factory] will recompute anyway. Consider memoizing factory or depending on stable props.
apps/web/core/components/modules/analytics-sidebar/root.tsx (1)
19-23: Optional: tighten type of status onChange to TModuleStatus.Improves safety and parity with ModuleStatusDropdown.
-import { LayersIcon, ModuleStatusIcon } from "@plane/propel/icons"; +import { LayersIcon, ModuleStatusIcon, TModuleStatus } from "@plane/propel/icons"; @@ - onChange={(value: any) => { + onChange={(value: TModuleStatus) => { submitChanges({ status: value }); }}Also applies to: 273-278
apps/web/core/components/home/widgets/empty-states/stickies.tsx (1)
1-1: Update misleading header comment.
It still says "plane ui" though the icon now comes from @plane/propel/icons.-// plane ui +// plane packagesapps/web/core/components/modules/dropdowns/filters/root.tsx (1)
7-7: Use a type-only import for TModuleStatus.
Slight bundle/type-check speed win and clearer intent.-import { TModuleStatus } from "@plane/propel/icons"; +import type { TModuleStatus } from "@plane/propel/icons";apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx (1)
7-7: LGTM; minor import grouping nit.ArchiveIcon is under a "// hooks" comment. Consider grouping with other icons for consistency.
-import { RotateCcw } from "lucide-react"; -// hooks -import { ArchiveIcon } from "@plane/propel/icons"; -import { useIssueDetail } from "@/hooks/store/use-issue-detail"; +// icons +import { RotateCcw } from "lucide-react"; +import { ArchiveIcon } from "@plane/propel/icons"; +// hooks +import { useIssueDetail } from "@/hooks/store/use-issue-detail";apps/web/core/components/command-palette/actions/help-actions.tsx (1)
6-6: Import migration is correct; tiny styling nit for consistency.Prefer relying on currentColor via className rather than the color prop for DiscordIcon (to match lucide usage).
- <DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" /> + <DiscordIcon className="h-4 w-4 text-custom-text-200" />apps/web/app/(all)/invitations/page.tsx (2)
13-16: Fix import grouping comment and placement.PlaneLogo is under a "// types" section. Move it under an "// icons" section for clarity.
-import { useTranslation } from "@plane/i18n"; -// types -import { PlaneLogo } from "@plane/propel/icons"; -import type { IWorkspaceMemberInvitation } from "@plane/types"; +import { useTranslation } from "@plane/i18n"; +// icons +import { PlaneLogo } from "@plane/propel/icons"; +// types +import type { IWorkspaceMemberInvitation } from "@plane/types";
134-140: Accessibility nit: add an accessible name to the logo link.Give the home link a label so it’s not announced as an unlabeled link.
- <Link - href="/" - className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10" - > + <Link + href="/" + aria-label="Go to Plane home" + className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10" + >apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx (1)
25-31: Broaden icon type to accept forwardRef components from the new package.
If @plane/propel/icons exports forwardRef components, React.ForwardRefExoticComponent isn’t assignable to React.FC. Prefer ComponentType.- icon: React.FC<React.SVGAttributes<SVGElement> & { className?: string }>; + icon: React.ComponentType<React.SVGAttributes<SVGElement> & { className?: string }>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (107)
apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx(1 hunks)apps/admin/app/(all)/(home)/auth-header.tsx(1 hunks)apps/space/core/components/account/user-logged-in.tsx(1 hunks)apps/space/core/components/common/powered-by.tsx(1 hunks)apps/space/core/components/issues/filters/applied-filters/priority.tsx(1 hunks)apps/space/core/components/issues/filters/applied-filters/state.tsx(1 hunks)apps/space/core/components/issues/filters/priority.tsx(1 hunks)apps/space/core/components/issues/filters/state.tsx(1 hunks)apps/space/core/components/issues/issue-layouts/properties/cycle.tsx(1 hunks)apps/space/core/components/issues/issue-layouts/properties/modules.tsx(1 hunks)apps/space/core/components/issues/issue-layouts/properties/priority.tsx(1 hunks)apps/space/core/components/issues/issue-layouts/properties/state.tsx(1 hunks)apps/space/core/components/issues/issue-layouts/utils.tsx(2 hunks)apps/space/core/components/issues/peek-overview/header.tsx(1 hunks)apps/space/core/components/issues/peek-overview/issue-properties.tsx(1 hunks)apps/space/core/components/views/header.tsx(1 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx(1 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx(1 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx(1 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx(1 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx(1 hunks)apps/web/app/(all)/create-workspace/page.tsx(1 hunks)apps/web/app/(all)/invitations/page.tsx(1 hunks)apps/web/ce/components/breadcrumbs/project-feature.tsx(1 hunks)apps/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx(1 hunks)apps/web/ce/components/command-palette/helpers.tsx(1 hunks)apps/web/ce/components/global/product-updates-header.tsx(1 hunks)apps/web/ce/components/issues/issue-layouts/utils.tsx(1 hunks)apps/web/ce/components/projects/navigation/helper.tsx(1 hunks)apps/web/ce/components/relations/index.tsx(1 hunks)apps/web/ce/components/workspace/sidebar/helper.tsx(1 hunks)apps/web/ce/constants/project/settings/features.tsx(1 hunks)apps/web/ce/constants/sidebar-favorites.ts(1 hunks)apps/web/core/components/auth-screens/footer.tsx(1 hunks)apps/web/core/components/auth-screens/header.tsx(1 hunks)apps/web/core/components/automation/auto-close-automation.tsx(1 hunks)apps/web/core/components/command-palette/actions/help-actions.tsx(1 hunks)apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx(1 hunks)apps/web/core/components/command-palette/actions/issue-actions/change-priority.tsx(1 hunks)apps/web/core/components/command-palette/actions/project-actions.tsx(1 hunks)apps/web/core/components/command-palette/command-modal.tsx(1 hunks)apps/web/core/components/common/activity/helper.tsx(1 hunks)apps/web/core/components/common/switcher-label.tsx(1 hunks)apps/web/core/components/core/activity.tsx(1 hunks)apps/web/core/components/core/filters/date-filter-select.tsx(1 hunks)apps/web/core/components/cycles/active-cycle/cycle-stats.tsx(1 hunks)apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx(2 hunks)apps/web/core/components/cycles/list/cycle-list-group-header.tsx(1 hunks)apps/web/core/components/cycles/list/cycle-list-item-action.tsx(1 hunks)apps/web/core/components/cycles/quick-actions.tsx(1 hunks)apps/web/core/components/cycles/transfer-issues-modal.tsx(1 hunks)apps/web/core/components/cycles/transfer-issues.tsx(1 hunks)apps/web/core/components/dropdowns/cycle/cycle-options.tsx(1 hunks)apps/web/core/components/dropdowns/cycle/index.tsx(1 hunks)apps/web/core/components/dropdowns/module/button-content.tsx(1 hunks)apps/web/core/components/dropdowns/module/module-options.tsx(1 hunks)apps/web/core/components/dropdowns/priority.tsx(1 hunks)apps/web/core/components/dropdowns/state/base.tsx(1 hunks)apps/web/core/components/global/product-updates/footer.tsx(1 hunks)apps/web/core/components/home/widgets/empty-states/recents.tsx(1 hunks)apps/web/core/components/home/widgets/empty-states/stickies.tsx(1 hunks)apps/web/core/components/home/widgets/recents/index.tsx(1 hunks)apps/web/core/components/home/widgets/recents/issue.tsx(1 hunks)apps/web/core/components/inbox/content/issue-properties.tsx(1 hunks)apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx(1 hunks)apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx(1 hunks)apps/web/core/components/inbox/inbox-filter/filters/priority.tsx(1 hunks)apps/web/core/components/inbox/inbox-filter/filters/state.tsx(1 hunks)apps/web/core/components/inbox/root.tsx(1 hunks)apps/web/core/components/inbox/sidebar/inbox-list-item.tsx(1 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx(1 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx(1 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx(1 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx(1 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx(1 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx(1 hunks)apps/web/core/components/issues/issue-detail/sidebar.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/utils.tsx(2 hunks)apps/web/core/components/issues/peek-overview/header.tsx(1 hunks)apps/web/core/components/issues/peek-overview/properties.tsx(1 hunks)apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx(2 hunks)apps/web/core/components/modules/analytics-sidebar/root.tsx(1 hunks)apps/web/core/components/modules/applied-filters/status.tsx(1 hunks)apps/web/core/components/modules/dropdowns/filters/root.tsx(1 hunks)apps/web/core/components/modules/dropdowns/filters/status.tsx(1 hunks)apps/web/core/components/modules/gantt-chart/blocks.tsx(1 hunks)apps/web/core/components/modules/module-card-item.tsx(1 hunks)apps/web/core/components/modules/module-status-dropdown.tsx(1 hunks)apps/web/core/components/modules/quick-actions.tsx(1 hunks)apps/web/core/components/modules/select/status.tsx(1 hunks)apps/web/core/components/modules/sidebar-select/select-status.tsx(1 hunks)apps/web/core/components/onboarding/header.tsx(1 hunks)apps/web/core/components/onboarding/tour/root.tsx(1 hunks)
⛔ Files not processed due to max files limit (29)
- apps/web/core/components/onboarding/tour/sidebar.tsx
- apps/web/core/components/pages/dropdowns/actions.tsx
- apps/web/core/components/pages/header/archived-badge.tsx
- apps/web/core/components/profile/overview/stats.tsx
- apps/web/core/components/project-states/group-item.tsx
- apps/web/core/components/project-states/state-item-title.tsx
- apps/web/core/components/stickies/action-bar.tsx
- apps/web/core/components/stickies/modal/stickies.tsx
- apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
- apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
- apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
- apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
- apps/web/core/components/workspace/sidebar/project-navigation.tsx
- apps/web/core/components/workspace/sidebar/projects-list-item.tsx
- apps/web/core/components/workspace/sidebar/user-menu.tsx
- apps/web/core/components/workspace/sidebar/workspace-menu.tsx
- apps/web/core/constants/editor.ts
- apps/web/core/constants/plans.tsx
- apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
- packages/propel/package.json
- packages/propel/src/icons/cycle/cycle-group-icon.tsx
- packages/propel/src/icons/priority-icon.tsx
- packages/propel/tsdown.config.ts
- packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
- packages/ui/src/collapsible/collapsible-button.tsx
- packages/ui/src/emoji/icons-list.tsx
- packages/ui/src/emoji/lucide-icons-list.tsx
- packages/ui/src/index.ts
- packages/utils/src/string.ts
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-05-14T13:16:23.323Z
Learnt from: vamsikrishnamathala
PR: makeplane/plane#7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias `@/plane-web` resolves to the `ce` directory, making imports like `@/plane-web/hooks/use-notification-preview` correctly resolve to files in `web/ce/hooks/`.
Applied to files:
apps/web/ce/components/global/product-updates-header.tsxapps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Analyze (javascript)
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
Show resolved
Hide resolved
apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/propel/src/icons/done-icon.tsx (2)
14-20: Use currentColor to enable theming and consistency with className.This lets consumer-provided color (e.g., Tailwind text-*) drive both stroke and fill.
Apply:
- <circle cx="5" cy="5.5" r="4.4" stroke="#15A34A" strokeWidth="1.2" /> + <circle cx="5" cy="5.5" r="4.4" stroke="currentColor" strokeWidth="1.2" /> @@ - fill="#15A34A" + fill="currentColor"
5-13: Forward standard SVG props and mark decorative by default.Improves accessibility and parity with
ISvgIcons(which already includes all SVG attributes).Apply:
-export const DoneState: React.FC<ISvgIcons> = ({ width = "10", height = "11", className }) => ( +export const DoneState: React.FC<ISvgIcons> = ({ width = "10", height = "11", className, ...props }) => ( <svg width={width} height={height} viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg" - className={className} + className={className} + aria-hidden="true" + {...props} >packages/propel/src/icons/planned-icon.tsx (1)
5-40: Propagate props, switch to currentColor, and avoid clipPath ID collisions.
- Spread
...propsto honorISvgIconssurface.- Use
currentColorso Tailwind/text color drives fills.- Use
useId()to avoid duplicate IDs when multiple instances render.- Optional: default width/height to match the viewBox (crisper rendering).
Apply:
-export const PlannedState: React.FC<ISvgIcons> = ({ width = "10", height = "11", className }) => ( - <svg - width={width} - height={height} - viewBox="0 0 12 13" - fill="none" - xmlns="http://www.w3.org/2000/svg" - className={className} - > - <g clipPath="url(#clip0_3180_28635)"> +export const PlannedState: React.FC<ISvgIcons> = ({ width = "12", height = "13", className, ...props }) => { + const clipId = React.useId(); + return ( + <svg + width={width} + height={height} + viewBox="0 0 12 13" + fill="none" + xmlns="http://www.w3.org/2000/svg" + className={className} + aria-hidden="true" + {...props} + > + <g clipPath={`url(#${clipId})`}> @@ - fill="#455068" + fill="currentColor" @@ - fill="#455068" + fill="currentColor" @@ - fill="#455068" + fill="currentColor" @@ - <defs> - <clipPath id="clip0_3180_28635"> + <defs> + <clipPath id={clipId}> <rect width="12" height="12" fill="white" transform="translate(0 0.5)" /> </clipPath> </defs> - </svg> -); + </svg> + ); +};packages/propel/src/icons/updates-icon.tsx (1)
5-6: Expose width/height, forward props, and use currentColor so className actually affects the SVG.Right now
className="text-current"doesn’t influence fills due to hard-coded hex; width/height are fixed.Apply:
-export const UpdatesIcon: React.FC<ISvgIcons> = ({ className = "text-current" }) => ( - <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}> +export const UpdatesIcon: React.FC<ISvgIcons> = ({ width = "17", height = "16", className = "text-current", ...props }) => ( + <svg width={width} height={height} viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true" {...props}> @@ - fill="#8591AD" + fill="currentColor" @@ - fill="#8591AD" + fill="currentColor" </svg> );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
packages/propel/src/icons/done-icon.tsx(1 hunks)packages/propel/src/icons/planned-icon.tsx(1 hunks)packages/propel/src/icons/updates-icon.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
packages/propel/src/icons/updates-icon.tsx (1)
packages/propel/src/icons/type.ts (1)
ISvgIcons(1-4)
packages/propel/src/icons/done-icon.tsx (1)
packages/propel/src/icons/type.ts (1)
ISvgIcons(1-4)
packages/propel/src/icons/planned-icon.tsx (1)
packages/propel/src/icons/type.ts (1)
ISvgIcons(1-4)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
packages/propel/src/icons/done-icon.tsx (1)
5-5: DoneState color prop removal safe — no callers reference dynamic color or Tailwind text classes
Ripgrep search found no usages ofcolor,fill, orstrokeprops on<DoneState>nor any Tailwindtext-classes in itsclassName.packages/propel/src/icons/planned-icon.tsx (1)
5-5: Safe to ignorecolorprop on PlannedState
No occurrences of<PlannedState>passingcolor,fill, orstrokewere found in the codebase; behavioral risk is negligible.packages/propel/src/icons/updates-icon.tsx (1)
5-6: Ensure no call sites rely on prop forwarding
Automated searches found no instances of<UpdatesIcon>being used with forwarded props (onClick, aria-label, width, height). Please manually confirm that no existing call sites depend on passing extra props through this component.
Summary
Complete migration of all icon components from
@plane/uipackage to@plane/propel/iconspackage.Changes Made
Type of Change
Test Scenarios
Summary by CodeRabbit
Refactor
Chores