[WEB-5191 | WEB-5197] chore: actions and arrows icon revamp (#7984)

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -1,5 +1,5 @@
-import { ChevronRight } from "lucide-react";
 import * as React from "react";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "../utils";
 
@@ -64,7 +64,7 @@ const Breadcrumbs = ({ className, children, onBack, isLoading = false }: Breadcr
                 ...
               </span>
             )}
-            <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
+            <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
           </div>
           <div className="flex items-center gap-2.5 p-1">
             {isLoading ? (
@@ -146,7 +146,7 @@ const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = (props) => {
           containerClassName
         )}
       >
-        <ChevronRight className={cn("h-3.5 w-3.5 flex-shrink-0", iconClassName)} />
+        <ChevronRightIcon className={cn("h-3.5 w-3.5 flex-shrink-0", iconClassName)} />
       </div>
     </div>
   );

packages/ui/src/constants/icons.ts

@@ -35,10 +35,6 @@ import {
   Check,
   CheckCircle,
   CheckSquare,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
   Clipboard,
   Clock,
   Cloud,
@@ -155,6 +151,7 @@ import {
   Search,
   User,
 } from "lucide-react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "@plane/propel/icons";
 
 export const MATERIAL_ICONS_LIST = [
   {
@@ -800,10 +797,10 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Check", element: Check },
   { name: "CheckCircle", element: CheckCircle },
   { name: "CheckSquare", element: CheckSquare },
-  { name: "ChevronDown", element: ChevronDown },
-  { name: "ChevronLeft", element: ChevronLeft },
-  { name: "ChevronRight", element: ChevronRight },
-  { name: "ChevronUp", element: ChevronUp },
+  { name: "ChevronDown", element: ChevronDownIcon },
+  { name: "ChevronLeft", element: ChevronLeftIcon },
+  { name: "ChevronRight", element: ChevronRightIcon },
+  { name: "ChevronUp", element: ChevronUpIcon },
   { name: "Clipboard", element: Clipboard },
   { name: "Clock", element: Clock },
   { name: "Cloud", element: Cloud },

packages/ui/src/dropdowns/context-menu/item.tsx

@@ -1,6 +1,6 @@
-import { ChevronRight } from "lucide-react";
 import React, { useState, useRef, useContext } from "react";
 import { usePopper } from "react-popper";
+import { ChevronRightIcon } from "@plane/propel/icons";
 // helpers
 import { cn } from "../../utils";
 // types
@@ -177,7 +177,7 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
                 </p>
               )}
             </div>
-            {hasNestedItems && <ChevronRight className="h-3 w-3 flex-shrink-0" />}
+            {hasNestedItems && <ChevronRightIcon className="h-3 w-3 flex-shrink-0" />}
           </>
         )}
       </button>

packages/ui/src/dropdowns/custom-menu.tsx

@@ -1,10 +1,11 @@
 import { Menu } from "@headlessui/react";
-import { ChevronDown, ChevronRight, MoreHorizontal } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { usePopper } from "react-popper";
-// plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronDownIcon, ChevronRightIcon } from "@plane/propel/icons";
+// plane helpers
 // helpers
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import { cn } from "../utils";
@@ -283,7 +284,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     aria-label={ariaLabel}
                   >
                     {label}
-                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+                    {!noChevron && <ChevronDownIcon className="h-3.5 w-3.5" />}
                   </button>
                 </Menu.Button>
               )}
@@ -405,7 +406,7 @@ const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
               onClick={handleClick}
             >
               <span className="flex-1">{trigger}</span>
-              <ChevronRight className="h-3.5 w-3.5 flex-shrink-0" />
+              <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0" />
             </div>
           )}
         </Menu.Item>
@@ -499,7 +500,7 @@ const SubMenuTrigger: React.FC<ICustomSubMenuTriggerProps> = (props) => {
           )}
         >
           <span className="flex-1">{children}</span>
-          <ChevronRight className="h-3.5 w-3.5 flex-shrink-0" />
+          <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0" />
         </div>
       )}
     </Menu.Item>

packages/ui/src/dropdowns/custom-search-select.tsx

@@ -1,10 +1,11 @@
 import { Combobox } from "@headlessui/react";
-import { Check, ChevronDown, Info, Search } from "lucide-react";
+import { Check, Info, Search } from "lucide-react";
 import React, { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
-// plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronDownIcon } from "@plane/propel/icons";
+// plane imports
 // local imports
 import { Tooltip } from "@plane/propel/tooltip";
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
@@ -129,7 +130,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                 >
                   {label}
                   {!noChevron && !disabled && (
-                    <ChevronDown className={cn("h-3 w-3 flex-shrink-0", chevronClassName)} aria-hidden="true" />
+                    <ChevronDownIcon className={cn("h-3 w-3 flex-shrink-0", chevronClassName)} aria-hidden="true" />
                   )}
                 </button>
               </Combobox.Button>

packages/ui/src/dropdowns/custom-select.tsx

@@ -1,10 +1,11 @@
 import { Combobox } from "@headlessui/react";
-import { Check, ChevronDown } from "lucide-react";
+import { Check } from "lucide-react";
 import React, { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
-// plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronDownIcon } from "@plane/propel/icons";
+// plane helpers
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 // helpers
@@ -97,7 +98,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
               onClick={toggleDropdown}
             >
               {label}
-              {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+              {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
             </button>
           </Combobox.Button>
         )}