[WEB-5188 | WEB-5190] chore: layout and properties icon revamp #7980
[WEB-5188 | WEB-5190] chore: layout and properties icon revamp #7980
Conversation
|
Linked to Plane Work Item(s) References This comment was auto-generated by Plane |
anmolsinghbhatia
changed the title
WalkthroughReplaced lucide-react icons across the codebase with a new @plane/propel icon system: added IconWrapper, ICON_REGISTRY, Icon helper APIs, many new property/layout/project/sub-brand icons and barrels, Storybook stories, and updated numerous app files to use the new icons and adjusted a few icon prop signatures. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant UI as Component
participant IconComp as Icon(name)
participant Registry as ICON_REGISTRY
participant Impl as SpecificIcon
participant Wrapper as IconWrapper
UI->>IconComp: <Icon name="property.state" {...props}/>
IconComp->>Registry: lookup(name)
Registry-->>IconComp: returns Impl (or default)
IconComp->>Impl: render with props
Impl->>Wrapper: IconWrapper({ color, clipPathId?, ... })
Wrapper->>SVG: render <svg> + <path fill={color}/>
SVG-->>Wrapper: rendered SVG
Wrapper-->>Impl: wrapped output
Impl-->>IconComp: JSX
IconComp-->>UI: rendered icon
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60–90 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (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)
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 |
anmolsinghbhatia
requested review from
prateekshourya29,
sriramveeraghanta and
vamsikrishnamathala
There was a problem hiding this comment.
Pull Request Overview
This PR migrates layout and properties icons from Lucide to the Propel icon system, introducing a centralized icon registry and wrapper component for consistent icon management across the codebase.
Key Changes:
- Introduced
IconWrappercomponent and icon registry system for centralized icon management - Migrated 7 layout icons and 20+ property icons from Lucide to Propel
- Refactored icon components to use consistent structure and naming conventions
Reviewed Changes
Copilot reviewed 120 out of 120 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
packages/propel/src/icons/registry.ts |
New icon registry mapping icon names to components |
packages/propel/src/icons/icon-wrapper.tsx |
New wrapper component providing consistent SVG structure |
packages/propel/src/icons/icon.tsx |
New Icon component for registry-based icon usage |
packages/propel/src/icons/layouts/*.tsx |
New layout icon components (list, board, calendar, sheet, timeline, grid, card) |
packages/propel/src/icons/properties/*.tsx |
New property icon components (state, members, priority, dates, labels, etc.) |
packages/propel/src/icons/workspace/*.tsx |
Refactored workspace icons to use IconWrapper |
packages/propel/src/icons/project/*.tsx |
Refactored project icons to use IconWrapper |
packages/propel/src/icons/sub-brand/*.tsx |
Refactored sub-brand icons to use IconWrapper |
packages/constants/src/issue/common.ts |
Updated icon references from Lucide to Propel names |
apps/web/core/components/**/*.tsx |
Updated imports and usage across application components |
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: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/web/ce/components/issues/issue-layouts/utils.tsx (1)
67-81: Update SPREADSHEET_PROPERTY_DETAILS modules icon key or the map key to ensure consistency.Verification found a mismatch: the modules property in
SPREADSHEET_PROPERTY_DETAILS(packages/constants/src/issue/common.ts, line 284) uses icon key"DiceIcon", but theSpreadSheetPropertyIconMapin the PR uses key"ModuleIcon". This will cause the modules column header icon to render as null.Update either:
- Change
packages/constants/src/issue/common.tsline 284 fromicon: "DiceIcon"toicon: "ModuleIcon", or- Change the map key from
ModuleIcontoDiceIconand add the appropriate DiceIcon importpackages/constants/src/issue/common.ts (1)
244-316: Update line 252:created_onproperty uses invalid icon name"CalendarDays".The PR successfully updates most property icons to valid Propel icons (MembersPropertyIcon, DueDatePropertyIcon, etc.), but the
created_onproperty at line 252 retains"CalendarDays", which is a Lucide icon name that does not exist in Propel exports. This will cause a runtime error.Change line 252 from
icon: "CalendarDays"to a valid Propel icon name. Based on the pattern of the updated icons, likely candidates are"CalendarLayoutIcon"or a dedicated date icon if one exists.Additionally, properties outside this section (
updated_onat line 324,linkat line 332,attachment_countat line 340) also use undefined Lucide icons (CalendarDays, Link2, Paperclip) and should be addressed in a follow-up to maintain consistency across the constant.
♻️ Duplicate comments (2)
packages/propel/src/icons/properties/state-icon.tsx (1)
6-13: Same clipPath ID collision issue applies here.This icon uses a hardcoded
clipPathId="clip0_1617_2765"which has the same collision risk mentioned in the CycleIcon review. Please apply the same fix across all icons with hardcoded clipPathId values.packages/propel/src/icons/properties/label-icon.tsx (1)
6-17: Same clipPath ID collision issue applies here.This icon uses a hardcoded
clipPathId="clip0_1617_2786". Please apply the same fix for unique ID generation as noted in the CycleIcon review.
🧹 Nitpick comments (12)
packages/propel/src/icons/properties/boolean-icon.tsx (1)
1-13: Clean implementation following icon system conventions.The component structure is solid: proper TypeScript typing, sensible default for
color("currentColor" inherits parent text color), and correct use offill={color}on the path element.Minor observation: you're passing
color={color}toIconWrapper, but based on the relevant code snippet,IconWrapperdoesn't explicitly use acolorprop—it only spreads...restonto the<svg>element. Since SVG elements don't have a nativecolorattribute and the actual coloring happens viafill={color}on the path, passingcolortoIconWrapperappears unnecessary. If this is a consistent pattern across all property icons for future extensibility, that's fine; otherwise, you could simplify to just spread{...rest}.If desired, you could simplify to:
- <IconWrapper color={color} {...rest}> + <IconWrapper {...rest}>(Only if
colorisn't needed byIconWrapperand this pattern isn't intentional across the icon system.)packages/propel/src/icons/sub-brand/plane-icon.tsx (1)
6-6: Minor: file name vs export name mismatch.The file is plane-icon.tsx but exports PlaneNewIcon. Consider renaming the file to plane-new-icon.tsx or exporting PlaneIcon for discoverability.
apps/web/core/components/modules/select/status.tsx (1)
37-41: LGTM; add aria-hidden to decorative placeholder icon.
StatePropertyIconis decorative when no value is selected; hide it from screen readers.- <StatePropertyIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} /> + <StatePropertyIcon + aria-hidden="true" + className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} + />apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx (1)
25-27: LGTM; mark the activity icon as decorative.The state glyph here is non-informational text-wise; hide it from AT.
- icon={<StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />} + icon={<StatePropertyIcon aria-hidden="true" className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}apps/web/core/components/integration/github/root.tsx (1)
57-79: Use Propel's WorkItemsIcon for "Work item" step to align with lucide→Propel migration.The WorkItemsIcon is properly exported from "@plane/propel/icons" and the import path is already used elsewhere in the file (e.g., MembersPropertyIcon). Update line 9 and the integration workflow data mapping:
-import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react"; -import { MembersPropertyIcon } from "@plane/propel/icons"; +import { ArrowLeft, Check, Settings, UploadCloud } from "lucide-react"; +import { MembersPropertyIcon, WorkItemsIcon } from "@plane/propel/icons";- { title: "Work item", key: "repo-details", icon: List }, + { title: "Work item", key: "repo-details", icon: WorkItemsIcon },apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx (1)
3-3: Icon migration correct, but note minor inconsistency.The replacement of
TagwithLabelPropertyIconis functionally correct. However, this file uses explicitheight={14} width={14}props while most other files in this PR use className-based sizing (e.g.,className="h-3.5 w-3.5"). Both approaches work, but consider standardizing for consistency.To align with the more common pattern in this PR:
- icon={<LabelPropertyIcon height={14} width={14} className="text-custom-text-200" />} + icon={<LabelPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />}Also applies to: 27-27
packages/propel/src/icons/icon.tsx (1)
6-8: Exclude "default" from IconName; keep runtime fallback (optional dev‑warn).Prevent passing
"default"via types. Keep fallback for safety; optionally warn in dev when fallback triggers.*** packages/propel/src/icons/registry.ts -export type IconName = keyof typeof ICON_REGISTRY; +export type IconName = Exclude<keyof typeof ICON_REGISTRY, "default">;Optional (dev only) in Icon:
export const Icon: React.FC<IconProps> = ({ name, ...props }) => { - const IconComponent = ICON_REGISTRY[name] || ICON_REGISTRY.default; + const IconComponent = ICON_REGISTRY[name] || ICON_REGISTRY.default; + if (process.env.NODE_ENV !== "production" && !ICON_REGISTRY[name]) { + // eslint-disable-next-line no-console + console.warn(`[Icon] Unknown icon name: ${String(name)}; rendering default.`); + } return <IconComponent {...props} />; };Also applies to: 10-12
packages/propel/src/icons/icons.stories.tsx (1)
1-1: Align Storybook typings with recommended CSF usage.Import types from
@storybook/react; usesatisfies Metaand type stories fromtypeof meta.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react"; @@ -const meta: Meta = { +const meta = { title: "Icons", parameters: { layout: "padded", docs: { description: { component: "A comprehensive collection of all icons used throughout the application. Supports both direct imports and registry-based usage.", }, }, }, -}; +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj<typeof meta>;Please confirm your Storybook major version; adjust import if you’re on an older framework preset.
Also applies to: 15-30
packages/propel/src/icons/constants.tsx (2)
15-23: Fix label to match component naming.Use “ViewsIcon” for consistency with the registry/component.
{ icon: <Icon name="project.view" />, title: "ViewIcon" }, + // Consistent with ViewsIcon component + // { icon: <Icon name="project.view" />, title: "ViewsIcon" },
2-2: Harden maps with const assertions.Append
as constto each exported map to preserve literal titles and prevent accidental mutation.-export const ActionsIconsMap = [{ icon: <Icon name="action.add" />, title: "AddIcon" }]; +export const ActionsIconsMap = [{ icon: <Icon name="action.add" />, title: "AddIcon" }] as const; @@ -export const WorkspaceIconsMap = [ +export const WorkspaceIconsMap = [ ... -]; +] as const; @@ -export const ProjectIconsMap = [ +export const ProjectIconsMap = [ ... -]; +] as const; @@ -export const SubBrandIconsMap = [ +export const SubBrandIconsMap = [ ... -]; +] as const; @@ -export const LayoutIconsMap = [ +export const LayoutIconsMap = [ ... -]; +] as const; @@ -export const PropertyIconsMap = [ +export const PropertyIconsMap = [ ... -]; +] as const;Also applies to: 4-13, 15-23, 25-29, 31-39, 41-62
apps/web/core/components/issues/issue-layouts/layout-icon.tsx (1)
11-19: Improve consistency by coercing size to string to match icon library patterns.The codebase icon implementations (AiIcon, IconWrapper, etc.) consistently use string defaults for width/height. While React.SVGAttributes accepts both string and number, coercing
sizeto string ensures uniform handling across the icon system.-}: { layout: EIssueLayoutTypes; size?: number } & Omit<ISvgIcons, "width" | "height">) => { +}: { layout: EIssueLayoutTypes; size?: number | string } & Omit<ISvgIcons, "width" | "height">) => { const iconProps = { ...props, - ...(size && { width: size, height: size }), + ...(size && { width: String(size), height: String(size) }), };apps/web/core/components/common/activity/helper.tsx (1)
24-36: Propel icon import set looks good; clean up newly unused importsAfter this migration, lucide
Calendarappears unused. Also, given React types are globally available in this repo, importingReactNodeis optional. Consider removing both to keep imports tight. Based on learnings.-import type { ReactNode } from "react"; +// React types are globally available; explicit import optional import { RotateCcw, Network, Link as LinkIcon, - Calendar, Inbox, AlignLeft, Paperclip, Type, FileText, Globe, Hash, Clock, Bell, LayoutGrid, GitBranch, Timer, ListTodo, Layers, } from "lucide-react";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (107)
apps/space/core/components/issues/issue-layouts/properties/due-date.tsx(2 hunks)apps/space/core/components/issues/issue-layouts/properties/labels.tsx(2 hunks)apps/space/core/components/issues/issue-layouts/properties/member.tsx(2 hunks)apps/space/core/components/issues/navbar/layout-icon.tsx(1 hunks)apps/space/core/components/issues/peek-overview/issue-properties.tsx(5 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx(3 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx(2 hunks)apps/web/ce/components/issues/issue-layouts/utils.tsx(2 hunks)apps/web/ce/components/relations/index.tsx(2 hunks)apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx(10 hunks)apps/web/core/components/automation/auto-close-automation.tsx(2 hunks)apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx(4 hunks)apps/web/core/components/common/activity/helper.tsx(1 hunks)apps/web/core/components/core/modals/user-image-upload-modal.tsx(2 hunks)apps/web/core/components/core/modals/workspace-image-upload-modal.tsx(2 hunks)apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx(2 hunks)apps/web/core/components/cycles/list/cycle-list-item-action.tsx(3 hunks)apps/web/core/components/dropdowns/date-range.tsx(2 hunks)apps/web/core/components/dropdowns/estimate.tsx(5 hunks)apps/web/core/components/dropdowns/member/avatar.tsx(2 hunks)apps/web/core/components/inbox/content/issue-properties.tsx(7 hunks)apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx(3 hunks)apps/web/core/components/integration/github/root.tsx(2 hunks)apps/web/core/components/integration/jira/root.tsx(2 hunks)apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx(2 hunks)apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx(3 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx(2 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx(2 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx(2 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx(2 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx(2 hunks)apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx(2 hunks)apps/web/core/components/issues/issue-detail/label/select/label-select.tsx(2 hunks)apps/web/core/components/issues/issue-detail/sidebar.tsx(10 hunks)apps/web/core/components/issues/issue-layouts/layout-icon.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx(3 hunks)apps/web/core/components/issues/issue-layouts/properties/labels.tsx(2 hunks)apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx(2 hunks)apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx(2 hunks)apps/web/core/components/issues/issue-modal/components/default-properties.tsx(2 hunks)apps/web/core/components/issues/peek-overview/properties.tsx(10 hunks)apps/web/core/components/issues/select/base.tsx(2 hunks)apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx(3 hunks)apps/web/core/components/modules/analytics-sidebar/root.tsx(4 hunks)apps/web/core/components/modules/module-layout-icon.tsx(3 hunks)apps/web/core/components/modules/select/status.tsx(2 hunks)apps/web/core/components/modules/sidebar-select/select-status.tsx(2 hunks)apps/web/core/components/profile/overview/stats.tsx(2 hunks)apps/web/core/components/readonly/estimate.tsx(2 hunks)packages/constants/src/issue/common.ts(3 hunks)packages/propel/src/icons/actions/add-icon.tsx(1 hunks)packages/propel/src/icons/actions/index.ts(1 hunks)packages/propel/src/icons/add-icon.tsx(0 hunks)packages/propel/src/icons/constants.tsx(1 hunks)packages/propel/src/icons/cycle-icon.tsx(0 hunks)packages/propel/src/icons/cycle/cycle-group-icon.tsx(1 hunks)packages/propel/src/icons/default-icon.tsx(1 hunks)packages/propel/src/icons/epic-icon.tsx(0 hunks)packages/propel/src/icons/helpers.ts(1 hunks)packages/propel/src/icons/icon-wrapper.tsx(1 hunks)packages/propel/src/icons/icon.tsx(1 hunks)packages/propel/src/icons/icons.stories.tsx(1 hunks)packages/propel/src/icons/index.ts(2 hunks)packages/propel/src/icons/intake-icon.tsx(0 hunks)packages/propel/src/icons/layouts/board-icon.tsx(1 hunks)packages/propel/src/icons/layouts/calendar-icon.tsx(1 hunks)packages/propel/src/icons/layouts/card-icon.tsx(1 hunks)packages/propel/src/icons/layouts/grid-icon.tsx(1 hunks)packages/propel/src/icons/layouts/index.ts(1 hunks)packages/propel/src/icons/layouts/list-icon.tsx(1 hunks)packages/propel/src/icons/layouts/sheet-icon.tsx(1 hunks)packages/propel/src/icons/layouts/timeline-icon.tsx(1 hunks)packages/propel/src/icons/plane-icon.tsx(0 hunks)packages/propel/src/icons/project/cycle-icon.tsx(1 hunks)packages/propel/src/icons/project/epic-icon.tsx(1 hunks)packages/propel/src/icons/project/index.ts(1 hunks)packages/propel/src/icons/project/intake-icon.tsx(1 hunks)packages/propel/src/icons/project/module-icon.tsx(2 hunks)packages/propel/src/icons/project/page-icon.tsx(1 hunks)packages/propel/src/icons/project/view-icon.tsx(1 hunks)packages/propel/src/icons/project/work-items-icon.tsx(1 hunks)packages/propel/src/icons/properties/boolean-icon.tsx(1 hunks)packages/propel/src/icons/properties/dropdown-icon.tsx(1 hunks)packages/propel/src/icons/properties/due-date-icon.tsx(1 hunks)packages/propel/src/icons/properties/duplicate-icon.tsx(1 hunks)packages/propel/src/icons/properties/estimate-icon.tsx(1 hunks)packages/propel/src/icons/properties/hash-icon.tsx(1 hunks)packages/propel/src/icons/properties/index.ts(1 hunks)packages/propel/src/icons/properties/label-icon.tsx(1 hunks)packages/propel/src/icons/properties/members-icon.tsx(1 hunks)packages/propel/src/icons/properties/overdue-date-icon.tsx(1 hunks)packages/propel/src/icons/properties/parent-icon.tsx(1 hunks)packages/propel/src/icons/properties/priority-icon.tsx(1 hunks)packages/propel/src/icons/properties/relates-to-icon.tsx(1 hunks)packages/propel/src/icons/properties/relation-icon.tsx(1 hunks)packages/propel/src/icons/properties/scrope-icon.tsx(1 hunks)packages/propel/src/icons/properties/start-date-icon.tsx(1 hunks)packages/propel/src/icons/properties/state-icon.tsx(1 hunks)packages/propel/src/icons/properties/user-circle-icon.tsx(1 hunks)packages/propel/src/icons/properties/user-icon.tsx(1 hunks)packages/propel/src/icons/properties/user-square-icon.tsx(1 hunks)packages/propel/src/icons/properties/workflows-icon.tsx(1 hunks)packages/propel/src/icons/registry.ts(1 hunks)packages/propel/src/icons/sub-brand/index.ts(1 hunks)packages/propel/src/icons/sub-brand/pi-chat.tsx(1 hunks)packages/propel/src/icons/sub-brand/plane-icon.tsx(1 hunks)
⛔ Files not processed due to max files limit (13)
- packages/propel/src/icons/sub-brand/wiki-icon.tsx
- packages/propel/src/icons/view-icon.tsx
- packages/propel/src/icons/wiki-icon.tsx
- packages/propel/src/icons/work-items-icon.tsx
- packages/propel/src/icons/workspace/analytics-icon.tsx
- packages/propel/src/icons/workspace/archive-icon.tsx
- packages/propel/src/icons/workspace/dashboard-icon.tsx
- packages/propel/src/icons/workspace/draft-icon.tsx
- packages/propel/src/icons/workspace/home-icon.tsx
- packages/propel/src/icons/workspace/inbox-icon.tsx
- packages/propel/src/icons/workspace/index.ts
- packages/propel/src/icons/workspace/project-icon.tsx
- packages/propel/src/icons/workspace/your-work-icon.tsx
💤 Files with no reviewable changes (5)
- packages/propel/src/icons/cycle-icon.tsx
- packages/propel/src/icons/intake-icon.tsx
- packages/propel/src/icons/plane-icon.tsx
- packages/propel/src/icons/add-icon.tsx
- packages/propel/src/icons/epic-icon.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsxapps/web/core/components/inbox/modals/create-modal/issue-properties.tsxapps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsxapps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsxapps/web/core/components/issues/peek-overview/properties.tsxapps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsxapps/web/core/components/issues/issue-detail-widgets/action-buttons.tsxapps/web/core/components/common/activity/helper.tsxapps/web/ce/components/issues/issue-layouts/utils.tsx
🧬 Code graph analysis (93)
packages/propel/src/icons/project/view-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/layouts/timeline-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/overdue-date-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/boolean-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/start-date-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/modules/sidebar-select/select-status.tsx (1)
packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)
apps/web/core/components/integration/github/root.tsx (1)
packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)
packages/propel/src/icons/layouts/grid-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/due-date-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/duplicate-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/relation-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/inbox/content/issue-properties.tsx (6)
packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)packages/propel/src/icons/properties/priority-icon.tsx (1)
PriorityPropertyIcon(6-13)packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)packages/propel/src/icons/properties/duplicate-icon.tsx (1)
DuplicatePropertyIcon(6-13)
packages/propel/src/icons/properties/workflows-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/members-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/project/work-items-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/modules/select/status.tsx (1)
packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx (3)
packages/propel/src/icons/layouts/list-icon.tsx (1)
ListLayoutIcon(6-13)packages/propel/src/icons/layouts/board-icon.tsx (1)
BoardLayoutIcon(6-13)packages/propel/src/icons/layouts/calendar-icon.tsx (1)
CalendarLayoutIcon(6-13)
packages/propel/src/icons/layouts/board-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/issues/select/base.tsx (1)
packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx (3)
packages/propel/src/icons/layouts/list-icon.tsx (1)
ListLayoutIcon(6-13)packages/propel/src/icons/layouts/board-icon.tsx (1)
BoardLayoutIcon(6-13)packages/propel/src/icons/layouts/calendar-icon.tsx (1)
CalendarLayoutIcon(6-13)
packages/propel/src/icons/project/epic-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/sub-brand/plane-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/space/core/components/issues/peek-overview/issue-properties.tsx (3)
packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)packages/propel/src/icons/properties/priority-icon.tsx (1)
PriorityPropertyIcon(6-13)packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)
packages/propel/src/icons/properties/estimate-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/layouts/card-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/hash-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/registry.ts (1)
packages/propel/src/icons/index.ts (2)
ICON_REGISTRY(4-4)IconName(2-2)
apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx (1)
packages/propel/src/icons/properties/start-date-icon.tsx (1)
StartDatePropertyIcon(6-13)
packages/propel/src/icons/properties/parent-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/user-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx (1)
packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)
packages/propel/src/icons/properties/label-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/default-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/automation/auto-close-automation.tsx (1)
packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)
packages/propel/src/icons/project/intake-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/space/core/components/issues/issue-layouts/properties/labels.tsx (1)
packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)
packages/propel/src/icons/icon.tsx (1)
packages/propel/src/icons/registry.ts (2)
IconName(115-115)ICON_REGISTRY(49-113)
packages/propel/src/icons/constants.tsx (1)
packages/propel/src/icons/icon.tsx (1)
Icon(10-13)
apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx (3)
packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)packages/propel/src/icons/properties/priority-icon.tsx (1)
PriorityPropertyIcon(6-13)packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)
packages/propel/src/icons/layouts/calendar-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/layouts/sheet-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/layouts/list-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/state-icon.tsx (2)
packages/propel/src/icons/index.ts (1)
ISvgIcons(1-1)packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx (3)
packages/propel/src/icons/layouts/list-icon.tsx (1)
ListLayoutIcon(6-13)packages/propel/src/icons/layouts/grid-icon.tsx (1)
GridLayoutIcon(6-13)packages/propel/src/icons/layouts/timeline-icon.tsx (1)
TimelineLayoutIcon(6-13)
apps/space/core/components/issues/navbar/layout-icon.tsx (4)
apps/web/core/components/issues/issue-layouts/layout-icon.tsx (1)
IssueLayoutIcon(11-35)apps/space/core/types/issue.d.ts (1)
TIssueLayout(3-3)packages/propel/src/icons/layouts/list-icon.tsx (1)
ListLayoutIcon(6-13)packages/propel/src/icons/layouts/board-icon.tsx (1)
BoardLayoutIcon(6-13)
packages/propel/src/icons/project/cycle-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx (1)
packages/propel/src/icons/properties/parent-icon.tsx (1)
ParentPropertyIcon(6-21)
packages/propel/src/icons/properties/user-square-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/relates-to-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx (1)
packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)
apps/web/core/components/issues/issue-detail/label/select/label-select.tsx (1)
packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)
apps/web/core/components/dropdowns/estimate.tsx (1)
packages/propel/src/icons/properties/estimate-icon.tsx (1)
EstimatePropertyIcon(6-13)
apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx (2)
packages/propel/src/icons/properties/start-date-icon.tsx (1)
StartDatePropertyIcon(6-13)packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)
packages/propel/src/icons/helpers.ts (1)
packages/propel/src/icons/registry.ts (2)
IconName(115-115)ICON_REGISTRY(49-113)
apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx (2)
packages/propel/src/icons/properties/start-date-icon.tsx (1)
StartDatePropertyIcon(6-13)packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx (1)
packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)
apps/web/core/components/integration/jira/root.tsx (1)
packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)
apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx (2)
packages/propel/src/icons/properties/start-date-icon.tsx (1)
StartDatePropertyIcon(6-13)packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)
apps/space/core/components/issues/issue-layouts/properties/member.tsx (1)
packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)
apps/web/core/components/issues/peek-overview/properties.tsx (9)
packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)packages/propel/src/icons/properties/priority-icon.tsx (1)
PriorityPropertyIcon(6-13)packages/propel/src/icons/properties/user-circle-icon.tsx (1)
UserCirclePropertyIcon(6-13)packages/propel/src/icons/properties/start-date-icon.tsx (1)
StartDatePropertyIcon(6-13)packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)packages/propel/src/icons/properties/estimate-icon.tsx (1)
EstimatePropertyIcon(6-13)packages/propel/src/icons/properties/parent-icon.tsx (1)
ParentPropertyIcon(6-21)packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)
packages/propel/src/icons/properties/dropdown-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/issues/issue-detail/sidebar.tsx (9)
packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)packages/propel/src/icons/properties/priority-icon.tsx (1)
PriorityPropertyIcon(6-13)packages/propel/src/icons/properties/user-circle-icon.tsx (1)
UserCirclePropertyIcon(6-13)packages/propel/src/icons/properties/start-date-icon.tsx (1)
StartDatePropertyIcon(6-13)packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)packages/propel/src/icons/properties/estimate-icon.tsx (1)
EstimatePropertyIcon(6-13)packages/propel/src/icons/properties/parent-icon.tsx (1)
ParentPropertyIcon(6-21)packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)
apps/web/core/components/issues/issue-layouts/properties/labels.tsx (1)
packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx (1)
packages/propel/src/icons/properties/estimate-icon.tsx (1)
EstimatePropertyIcon(6-13)
apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx (7)
packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)packages/propel/src/icons/properties/user-circle-icon.tsx (1)
UserCirclePropertyIcon(6-13)packages/propel/src/icons/properties/priority-icon.tsx (1)
PriorityPropertyIcon(6-13)packages/propel/src/icons/properties/start-date-icon.tsx (1)
StartDatePropertyIcon(6-13)packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx (1)
packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)
packages/propel/src/icons/properties/user-circle-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/issues/issue-modal/components/default-properties.tsx (1)
packages/propel/src/icons/properties/parent-icon.tsx (1)
ParentPropertyIcon(6-21)
apps/web/core/components/core/modals/workspace-image-upload-modal.tsx (1)
packages/propel/src/icons/properties/user-circle-icon.tsx (1)
UserCirclePropertyIcon(6-13)
packages/propel/src/icons/properties/priority-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/cycles/list/cycle-list-item-action.tsx (1)
packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)
packages/propel/src/icons/actions/add-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/modules/module-layout-icon.tsx (3)
packages/propel/src/icons/layouts/list-icon.tsx (1)
ListLayoutIcon(6-13)packages/propel/src/icons/layouts/grid-icon.tsx (1)
GridLayoutIcon(6-13)packages/propel/src/icons/layouts/timeline-icon.tsx (1)
TimelineLayoutIcon(6-13)
apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx (1)
packages/propel/src/icons/properties/relation-icon.tsx (1)
RelationPropertyIcon(6-13)
apps/web/core/components/core/modals/user-image-upload-modal.tsx (1)
packages/propel/src/icons/properties/user-circle-icon.tsx (1)
UserCirclePropertyIcon(6-13)
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx (1)
packages/propel/src/icons/properties/priority-icon.tsx (1)
PriorityPropertyIcon(6-13)
packages/propel/src/icons/project/page-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/core/components/issues/issue-layouts/layout-icon.tsx (6)
apps/space/core/components/issues/navbar/layout-icon.tsx (1)
IssueLayoutIcon(5-23)packages/propel/src/icons/layouts/list-icon.tsx (1)
ListLayoutIcon(6-13)packages/propel/src/icons/layouts/board-icon.tsx (1)
BoardLayoutIcon(6-13)packages/propel/src/icons/layouts/calendar-icon.tsx (1)
CalendarLayoutIcon(6-13)packages/propel/src/icons/layouts/sheet-icon.tsx (1)
SheetLayoutIcon(6-13)packages/propel/src/icons/layouts/timeline-icon.tsx (1)
TimelineLayoutIcon(6-13)
apps/web/core/components/common/activity/helper.tsx (8)
packages/propel/src/icons/properties/priority-icon.tsx (1)
PriorityPropertyIcon(6-13)packages/propel/src/icons/workspace/archive-icon.tsx (1)
ArchiveIcon(6-13)packages/propel/src/icons/properties/start-date-icon.tsx (1)
StartDatePropertyIcon(6-13)packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)packages/propel/src/icons/properties/estimate-icon.tsx (1)
EstimatePropertyIcon(6-13)
apps/space/core/components/issues/issue-layouts/properties/due-date.tsx (1)
packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)
apps/web/core/components/dropdowns/date-range.tsx (1)
packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)
packages/propel/src/icons/project/module-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/ce/components/issues/issue-layouts/utils.tsx (9)
packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)packages/propel/src/icons/properties/estimate-icon.tsx (1)
EstimatePropertyIcon(6-13)packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-17)packages/propel/src/icons/project/module-icon.tsx (1)
ModuleIcon(6-29)packages/propel/src/icons/project/cycle-icon.tsx (1)
CycleIcon(6-17)packages/propel/src/icons/properties/priority-icon.tsx (1)
PriorityPropertyIcon(6-13)packages/propel/src/icons/properties/start-date-icon.tsx (1)
StartDatePropertyIcon(6-13)packages/propel/src/icons/properties/state-icon.tsx (1)
StatePropertyIcon(6-13)
apps/web/core/components/dropdowns/member/avatar.tsx (1)
packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)
apps/web/core/components/readonly/estimate.tsx (1)
packages/propel/src/icons/properties/estimate-icon.tsx (1)
EstimatePropertyIcon(6-13)
apps/web/core/components/modules/analytics-sidebar/root.tsx (2)
packages/propel/src/icons/properties/start-date-icon.tsx (1)
StartDatePropertyIcon(6-13)packages/propel/src/icons/properties/members-icon.tsx (1)
MembersPropertyIcon(6-13)
packages/propel/src/icons/properties/scrope-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
apps/web/ce/components/relations/index.tsx (1)
packages/propel/src/icons/properties/duplicate-icon.tsx (1)
DuplicatePropertyIcon(6-13)
apps/web/core/components/profile/overview/stats.tsx (1)
packages/propel/src/icons/properties/user-circle-icon.tsx (1)
UserCirclePropertyIcon(6-13)
apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx (1)
packages/propel/src/icons/properties/due-date-icon.tsx (1)
DueDatePropertyIcon(6-13)
apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx (1)
packages/propel/src/icons/properties/parent-icon.tsx (1)
ParentPropertyIcon(6-21)
packages/propel/src/icons/sub-brand/pi-chat.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/icons.stories.tsx (5)
packages/propel/src/icons/constants.tsx (6)
SubBrandIconsMap(25-29)WorkspaceIconsMap(4-13)ProjectIconsMap(15-23)LayoutIconsMap(31-39)PropertyIconsMap(41-62)ActionsIconsMap(2-2)packages/propel/src/icons/icon.tsx (1)
Icon(10-13)packages/propel/src/icons/workspace/home-icon.tsx (1)
HomeIcon(6-13)packages/propel/src/icons/project/cycle-icon.tsx (1)
CycleIcon(6-17)packages/propel/src/icons/workspace/project-icon.tsx (1)
ProjectIcon(6-13)
⏰ 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: Build and lint web apps
...ll)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
Show resolved
Hide resolved
apps/web/core/components/issues/issue-layouts/properties/labels.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/propel/src/icons/project/intake-icon.tsx (1)
10-10: Consider removing thecolorprop from IconWrapper.The
colorprop is passed toIconWrapper, but based on the wrapper's interface (lines 10-17 in icon-wrapper.tsx), it doesn't explicitly accept acolorparameter. While it gets passed through via...restto the SVG element, it has no standard effect there. Thecoloris correctly used in the path'sfillattribute (line 13), so passing it to the wrapper is unnecessary.Apply this diff to remove the unnecessary prop:
- <IconWrapper color={color} clipPathId={clipPathId} {...rest}> + <IconWrapper clipPathId={clipPathId} {...rest}>packages/propel/src/icons/properties/user-circle-icon.tsx (1)
6-10: Consider simplifying color prop usage.The
colorprop is passed toIconWrapper(line 10) but only consumed by thepathelement (line 13). SinceIconWrapperspreads...restto the SVG element,colorbecomes an unused SVG attribute.If this pattern is intentional for API consistency across all property icons, disregard this comment. Otherwise, you could avoid passing
colortoIconWrapperand use it only in the child path.- return ( - <IconWrapper color={color} clipPathId={clipPathId} {...rest}> + return ( + <IconWrapper clipPathId={clipPathId} {...rest}> <path
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
.gitignore(1 hunks)packages/propel/src/icons/actions/add-icon.tsx(1 hunks)packages/propel/src/icons/project/cycle-icon.tsx(2 hunks)packages/propel/src/icons/project/intake-icon.tsx(1 hunks)packages/propel/src/icons/project/view-icon.tsx(1 hunks)packages/propel/src/icons/properties/dropdown-icon.tsx(1 hunks)packages/propel/src/icons/properties/duplicate-icon.tsx(1 hunks)packages/propel/src/icons/properties/label-icon.tsx(1 hunks)packages/propel/src/icons/properties/scrope-icon.tsx(1 hunks)packages/propel/src/icons/properties/state-icon.tsx(1 hunks)packages/propel/src/icons/properties/user-circle-icon.tsx(1 hunks)packages/propel/src/icons/properties/user-square-icon.tsx(1 hunks)packages/propel/src/icons/sub-brand/plane-icon.tsx(2 hunks)packages/propel/src/icons/sub-brand/wiki-icon.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .gitignore
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/propel/src/icons/properties/dropdown-icon.tsx
- packages/propel/src/icons/properties/state-icon.tsx
- packages/propel/src/icons/properties/user-square-icon.tsx
- packages/propel/src/icons/properties/duplicate-icon.tsx
- packages/propel/src/icons/properties/scrope-icon.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
packages/propel/src/icons/sub-brand/plane-icon.tsx
🧬 Code graph analysis (8)
packages/propel/src/icons/properties/user-circle-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/actions/add-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/properties/label-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/sub-brand/wiki-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/project/intake-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/project/view-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/sub-brand/plane-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/project/cycle-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
⏰ 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). (3)
- GitHub Check: Cursor Bugbot
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (14)
packages/propel/src/icons/project/cycle-icon.tsx (3)
3-4: LGTM! Import paths updated correctly.The import changes align with the refactored icon structure, moving IconWrapper from the parent directory and updating the type import path accordingly.
6-8: Excellent use of React.useId() for unique clipPath identifiers.The component signature is clean and the use of
React.useId()ensures that multiple instances of the icon won't have clipPath ID collisions. This is a React 18+ best practice for generating unique IDs.
9-21: Clean IconWrapper integration.The refactoring successfully delegates SVG structure to IconWrapper while maintaining the icon's visual implementation through the path elements. The clipPath pattern provides defensive boundaries, and the color prop correctly flows through to the fill attributes.
packages/propel/src/icons/project/view-icon.tsx (1)
6-17: Critical issue resolved: unique clipPathId per instance.The implementation correctly addresses the previous critical review by using
React.useId()to generate a unique clipPathId for each component instance (line 7). This prevents DOM ID collisions when multiple ViewsIcon components render on the same page, ensuring valid HTML and correct SVG clipping behavior.packages/propel/src/icons/project/intake-icon.tsx (2)
3-4: LGTM - Import statements are correct.The imports for
IconWrapperandISvgIconsalign with the refactored icon infrastructure.
7-7: LGTM - Good use of React.useId() for unique clip path IDs.Generating a unique
clipPathIdper icon instance prevents ID collisions when multiple instances are rendered on the same page.packages/propel/src/icons/properties/user-circle-icon.tsx (1)
1-17: LGTM! Clean icon component implementation.The component follows React best practices:
- Properly typed with
React.FC<ISvgIcons>- Uses
React.useId()for SSR-safe unique IDs- Defaults color to
"currentColor"for CSS inheritance- Spreads rest props for flexibility
The implementation aligns well with the PR's goal of migrating from lucide-react to custom propel icons.
packages/propel/src/icons/actions/add-icon.tsx (1)
6-17: LGTM! Good use of React.useId() and IconWrapper pattern.The refactoring to use
IconWrapperandReact.useId()for unique clipPath IDs is well-executed. This ensures no ID collisions when multiple instances of the icon are rendered and provides consistent defaults for sizing and styling. The pattern aligns well with the broader icon infrastructure migration described in the PR.packages/propel/src/icons/sub-brand/plane-icon.tsx (1)
6-21: Previous clipPathId collision issue successfully resolved.The hard-coded clipPathId issue flagged in the previous review has been correctly addressed. Using
React.useId()ensures each component instance generates a unique clipPathId, eliminating the collision risk.packages/propel/src/icons/properties/label-icon.tsx (3)
1-6: LGTM! Clean imports and component signature.The component declaration follows TypeScript best practices with proper typing and sensible defaults for the color prop.
11-21: LGTM! Correct SVG path implementation.The path elements properly use the
colorprop for theirfillattributes, which is where it actually affects the rendered output. The structure and nesting are correct.
7-10: Thecolorprop is indeed spread to the SVG element without effect.The
IconWrappercomponent explicitly destructures known props and spreads remaining attributes directly to the<svg>element. Sincecoloris not destructured, it passes through...restand becomes an unused attribute on the SVG tag. While SVG elements accept thecolorattribute per the React type system, it has no visual impact—the actual coloring comes from thefillattributes on path elements inside the component.This pattern is consistent across all property icons, suggesting it may be intentional for consistency, though it adds unnecessary attributes to the DOM. Verify whether this is desired behavior or should be cleaned up.
packages/propel/src/icons/sub-brand/wiki-icon.tsx (2)
3-17: LGTM! Clean refactor to IconWrapper pattern.The migration successfully centralizes SVG rendering logic while maintaining the icon's visual appearance. The use of prop spreading (
...rest) ensures backward compatibility, and the clipPath ensures the icon respects its 16×16 bounds.
7-7: React 18.3.1 is in use—React.useId() is fully supported.Verified: pnpm-workspace.yaml specifies React 18.3.1 in the catalog, which supports React.useId(). The code is correct as-is.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/propel/src/icons/registry.ts (1)
49-113: Registry structure is solid. Consider adding documentation.The centralized registry with namespaced keys (e.g.,
property.state,layout.board) provides excellent organization and type-safe lookup capability. Theas constassertion correctly enables precise type inference.Minor naming inconsistency:
workspace.views(plural) vsproject.view(singular) at lines 65 and 74. While not breaking, consistent naming (either both singular or both plural) would reduce cognitive load.Consider adding JSDoc to document the registry structure and usage patterns:
+/** + * Central registry for all icon components. + * + * Access icons using namespaced keys following the pattern `category.name`: + * - sub-brand.* : Sub-brand icons (Plane, Wiki, Pi-Chat) + * - workspace.* : Workspace-level navigation icons + * - project.* : Project-specific icons + * - layout.* : Layout type icons (board, list, calendar, etc.) + * - property.* : Issue/entity property icons + * - action.* : Action icons (add, etc.) + * - default : Fallback icon for undefined lookups + * + * @example + * const StateIcon = ICON_REGISTRY["property.state"]; + */ export const ICON_REGISTRY = {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx(3 hunks)apps/web/core/components/issues/issue-layouts/properties/labels.tsx(2 hunks)packages/propel/src/icons/properties/index.ts(1 hunks)packages/propel/src/icons/properties/scope-icon.tsx(1 hunks)packages/propel/src/icons/registry.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
🧬 Code graph analysis (3)
apps/web/core/components/issues/issue-layouts/properties/labels.tsx (1)
packages/propel/src/icons/properties/label-icon.tsx (1)
LabelPropertyIcon(6-21)
packages/propel/src/icons/registry.ts (1)
packages/propel/src/icons/index.ts (2)
ICON_REGISTRY(4-4)IconName(2-2)
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx (3)
packages/propel/src/icons/layouts/list-icon.tsx (1)
ListLayoutIcon(6-13)packages/propel/src/icons/layouts/grid-icon.tsx (1)
GridLayoutIcon(6-13)packages/propel/src/icons/layouts/timeline-icon.tsx (1)
TimelineLayoutIcon(6-13)
⏰ 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 (8)
apps/web/core/components/issues/issue-layouts/properties/labels.tsx (2)
10-10: LGTM! Icon import successfully migrated to propel.The import correctly switches from lucide-react to the internal propel icon library, aligning with the PR's objective to standardize icon usage.
104-104: Previous issue resolved—icon usage is now correct.The unnecessary
strokeWidthprop has been removed as suggested in the previous review. The icon now correctly receives only theclassNameprop, which is appropriate for custom SVG components.packages/propel/src/icons/registry.ts (2)
1-47: LGTM! Well-organized imports.The imports are logically grouped by category (actions, layouts, project, properties, sub-brand, workspace), making the file easy to navigate and maintain.
115-115: Excellent type safety withIconName.Deriving
IconNamefromkeyof typeof ICON_REGISTRYensures compile-time validation of registry keys and excellent IDE autocomplete support.apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx (3)
3-6: Icon imports correctly migrated to propel package.The imports have been properly updated to use icons from
@plane/propel/icons. The type-only React import is appropriate for the explicit typing used at line 16.
14-34: Type definition properly fixed and icon references look good.The icon type at line 16 has been correctly updated to
React.FC<ISvgIcons>, resolving the type mismatch identified in the previous review. The icon references (ListLayoutIcon, GridLayoutIcon, TimelineLayoutIcon) align with the imported components and maintain proper type safety.
48-48: Icon usage in JSX is correct.The
ListLayoutIconcomponent is properly used with theclassNameprop, which is compatible with theISvgIconsinterface.packages/propel/src/icons/properties/index.ts (1)
1-20: LGTM! Clean barrel export structure.The exports are well-organized in alphabetical order, making the module easy to maintain and navigate. The barrel pattern appropriately consolidates all property icon exports into a single entry point.
…t-and-properties-icon-revamp
anmolsinghbhatia
dismissed stale reviews from vamsikrishnamathala and pushya22
via
7f775ee
Summary
This PR includes following changes:
Layout icon:
Properties icon:
Reference
[WEB-5188 | WEB-5190]
Summary by CodeRabbit
UI Enhancements
New Features
Refactor