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

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

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-10-29 20:13:08 +05:30 • committed by GitHub
parent 350107d6c1
commit 0e8128594b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
199 changed files with 700 additions and 539 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/editor/package.json
View file

@ -44,6 +44,7 @@
"@plane/types": "workspace:*",
"@plane/ui": "workspace:*",
"@plane/utils": "workspace:*",
"@plane/propel": "workspace:*",
"@tiptap/core": "catalog:",
"@tiptap/extension-blockquote": "^2.22.3",
"@tiptap/extension-character-count": "^2.22.3",

5
packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
View file

@ -1,6 +1,7 @@
import { Editor } from "@tiptap/react";
import { Check, ChevronDown } from "lucide-react";
import { Check } from "lucide-react";
import { FC } from "react";
import { ChevronDownIcon } from "@plane/propel/icons";
// plane utils
import { cn } from "@plane/utils";
// components
@ -67,7 +68,7 @@ export const BubbleMenuNodeSelector: FC<Props> = (props) => {
menuButton={
<>
<span>{activeItem?.name}</span>
<ChevronDown className="shrink-0 size-3" />
<ChevronDownIcon className="shrink-0 size-3" />
</>
}
options={options}

5
packages/editor/src/core/extensions/callout/color-selector.tsx
View file

@ -1,4 +1,5 @@
import { Ban, ChevronDown } from "lucide-react";
import { Ban } from "lucide-react";
import { ChevronDownIcon } from "@plane/propel/icons";
// plane utils
import { cn } from "@plane/utils";
// constants
@ -43,7 +44,7 @@ export const CalloutBlockColorSelector: React.FC<Props> = (props) => {
disabled={disabled}
>
<span>Color</span>
<ChevronDown className="flex-shrink-0 size-3" />
<ChevronDownIcon className="flex-shrink-0 size-3" />
</button>
{isOpen && (
<section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-2 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">

4
packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
View file

@ -1,7 +1,7 @@
import { ChevronDown } from "lucide-react";
import { useEffect, useRef, useState } from "react";
// plane imports
import { useOutsideClickDetector } from "@plane/hooks";
import { ChevronDownIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/ui";
// local imports
import type { TCustomImageAlignment } from "../../types";
@ -38,7 +38,7 @@ export const ImageAlignmentAction: React.FC<Props> = (props) => {
onClick={() => setIsDropdownOpen((prev) => !prev)}
>
{activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
<ChevronDown className="flex-shrink-0 size-2" />
<ChevronDownIcon className="flex-shrink-0 size-2" />
</button>
</Tooltip>
{isDropdownOpen && (

5
packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
View file

@ -1,6 +1,7 @@
import { Download, ExternalLink, Minus, Plus, X } from "lucide-react";
import { Download, ExternalLink, Minus, Plus } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import ReactDOM from "react-dom";
import { CloseIcon } from "@plane/propel/icons";
// plane imports
import { cn } from "@plane/utils";
@ -212,7 +213,7 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
className="absolute top-10 right-10 size-8 grid place-items-center"
aria-label="Close image viewer"
>
<X className="size-8 text-white/60 hover:text-white transition-colors" />
<CloseIcon className="size-8 text-white/60 hover:text-white transition-colors" />
</button>
<img
ref={setImageRef}

5
packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
View file

@ -1,7 +1,8 @@
import { Disclosure } from "@headlessui/react";
import type { Editor } from "@tiptap/core";
import { Ban, ChevronRight, Palette } from "lucide-react";
import { Ban, Palette } from "lucide-react";
// plane imports
import { ChevronRightIcon } from "@plane/propel/icons";
import { cn } from "@plane/utils";
// constants
import { COLORS_LIST } from "@/constants/common";
@ -50,7 +51,7 @@ export const TableDragHandleDropdownColorSelector: React.FC<Props> = (props) =>
<Palette className="shrink-0 size-3" />
Color
</span>
<ChevronRight
<ChevronRightIcon
className={cn("shrink-0 size-3 transition-transform duration-200", {
"rotate-90": open,
})}

7
packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
View file

@ -1,7 +1,8 @@
import type { Editor } from "@tiptap/core";
import { TableMap } from "@tiptap/pm/tables";
import { ArrowLeft, ArrowRight, Copy, ToggleRight, Trash2, X, type LucideIcon } from "lucide-react";
import { ArrowLeft, ArrowRight, Copy, ToggleRight, Trash2, type LucideIcon } from "lucide-react";
// extensions
import { CloseIcon, ISvgIcons } from "@plane/propel/icons";
import { findTable, getSelectedColumns } from "@/extensions/table/table/utilities/helpers";
// local imports
import { duplicateColumns } from "../actions";
@ -10,7 +11,7 @@ import { TableDragHandleDropdownColorSelector } from "../color-selector";
const DROPDOWN_ITEMS: {
key: string;
label: string;
icon: LucideIcon;
icon: LucideIcon | React.FC<ISvgIcons>;
action: (editor: Editor) => void;
}[] = [
{
@ -43,7 +44,7 @@ const DROPDOWN_ITEMS: {
{
key: "clear-contents",
label: "Clear contents",
icon: X,
icon: CloseIcon,
action: (editor) => editor.chain().focus().clearSelectedCells().run(),
},
{

7
packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
View file

@ -1,7 +1,8 @@
import type { Editor } from "@tiptap/core";
import { TableMap } from "@tiptap/pm/tables";
import { ArrowDown, ArrowUp, Copy, ToggleRight, Trash2, X, type LucideIcon } from "lucide-react";
import { ArrowDown, ArrowUp, Copy, ToggleRight, Trash2, type LucideIcon } from "lucide-react";
// extensions
import { CloseIcon, ISvgIcons } from "@plane/propel/icons";
import { findTable, getSelectedRows } from "@/extensions/table/table/utilities/helpers";
// local imports
import { duplicateRows } from "../actions";
@ -10,7 +11,7 @@ import { TableDragHandleDropdownColorSelector } from "../color-selector";
const DROPDOWN_ITEMS: {
key: string;
label: string;
icon: LucideIcon;
icon: LucideIcon | React.FC<ISvgIcons>;
action: (editor: Editor) => void;
}[] = [
{
@ -43,7 +44,7 @@ const DROPDOWN_ITEMS: {
{
key: "clear-contents",
label: "Clear contents",
icon: X,
icon: CloseIcon,
action: (editor) => editor.chain().focus().clearSelectedCells().run(),
},
{

4
packages/propel/src/calendar/root.tsx
View file

@ -1,8 +1,8 @@
"use client";
import * as React from "react";
import { ChevronLeft } from "lucide-react";
import { DayPicker } from "react-day-picker";
import { ChevronLeftIcon } from "@plane/propel/icons";
import { cn } from "../utils";
@ -20,7 +20,7 @@ export const Calendar = ({ className, showOutsideDays = true, ...props }: Calend
weekStartsOn={props.weekStartsOn}
components={{
Chevron: ({ className, ...props }) => (
<ChevronLeft
<ChevronLeftIcon
className={cn(
"size-4",
{ "rotate-180": props.orientation === "right", "-rotate-90": props.orientation === "down" },

16
packages/propel/src/collapsible/collapsible.stories.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { ChevronDown } from "lucide-react";
import { useArgs } from "storybook/preview-api";
import { ChevronDownIcon } from "@plane/propel/icons";
import { Collapsible } from "./collapsible";
const meta = {
@ -28,7 +28,7 @@ const meta = {
<Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={toggleOpen} className="w-96">
<Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
<span className="font-semibold">Click to toggle</span>
<ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
<ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
</Collapsible.CollapsibleTrigger>
<Collapsible.CollapsibleContent className="mt-2">
<div className="rounded-md border border-gray-200 p-4">
@ -69,7 +69,7 @@ export const Controlled: Story = {
<Collapsible.CollapsibleRoot isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
<Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
<span className="font-semibold">Controlled Collapsible</span>
<ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
<ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
</Collapsible.CollapsibleTrigger>
<Collapsible.CollapsibleContent className="mt-2">
<div className="rounded-md border border-gray-200 p-4">
@ -90,7 +90,7 @@ export const NestedContent: Story = {
<Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
<Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
<span className="font-semibold">Collapsible with Nested Content</span>
<ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
<ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
</Collapsible.CollapsibleTrigger>
<Collapsible.CollapsibleContent className="mt-2">
<div className="space-y-2 rounded-md border border-gray-200 p-4">
@ -117,7 +117,7 @@ export const CustomStyling: Story = {
<Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
<Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-3 text-white shadow-lg transition-all hover:shadow-xl">
<span className="text-lg font-bold">Custom Styled Trigger</span>
<ChevronDown className="h-5 w-5 transition-transform group-data-[panel-open]:rotate-180" />
<ChevronDownIcon className="h-5 w-5 transition-transform group-data-[panel-open]:rotate-180" />
</Collapsible.CollapsibleTrigger>
<Collapsible.CollapsibleContent className="mt-4">
<div className="rounded-lg bg-gradient-to-br from-purple-100 to-pink-100 p-6 shadow-md">
@ -136,7 +136,7 @@ export const MultipleCollapsibles: Story = {
<Collapsible.CollapsibleRoot>
<Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
<span className="font-semibold">First Item</span>
<ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
<ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
</Collapsible.CollapsibleTrigger>
<Collapsible.CollapsibleContent className="mt-2">
<div className="rounded-md border border-gray-200 p-4">
@ -148,7 +148,7 @@ export const MultipleCollapsibles: Story = {
<Collapsible.CollapsibleRoot>
<Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
<span className="font-semibold">Second Item</span>
<ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
<ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
</Collapsible.CollapsibleTrigger>
<Collapsible.CollapsibleContent className="mt-2">
<div className="rounded-md border border-gray-200 p-4">
@ -160,7 +160,7 @@ export const MultipleCollapsibles: Story = {
<Collapsible.CollapsibleRoot>
<Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
<span className="font-semibold">Third Item</span>
<ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
<ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
</Collapsible.CollapsibleTrigger>
<Collapsible.CollapsibleContent className="mt-2">
<div className="rounded-md border border-gray-200 p-4">

9
packages/propel/src/context-menu/context-menu.stories.tsx
View file

@ -1,5 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { Copy, Download, Edit, Share, Trash, ChevronRight, Star, Archive } from "lucide-react";
import { Copy, Download, Edit, Share, Trash, Star, Archive } from "lucide-react";
import { ChevronRightIcon } from "@plane/propel/icons";
import { ContextMenu } from "./context-menu";
// cannot use satisfies here because base-ui does not have portable types.
@ -113,7 +114,7 @@ export const WithSubmenus: Story = {
<ContextMenu.SubmenuTrigger>
<Share className="mr-2 h-4 w-4" />
Share
<ChevronRight className="ml-auto h-4 w-4" />
<ChevronRightIcon className="ml-auto h-4 w-4" />
</ContextMenu.SubmenuTrigger>
<ContextMenu.Portal>
<ContextMenu.Content>
@ -304,7 +305,7 @@ export const NestedSubmenus: Story = {
<ContextMenu.Submenu>
<ContextMenu.SubmenuTrigger>
Import
<ChevronRight className="ml-auto h-4 w-4" />
<ChevronRightIcon className="ml-auto h-4 w-4" />
</ContextMenu.SubmenuTrigger>
<ContextMenu.Portal>
<ContextMenu.Content>
@ -313,7 +314,7 @@ export const NestedSubmenus: Story = {
<ContextMenu.Submenu>
<ContextMenu.SubmenuTrigger>
From Cloud
<ChevronRight className="ml-auto h-4 w-4" />
<ChevronRightIcon className="ml-auto h-4 w-4" />
</ContextMenu.SubmenuTrigger>
<ContextMenu.Portal>
<ContextMenu.Content>

4
packages/propel/src/dialog/dialog.stories.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { X } from "lucide-react";
import { useArgs } from "storybook/preview-api";
import { CloseIcon } from "@plane/propel/icons";
import { Dialog, EDialogWidth } from "./root";
const meta = {
@ -187,7 +187,7 @@ export const WithCloseButton: Story = {
<div className="flex items-start justify-between">
<Dialog.Title>Dialog with Close Button</Dialog.Title>
<button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
<X className="h-4 w-4" />
<CloseIcon className="h-4 w-4" />
</button>
</div>
<div className="mt-4">

13
packages/propel/src/emoji-icon-picker/lucide-icons.tsx
View file

@ -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 LUCIDE_ICONS_LIST = [
{ name: "Activity", element: Activity },
@ -194,10 +191,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 },

13
packages/propel/src/icons/actions/close-icon.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const CloseIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
<path
d="M10.8501 4.18306C11.094 3.93925 11.4898 3.93936 11.7338 4.18306C11.9779 4.42714 11.9779 4.82375 11.7338 5.06782L8.84224 7.95845L11.7338 10.8501C11.9779 11.0941 11.9779 11.4898 11.7338 11.7338C11.4898 11.9779 11.0941 11.9779 10.8501 11.7338L7.95845 8.84224L5.06782 11.7338C4.82375 11.9779 4.42714 11.9779 4.18306 11.7338C3.93936 11.4898 3.93925 11.094 4.18306 10.8501L7.07368 7.95845L4.18306 5.06782C3.93898 4.82375 3.93898 4.42714 4.18306 4.18306C4.42714 3.93898 4.82375 3.93898 5.06782 4.18306L7.95845 7.07368L10.8501 4.18306Z"
fill={color}
/>
</IconWrapper>
);

1
packages/propel/src/icons/actions/index.ts
View file

@ -1 +1,2 @@
export * from "./add-icon";
export * from "./close-icon";

13
packages/propel/src/icons/arrows/chevron-down.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const ChevronDownIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
<path
d="M11.5576 5.55708C11.8016 5.313 12.1983 5.313 12.4423 5.55708C12.6864 5.80116 12.6864 6.19777 12.4423 6.44185L8.44234 10.4418C8.19826 10.6859 7.80165 10.6859 7.55757 10.4418L3.55757 6.44185C3.31349 6.19777 3.31349 5.80116 3.55757 5.55708C3.80165 5.313 4.19826 5.313 4.44234 5.55708L7.99995 9.1147L11.5576 5.55708Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/arrows/chevron-left.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const ChevronLeftIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
<path
d="M9.55757 3.55708C9.80165 3.313 10.1983 3.313 10.4423 3.55708C10.6864 3.80116 10.6864 4.19777 10.4423 4.44185L6.88472 7.99946L10.4423 11.5571C10.6864 11.8012 10.6864 12.1978 10.4423 12.4418C10.1983 12.6859 9.80165 12.6859 9.55757 12.4418L5.55757 8.44185C5.31349 8.19777 5.31349 7.80116 5.55757 7.55708L9.55757 3.55708Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/arrows/chevron-right.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const ChevronRightIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
<path
d="M5.55757 3.55708C5.80165 3.313 6.19826 3.313 6.44234 3.55708L10.4423 7.55708C10.6864 7.80116 10.6864 8.19777 10.4423 8.44185L6.44234 12.4418C6.19826 12.6859 5.80165 12.6859 5.55757 12.4418C5.31349 12.1978 5.31349 11.8012 5.55757 11.5571L9.11519 7.99946L5.55757 4.44185C5.31349 4.19777 5.31349 3.80116 5.55757 3.55708Z"
fill={color}
/>
</IconWrapper>
);

13
packages/propel/src/icons/arrows/chevron-up.tsx Normal file
View file

@ -0,0 +1,13 @@
import * as React from "react";
import { IconWrapper } from "../icon-wrapper";
import { ISvgIcons } from "../type";
export const ChevronUpIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
<IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
<path
d="M7.6562 5.47785C7.89877 5.3179 8.22886 5.34445 8.44234 5.55793L12.4423 9.55793C12.6864 9.80201 12.6864 10.1986 12.4423 10.4427C12.1983 10.6868 11.8016 10.6868 11.5576 10.4427L7.99995 6.88508L4.44234 10.4427C4.19826 10.6868 3.80165 10.6868 3.55757 10.4427C3.31349 10.1986 3.31349 9.80201 3.55757 9.55793L7.55757 5.55793L7.6562 5.47785Z"
fill={color}
/>
</IconWrapper>
);

4
packages/propel/src/icons/arrows/index.ts Normal file
View file

@ -0,0 +1,4 @@
export * from "./chevron-down";
export * from "./chevron-left";
export * from "./chevron-right";
export * from "./chevron-up";

12
packages/propel/src/icons/constants.tsx
View file

@ -1,5 +1,15 @@
import { Icon } from "./icon";
export const ActionsIconsMap = [{ icon: <Icon name="action.add" />, title: "AddIcon" }];
export const ActionsIconsMap = [
{ icon: <Icon name="action.add" />, title: "AddIcon" },
{ icon: <Icon name="action.close" />, title: "CloseIcon" },
];
export const ArrowsIconsMap = [
{ icon: <Icon name="arrow.chevron-down" />, title: "ChevronDownIcon" },
{ icon: <Icon name="arrow.chevron-left" />, title: "ChevronLeftIcon" },
{ icon: <Icon name="arrow.chevron-right" />, title: "ChevronRightIcon" },
{ icon: <Icon name="arrow.chevron-up" />, title: "ChevronUpIcon" },
];
export const WorkspaceIconsMap = [
{ icon: <Icon name="workspace.analytics" />, title: "AnalyticsIcon" },

13
packages/propel/src/icons/icons.stories.tsx
View file

@ -1,6 +1,7 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import {
ActionsIconsMap,
ArrowsIconsMap,
LayoutIconsMap,
ProjectIconsMap,
PropertyIconsMap,
@ -102,6 +103,18 @@ export const AllIcons: Story = {
))}
</div>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold text-custom-text-100">Arrows Icons</h3>
<div className="grid grid-cols-12 gap-6 w-full">
{ArrowsIconsMap.map((item) => (
<div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
<div className="text-custom-text-200">{item.icon}</div>
<p className="text-xs text-custom-text-300 text-center">{item.title}</p>
</div>
))}
</div>
</div>
</div>
),
};

1
packages/propel/src/icons/index.ts
View file

@ -3,6 +3,7 @@ export type { IconName } from "./registry";
export type { IconProps } from "./icon";
export { ICON_REGISTRY } from "./registry";
export * from "./actions";
export * from "./arrows";
export * from "./activity-icon";
export * from "./ai-icon";
export * from "./at-risk-icon";

12
packages/propel/src/icons/registry.ts
View file

@ -1,4 +1,9 @@
import { AddIcon } from "./actions/add-icon";
import { CloseIcon } from "./actions/close-icon";
import { ChevronDownIcon } from "./arrows/chevron-down";
import { ChevronLeftIcon } from "./arrows/chevron-left";
import { ChevronRightIcon } from "./arrows/chevron-right";
import { ChevronUpIcon } from "./arrows/chevron-up";
import { DefaultIcon } from "./default-icon";
import { BoardLayoutIcon } from "./layouts/board-icon";
import { CalendarLayoutIcon } from "./layouts/calendar-icon";
@ -107,6 +112,13 @@ export const ICON_REGISTRY = {
// Action icons
"action.add": AddIcon,
"action.close": CloseIcon,
// Arrow icons
"arrow.chevron-down": ChevronDownIcon,
"arrow.chevron-left": ChevronLeftIcon,
"arrow.chevron-right": ChevronRightIcon,
"arrow.chevron-up": ChevronUpIcon,
// Default fallback
default: DefaultIcon,

7
packages/propel/src/menu/menu.tsx
View file

@ -1,6 +1,7 @@
import * as React from "react";
import { Menu as BaseMenu } from "@base-ui-components/react/menu";
import { ChevronDown, ChevronRight, MoreHorizontal } from "lucide-react";
import { MoreHorizontal } from "lucide-react";
import { ChevronDownIcon, ChevronRightIcon } from "@plane/propel/icons";
import { cn } from "../utils/classname";
import { TMenuProps, TSubMenuProps, TMenuItemProps } from "./types";
@ -24,7 +25,7 @@ const SubMenu: React.FC<TSubMenuProps> = (props) => {
<BaseMenu.SubmenuRoot disabled={disabled}>
<BaseMenu.SubmenuTrigger className={""}>
<span className="flex-1">{trigger}</span>
<ChevronRight />
<ChevronRightIcon />
</BaseMenu.SubmenuTrigger>
<BaseMenu.Portal>
<BaseMenu.Positioner className={""} alignOffset={-4} sideOffset={-4}>
@ -163,7 +164,7 @@ function Menu(props: TMenuProps) {
aria-label={ariaLabel}
>
{label}
{!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
{!noChevron && <ChevronDownIcon className="h-3.5 w-3.5" />}
</BaseMenu.Trigger>
)}
</>

4
packages/propel/src/popover/popover.stories.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { X } from "lucide-react";
import { useArgs } from "storybook/preview-api";
import { CloseIcon } from "@plane/propel/icons";
import { Popover } from "./root";
// cannot use satifies here because base-ui does not have portable types.
@ -70,7 +70,7 @@ export const Controlled: Story = {
<div className="flex items-start justify-between">
<h3 className="text-sm font-semibold">Controlled State</h3>
<button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
<X className="h-4 w-4" />
<CloseIcon className="h-4 w-4" />
</button>
</div>
<p className="mt-2 text-sm text-gray-600">Current state: {open ? "Open" : "Closed"}</p>

7
packages/propel/src/toast/toast.tsx
View file

@ -1,6 +1,7 @@
import * as React from "react";
import { Toast as BaseToast } from "@base-ui-components/react/toast";
import { AlertTriangle, CheckCircle2, X, XCircle } from "lucide-react";
import { AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
import { CloseIcon } from "../icons";
// spinner
import { CircularBarSpinner } from "../spinners/circular-bar-spinner";
import { cn } from "../utils/classname";
@ -164,14 +165,14 @@ const ToastRender = ({ id, toast }: { id: React.Key; toast: BaseToast.Root.Toast
className="absolute top-2 right-2.5 text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
aria-label="Close"
>
<X strokeWidth={1.5} width={14} height={14} />
<CloseIcon strokeWidth={1.5} width={14} height={14} />
</BaseToast.Close>
</div>
</div>
) : (
<>
<BaseToast.Close className="absolute top-2 right-2.5 text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer">
<X strokeWidth={1.5} width={14} height={14} />
<CloseIcon strokeWidth={1.5} width={14} height={14} />
</BaseToast.Close>
<div className="w-full flex flex-col gap-2 p-2">
<div className="flex items-center w-full">

6
packages/ui/src/breadcrumbs/breadcrumbs.tsx
View file

@ -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>
);

13
packages/ui/src/constants/icons.ts
View file

@ -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 },

4
packages/ui/src/dropdowns/context-menu/item.tsx
View file

@ -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>

11
packages/ui/src/dropdowns/custom-menu.tsx
View file

@ -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>

7
packages/ui/src/dropdowns/custom-search-select.tsx
View file

@ -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>

7
packages/ui/src/dropdowns/custom-select.tsx
View file

@ -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>
)}