refactor: actions icon migration (#8219)

* chore: gitignore updated

* chore: check icon added to propel package

* feat: search icon migration

* chore: check icon migration

* chore: plus icon added to propel package

* chore: code refactor

* chore: plus icon migration and code refactor

* chore: trash icon added to propel package

* chore: code refactor

* chore: trash icon migration

* chore: edit icon added to propel package

* chore: new tab icon added to propel package

* chore: edit icon migration

* chore: newtab icon migration

* chore: lock icon added to propel package

* chore: lock icon migration

* chore: globe icon added to propel package

* chore: globe icon migration

* chore: copy icon added to propel package

* chore: copy icon migration

* chore: link icon added to propel package

* chore: link icon migration

* chore: link icon migration

* chore: info icon added to propel package

* chore: code refactor

* chore: code refactor

* chore: code refactor

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2025-12-26 17:19:15 +05:30 committed by GitHub
parent 92ac28fcb8
commit 2980c2d76b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
215 changed files with 932 additions and 729 deletions

View file

@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { Controller, useForm } from "react-hook-form";
import { Info, Plus, SquareUser } from "lucide-react";
import { Info, SquareUser } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react";
import {
MODULE_STATUS,
@ -15,6 +15,7 @@ import {
// plane types
import { useTranslation } from "@plane/i18n";
import {
PlusIcon,
MembersPropertyIcon,
ModuleStatusIcon,
WorkItemsIcon,
@ -459,7 +460,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
onClick={() => setModuleLinkModal(true)}
>
<Plus className="h-3 w-3" />
<PlusIcon className="h-3 w-3" />
{t("add_link")}
</button>
</div>
@ -485,7 +486,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
onClick={() => setModuleLinkModal(true)}
>
<Plus className="h-3 w-3" />
<PlusIcon className="h-3 w-3" />
{t("add_link")}
</button>
)}

View file

@ -3,9 +3,9 @@ import { useCallback, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { ListFilter, Search } from "lucide-react";
import { ListFilter } from "lucide-react";
import { useOutsideClickDetector } from "@plane/hooks";
import { CloseIcon } from "@plane/propel/icons";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
// plane helpers
// types
import type { TModuleFilters } from "@plane/types";
@ -91,7 +91,7 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
inputRef.current?.focus();
}}
>
<Search className="h-3.5 w-3.5" />
<SearchIcon className="h-3.5 w-3.5" />
</button>
)}
<div
@ -102,7 +102,7 @@ export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
}
)}
>
<Search className="h-3.5 w-3.5" />
<SearchIcon className="h-3.5 w-3.5" />
<input
ref={inputRef}
className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"

View file

@ -1,9 +1,8 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { Search } from "lucide-react";
// plane imports
import type { TModuleStatus } from "@plane/propel/icons";
import { CloseIcon } from "@plane/propel/icons";
// plane imports
import { CloseIcon, SearchIcon } from "@plane/propel/icons";
import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
// components
import { FilterOption } from "@/components/issues/issue-layouts/filters";
@ -38,7 +37,7 @@ export const ModuleFiltersSelection = observer(function ModuleFiltersSelection(p
<div className="flex h-full w-full flex-col overflow-hidden">
<div className="bg-surface-1 p-2.5 pb-0">
<div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
<Search className="text-placeholder" size={12} strokeWidth={2} />
<SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
<input
type="text"
className="w-full bg-surface-2 outline-none placeholder:text-placeholder"

View file

@ -1,8 +1,8 @@
import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
import { ArrowDownWideNarrow, ArrowUpWideNarrow } from "lucide-react";
import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { getButtonStyling } from "@plane/propel/button";
import { ChevronDownIcon } from "@plane/propel/icons";
import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { TModuleOrderByOptions } from "@plane/types";
// ui
import { CustomMenu } from "@plane/ui";
@ -49,7 +49,7 @@ export function ModuleOrderByDropdown(props: Props) {
}}
>
{t(option.i18n_label)}
{value?.includes(option.key) && <Check className="h-3 w-3" />}
{value?.includes(option.key) && <CheckIcon className="h-3 w-3" />}
</CustomMenu.MenuItem>
))}
{!isManual && (
@ -62,7 +62,7 @@ export function ModuleOrderByDropdown(props: Props) {
}}
>
Ascending
{!isDescending && <Check className="h-3 w-3" />}
{!isDescending && <CheckIcon className="h-3 w-3" />}
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
className="flex items-center justify-between gap-2"
@ -71,7 +71,7 @@ export function ModuleOrderByDropdown(props: Props) {
}}
>
Descending
{isDescending && <Check className="h-3 w-3" />}
{isDescending && <CheckIcon className="h-3 w-3" />}
</CustomMenu.MenuItem>
</>
)}

