binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: actions icon migration (#8219)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

8
apps/web/core/components/dropdowns/cycle/cycle-options.tsx
View file

@ -1,16 +1,14 @@
import type { FC } from "react";
import { useEffect, useRef, useState } from "react";
import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
// components
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// i18n
import { useTranslation } from "@plane/i18n";
// icon
import { CycleGroupIcon, CycleIcon } from "@plane/propel/icons";
import { CheckIcon, CycleGroupIcon, CycleIcon, SearchIcon } from "@plane/propel/icons";
import type { TCycleGroups } from "@plane/types";
// ui
// store hooks
@ -128,7 +126,7 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -156,7 +154,7 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>

7
apps/web/core/components/dropdowns/estimate.tsx
View file

@ -3,11 +3,10 @@ import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { EstimatePropertyIcon, ChevronDownIcon } from "@plane/propel/icons";
import { CheckIcon, SearchIcon, EstimatePropertyIcon, ChevronDownIcon } from "@plane/propel/icons";
import { EEstimateSystem } from "@plane/types";
import { ComboDropDown } from "@plane/ui";
import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
@ -235,7 +234,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -276,7 +275,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
)}
>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</div>
)}
</Combobox.Option>

5
apps/web/core/components/dropdowns/intake-state/base.tsx
View file

@ -2,11 +2,10 @@ import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { IntakeStateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
import { SearchIcon, IntakeStateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IIntakeState } from "@plane/types";
import { ComboDropDown, Spinner } from "@plane/ui";
import { cn } from "@plane/utils";
@ -217,7 +216,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}

4
apps/web/core/components/dropdowns/layout.tsx
View file

@ -1,9 +1,9 @@
import { useCallback, useMemo } from "react";
import { observer } from "mobx-react";
import { Check } from "lucide-react";
// plane imports
import { ISSUE_LAYOUT_MAP } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CheckIcon } from "@plane/propel/icons";
import { EIssueLayoutTypes } from "@plane/types";
import { Dropdown } from "@plane/ui";
import { cn } from "@plane/utils";
@ -55,7 +55,7 @@ export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDro
<IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-secondary`} />
<span className="font-medium text-11">{t(dropdownValue.i18n_label)}</span>
</div>
{props.selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{props.selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</div>
);
}, []);

7
apps/web/core/components/dropdowns/member/member-options.tsx
View file

@ -4,11 +4,10 @@ import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { SuspendedUserIcon } from "@plane/propel/icons";
import { CheckIcon, SearchIcon, SuspendedUserIcon } from "@plane/propel/icons";
import { EPillSize, EPillVariant, Pill } from "@plane/propel/pill";
import type { IUserLite } from "@plane/types";
import { Avatar } from "@plane/ui";
@ -129,7 +128,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -165,7 +164,7 @@ export const MemberOptions = observer(function MemberOptions(props: Props) {
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
{isUserSuspended(option.value, workspaceSlug?.toString()) && (
<Pill variant={EPillVariant.DEFAULT} size={EPillSize.XS} className="border-none">
Suspended

7
apps/web/core/components/dropdowns/module/module-options.tsx
View file

@ -2,11 +2,10 @@ import { useEffect, useRef, useState } from "react";
import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { ModuleIcon } from "@plane/propel/icons";
import { CheckIcon, SearchIcon, ModuleIcon } from "@plane/propel/icons";
import type { IModule } from "@plane/types";
import { cn } from "@plane/utils";
// hooks
@ -113,7 +112,7 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -146,7 +145,7 @@ export const ModuleOptions = observer(function ModuleOptions(props: Props) {
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>

8
apps/web/core/components/dropdowns/priority.tsx
View file

@ -1,12 +1,12 @@
import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { usePopper } from "react-popper";
import { Check, Search, SignalHigh } from "lucide-react";
import { SignalHigh } from "lucide-react";
import { Combobox } from "@headlessui/react";
import { ISSUE_PRIORITIES } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
// types
import { PriorityIcon, ChevronDownIcon } from "@plane/propel/icons";
import { CheckIcon, PriorityIcon, ChevronDownIcon, SearchIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import type { TIssuePriorities } from "@plane/types";
// ui
@ -465,7 +465,7 @@ export function PriorityDropdown(props: Props) {
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -494,7 +494,7 @@ export function PriorityDropdown(props: Props) {
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>

7
apps/web/core/components/dropdowns/project/base.tsx
View file

@ -2,12 +2,11 @@ import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { Logo } from "@plane/propel/emoji-icon-picker";
import { ProjectIcon, ChevronDownIcon } from "@plane/propel/icons";
import { CheckIcon, SearchIcon, ProjectIcon, ChevronDownIcon } from "@plane/propel/icons";
import { ComboDropDown } from "@plane/ui";
import { cn } from "@plane/utils";
// components
@ -238,7 +237,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
@ -268,7 +267,7 @@ export const ProjectDropdownBase = observer(function ProjectDropdownBase(props:
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>

5
apps/web/core/components/dropdowns/state/base.tsx
View file

@ -2,11 +2,10 @@ import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
import { SearchIcon, StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IState } from "@plane/types";
import { ComboDropDown, Spinner } from "@plane/ui";
import { cn } from "@plane/utils";
@ -219,7 +218,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<Search className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}