-
Notifications
You must be signed in to change notification settings - Fork 2.8k
[WEB-5188 | WEB-5190] chore: layout and properties icon revamp #7980
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: preview
Are you sure you want to change the base?
Changes from all commits
7eaa221
4e42900
b963f68
ab8d3ea
181b140
e1b656f
baa9178
ad02c90
1a7c93c
89e435a
c44eaf4
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,9 @@ | ||
"use client"; | ||
|
||
import type React from "react"; | ||
import { observer } from "mobx-react"; | ||
// 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🧩 Analysis chainIcon migration looks good, but verify type compatibility. The icon replacements are correctly implemented. However, the icon type definition at line 16 specifies 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
Length of output: 127
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 Update line 16: icon: React.FC<ISvgIcons>; 🤖 Prompt for AI Agents
|
||
// plane package imports | ||
import type { TCycleLayoutOptions } from "@plane/types"; | ||
import { CustomMenu } from "@plane/ui"; | ||
|
@@ -13,22 +13,22 @@ import { useProject } from "@/hooks/store/use-project"; | |
|
||
const CYCLE_VIEW_LAYOUTS: { | ||
key: TCycleLayoutOptions; | ||
icon: LucideIcon; | ||
icon: React.FC<React.SVGProps<SVGSVGElement>>; | ||
title: string; | ||
}[] = [ | ||
{ | ||
key: "list", | ||
icon: List, | ||
icon: ListLayoutIcon, | ||
title: "List layout", | ||
}, | ||
{ | ||
key: "board", | ||
icon: LayoutGrid, | ||
icon: GridLayoutIcon, | ||
title: "Gallery layout", | ||
}, | ||
{ | ||
key: "gantt", | ||
icon: GanttChartSquare, | ||
icon: TimelineLayoutIcon, | ||
title: "Timeline layout", | ||
}, | ||
]; | ||
|
@@ -45,7 +45,7 @@ export const CyclesListMobileHeader = observer(() => { | |
// placement="bottom-start" | ||
customButton={ | ||
<span className="flex items-center gap-2"> | ||
<List className="h-4 w-4" /> | ||
<ListLayoutIcon className="h-4 w-4" /> | ||
<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span> | ||
</span> | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧩 Analysis chain
Verify incomplete layout case handling.
The switch statement only handles
"list"
and"kanban"
cases, butTIssueLayout
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:
Length of output: 185
🏁 Script executed:
Length of output: 2831
🏁 Script executed:
Length of output: 1127
Add missing layout icons for calendar, spreadsheet, and gantt.
The space app's
TIssueLayout
type includes all five layout types, andcontrols.tsx
actively enables users to select calendar, spreadsheet, and gantt layouts. However,layout-icon.tsx
only handles list and kanban, returningnull
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
, andTimelineLayoutIcon
from@plane/propel/icons
and add the corresponding switch cases:🤖 Prompt for AI Agents