[WEB-5188 | WEB-5190] chore: layout and properties icon revamp #7980
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Linked to Plane Work Item(s) References This comment was auto-generated by Plane |
anmolsinghbhatia
changed the title
WalkthroughComprehensive icon system overhaul replacing lucide-react icons with custom @plane/propel icons across applications, introducing a centralized icon registry, implementing IconWrapper infrastructure for consistent SVG rendering, and reorganizing icon exports into categorized modules (layouts, properties, workspace, project, sub-brand, actions). Changes
Sequence Diagram(s)sequenceDiagram
participant App as Application Component
participant Icon as Icon Component (Registry-based)
participant Registry as ICON_REGISTRY
participant IconWrapper as IconWrapper
participant SVG as SVG Element
App->>Icon: render Icon with name prop
activate Icon
Icon->>Registry: lookup icon by name
activate Registry
Registry-->>Icon: return IconComponent or default
deactivate Registry
Icon->>IconWrapper: render IconComponent with props
activate IconWrapper
IconWrapper->>SVG: render SVG with width, height, className, color
activate SVG
SVG-->>IconWrapper: SVG element
deactivate SVG
IconWrapper-->>Icon: wrapped SVG
deactivate IconWrapper
Icon-->>App: rendered icon
deactivate Icon
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Rationale: This PR involves a substantial architectural refactoring of the icon system across 90+ files with multiple patterns: (1) direct icon replacements following a consistent pattern (high homogeneity reduces effort), (2) infrastructure changes introducing registry, helpers, and wrapper components (requires careful logic review), (3) reorganization of propel icon exports and file structure (requires tracing import paths), and (4) function signature updates (e.g., IssueLayoutIcon, PropertyIcon components). While the icon substitutions are repetitive and lower-complexity individually, the breadth of affected files, introduction of new infrastructure, and interconnected registry system elevate overall review complexity. Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
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
Comment on lines
15
to
22
| switch (layout) { | ||
| case "list": | ||
| return <List {...props} />; | ||
| return <ListLayoutIcon {...iconProps} />; | ||
| case "kanban": | ||
| return <Kanban {...props} />; | ||
| return <BoardLayoutIcon {...iconProps} />; | ||
| default: | ||
| return null; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
Verify incomplete layout case handling.
The switch statement only handles "list" and "kanban" cases, but TIssueLayout includes "calendar", "spreadsheet", and "gantt". The web version (apps/web/core/components/issues/issue-layouts/layout-icon.tsx) handles all five layout types.
If the space app intentionally doesn't support calendar/spreadsheet/gantt layouts, this is fine. Otherwise, users selecting those layouts would see no icon (null return).
🏁 Script executed:
#!/bin/bash
# Verify if space app uses calendar, spreadsheet, or gantt layouts
echo "=== Searching for calendar/spreadsheet/gantt layout references in space app ==="
rg -n --type=ts --type=tsx -C3 'layout.*=.*(calendar|spreadsheet|gantt)' apps/space/
echo -e "\n=== Checking TIssueLayout usage in space app ==="
rg -n --type=ts --type=tsx 'TIssueLayout' apps/space/ -A2 -B2Length of output: 185
🏁 Script executed:
#!/bin/bash
# Fix file type recognition by using glob patterns instead
echo "=== Searching for calendar/spreadsheet/gantt layout references in space app ==="
rg -n -g '*.ts' -g '*.tsx' -C3 'layout.*=.*(calendar|spreadsheet|gantt)' apps/space/
echo -e "\n=== Checking TIssueLayout type definition in space app ==="
rg -n -g '*.ts' -g '*.tsx' 'type TIssueLayout|enum.*Layout' apps/space/ -A5
echo -e "\n=== Checking if layout-icon.tsx exists and its current content ==="
find apps/space -name 'layout-icon.tsx' -exec head -30 {} \;
echo -e "\n=== Searching for where layout prop values are defined/used in space ==="
rg -n -g '*.ts' -g '*.tsx' '"kanban"|"list"|"calendar"|"spreadsheet"|"gantt"' apps/space/ | head -20Length of output: 2831
🏁 Script executed:
#!/bin/bash
# Check the web version layout-icon to see all icon implementations
echo "=== Checking web version layout-icon.tsx ==="
find apps/web -name 'layout-icon.tsx' -exec cat {} \;
echo -e "\n=== Checking available icon imports in space app ==="
rg -n -g '*.ts' -g '*.tsx' 'CalendarLayoutIcon|SpreadsheetLayoutIcon|GanttLayoutIcon' apps/space/
echo -e "\n=== Checking available icons from propel/icons ==="
rg -n -g '*.ts' -g '*.tsx' 'export.*LayoutIcon' apps/ | grep -i 'calendar\|spreadsheet\|gantt\|propel'Length of output: 1127
Add missing layout icons for calendar, spreadsheet, and gantt.
The space app's TIssueLayout type includes all five layout types, and controls.tsx actively enables users to select calendar, spreadsheet, and gantt layouts. However, layout-icon.tsx only handles list and kanban, returning null for the other three—leaving users without icons when selecting unsupported layouts.
The web version implements this correctly with all five icons. Import CalendarLayoutIcon, SheetLayoutIcon, and TimelineLayoutIcon from @plane/propel/icons and add the corresponding switch cases:
case "calendar":
return <CalendarLayoutIcon {...iconProps} />;
case "spreadsheet":
return <SheetLayoutIcon {...iconProps} />;
case "gantt":
return <TimelineLayoutIcon {...iconProps} />;
🤖 Prompt for AI Agents
In apps/space/core/components/issues/navbar/layout-icon.tsx around lines 15 to
22, the switch only returns icons for "list" and "kanban" and returns null for
other layout types; import CalendarLayoutIcon, SheetLayoutIcon, and
TimelineLayoutIcon from @plane/propel/icons and add switch cases for "calendar"
-> CalendarLayoutIcon, "spreadsheet" -> SheetLayoutIcon, and "gantt" ->
TimelineLayoutIcon passing the existing iconProps so all TIssueLayout values
render the proper icons.
| // ui | ||
| import { GanttChartSquare, LayoutGrid, List } from "lucide-react"; | ||
| import type { LucideIcon } from "lucide-react"; | ||
| import { TimelineLayoutIcon, GridLayoutIcon, ListLayoutIcon } from "@plane/propel/icons"; |
There was a problem hiding this comment.
🧩 Analysis chain
Icon migration looks good, but verify type compatibility.
The icon replacements are correctly implemented. However, the icon type definition at line 16 specifies React.FC<React.SVGProps<SVGSVGElement>>, but the actual icon components are typed as React.FC<ISvgIcons>. The ISvgIcons interface likely has more specific props (e.g., color with "currentColor" default) than the generic SVGProps.
Verify that the type definition is compatible with the actual icon components:
Also applies to: 21-21, 26-26, 31-31, 48-48
🏁 Script executed:
#!/bin/bash
# Check the ISvgIcons interface definition to confirm type compatibility
rg -nP "interface ISvgIcons|type ISvgIcons" --type=ts packages/propel/src/icons/Length of output: 104
---
🏁 Script executed:
```shell
#!/bin/bash
# Get the full ISvgIcons interface definition
cat packages/propel/src/icons/type.ts
Length of output: 127
---
🏁 Script executed:
```shell
#!/bin/bash
# View the mobile-header.tsx file to see the actual CYCLE_VIEW_LAYOUTS type definition
cat "apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx"
Length of output: 2302
Fix type definition for icon components to match actual types.
The icon type definition at line 16 is incompatible with the actual icon components. The type specifies React.FC<React.SVGProps<SVGSVGElement>>, but the imported icons (ListLayoutIcon, GridLayoutIcon, TimelineLayoutIcon) are typed as React.FC<ISvgIcons>. Since ISvgIcons extends React.SVGAttributes<SVGElement> and adds a percentage?: number property, the type mismatch creates a type safety violation.
Update line 16:
icon: React.FC<ISvgIcons>;🤖 Prompt for AI Agents
In
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
around lines 6 to 16, the icon prop type is declared as
React.FC<React.SVGProps<SVGSVGElement>> which mismatches the actual imported
icons typed as React.FC<ISvgIcons>; update the icon type to React.FC<ISvgIcons>
and ensure ISvgIcons is imported from the icon package (or declared/aliased) so
the components accept the extra percentage?: number property and align types
with the imported ListLayoutIcon, GridLayoutIcon and TimelineLayoutIcon.
| )} | ||
| > | ||
| <Tags className="h-3.5 w-3.5" strokeWidth={2} /> | ||
| <LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove unnecessary strokeWidth prop.
The strokeWidth={2} prop is a lucide-react-specific attribute that has no effect on custom SVG icons like LabelPropertyIcon. The icon's appearance is defined by its fixed path data and cannot be modified via strokeWidth.
Apply this diff:
- <LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} />
+ <LabelPropertyIcon className="h-3.5 w-3.5" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} /> | |
| <LabelPropertyIcon className="h-3.5 w-3.5" /> |
🤖 Prompt for AI Agents
In apps/web/core/components/issues/issue-layouts/properties/labels.tsx around
line 104, remove the unnecessary strokeWidth={2} prop from the LabelPropertyIcon
JSX element because custom SVG icons ignore lucide-react-specific strokeWidth;
update the element to only pass relevant props (e.g., className) and search for
other LabelPropertyIcon usages to remove any redundant strokeWidth props as
well.
| @@ -1,9 +1,10 @@ | |||
| export type { ISvgIcons } from "./type"; | |||
| export type { IconName } from "./registry"; | |||
| export type { IconProps } from "./icon"; | |||
There was a problem hiding this comment.
Duplicate re-export of IconProps
You both export type { IconProps } from "./icon"; and later export * from "./icon";. This re-exports IconProps twice and can cause TS duplicate export errors.
-export type { IconProps } from "./icon";
+// IconProps will be re-exported via the star export belowAlso applies to: 30-31
🤖 Prompt for AI Agents
In packages/propel/src/icons/index.ts around line 3 (and likewise lines 30-31),
there is a duplicate re-export: you both export the type explicitly and also
export * from "./icon", causing TypeScript duplicate export errors; remove the
explicit `export type { IconProps } from "./icon";` lines (or alternatively
replace `export *` with selective exports) so IconProps is exported only once,
ensuring no duplicate re-exports remain.
Comment on lines
+7
to
+12
| <IconWrapper color={color} clipPathId="clip0_1612_7029" {...rest}> | ||
| <path | ||
| d="M14.3926 10.7735C14.7013 10.6192 15.0771 10.7451 15.2314 11.0538C15.3854 11.3623 15.2604 11.7373 14.9521 11.8917L8.52344 15.1056C8.46846 15.1331 8.33457 15.2069 8.18262 15.2355H8.18164C8.06516 15.2572 7.94558 15.2573 7.8291 15.2355C7.67698 15.2069 7.54234 15.1331 7.4873 15.1056L1.05957 11.8917C0.750903 11.7374 0.626065 11.3625 0.780273 11.0538C0.934594 10.7452 1.30948 10.6194 1.61816 10.7735L8.00488 13.9669L14.3926 10.7735ZM14.3926 7.44054C14.7013 7.28618 15.0771 7.41114 15.2314 7.71983C15.3858 8.02847 15.2607 8.40424 14.9521 8.5587L8.52344 11.7726C8.46839 11.8001 8.33451 11.8739 8.18262 11.9025H8.18164C8.06519 11.9242 7.94554 11.9242 7.8291 11.9025C7.67698 11.8739 7.54234 11.8001 7.4873 11.7726L1.05957 8.5587C0.750834 8.40433 0.625905 8.02857 0.780273 7.71983C0.934713 7.41138 1.30956 7.28634 1.61816 7.44054L8.00488 10.6339L14.3926 7.44054ZM7.91699 0.751084C8.00545 0.742877 8.09504 0.747328 8.18262 0.763779C8.33432 0.79232 8.46833 0.865118 8.52344 0.892686L14.9521 4.10753C15.1636 4.21348 15.2969 4.42959 15.2969 4.66612C15.2969 4.90266 15.1636 5.11875 14.9521 5.22472L8.52344 8.43956C8.46831 8.46714 8.33434 8.53992 8.18262 8.56847H8.18164C8.06513 8.59024 7.94561 8.59028 7.8291 8.56847C7.67698 8.53994 7.54235 8.46708 7.4873 8.43956L1.05957 5.22472C0.84784 5.11884 0.713867 4.90285 0.713867 4.66612C0.713883 4.42941 0.847843 4.21339 1.05957 4.10753L7.4873 0.892686C7.54232 0.865181 7.67699 0.7923 7.8291 0.763779L7.91699 0.751084ZM2.73535 4.66612L8.00488 7.30089L13.2754 4.66612L8.00488 2.03038L2.73535 4.66612Z" | ||
| fill={color} | ||
| /> | ||
| </IconWrapper> |
There was a problem hiding this comment.
🧩 Analysis chain
Avoid duplicate DOM IDs: generate a per-instance clipPathId (use React.useId).
Hard-coding clipPathId ("clip0_1612_7029") risks id collisions when rendering multiple ViewsIcon instances, leading to invalid DOM and flaky clipping. Compute a unique id per render instead.
Apply this diff:
export const ViewsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
- <IconWrapper color={color} clipPathId="clip0_1612_7029" {...rest}>
+ // Use a stable, per-instance id to avoid DOM collisions
+ (() => {
+ const clipPathId = React.useId();
+ return (
+ <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+ <path
+ d="M14.3926 10.7735C14.7013 10.6192 15.0771 10.7451 15.2314 11.0538C15.3854 11.3623 15.2604 11.7373 14.9521 11.8917L8.52344 15.1056C8.46846 15.1331 8.33457 15.2069 8.18262 15.2355H8.18164C8.06516 15.2572 7.94558 15.2573 7.8291 15.2355C7.67698 15.2069 7.54234 15.1331 7.4873 15.1056L1.05957 11.8917C0.750903 11.7374 0.626065 11.3625 0.780273 11.0538C0.934594 10.7452 1.30948 10.6194 1.61816 10.7735L8.00488 13.9669L14.3926 10.7735ZM14.3926 7.44054C14.7013 7.28618 15.0771 7.41114 15.2314 7.71983C15.3858 8.02847 15.2607 8.40424 14.9521 8.5587L8.52344 11.7726C8.46839 11.8001 8.33451 11.8739 8.18262 11.9025H8.18164C8.06519 11.9242 7.94554 11.9242 7.8291 11.9025C7.67698 11.8739 7.54234 11.8001 7.4873 11.7726L1.05957 8.5587C0.750834 8.40433 0.625905 8.02857 0.780273 7.71983C0.934713 7.41138 1.30956 7.28634 1.61816 7.44054L8.00488 10.6339L14.3926 7.44054ZM7.91699 0.751084C8.00545 0.742877 8.09504 0.747328 8.18262 0.763779C8.33432 0.79232 8.46833 0.865118 8.52344 0.892686L14.9521 4.10753C15.1636 4.21348 15.2969 4.42959 15.2969 4.66612C15.2969 4.90266 15.1636 5.11875 14.9521 5.22472L8.52344 8.43956C8.46831 8.46714 8.33434 8.53992 8.18262 8.56847H8.18164C8.06513 8.59024 7.94561 8.59028 7.8291 8.56847C7.67698 8.53994 7.54235 8.46708 7.4873 8.43956L1.05957 5.22472C0.84784 5.11884 0.713867 4.90285 0.713867 4.66612C0.713883 4.42941 0.847843 4.21339 1.05957 4.10753L7.4873 0.892686C7.54232 0.865181 7.67699 0.7923 7.8291 0.763779L7.91699 0.751084ZM2.73535 4.66612L8.00488 7.30089L13.2754 4.66612L8.00488 2.03038L2.73535 4.66612Z"
+ fill={color}
+ />
+ </IconWrapper>
+ );
+ })()
- <IconWrapper color={color} clipPathId="clip0_1612_7029" {...rest}>
- <path
- d="M14.3926 10.7735C14.7013 10.6192 15.0771 10.7451 15.2314 11.0538C15.3854 11.3623 15.2604 11.7373 14.9521 11.8917L8.52344 15.1056C8.46846 15.1331 8.33457 15.2069 8.18262 15.2355H8.18164C8.06516 15.2572 7.94558 15.2573 7.8291 15.2355C7.67698 15.2069 7.54234 15.1331 7.4873 15.1056L1.05957 11.8917C0.750903 11.7374 0.626065 11.3625 0.780273 11.0538C0.934594 10.7452 1.30948 10.6194 1.61816 10.7735L8.00488 13.9669L14.3926 10.7735ZM14.3926 7.44054C14.7013 7.28618 15.0771 7.41114 15.2314 7.71983C15.3858 8.02847 15.2607 8.40424 14.9521 8.5587L8.52344 11.7726C8.46839 11.8001 8.33451 11.8739 8.18262 11.9025H8.18164C8.06519 11.9242 7.94554 11.9242 7.8291 11.9025C7.67698 11.8739 7.54234 11.8001 7.4873 11.7726L1.05957 8.5587C0.750834 8.40433 0.625905 8.02857 0.780273 7.71983C0.934713 7.41138 1.30956 7.28634 1.61816 7.44054L8.00488 10.6339L14.3926 7.44054ZM7.91699 0.751084C8.00545 0.742877 8.09504 0.747328 8.18262 0.763779C8.33432 0.79232 8.46833 0.865118 8.52344 0.892686L14.9521 4.10753C15.1636 4.21348 15.2969 4.42959 15.2969 4.66612C15.2969 4.90266 15.1636 5.11875 14.9521 5.22472L8.52344 8.43956C8.46831 8.46714 8.33434 8.53992 8.18262 8.56847H8.18164C8.06513 8.59024 7.94561 8.59028 7.8291 8.56847C7.67698 8.53994 7.54235 8.46708 7.4873 8.43956L1.05957 5.22472C0.84784 5.11884 0.713867 4.90285 0.713867 4.66612C0.713883 4.42941 0.847843 4.21339 1.05957 4.10753L7.4873 0.892686C7.54232 0.865181 7.67699 0.7923 7.8291 0.763779L7.91699 0.751084ZM2.73535 4.66612L8.00488 7.30089L13.2754 4.66612L8.00488 2.03038L2.73535 4.66612Z"
- fill={color}
- />
- </IconWrapper>
)Run this to catch any other static clipPathId usages:
🏁 Script executed:
#!/bin/bash
# Find hard-coded clipPathId attributes across the repo
rg -nP --type=tsx --type=ts -C2 'clipPathId\s*=\s*"[^"]+"' packages/propel/src/iconsLength of output: 27
🏁 Script executed:
#!/bin/bash
# Find hard-coded clipPathId attributes in tsx files using glob pattern
rg -nP -g '*.tsx' 'clipPathId\s*=\s*"[^"]+"' packages/propel/src/iconsLength of output: 1597
🏁 Script executed:
#!/bin/bash
# Also check for any React.useId usage in the codebase to see if it's already in use
rg -nP 'useId|React\.useId' packages/propel/src/iconsLength of output: 0
🏁 Script executed:
#!/bin/bash
# Verify the actual file content and structure
cat packages/propel/src/icons/project/view-icon.tsxLength of output: 1869
Generate unique clipPathId per instance to prevent DOM collisions across 13 icon files.
Hard-coded clipPathId values create duplicate IDs when rendering multiple icon instances on the same page, causing invalid DOM and unpredictable clipping behavior. This pattern affects all 13 icon components in packages/propel/src/icons/:
sub-brand/wiki-icon.tsx,plane-icon.tsxproperties/user-circle-icon.tsx,user-square-icon.tsx,state-icon.tsx,scrope-icon.tsx,label-icon.tsx,duplicate-icon.tsx,dropdown-icon.tsxproject/view-icon.tsx,intake-icon.tsx,cycle-icon.tsxactions/add-icon.tsx
Use React.useId() to generate a unique ID per render instance for each affected component. Example for view-icon.tsx:
export const ViewsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
const clipPathId = React.useId();
return (
- <IconWrapper color={color} clipPathId="clip0_1612_7029" {...rest}>
+ <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
<path
d="M14.3926 10.7735C14.7013 10.6192 15.0771 10.7451 15.2314 11.0538C15.3854 11.3623 15.2604 11.7373 14.9521 11.8917L8.52344 15.1056C8.46846 15.1331 8.33457 15.2069 8.18262 15.2355H8.18164C8.06516 15.2572 7.94558 15.2573 7.8291 15.2355C7.67698 15.2069 7.54234 15.1331 7.4873 15.1056L1.05957 11.8917C0.750903 11.7374 0.626065 11.3625 0.780273 11.0538C0.934594 10.7452 1.30948 10.6194 1.61816 10.7735L8.00488 13.9669L14.3926 10.7735ZM14.3926 7.44054C14.7013 7.28618 15.0771 7.41114 15.2314 7.71983C15.3858 8.02847 15.2607 8.40424 14.9521 8.5587L8.52344 11.7726C8.46839 11.8001 8.33451 11.8739 8.18262 11.9025H8.18164C8.06519 11.9242 7.94554 11.9242 7.8291 11.9025C7.67698 11.8739 7.54234 11.8001 7.4873 11.7726L1.05957 8.5587C0.750834 8.40433 0.625905 8.02857 0.780273 7.71983C0.934713 7.41138 1.30956 7.28634 1.61816 7.44054L8.00488 10.6339L14.3926 7.44054ZM7.91699 0.751084C8.00545 0.742877 8.09504 0.747328 8.18262 0.763779C8.33432 0.79232 8.46833 0.865118 8.52344 0.892686L14.9521 4.10753C15.1636 4.21348 15.2969 4.42959 15.2969 4.66612C15.2969 4.90266 15.1636 5.11875 14.9521 5.22472L8.52344 8.43956C8.46831 8.46714 8.33434 8.53992 8.18262 8.56847H8.18164C8.06513 8.59024 7.94561 8.59028 7.8291 8.56847C7.67698 8.53994 7.54235 8.46708 7.4873 8.43956L1.05957 5.22472C0.84784 5.11884 0.713867 4.90285 0.713867 4.66612C0.713883 4.42941 0.847843 4.21339 1.05957 4.10753L7.4873 0.892686C7.54232 0.865181 7.67699 0.7923 7.8291 0.763779L7.91699 0.751084ZM2.73535 4.66612L8.00488 7.30089L13.2754 4.66612L8.00488 2.03038L2.73535 4.66612Z"
fill={color}
/>
</IconWrapper>
);
};Apply the same pattern to all 12 other affected icon files.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In packages/propel/src/icons/project/view-icon.tsx around lines 7-12, the
component uses a hard-coded clipPathId which causes duplicate DOM IDs when
multiple icons render; replace the static value with a per-instance unique id by
importing/using React.useId() (e.g. const id = React.useId()) and pass a
generated id (like `${id}-clip0_1612_7029`) into IconWrapper's clipPathId prop
so each render gets a unique clip path; apply the same change to the other 12
affected icon files listed in the review.
Comment on lines
+1
to
+13
| import * as React from "react"; | ||
|
|
||
| import { IconWrapper } from "../icon-wrapper"; | ||
| import { ISvgIcons } from "../type"; | ||
|
|
||
| export const ScopePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => ( | ||
| <IconWrapper color={color} clipPathId="clip0_2437_57960" {...rest}> | ||
| <path | ||
| d="M8.00049 0.708008C12.0274 0.708184 15.2915 3.97303 15.2915 8C15.2913 12.0268 12.0273 15.2908 8.00049 15.291C3.97352 15.291 0.708672 12.0269 0.708496 8C0.708496 3.97292 3.97341 0.708008 8.00049 0.708008ZM7.37549 4V1.98926C4.53761 2.28073 2.28224 4.53713 1.99072 7.375H4.00049C4.34552 7.37518 4.62549 7.65493 4.62549 8C4.62531 8.34492 4.34541 8.62482 4.00049 8.625H1.99072C2.28252 11.4625 4.53789 13.7173 7.37549 14.0088V12C7.37549 11.6548 7.65531 11.375 8.00049 11.375C8.34552 11.3752 8.62549 11.6549 8.62549 12V14.0078C11.4627 13.716 13.7175 11.4622 14.0093 8.625H12.0005C11.6554 8.625 11.3757 8.34503 11.3755 8C11.3755 7.65482 11.6553 7.375 12.0005 7.375H14.0093C13.7178 4.5374 11.463 2.28203 8.62549 1.99023V4C8.62531 4.34492 8.34541 4.62482 8.00049 4.625C7.65542 4.625 7.37566 4.34503 7.37549 4Z" | ||
| fill={color} | ||
| /> | ||
| </IconWrapper> | ||
| ); |
There was a problem hiding this comment.
Fix filename typo: rename "scrope-icon.tsx" to "scope-icon.tsx".
The filename contains a typo. Since the component is named ScopePropertyIcon, the file should be named scope-icon.tsx instead of scrope-icon.tsx for consistency with the component name and other icon files in the codebase.
Apply this change:
-packages/propel/src/icons/properties/scrope-icon.tsx
+packages/propel/src/icons/properties/scope-icon.tsxEnsure any imports or barrel exports (e.g., in packages/propel/src/icons/properties/index.ts) are updated accordingly.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In packages/propel/src/icons/properties/scrope-icon.tsx (lines 1-13) the
filename contains a typo: rename the file to scope-icon.tsx to match the
exported component ScopePropertyIcon; update any references to the file
(imports, barrel exports like packages/propel/src/icons/properties/index.ts and
any other files importing this icon) to use "./scope-icon" and run a quick
project-wide search/replace to ensure no stale imports remain.
Comment on lines
+7
to
+12
| <IconWrapper color={color} clipPathId="clip0_2993_797" {...rest}> | ||
| <path | ||
| d="M10.0002 10.708C10.5896 10.708 10.9757 10.7052 11.3088 10.7715C12.5974 11.0278 13.6061 12.0256 13.8821 13.3066C13.8849 13.3012 13.8891 13.2965 13.8918 13.291C13.9484 13.1799 13.9927 13.0241 14.0168 12.7295C14.0415 12.4274 14.0413 12.0369 14.0413 11.4668V4.5332C14.0413 3.96299 14.0415 3.57263 14.0168 3.27051C13.9928 2.97585 13.9484 2.82009 13.8918 2.70898C13.76 2.45032 13.5499 2.23925 13.2913 2.10742C13.1802 2.05083 13.0243 2.0075 12.7297 1.9834C12.4277 1.95872 12.0372 1.95801 11.467 1.95801H4.53345C3.9632 1.95801 3.57288 1.95873 3.27075 1.9834C2.97621 2.00746 2.82032 2.05089 2.70923 2.10742C2.45051 2.23925 2.23949 2.45026 2.10767 2.70898C2.05113 2.82008 2.00771 2.97597 1.98364 3.27051C1.95897 3.57263 1.95825 3.96295 1.95825 4.5332V11.4668C1.95825 12.0369 1.95896 12.4274 1.98364 12.7295C2.00774 13.024 2.05108 13.18 2.10767 13.291C2.11038 13.2963 2.11368 13.3014 2.11646 13.3066C2.39233 12.0255 3.40219 11.028 4.69067 10.7715C5.02386 10.7052 5.41066 10.708 6.00024 10.708H10.0002ZM6.00024 11.958C5.35075 11.958 5.11682 11.9609 4.93481 11.9971C4.12495 12.1582 3.49239 12.7917 3.3313 13.6016C3.31156 13.7009 3.30207 13.8175 3.29712 14.0146C3.57489 14.035 3.95859 14.041 4.53345 14.041H11.467C12.0414 14.041 12.4247 14.035 12.7024 14.0146C12.6974 13.8176 12.6889 13.7008 12.6692 13.6016C12.5081 12.7917 11.8746 12.1582 11.0647 11.9971C10.8828 11.9609 10.6492 11.958 10.0002 11.958H6.00024ZM10.0413 6.33301C10.0413 5.20554 9.12768 4.29119 8.00024 4.29102C6.87266 4.29102 5.95825 5.20543 5.95825 6.33301C5.95825 7.46059 6.87266 8.375 8.00024 8.375C9.12768 8.37482 10.0413 7.46048 10.0413 6.33301ZM11.2913 6.33301C11.2913 8.15084 9.81803 9.62482 8.00024 9.625C6.18231 9.625 4.70825 8.15095 4.70825 6.33301C4.70825 4.51507 6.18231 3.04102 8.00024 3.04102C9.81803 3.04119 11.2913 4.51518 11.2913 6.33301ZM15.2913 11.4668C15.2913 12.0163 15.2918 12.4663 15.262 12.8311C15.2315 13.2031 15.1665 13.5418 15.0051 13.8584C14.7535 14.352 14.3522 14.7533 13.8586 15.0049C13.7479 15.0613 13.6335 15.1066 13.5149 15.1426C13.0021 15.2979 12.3428 15.291 11.467 15.291H4.53345C3.65757 15.291 2.99845 15.2979 2.4856 15.1426C2.36691 15.1066 2.25269 15.0614 2.14185 15.0049C1.64801 14.7533 1.24606 14.3522 0.994385 13.8584C0.833048 13.5418 0.767963 13.2031 0.737549 12.8311C0.707748 12.4663 0.708252 12.0163 0.708253 11.4668V4.5332C0.708253 3.98368 0.707775 3.53373 0.737549 3.16895C0.767948 2.79689 0.833107 2.45824 0.994385 2.1416C1.24605 1.64768 1.64792 1.24581 2.14185 0.994141C2.45848 0.832863 2.79713 0.767704 3.16919 0.737305C3.53397 0.70753 3.98392 0.708008 4.53345 0.708008H11.467C12.0166 0.708008 12.4665 0.707503 12.8313 0.737305C13.2034 0.767719 13.542 0.832804 13.8586 0.994141C14.3524 1.24582 14.7535 1.64777 15.0051 2.1416C15.1665 2.45827 15.2316 2.79683 15.262 3.16895C15.2917 3.53373 15.2913 3.98367 15.2913 4.5332V11.4668Z" | ||
| fill={color} | ||
| /> | ||
| </IconWrapper> |
There was a problem hiding this comment.
Fix static clipPathId to prevent id collisions.
Use a unique id per instance (React.useId) instead of a hard-coded one.
export const UserSquarePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
- <IconWrapper color={color} clipPathId="clip0_2993_797" {...rest}>
+ (() => {
+ const clipPathId = React.useId();
+ return (
+ <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+ <path
+ d="M10.0002 10.708C10.5896 10.708 10.9757 10.7052 11.3088 10.7715C12.5974 11.0278 13.6061 12.0256 13.8821 13.3066C13.8849 13.3012 13.8891 13.2965 13.8918 13.291C13.9484 13.1799 13.9927 13.0241 14.0168 12.7295C14.0415 12.4274 14.0413 12.0369 14.0413 11.4668V4.5332C14.0413 3.96299 14.0415 3.57263 14.0168 3.27051C13.9928 2.97585 13.9484 2.82009 13.8918 2.70898C13.76 2.45032 13.5499 2.23925 13.2913 2.10742C13.1802 2.05083 13.0243 2.0075 12.7297 1.9834C12.4277 1.95872 12.0372 1.95801 11.467 1.95801H4.53345C3.9632 1.95801 3.57288 1.95873 3.27075 1.9834C2.97621 2.00746 2.82032 2.05089 2.70923 2.10742C2.45051 2.23925 2.23949 2.45026 2.10767 2.70898C2.05113 2.82008 2.00771 2.97597 1.98364 3.27051C1.95897 3.57263 1.95825 3.96295 1.95825 4.5332V11.4668C1.95825 12.0369 1.95896 12.4274 1.98364 12.7295C2.00774 13.024 2.05108 13.18 2.10767 13.291C2.11038 13.2963 2.11368 13.3014 2.11646 13.3066C2.39233 12.0255 3.40219 11.028 4.69067 10.7715C5.02386 10.7052 5.41066 10.708 6.00024 10.708H10.0002ZM6.00024 11.958C5.35075 11.958 5.11682 11.9609 4.93481 11.9971C4.12495 12.1582 3.49239 12.7917 3.3313 13.6016C3.31156 13.7009 3.30207 13.8175 3.29712 14.0146C3.57489 14.035 3.95859 14.041 4.53345 14.041H11.467C12.0414 14.041 12.4247 14.035 12.7024 14.0146C12.6974 13.8176 12.6889 13.7008 12.6692 13.6016C12.5081 12.7917 11.8746 12.1582 11.0647 11.9971C10.8828 11.9609 10.6492 11.958 10.0002 11.958H6.00024ZM10.0413 6.33301C10.0413 5.20554 9.12768 4.29119 8.00024 4.29102C6.87266 4.29102 5.95825 5.20543 5.95825 6.33301C5.95825 7.46059 6.87266 8.375 8.00024 8.375C9.12768 8.37482 10.0413 7.46048 10.0413 6.33301ZM11.2913 6.33301C11.2913 8.15084 9.81803 9.62482 8.00024 9.625C6.18231 9.625 4.70825 8.15095 4.70825 6.33301C4.70825 4.51507 6.18231 3.04102 8.00024 3.04102C9.81803 3.04119 11.2913 4.51518 11.2913 6.33301ZM15.2913 11.4668C15.2913 12.0163 15.2918 12.4663 15.262 12.8311C15.2315 13.2031 15.1665 13.5418 15.0051 13.8584C14.7535 14.352 14.3522 14.7533 13.8586 15.0049C13.7479 15.0613 13.6335 15.1066 13.5149 15.1426C13.0021 15.2979 12.3428 15.291 11.467 15.291H4.53345C3.65757 15.291 2.99845 15.2979 2.4856 15.1426C2.36691 15.1066 2.25269 15.0614 2.14185 15.0049C1.64801 14.7533 1.24606 14.3522 0.994385 13.8584C0.833048 13.5418 0.767963 13.2031 0.737549 12.8311C0.707748 12.4663 0.708252 12.0163 0.708253 11.4668V4.5332C0.708253 3.98368 0.707775 3.53373 0.737549 3.16895C0.767948 2.79689 0.833107 2.45824 0.994385 2.1416C1.24605 1.64768 1.64792 1.24581 2.14185 0.994141C2.45848 0.832863 2.79713 0.767704 3.16919 0.737305C3.53397 0.70753 3.98392 0.708008 4.53345 0.708008H11.467C12.0166 0.708008 12.4665 0.707503 12.8313 0.737305C13.2034 0.767719 13.542 0.832804 13.8586 0.994141C14.3524 1.24582 14.7535 1.64777 15.0051 2.1416C15.1665 2.45827 15.2316 2.79683 15.262 3.16895C15.2917 3.53373 15.2913 3.98367 15.2913 4.5332V11.4668Z"
+ fill={color}
+ />
+ </IconWrapper>
+ );
+ })()
- <IconWrapper color={color} clipPathId="clip0_2993_797" {...rest}>
- <path ... />
- </IconWrapper>
)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <IconWrapper color={color} clipPathId="clip0_2993_797" {...rest}> | |
| <path | |
| d="M10.0002 10.708C10.5896 10.708 10.9757 10.7052 11.3088 10.7715C12.5974 11.0278 13.6061 12.0256 13.8821 13.3066C13.8849 13.3012 13.8891 13.2965 13.8918 13.291C13.9484 13.1799 13.9927 13.0241 14.0168 12.7295C14.0415 12.4274 14.0413 12.0369 14.0413 11.4668V4.5332C14.0413 3.96299 14.0415 3.57263 14.0168 3.27051C13.9928 2.97585 13.9484 2.82009 13.8918 2.70898C13.76 2.45032 13.5499 2.23925 13.2913 2.10742C13.1802 2.05083 13.0243 2.0075 12.7297 1.9834C12.4277 1.95872 12.0372 1.95801 11.467 1.95801H4.53345C3.9632 1.95801 3.57288 1.95873 3.27075 1.9834C2.97621 2.00746 2.82032 2.05089 2.70923 2.10742C2.45051 2.23925 2.23949 2.45026 2.10767 2.70898C2.05113 2.82008 2.00771 2.97597 1.98364 3.27051C1.95897 3.57263 1.95825 3.96295 1.95825 4.5332V11.4668C1.95825 12.0369 1.95896 12.4274 1.98364 12.7295C2.00774 13.024 2.05108 13.18 2.10767 13.291C2.11038 13.2963 2.11368 13.3014 2.11646 13.3066C2.39233 12.0255 3.40219 11.028 4.69067 10.7715C5.02386 10.7052 5.41066 10.708 6.00024 10.708H10.0002ZM6.00024 11.958C5.35075 11.958 5.11682 11.9609 4.93481 11.9971C4.12495 12.1582 3.49239 12.7917 3.3313 13.6016C3.31156 13.7009 3.30207 13.8175 3.29712 14.0146C3.57489 14.035 3.95859 14.041 4.53345 14.041H11.467C12.0414 14.041 12.4247 14.035 12.7024 14.0146C12.6974 13.8176 12.6889 13.7008 12.6692 13.6016C12.5081 12.7917 11.8746 12.1582 11.0647 11.9971C10.8828 11.9609 10.6492 11.958 10.0002 11.958H6.00024ZM10.0413 6.33301C10.0413 5.20554 9.12768 4.29119 8.00024 4.29102C6.87266 4.29102 5.95825 5.20543 5.95825 6.33301C5.95825 7.46059 6.87266 8.375 8.00024 8.375C9.12768 8.37482 10.0413 7.46048 10.0413 6.33301ZM11.2913 6.33301C11.2913 8.15084 9.81803 9.62482 8.00024 9.625C6.18231 9.625 4.70825 8.15095 4.70825 6.33301C4.70825 4.51507 6.18231 3.04102 8.00024 3.04102C9.81803 3.04119 11.2913 4.51518 11.2913 6.33301ZM15.2913 11.4668C15.2913 12.0163 15.2918 12.4663 15.262 12.8311C15.2315 13.2031 15.1665 13.5418 15.0051 13.8584C14.7535 14.352 14.3522 14.7533 13.8586 15.0049C13.7479 15.0613 13.6335 15.1066 13.5149 15.1426C13.0021 15.2979 12.3428 15.291 11.467 15.291H4.53345C3.65757 15.291 2.99845 15.2979 2.4856 15.1426C2.36691 15.1066 2.25269 15.0614 2.14185 15.0049C1.64801 14.7533 1.24606 14.3522 0.994385 13.8584C0.833048 13.5418 0.767963 13.2031 0.737549 12.8311C0.707748 12.4663 0.708252 12.0163 0.708253 11.4668V4.5332C0.708253 3.98368 0.707775 3.53373 0.737549 3.16895C0.767948 2.79689 0.833107 2.45824 0.994385 2.1416C1.24605 1.64768 1.64792 1.24581 2.14185 0.994141C2.45848 0.832863 2.79713 0.767704 3.16919 0.737305C3.53397 0.70753 3.98392 0.708008 4.53345 0.708008H11.467C12.0166 0.708008 12.4665 0.707503 12.8313 0.737305C13.2034 0.767719 13.542 0.832804 13.8586 0.994141C14.3524 1.24582 14.7535 1.64777 15.0051 2.1416C15.1665 2.45827 15.2316 2.79683 15.262 3.16895C15.2917 3.53373 15.2913 3.98367 15.2913 4.5332V11.4668Z" | |
| fill={color} | |
| /> | |
| </IconWrapper> | |
| export const UserSquarePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => { | |
| const clipPathId = React.useId(); | |
| return ( | |
| <IconWrapper color={color} clipPathId={clipPathId} {...rest}> | |
| <path | |
| d="M10.0002 10.708C10.5896 10.708 10.9757 10.7052 11.3088 10.7715C12.5974 11.0278 13.6061 12.0256 13.8821 13.3066C13.8849 13.3012 13.8891 13.2965 13.8918 13.291C13.9484 13.1799 13.9927 13.0241 14.0168 12.7295C14.0415 12.4274 14.0413 12.0369 14.0413 11.4668V4.5332C14.0413 3.96299 14.0415 3.57263 14.0168 3.27051C13.9928 2.97585 13.9484 2.82009 13.8918 2.70898C13.76 2.45032 13.5499 2.23925 13.2913 2.10742C13.1802 2.05083 13.0243 2.0075 12.7297 1.9834C12.4277 1.95872 12.0372 1.95801 11.467 1.95801H4.53345C3.9632 1.95801 3.57288 1.95873 3.27075 1.9834C2.97621 2.00746 2.82032 2.05089 2.70923 2.10742C2.45051 2.23925 2.23949 2.45026 2.10767 2.70898C2.05113 2.82008 2.00771 2.97597 1.98364 3.27051C1.95897 3.57263 1.95825 3.96295 1.95825 4.5332V11.4668C1.95825 12.0369 1.95896 12.4274 1.98364 12.7295C2.00774 13.024 2.05108 13.18 2.10767 13.291C2.11038 13.2963 2.11368 13.3014 2.11646 13.3066C2.39233 12.0255 3.40219 11.028 4.69067 10.7715C5.02386 10.7052 5.41066 10.708 6.00024 10.708H10.0002ZM6.00024 11.958C5.35075 11.958 5.11682 11.9609 4.93481 11.9971C4.12495 12.1582 3.49239 12.7917 3.3313 13.6016C3.31156 13.7009 3.30207 13.8175 3.29712 14.0146C3.57489 14.035 3.95859 14.041 4.53345 14.041H11.467C12.0414 14.041 12.4247 14.035 12.7024 14.0146C12.6974 13.8176 12.6889 13.7008 12.6692 13.6016C12.5081 12.7917 11.8746 12.1582 11.0647 11.9971C10.8828 11.9609 10.6492 11.958 10.0002 11.958H6.00024ZM10.0413 6.33301C10.0413 5.20554 9.12768 4.29119 8.00024 4.29102C6.87266 4.29102 5.95825 5.20543 5.95825 6.33301C5.95825 7.46059 6.87266 8.375 8.00024 8.375C9.12768 8.37482 10.0413 7.46048 10.0413 6.33301ZM11.2913 6.33301C11.2913 8.15084 9.81803 9.62482 8.00024 9.625C6.18231 9.625 4.70825 8.15095 4.70825 6.33301C4.70825 4.51507 6.18231 3.04102 8.00024 3.04102C9.81803 3.04119 11.2913 4.51518 11.2913 6.33301ZM15.2913 11.4668C15.2913 12.0163 15.2918 12.4663 15.262 12.8311C15.2315 13.2031 15.1665 13.5418 15.0051 13.8584C14.7535 14.352 14.3522 14.7533 13.8586 15.0049C13.7479 15.0613 13.6335 15.1066 13.5149 15.1426C13.0021 15.2979 12.3428 15.291 11.467 15.291H4.53345C3.65757 15.291 2.99845 15.2979 2.4856 15.1426C2.36691 15.1066 2.25269 15.0614 2.14185 15.0049C1.64801 14.7533 1.24606 14.3522 0.994385 13.8584C0.833048 13.5418 0.767963 13.2031 0.737549 12.8311C0.707748 12.4663 0.708252 12.0163 0.708253 11.4668V4.5332C0.708253 3.98368 0.707775 3.53373 0.737549 3.16895C0.767948 2.79689 0.833107 2.45824 0.994385 2.1416C1.24605 1.64768 1.64792 1.24581 2.14185 0.994141C2.45848 0.832863 2.79713 0.767704 3.16919 0.737305C3.53397 0.70753 3.98392 0.708008 4.53345 0.708008H11.467C12.0166 0.708008 12.4665 0.707503 12.8313 0.737305C13.2034 0.767719 13.542 0.832804 13.8586 0.994141C14.3524 1.24582 14.7535 1.64777 15.0051 2.1416C15.1665 2.45827 15.2316 2.79683 15.262 3.16895C15.2917 3.53373 15.2913 3.98367 15.2913 4.5332V11.4668Z" | |
| fill={color} | |
| /> | |
| </IconWrapper> | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In packages/propel/src/icons/properties/user-square-icon.tsx around lines 7-12,
the component currently passes a static clipPathId ("clip0_2993_797") which can
collide when multiple icons render; replace it with a per-instance id generated
by React.useId(): import React (if not already), call const id = React.useId();
then pass a unique value (e.g. `${id}-clip0`) to IconWrapper's clipPathId prop
so each icon instance gets its own clip path id; ensure any internal references
inside the SVG use that same prop value.
Comment on lines
+7
to
+16
| <IconWrapper color={color} clipPathId="clip0_888_35560" {...rest}> | ||
| <path | ||
| d="M5.15383 9.50566V5.15381H1.34152C0.601228 5.15381 0 5.75399 0 6.49533V14.6595C0 15.3998 0.600183 16.001 1.34152 16.001H9.50568C10.246 16.001 10.8472 15.4008 10.8472 14.6595V10.8461H6.49536C5.75506 10.8461 5.15383 10.246 5.15383 9.50461V9.50566Z" | ||
| fill={color} | ||
| /> | ||
| <path | ||
| d="M14.66 0H6.49582C5.75553 0 5.1543 0.600183 5.1543 1.34152V5.15488H9.50615C10.2464 5.15488 10.8477 5.75506 10.8477 6.49641V10.8483H14.661C15.4013 10.8483 16.0026 10.2481 16.0026 9.50673V1.34152C16.0026 0.601229 15.4024 0 14.661 0H14.66Z" | ||
| fill={color} | ||
| /> | ||
| </IconWrapper> |
There was a problem hiding this comment.
Generate clipPathId per instance; remove hard-coded id.
Same collision risk as above. Use React.useId to compute a unique id.
export const PlaneNewIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
- <IconWrapper color={color} clipPathId="clip0_888_35560" {...rest}>
+ (() => {
+ const clipPathId = React.useId();
+ return (
+ <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+ <path
+ d="M5.15383 9.50566V5.15381H1.34152C0.601228 5.15381 0 5.75399 0 6.49533V14.6595C0 15.3998 0.600183 16.001 1.34152 16.001H9.50568C10.246 16.001 10.8472 15.4008 10.8472 14.6595V10.8461H6.49536C5.75506 10.8461 5.15383 10.246 5.15383 9.50461V9.50566Z"
+ fill={color}
+ />
+ <path
+ d="M14.66 0H6.49582C5.75553 0 5.1543 0.600183 5.1543 1.34152V5.15488H9.50615C10.2464 5.15488 10.8477 5.75506 10.8477 6.49641V10.8483H14.661C15.4013 10.8483 16.0026 10.2481 16.0026 9.50673V1.34152C16.0026 0.601229 15.4024 0 14.661 0H14.66Z"
+ fill={color}
+ />
+ </IconWrapper>
+ );
+ })()
- <IconWrapper color={color} clipPathId="clip0_888_35560" {...rest}>
- <path ... />
- <path ... />
- </IconWrapper>
)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <IconWrapper color={color} clipPathId="clip0_888_35560" {...rest}> | |
| <path | |
| d="M5.15383 9.50566V5.15381H1.34152C0.601228 5.15381 0 5.75399 0 6.49533V14.6595C0 15.3998 0.600183 16.001 1.34152 16.001H9.50568C10.246 16.001 10.8472 15.4008 10.8472 14.6595V10.8461H6.49536C5.75506 10.8461 5.15383 10.246 5.15383 9.50461V9.50566Z" | |
| fill={color} | |
| /> | |
| <path | |
| d="M14.66 0H6.49582C5.75553 0 5.1543 0.600183 5.1543 1.34152V5.15488H9.50615C10.2464 5.15488 10.8477 5.75506 10.8477 6.49641V10.8483H14.661C15.4013 10.8483 16.0026 10.2481 16.0026 9.50673V1.34152C16.0026 0.601229 15.4024 0 14.661 0H14.66Z" | |
| fill={color} | |
| /> | |
| </IconWrapper> | |
| export const PlaneNewIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => { | |
| const clipPathId = React.useId(); | |
| return ( | |
| <IconWrapper color={color} clipPathId={clipPathId} {...rest}> | |
| <path | |
| d="M5.15383 9.50566V5.15381H1.34152C0.601228 5.15381 0 5.75399 0 6.49533V14.6595C0 15.3998 0.600183 16.001 1.34152 16.001H9.50568C10.246 16.001 10.8472 15.4008 10.8472 14.6595V10.8461H6.49536C5.75506 10.8461 5.15383 10.246 5.15383 9.50461V9.50566Z" | |
| fill={color} | |
| /> | |
| <path | |
| d="M14.66 0H6.49582C5.75553 0 5.1543 0.600183 5.1543 1.34152V5.15488H9.50615C10.2464 5.15488 10.8477 5.75506 10.8477 6.49641V10.8483H14.661C15.4013 10.8483 16.0026 10.2481 16.0026 9.50673V1.34152C16.0026 0.601229 15.4024 0 14.661 0H14.66Z" | |
| fill={color} | |
| /> | |
| </IconWrapper> | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In packages/propel/src/icons/sub-brand/plane-icon.tsx around lines 7 to 16, the
component currently passes a hard-coded clipPathId ("clip0_888_35560") which can
collide between instances; replace the literal id with a per-instance id
generated via React.useId (e.g., const id = React.useId(); const clipPathId =
`clip-${id}`) and pass that variable to IconWrapper (and ensure any
corresponding <clipPath> definitions inside IconWrapper consume the same id).
Also add the React import if missing. This guarantees unique clipPath ids per
render.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR includes following changes:
Layout icon:
Properties icon:
Reference
[WEB-5188 | WEB-5190]
Summary by CodeRabbit
New Features
Refactor