View file

@ -1,7 +1,8 @@
import { observer } from "mobx-react";
import { Copy, Pencil, Trash2 } from "lucide-react";
// plane types
import { MODULE_TRACKER_ELEMENTS } from "@plane/constants";
import { CopyIcon, EditIcon, TrashIcon } from "@plane/propel/icons";
// plane types
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { ILinkDetails } from "@plane/types";
@ -67,7 +68,7 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
handleEditLink();
}}
>
<Pencil className="size-3 stroke-[1.5]" />
<EditIcon className="size-3 stroke-[1.5]" />
</button>
)}
<button
@ -75,7 +76,7 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
onClick={() => copyToClipboard(link.url)}
className="grid place-items-center p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
>
<Copy className="size-3 stroke-[1.5]" />
<CopyIcon className="size-3 stroke-[1.5]" />
</button>
{isEditingAllowed && (
<button
@ -88,7 +89,7 @@ export const ModulesLinksListItem = observer(function ModulesLinksListItem(props
handleDeleteLink();
}}
>
<Trash2 className="size-3 stroke-[1.5]" />
<TrashIcon className="size-3 stroke-[1.5]" />
</button>
)}
</div>

View file

@ -2,7 +2,8 @@ import React, { useRef } from "react";
import { observer } from "mobx-react";
import { useParams, usePathname, useSearchParams } from "next/navigation";
// icons
import { Check, Info } from "lucide-react";
import { Info } from "lucide-react";
import { CheckIcon } from "@plane/propel/icons";
// ui
import { CircularProgressIndicator } from "@plane/ui";
// components
@ -72,12 +73,12 @@ export const ModuleListItem = observer(function ModuleListItem(props: Props) {
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
{completedModuleCheck ? (
progress === 100 ? (
<Check className="h-3 w-3 stroke-[2] text-accent-primary" />
<CheckIcon className="h-3 w-3 stroke-[2] text-accent-primary" />
) : (
<span className="text-13 text-accent-primary">{`!`}</span>
)
) : progress === 100 ? (
<Check className="h-3 w-3 stroke-[2] text-accent-primary" />
<CheckIcon className="h-3 w-3 stroke-[2] text-accent-primary" />
) : (
<span className="text-9 text-tertiary">{`${progress}%`}</span>
)}

View file

@ -2,13 +2,13 @@ import type { FC } from "react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { ListFilter, Search } from "lucide-react";
import { ListFilter } from "lucide-react";
// plane helpers
import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
import { useOutsideClickDetector } from "@plane/hooks";
// types
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
import { SearchIcon, CloseIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TModuleFilters } from "@plane/types";
// ui
@ -105,7 +105,7 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
setIsSearchOpen(true);
inputRef.current?.focus();
}}
icon={Search}
icon={SearchIcon}
/>
)}
<div
@ -116,7 +116,7 @@ export const ModuleViewHeader = observer(function ModuleViewHeader() {
}
)}
>
<Search className="h-3.5 w-3.5" />
<SearchIcon className="h-3.5 w-3.5" />
<input
ref={inputRef}
className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"