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
GitHub
parent
92ac28fcb8
commit
2980c2d76b
215 changed files with 932 additions and 729 deletions
|
|
@ -1,4 +1,5 @@
|
|||
import { Copy, GlobeIcon, Link2Off, PencilIcon } from "lucide-react";
|
||||
import { Link2Off } from "lucide-react";
|
||||
import { CopyIcon, GlobeIcon, EditIcon } from "@plane/propel/icons";
|
||||
// components
|
||||
import type { LinkViewProps, LinkViews } from "@/components/links";
|
||||
|
||||
|
|
@ -29,11 +30,11 @@ export function LinkPreview({
|
|||
}}
|
||||
>
|
||||
<div className="shadow-md items-center rounded-sm p-2 flex gap-3 bg-layer-1 border-subtle border-2 text-tertiary text-11">
|
||||
<GlobeIcon size={14} className="inline-block" />
|
||||
<GlobeIcon width={14} height={14} className="inline-block" />
|
||||
<p>{url?.length > 40 ? url.slice(0, 40) + "..." : url}</p>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={copyLinkToClipboard} className="cursor-pointer hover:text-primary transition-colors">
|
||||
<Copy size={14} className="inline-block" />
|
||||
<CopyIcon width={14} height={14} className="inline-block" />
|
||||
</button>
|
||||
{editor.isEditable && (
|
||||
<>
|
||||
|
|
@ -41,7 +42,7 @@ export function LinkPreview({
|
|||
onClick={() => switchView("LinkEditView")}
|
||||
className="cursor-pointer hover:text-primary transition-colors"
|
||||
>
|
||||
<PencilIcon size={14} className="inline-block" />
|
||||
<EditIcon width={14} height={14} className="inline-block" />
|
||||
</button>
|
||||
<button onClick={removeLink} className="cursor-pointer hover:text-primary transition-colors">
|
||||
<Link2Off size={14} className="inline-block" />
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import {
|
|||
} from "@floating-ui/react";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { Copy, Trash2 } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { CopyIcon, TrashIcon } from "@plane/propel/icons";
|
||||
import type { ISvgIcons } from "@plane/propel/icons";
|
||||
import { cn } from "@plane/utils";
|
||||
// constants
|
||||
|
|
@ -144,7 +144,7 @@ export function BlockMenu(props: Props) {
|
|||
|
||||
const MENU_ITEMS: BlockMenuOption[] = [
|
||||
{
|
||||
icon: Trash2,
|
||||
icon: TrashIcon,
|
||||
key: "delete",
|
||||
label: "Delete",
|
||||
onClick: (_e) => {
|
||||
|
|
@ -153,7 +153,7 @@ export function BlockMenu(props: Props) {
|
|||
},
|
||||
},
|
||||
{
|
||||
icon: Copy,
|
||||
icon: CopyIcon,
|
||||
key: "duplicate",
|
||||
label: "Duplicate",
|
||||
isDisabled:
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import type { Editor } from "@tiptap/core";
|
||||
import { Check, Link, Trash2 } from "lucide-react";
|
||||
|
||||
import type { FC } from "react";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { LinkIcon, TrashIcon, CheckIcon } from "@plane/propel/icons";
|
||||
// plane imports
|
||||
import { cn } from "@plane/utils";
|
||||
// constants
|
||||
|
|
@ -58,7 +59,7 @@ export function BubbleMenuLinkSelector(props: Props) {
|
|||
menuButton={
|
||||
<>
|
||||
Link
|
||||
<Link className="shrink-0 size-3" />
|
||||
<LinkIcon className="shrink-0 size-3" />
|
||||
</>
|
||||
}
|
||||
options={options}
|
||||
|
|
@ -96,7 +97,7 @@ export function BubbleMenuLinkSelector(props: Props) {
|
|||
context.onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
<TrashIcon className="size-4" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
|
|
@ -107,7 +108,7 @@ export function BubbleMenuLinkSelector(props: Props) {
|
|||
handleLinkSubmit();
|
||||
}}
|
||||
>
|
||||
<Check className="size-4" />
|
||||
<CheckIcon className="size-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import type { Editor } from "@tiptap/react";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
import type { FC } from "react";
|
||||
import { ChevronDownIcon } from "@plane/propel/icons";
|
||||
import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
|
||||
// plane utils
|
||||
import { cn } from "@plane/utils";
|
||||
// components
|
||||
|
|
@ -96,7 +96,7 @@ export function BubbleMenuNodeSelector(props: Props) {
|
|||
<item.icon className="size-3 flex-shrink-0" />
|
||||
<span>{item.name}</span>
|
||||
</div>
|
||||
{activeItem.name === item.name && <Check className="size-3 text-tertiary flex-shrink-0" />}
|
||||
{activeItem.name === item.name && <CheckIcon className="size-3 text-tertiary flex-shrink-0" />}
|
||||
</button>
|
||||
))}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@ import {
|
|||
MinusSquare,
|
||||
Palette,
|
||||
AlignCenter,
|
||||
LinkIcon,
|
||||
} from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { LinkIcon } from "@plane/propel/icons";
|
||||
// constants
|
||||
import { CORE_EXTENSIONS } from "@/constants/extension";
|
||||
// helpers
|
||||
|
|
@ -50,7 +50,7 @@ import {
|
|||
} from "@/helpers/editor-commands";
|
||||
// types
|
||||
import type { TCommandWithProps, TEditorCommands } from "@/types";
|
||||
|
||||
import type { ISvgIcons } from "@plane/propel/icons";
|
||||
type isActiveFunction<T extends TEditorCommands> = (params?: TCommandWithProps<T>) => boolean;
|
||||
type commandFunction<T extends TEditorCommands> = (params?: TCommandWithProps<T>) => void;
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ export type EditorMenuItem<T extends TEditorCommands> = {
|
|||
key: T;
|
||||
name: string;
|
||||
command: commandFunction<T>;
|
||||
icon: LucideIcon;
|
||||
icon: LucideIcon | React.FC<ISvgIcons>;
|
||||
isActive: isActiveFunction<T>;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@ import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
|
|||
import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
|
||||
import ts from "highlight.js/lib/languages/typescript";
|
||||
import { common, createLowlight } from "lowlight";
|
||||
import { CopyIcon, CheckIcon } from "lucide-react";
|
||||
import { CheckIcon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { CopyIcon } from "@plane/propel/icons";
|
||||
// ui
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
// plane utils
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Download, ExternalLink, Minus, Plus } from "lucide-react";
|
||||
import { Download, Minus } from "lucide-react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { CloseIcon } from "@plane/propel/icons";
|
||||
import { NewTabIcon, PlusIcon, CloseIcon } from "@plane/propel/icons";
|
||||
// plane imports
|
||||
import { cn } from "@plane/utils";
|
||||
|
||||
|
|
@ -262,7 +262,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
|
|||
disabled={magnification >= MAX_ZOOM}
|
||||
aria-label="Zoom in"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
<PlusIcon className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
{!isTouchDevice && (
|
||||
|
|
@ -282,7 +282,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
|
|||
className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
|
||||
aria-label="Open image in new tab"
|
||||
>
|
||||
<ExternalLink className="size-4" />
|
||||
<NewTabIcon className="size-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import type { Editor } from "@tiptap/core";
|
||||
import { TableMap } from "@tiptap/pm/tables";
|
||||
import { ArrowLeft, ArrowRight, Copy, ToggleRight, Trash2 } from "lucide-react";
|
||||
import { ArrowLeft, ArrowRight, ToggleRight } from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
// extensions
|
||||
import type { ISvgIcons } from "@plane/propel/icons";
|
||||
import { CloseIcon } from "@plane/propel/icons";
|
||||
import { CopyIcon, TrashIcon, CloseIcon } from "@plane/propel/icons";
|
||||
import { findTable, getSelectedColumns } from "@/extensions/table/table/utilities/helpers";
|
||||
// local imports
|
||||
import { duplicateColumns } from "../actions";
|
||||
|
|
@ -31,7 +31,7 @@ const DROPDOWN_ITEMS: {
|
|||
{
|
||||
key: "duplicate",
|
||||
label: "Duplicate",
|
||||
icon: Copy,
|
||||
icon: CopyIcon,
|
||||
action: (editor) => {
|
||||
const table = findTable(editor.state.selection);
|
||||
if (!table) return;
|
||||
|
|
@ -52,7 +52,7 @@ const DROPDOWN_ITEMS: {
|
|||
{
|
||||
key: "delete",
|
||||
label: "Delete",
|
||||
icon: Trash2,
|
||||
icon: TrashIcon,
|
||||
action: (editor) => editor.chain().focus().deleteColumn().run(),
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import type { Editor } from "@tiptap/core";
|
||||
import { TableMap } from "@tiptap/pm/tables";
|
||||
import { ArrowDown, ArrowUp, Copy, ToggleRight, Trash2 } from "lucide-react";
|
||||
import { ArrowDown, ArrowUp, ToggleRight } from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
// extensions
|
||||
import type { ISvgIcons } from "@plane/propel/icons";
|
||||
import { CloseIcon } from "@plane/propel/icons";
|
||||
import { CopyIcon, TrashIcon, CloseIcon } from "@plane/propel/icons";
|
||||
import { findTable, getSelectedRows } from "@/extensions/table/table/utilities/helpers";
|
||||
// local imports
|
||||
import { duplicateRows } from "../actions";
|
||||
|
|
@ -31,7 +31,7 @@ const DROPDOWN_ITEMS: {
|
|||
{
|
||||
key: "duplicate",
|
||||
label: "Duplicate",
|
||||
icon: Copy,
|
||||
icon: CopyIcon,
|
||||
action: (editor) => {
|
||||
const table = findTable(editor.state.selection);
|
||||
if (!table) return;
|
||||
|
|
@ -52,7 +52,7 @@ const DROPDOWN_ITEMS: {
|
|||
{
|
||||
key: "delete",
|
||||
label: "Delete",
|
||||
icon: Trash2,
|
||||
icon: TrashIcon,
|
||||
action: (editor) => editor.chain().focus().deleteRow().run(),
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import * as React from "react";
|
||||
import { Accordion as BaseAccordion } from "@base-ui-components/react";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
|
||||
import { PlusIcon } from "../icons";
|
||||
|
||||
export interface AccordionRootProps {
|
||||
defaultValue?: string[];
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { useState } from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { Check, ChevronsUpDown } from "lucide-react";
|
||||
import { ChevronsUpDown } from "lucide-react";
|
||||
import { useArgs } from "storybook/preview-api";
|
||||
import { CheckIcon } from "../icons";
|
||||
import { Combobox } from "./combobox";
|
||||
|
||||
const frameworks = [
|
||||
|
|
@ -48,7 +49,7 @@ const meta = {
|
|||
value={framework.value}
|
||||
className="flex items-center gap-2 px-4 py-2"
|
||||
>
|
||||
{value === framework.value && <Check className="h-4 w-4" />}
|
||||
{value === framework.value && <CheckIcon className="h-4 w-4" />}
|
||||
<span>{framework.label}</span>
|
||||
</Combobox.Option>
|
||||
))}
|
||||
|
|
@ -79,7 +80,7 @@ export const WithoutSearch: Story = {
|
|||
value={framework.value}
|
||||
className="flex items-center gap-2 px-4 py-2"
|
||||
>
|
||||
{value === framework.value && <Check className="h-4 w-4" />}
|
||||
{value === framework.value && <CheckIcon className="h-4 w-4" />}
|
||||
<span>{framework.label}</span>
|
||||
</Combobox.Option>
|
||||
))}
|
||||
|
|
@ -106,7 +107,7 @@ export const MultiSelect: Story = {
|
|||
value={framework.value}
|
||||
className="flex items-center gap-2 px-4 py-2"
|
||||
>
|
||||
{value.includes(framework.value) && <Check className="h-4 w-4" />}
|
||||
{value.includes(framework.value) && <CheckIcon className="h-4 w-4" />}
|
||||
<span>{framework.label}</span>
|
||||
</Combobox.Option>
|
||||
))}
|
||||
|
|
@ -136,7 +137,7 @@ export const MultiSelectWithLimit: Story = {
|
|||
value={framework.value}
|
||||
className="flex items-center gap-2 px-4 py-2"
|
||||
>
|
||||
{value.includes(framework.value) && <Check className="h-4 w-4" />}
|
||||
{value.includes(framework.value) && <CheckIcon className="h-4 w-4" />}
|
||||
<span>{framework.label}</span>
|
||||
</Combobox.Option>
|
||||
))}
|
||||
|
|
@ -165,7 +166,7 @@ export const Disabled: Story = {
|
|||
value={framework.value}
|
||||
className="flex items-center gap-2 px-4 py-2"
|
||||
>
|
||||
{value === framework.value && <Check className="h-4 w-4" />}
|
||||
{value === framework.value && <CheckIcon className="h-4 w-4" />}
|
||||
<span>{framework.label}</span>
|
||||
</Combobox.Option>
|
||||
))}
|
||||
|
|
@ -192,7 +193,7 @@ export const DisabledOptions: Story = {
|
|||
disabled={framework.value === "angular" || framework.value === "svelte"}
|
||||
className="flex items-center gap-2 px-4 py-2"
|
||||
>
|
||||
{value === framework.value && <Check className="h-4 w-4" />}
|
||||
{value === framework.value && <CheckIcon className="h-4 w-4" />}
|
||||
<span>{framework.label}</span>
|
||||
</Combobox.Option>
|
||||
))}
|
||||
|
|
@ -218,7 +219,7 @@ export const CustomMaxHeight: Story = {
|
|||
value={framework.value}
|
||||
className="flex items-center gap-2 px-4 py-2"
|
||||
>
|
||||
{value === framework.value && <Check className="h-4 w-4" />}
|
||||
{value === framework.value && <CheckIcon className="h-4 w-4" />}
|
||||
<span>{framework.label}</span>
|
||||
</Combobox.Option>
|
||||
))}
|
||||
|
|
@ -249,7 +250,7 @@ export const CustomEmptyMessage: Story = {
|
|||
value={framework.value}
|
||||
className="flex items-center gap-2 px-4 py-2"
|
||||
>
|
||||
{value === framework.value && <Check className="h-4 w-4" />}
|
||||
{value === framework.value && <CheckIcon className="h-4 w-4" />}
|
||||
<span>{framework.label}</span>
|
||||
</Combobox.Option>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from "react";
|
||||
import { Combobox as BaseCombobox } from "@base-ui-components/react/combobox";
|
||||
import { Search } from "lucide-react";
|
||||
import { SearchIcon } from "../icons";
|
||||
import { cn } from "../utils/classname";
|
||||
|
||||
// Type definitions
|
||||
|
|
@ -174,7 +174,7 @@ function ComboboxOptions({
|
|||
<div className="flex flex-col gap-1">
|
||||
{showSearch && (
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-placeholder" />
|
||||
<SearchIcon className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-placeholder" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={searchPlaceholder}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from "react";
|
||||
import { Command as CommandPrimitive } from "cmdk";
|
||||
import { SearchIcon } from "lucide-react";
|
||||
import { SearchIcon } from "../icons";
|
||||
import { cn } from "../utils/classname";
|
||||
|
||||
function CommandComponent({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { Copy, Download, Edit, Share, Trash, Star, Archive } from "lucide-react";
|
||||
import { Download, Edit, Share, Star, Archive } from "lucide-react";
|
||||
import { CopyIcon, TrashIcon } from "../icons";
|
||||
import { ChevronRightIcon } from "../icons/arrows/chevron-right";
|
||||
import { ContextMenu } from "./context-menu";
|
||||
|
||||
|
|
@ -63,7 +64,7 @@ export const WithIcons: Story = {
|
|||
<ContextMenu.Portal>
|
||||
<ContextMenu.Content>
|
||||
<ContextMenu.Item>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
<CopyIcon className="mr-2 h-4 w-4" />
|
||||
Copy
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item>
|
||||
|
|
@ -80,7 +81,7 @@ export const WithIcons: Story = {
|
|||
Share
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item>
|
||||
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<span className="text-danger-primary">Delete</span>
|
||||
</ContextMenu.Item>
|
||||
</ContextMenu.Content>
|
||||
|
|
@ -102,7 +103,7 @@ export const WithSubmenus: Story = {
|
|||
<ContextMenu.Portal>
|
||||
<ContextMenu.Content>
|
||||
<ContextMenu.Item>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
<CopyIcon className="mr-2 h-4 w-4" />
|
||||
Copy
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item>
|
||||
|
|
@ -126,7 +127,7 @@ export const WithSubmenus: Story = {
|
|||
</ContextMenu.Submenu>
|
||||
<ContextMenu.Separator />
|
||||
<ContextMenu.Item>
|
||||
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<span className="text-danger-primary">Delete</span>
|
||||
</ContextMenu.Item>
|
||||
</ContextMenu.Content>
|
||||
|
|
@ -148,7 +149,7 @@ export const DisabledItems: Story = {
|
|||
<ContextMenu.Portal>
|
||||
<ContextMenu.Content>
|
||||
<ContextMenu.Item>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
<CopyIcon className="mr-2 h-4 w-4" />
|
||||
Copy
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item disabled>
|
||||
|
|
@ -165,7 +166,7 @@ export const DisabledItems: Story = {
|
|||
Share (Disabled)
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item>
|
||||
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<span className="text-danger-primary">Delete</span>
|
||||
</ContextMenu.Item>
|
||||
</ContextMenu.Content>
|
||||
|
|
@ -199,7 +200,7 @@ export const OnFileCard: Story = {
|
|||
Download
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
<CopyIcon className="mr-2 h-4 w-4" />
|
||||
Copy Link
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item>
|
||||
|
|
@ -212,7 +213,7 @@ export const OnFileCard: Story = {
|
|||
Archive
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item>
|
||||
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<span className="text-danger-primary">Delete</span>
|
||||
</ContextMenu.Item>
|
||||
</ContextMenu.Content>
|
||||
|
|
@ -238,11 +239,11 @@ export const OnImage: Story = {
|
|||
Save Image
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
<CopyIcon className="mr-2 h-4 w-4" />
|
||||
Copy Image
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
<CopyIcon className="mr-2 h-4 w-4" />
|
||||
Copy Image URL
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Separator />
|
||||
|
|
@ -270,7 +271,7 @@ export const OnText: Story = {
|
|||
<ContextMenu.Portal>
|
||||
<ContextMenu.Content>
|
||||
<ContextMenu.Item>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
<CopyIcon className="mr-2 h-4 w-4" />
|
||||
Copy
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item>
|
||||
|
|
@ -327,7 +328,7 @@ export const NestedSubmenus: Story = {
|
|||
</ContextMenu.Submenu>
|
||||
<ContextMenu.Separator />
|
||||
<ContextMenu.Item>
|
||||
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<span className="text-danger-primary">Delete</span>
|
||||
</ContextMenu.Item>
|
||||
</ContextMenu.Content>
|
||||
|
|
@ -349,7 +350,7 @@ export const WithKeyboardShortcuts: Story = {
|
|||
<ContextMenu.Portal>
|
||||
<ContextMenu.Content>
|
||||
<ContextMenu.Item>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
<CopyIcon className="mr-2 h-4 w-4" />
|
||||
Copy
|
||||
<span className="ml-auto text-11 text-placeholder">⌘C</span>
|
||||
</ContextMenu.Item>
|
||||
|
|
@ -365,7 +366,7 @@ export const WithKeyboardShortcuts: Story = {
|
|||
</ContextMenu.Item>
|
||||
<ContextMenu.Separator />
|
||||
<ContextMenu.Item>
|
||||
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
|
||||
<span className="text-danger-primary">Delete</span>
|
||||
<span className="ml-auto text-11 text-placeholder">⌘⌫</span>
|
||||
</ContextMenu.Item>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { InfoIcon, Search } from "lucide-react";
|
||||
import { InfoIcon } from "lucide-react";
|
||||
import { SearchIcon } from "../../icons";
|
||||
import { cn } from "../../utils/classname";
|
||||
import { adjustColorForContrast, DEFAULT_COLORS } from "../helper";
|
||||
import { LucideIconsList } from "./lucide-root";
|
||||
|
|
@ -42,7 +43,7 @@ export function IconRoot(props: IconRootProps) {
|
|||
onFocus={() => setIsInputFocused(true)}
|
||||
onBlur={() => setIsInputFocused(false)}
|
||||
>
|
||||
<Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-placeholder" />
|
||||
<SearchIcon className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-placeholder" />
|
||||
|
||||
<input
|
||||
placeholder="Search"
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ import {
|
|||
LogIn,
|
||||
LogOut,
|
||||
Mail,
|
||||
Map,
|
||||
Map as MapIcon,
|
||||
MapPin,
|
||||
Maximize,
|
||||
Maximize2,
|
||||
|
|
@ -293,7 +293,7 @@ export const LUCIDE_ICONS_LIST = [
|
|||
{ name: "LogIn", element: LogIn },
|
||||
{ name: "LogOut", element: LogOut },
|
||||
{ name: "Mail", element: Mail },
|
||||
{ name: "Map", element: Map },
|
||||
{ name: "Map", element: MapIcon },
|
||||
{ name: "MapPin", element: MapPin },
|
||||
{ name: "Maximize", element: Maximize },
|
||||
{ name: "Maximize2", element: Maximize2 },
|
||||
|
|
|
|||
13
packages/propel/src/icons/actions/check-icon.tsx
Normal file
13
packages/propel/src/icons/actions/check-icon.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import * as React from "react";
|
||||
|
||||
import { IconWrapper } from "../icon-wrapper";
|
||||
import type { ISvgIcons } from "../type";
|
||||
|
||||
export const CheckIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
|
||||
<IconWrapper color={color} {...rest}>
|
||||
<path
|
||||
d="M12.9746 3.78242C13.2185 3.53862 13.6143 3.53873 13.8584 3.78242C14.1024 4.0265 14.1024 4.42311 13.8584 4.66719L6.52534 12.0002C6.28132 12.2442 5.88565 12.2441 5.64155 12.0002L2.30757 8.66719C2.06349 8.42311 2.06349 8.0265 2.30757 7.78242C2.55165 7.53835 2.94826 7.53835 3.19234 7.78242L6.08296 10.674L12.9746 3.78242Z"
|
||||
fill={color}
|
||||
/>
|
||||
</IconWrapper>
|
||||
);
|
||||
13
packages/propel/src/icons/actions/copy-icon.tsx
Normal file
13
packages/propel/src/icons/actions/copy-icon.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import * as React from "react";
|
||||
|
||||
import { IconWrapper } from "../icon-wrapper";
|
||||
import type { ISvgIcons } from "../type";
|
||||
|
||||
export const CopyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
|
||||
<IconWrapper color={color} {...rest}>
|
||||
<path
|
||||
d="M12.8751 8.13965C12.8751 7.73983 12.8748 7.46942 12.8614 7.26075C12.8483 7.05591 12.8244 6.95774 12.7999 6.89649C12.735 6.73455 12.6426 6.63099 12.5597 6.57715C12.5561 6.57481 12.528 6.55459 12.3976 6.54102C12.254 6.52612 12.0611 6.52539 11.7403 6.52539H8.11045C7.78934 6.52539 7.5959 6.52608 7.45225 6.54102C7.32361 6.5544 7.29534 6.57436 7.29112 6.57715C7.20815 6.63096 7.11485 6.73431 7.04991 6.89649C7.02538 6.95774 7.00153 7.05591 6.98838 7.26075C6.975 7.46942 6.97471 7.73985 6.97471 8.13965V12.7598C6.97471 13.1599 6.97498 13.4309 6.98838 13.6397C7.0015 13.8439 7.02545 13.9417 7.04991 14.0029C7.11485 14.1652 7.20813 14.2694 7.29112 14.3232C7.29593 14.3264 7.32527 14.3462 7.45225 14.3594C7.5959 14.3743 7.78934 14.375 8.11045 14.375H11.7403C12.061 14.375 12.254 14.3743 12.3976 14.3594C12.528 14.3458 12.5561 14.3256 12.5597 14.3232C12.6426 14.2694 12.735 14.1651 12.7999 14.0029C12.8244 13.9417 12.8483 13.844 12.8614 13.6397C12.8748 13.4309 12.8751 13.1599 12.8751 12.7598V8.13965ZM9.02549 3.09961C9.02549 2.39729 9.01698 2.19651 8.97178 2.05762C8.90057 1.8389 8.77938 1.71171 8.67979 1.65918C8.67912 1.65883 8.67283 1.6557 8.65538 1.65137C8.63581 1.64655 8.60298 1.64052 8.54795 1.63574C8.42783 1.62531 8.26723 1.625 8.0001 1.625H4.25987C3.93918 1.625 3.74622 1.62573 3.60264 1.64063C3.47216 1.6542 3.44414 1.67442 3.44053 1.67676C3.35757 1.73059 3.26522 1.8349 3.2003 1.99707C3.17582 2.05833 3.1519 2.15596 3.13877 2.36035C3.12537 2.56912 3.1251 2.84008 3.1251 3.24024V8C3.1251 8.70196 3.13274 8.90309 3.17784 9.042C3.24905 9.26082 3.37119 9.38792 3.4708 9.44043C3.47181 9.44097 3.4776 9.44411 3.49424 9.44825C3.51376 9.45308 3.5472 9.45906 3.60264 9.46387C3.72273 9.47427 3.88361 9.47461 4.15049 9.47461C4.49536 9.47482 4.77528 9.75474 4.77549 10.0996C4.77549 10.4447 4.49549 10.7244 4.15049 10.7246C3.90511 10.7246 3.68091 10.7252 3.49424 10.709C3.29805 10.692 3.0914 10.6532 2.8878 10.5459C2.4484 10.3142 2.14142 9.89594 1.98936 9.42871C1.86727 9.05317 1.8751 8.60175 1.8751 8V3.24024C1.8751 2.85632 1.87513 2.53842 1.8917 2.28028C1.90853 2.01827 1.94479 1.7704 2.04014 1.53223C2.18612 1.16761 2.42988 0.842556 2.76084 0.627932C2.99239 0.477856 3.23654 0.422046 3.47276 0.397464C3.6959 0.37426 3.96501 0.375002 4.25987 0.375003H8.0001C8.24551 0.375003 8.46967 0.374417 8.65635 0.390628C8.85246 0.407678 9.0593 0.446434 9.2628 0.553714C9.7021 0.785394 10.0082 1.20375 10.1603 1.6709C10.2825 2.04646 10.2755 2.49781 10.2755 3.09961C10.2755 3.44466 9.99549 3.7244 9.65049 3.72461C9.30531 3.72461 9.02549 3.44479 9.02549 3.09961ZM14.1251 12.7598C14.1251 13.1437 14.1251 13.4616 14.1085 13.7197C14.0917 13.9817 14.0554 14.2296 13.9601 14.4678C13.8141 14.8324 13.5703 15.1574 13.2394 15.3721C13.0078 15.5221 12.7637 15.578 12.5274 15.6025C12.3043 15.6257 12.0352 15.625 11.7403 15.625H8.11045C7.81566 15.625 7.54647 15.6257 7.32334 15.6025C7.08697 15.578 6.84215 15.5223 6.61045 15.3721C6.27949 15.1574 6.03573 14.8324 5.88975 14.4678C5.79443 14.2296 5.75814 13.9817 5.74131 13.7197C5.72474 13.4616 5.72471 13.1437 5.72471 12.7598V8.13965C5.72471 7.756 5.72476 7.43869 5.74131 7.18067C5.75814 6.91859 5.79438 6.66987 5.88975 6.43164C6.03572 6.06725 6.2797 5.74288 6.61045 5.52832C6.84215 5.37807 7.08697 5.32243 7.32334 5.29785C7.54648 5.27468 7.81565 5.27539 8.11045 5.27539H11.7403C12.0352 5.27539 12.3043 5.27465 12.5274 5.29785C12.7637 5.32245 13.0078 5.37817 13.2394 5.52832C13.5702 5.74285 13.8141 6.06723 13.9601 6.43164C14.0554 6.66987 14.0917 6.91859 14.1085 7.18067C14.1251 7.43869 14.1251 7.75599 14.1251 8.13965V12.7598Z"
|
||||
fill={color}
|
||||
/>
|
||||
</IconWrapper>
|
||||
);
|
||||
16
packages/propel/src/icons/actions/edit-icon.tsx
Normal file
16
packages/propel/src/icons/actions/edit-icon.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import * as React from "react";
|
||||
|
||||
import { IconWrapper } from "../icon-wrapper";
|
||||
import type { ISvgIcons } from "../type";
|
||||
|
||||
export const EditIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
|
||||
const clipPathId = React.useId();
|
||||
return (
|
||||
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
|
||||
<path
|
||||
d="M10.7494 1.63573C11.7299 0.655278 13.3197 0.655278 14.3002 1.63573C15.2806 2.61619 15.2807 4.20607 14.3002 5.18651L5.49553 13.9902C5.31697 14.1688 5.16873 14.3209 4.99065 14.4385C4.84347 14.5355 4.68368 14.6127 4.51604 14.667C4.31301 14.7326 4.10085 14.7533 3.85002 14.7812L1.59416 15.0322C1.40546 15.0532 1.2167 14.9868 1.08244 14.8525C0.948476 14.7183 0.882789 14.5303 0.903733 14.3418L1.15471 12.0859C1.18258 11.8351 1.2032 11.6231 1.26897 11.4199C1.3233 11.2521 1.39958 11.0924 1.49651 10.9453C1.61409 10.7669 1.76748 10.6187 1.94573 10.4404L10.7494 1.63573ZM2.82951 11.3242C2.61594 11.5378 2.57192 11.5851 2.54045 11.6328C2.50525 11.6862 2.47707 11.7441 2.45744 11.8047C2.43982 11.8591 2.43027 11.9232 2.3969 12.2236L2.23186 13.7031L3.71233 13.539C3.86263 13.5223 3.95375 13.5118 4.01408 13.5029L4.13127 13.4775C4.19171 13.4579 4.24916 13.4304 4.30217 13.3955C4.35014 13.3638 4.39813 13.32 4.61174 13.1064L10.974 6.74413L9.19084 4.96092L2.82951 11.3242ZM13.4164 2.51952C12.9241 2.02721 12.1255 2.02721 11.6332 2.51952L10.0746 4.07713L11.8578 5.86034L13.4164 4.30272C13.9087 3.81043 13.9087 3.01182 13.4164 2.51952Z"
|
||||
fill={color}
|
||||
/>
|
||||
</IconWrapper>
|
||||
);
|
||||
};
|
||||
16
packages/propel/src/icons/actions/globe-icon.tsx
Normal file
16
packages/propel/src/icons/actions/globe-icon.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import * as React from "react";
|
||||
|
||||
import { IconWrapper } from "../icon-wrapper";
|
||||
import type { ISvgIcons } from "../type";
|
||||
|
||||
export const GlobeIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
|
||||
const clipPathId = React.useId();
|
||||
return (
|
||||
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
|
||||
<path
|
||||
d="M8.00195 0.709961C12.0288 0.710137 15.293 3.97498 15.293 8.00195C15.2928 12.0287 12.0287 15.2928 8.00195 15.293C3.97498 15.293 0.710137 12.0288 0.709961 8.00195C0.709961 3.97488 3.97488 0.709961 8.00195 0.709961ZM1.99219 8.62695C2.25614 11.1937 4.12706 13.2827 6.58203 13.874C5.52513 12.3194 4.88848 10.5118 4.74219 8.62695H1.99219ZM11.2607 8.62695C11.1145 10.5117 10.4787 12.3194 9.42188 13.874C11.8765 13.2825 13.7468 11.1935 14.0107 8.62695H11.2607ZM5.99609 8.62695C6.15854 10.4767 6.85546 12.2382 8.00098 13.6982C9.14679 12.2381 9.84438 10.4769 10.0068 8.62695H5.99609ZM9.42188 2.12891C10.4789 3.68372 11.1146 5.49193 11.2607 7.37695H14.0107C13.747 4.81011 11.8768 2.72047 9.42188 2.12891ZM8.00098 2.30469C6.85524 3.7649 6.15844 5.5269 5.99609 7.37695H10.0068C9.84448 5.52664 9.14701 3.76502 8.00098 2.30469ZM6.58105 2.12891C4.12629 2.72057 2.25586 4.81019 1.99219 7.37695H4.74219C4.88837 5.49198 5.52413 3.6837 6.58105 2.12891Z"
|
||||
fill={color}
|
||||
/>
|
||||
</IconWrapper>
|
||||
);
|
||||
};
|
||||
|
|
@ -2,10 +2,19 @@ export * from "./add-circle-icon";
|
|||
export * from "./add-icon";
|
||||
export * from "./add-workitem-icon";
|
||||
export * from "./add-reaction-icon";
|
||||
export * from "./check-icon";
|
||||
export * from "./close-icon";
|
||||
export * from "./filter-icon";
|
||||
export * from "./filter-applied-icon";
|
||||
export * from "./copy-icon";
|
||||
export * from "./edit-icon";
|
||||
export * from "./globe-icon";
|
||||
export * from "./link-icon";
|
||||
export * from "./lock-icon";
|
||||
export * from "./new-tab-icon";
|
||||
export * from "./search-icon";
|
||||
export * from "./plus-icon";
|
||||
export * from "./preferences-icon";
|
||||
export * from "./copy-link";
|
||||
export * from "./upgrade-icon";
|
||||
export * from "./trash-icon";
|
||||
|
|
|
|||
13
packages/propel/src/icons/actions/link-icon.tsx
Normal file
13
packages/propel/src/icons/actions/link-icon.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import * as React from "react";
|
||||
|
||||
import { IconWrapper } from "../icon-wrapper";
|
||||
import type { ISvgIcons } from "../type";
|
||||
|
||||
export const LinkIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
|
||||
<IconWrapper color={color} {...rest}>
|
||||
<path
|
||||
d="M3.30277 7.07328C3.54686 6.8296 3.94261 6.82939 4.18656 7.07328C4.43064 7.31736 4.43064 7.71397 4.18656 7.95805L3.2432 8.90043C2.18575 9.95806 2.18572 11.6729 3.2432 12.7305C4.30081 13.7882 6.01563 13.788 7.07328 12.7305L8.01664 11.7881C8.26073 11.5441 8.65636 11.544 8.90043 11.7881C9.14426 12.0322 9.14443 12.4279 8.90043 12.6719L7.95707 13.6143C6.41125 15.16 3.90517 15.1601 2.35941 13.6143C0.813772 12.0685 0.813807 9.56242 2.35941 8.01664L3.30277 7.07328ZM9.87797 5.21195C10.122 4.96788 10.5187 4.96787 10.7627 5.21195C11.0064 5.45601 11.0066 5.85177 10.7627 6.09574L6.09574 10.7618C5.85166 11.0058 5.45603 11.0058 5.21195 10.7618C4.96799 10.5177 4.96791 10.122 5.21195 9.87797L9.87797 5.21195ZM8.01664 2.35941C9.56242 0.813804 12.0685 0.813775 13.6143 2.35941C15.16 3.90517 15.1599 6.41121 13.6143 7.95707L12.6719 8.90043C12.4279 9.14442 12.0322 9.14425 11.7881 8.90043C11.544 8.65635 11.544 8.26072 11.7881 8.01664L12.7305 7.07328C13.788 6.01556 13.7881 4.3008 12.7305 3.2432C11.6729 2.18572 9.95805 2.18575 8.90043 3.2432L7.95707 4.18656C7.71296 4.4303 7.31724 4.43053 7.07328 4.18656C6.82935 3.94259 6.82956 3.54686 7.07328 3.30277L8.01664 2.35941Z"
|
||||
fill={color}
|
||||
/>
|
||||
</IconWrapper>
|
||||
);
|
||||
13
packages/propel/src/icons/actions/lock-icon.tsx
Normal file
13
packages/propel/src/icons/actions/lock-icon.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import * as React from "react";
|
||||
|
||||
import { IconWrapper } from "../icon-wrapper";
|
||||
import type { ISvgIcons } from "../type";
|
||||
|
||||
export const LockIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
|
||||
<IconWrapper color={color} {...rest}>
|
||||
<path
|
||||
d="M13.3501 10.5078C13.3501 9.9375 13.3494 9.54724 13.3247 9.24512C13.3006 8.95048 13.2573 8.79472 13.2007 8.68359C13.0689 8.42488 12.8578 8.21482 12.5991 8.08301C12.488 8.0264 12.3323 7.98209 12.0376 7.95801C11.7355 7.93334 11.3452 7.93262 10.7749 7.93262H5.17529C4.60506 7.93262 4.21472 7.93334 3.9126 7.95801C3.61782 7.98209 3.46218 8.02641 3.35107 8.08301C3.09235 8.21483 2.88133 8.42488 2.74951 8.68359C2.69292 8.79472 2.64957 8.95048 2.62549 9.24512C2.6008 9.54724 2.6001 9.9375 2.6001 10.5078V10.7744C2.6001 11.3447 2.60082 11.735 2.62549 12.0371C2.64955 12.3316 2.69298 12.4875 2.74951 12.5986C2.88133 12.8573 3.09235 13.0684 3.35107 13.2002C3.46216 13.2567 3.61805 13.3002 3.9126 13.3242C4.21472 13.3489 4.60504 13.3496 5.17529 13.3496H10.7749C11.3452 13.3496 11.7355 13.3489 12.0376 13.3242C12.3321 13.3002 12.488 13.2567 12.5991 13.2002C12.8578 13.0684 13.0689 12.8573 13.2007 12.5986C13.2572 12.4875 13.3006 12.3316 13.3247 12.0371C13.3494 11.735 13.3501 11.3447 13.3501 10.7744V10.5078ZM10.6831 5.30762C10.6829 3.812 9.47075 2.59961 7.9751 2.59961C6.47944 2.59961 5.26727 3.812 5.26709 5.30762V6.68262H10.6831V5.30762ZM11.9331 6.69922C12.0046 6.7028 12.0733 6.70654 12.1392 6.71191C12.5112 6.74231 12.8499 6.80753 13.1665 6.96875C13.6604 7.2204 14.0623 7.62227 14.314 8.11621L14.3696 8.23633C14.4906 8.51833 14.5442 8.81795 14.5708 9.14355C14.6006 9.50836 14.6001 9.95818 14.6001 10.5078V10.7744C14.6001 11.3239 14.6006 11.7739 14.5708 12.1387C14.5404 12.5107 14.4752 12.8494 14.314 13.166C14.0623 13.66 13.6605 14.0618 13.1665 14.3135C12.8499 14.4747 12.5112 14.5399 12.1392 14.5703C11.7744 14.6001 11.3244 14.5996 10.7749 14.5996H5.17529C4.62577 14.5996 4.17582 14.6001 3.81104 14.5703C3.43898 14.5399 3.10032 14.4748 2.78369 14.3135C2.28977 14.0618 1.88791 13.66 1.63623 13.166C1.47496 12.8494 1.40979 12.5107 1.3794 12.1387C1.34962 11.7739 1.3501 11.3239 1.3501 10.7744V10.5078C1.3501 9.95817 1.3496 9.50836 1.3794 9.14355C1.4098 8.7714 1.47488 8.43292 1.63623 8.11621L1.73779 7.93555C1.99002 7.52435 2.35152 7.18894 2.78369 6.96875C3.10029 6.80752 3.43903 6.74231 3.81104 6.71191C3.87691 6.70654 3.94559 6.7028 4.01709 6.69922V5.30762C4.01727 3.12164 5.78908 1.34961 7.9751 1.34961C10.1611 1.34961 11.9329 3.12164 11.9331 5.30762V6.69922Z"
|
||||
fill={color}
|
||||
/>
|
||||
</IconWrapper>
|
||||
);
|
||||
13
packages/propel/src/icons/actions/new-tab-icon.tsx
Normal file
13
packages/propel/src/icons/actions/new-tab-icon.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import * as React from "react";
|
||||
|
||||
import { IconWrapper } from "../icon-wrapper";
|
||||
import type { ISvgIcons } from "../type";
|
||||
|
||||
export const NewTabIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
|
||||
<IconWrapper color={color} {...rest}>
|
||||
<path
|
||||
d="M1.3501 10.7744V6.50781C1.3501 5.95818 1.3496 5.50837 1.3794 5.14355C1.4098 4.7714 1.47486 4.43291 1.63623 4.11621C1.8879 3.62229 2.28977 3.22041 2.78369 2.96875C3.10029 2.80752 3.43903 2.74231 3.81104 2.71191C4.17581 2.68214 4.62578 2.68262 5.17529 2.68262H6.64209C6.98701 2.68279 7.26691 2.9627 7.26709 3.30762C7.26709 3.65269 6.98712 3.93244 6.64209 3.93262H5.17529C4.60506 3.93262 4.21472 3.93334 3.9126 3.95801C3.61782 3.98209 3.46219 4.02641 3.35107 4.08301C3.09235 4.21483 2.88134 4.42487 2.74951 4.68359C2.69293 4.79469 2.64958 4.95043 2.62549 5.24512C2.6008 5.54724 2.6001 5.93752 2.6001 6.50781V10.7744C2.6001 11.3447 2.60082 11.735 2.62549 12.0371C2.64955 12.3316 2.69298 12.4875 2.74951 12.5986C2.88133 12.8573 3.09235 13.0684 3.35107 13.2002C3.46216 13.2567 3.61805 13.3002 3.9126 13.3242C4.21472 13.3489 4.60504 13.3496 5.17529 13.3496H9.4419C10.0122 13.3496 10.4025 13.3489 10.7046 13.3242C10.9992 13.3001 11.155 13.2568 11.2661 13.2002C11.5248 13.0684 11.7349 12.8573 11.8667 12.5986C11.9233 12.4875 11.9676 12.3318 11.9917 12.0371C12.0164 11.735 12.0171 11.3447 12.0171 10.7744V9.30762C12.0173 8.96259 12.297 8.68262 12.6421 8.68262C12.987 8.68279 13.2669 8.9627 13.2671 9.30762V10.7744C13.2671 11.3239 13.2676 11.7739 13.2378 12.1387C13.2074 12.5107 13.1422 12.8494 12.981 13.166C12.7608 13.5982 12.4253 13.9597 12.0142 14.2119L11.8335 14.3135C11.5168 14.4748 11.1783 14.5399 10.8062 14.5703C10.4413 14.6001 9.99153 14.5996 9.4419 14.5996H5.17529C4.62577 14.5996 4.17582 14.6001 3.81104 14.5703C3.43898 14.5399 3.10032 14.4748 2.78369 14.3135C2.28977 14.0618 1.88791 13.66 1.63623 13.166C1.47496 12.8494 1.40979 12.5107 1.3794 12.1387C1.34962 11.7739 1.3501 11.3239 1.3501 10.7744ZM14.6001 5.97461C14.6001 6.31979 14.3203 6.59961 13.9751 6.59961C13.6299 6.59961 13.3501 6.31979 13.3501 5.97461V3.4834L9.0835 7.75C8.83941 7.99391 8.44373 7.99402 8.19971 7.75C7.95568 7.50598 7.95579 7.1103 8.19971 6.86621L12.4653 2.59961H9.9751C9.62992 2.59961 9.3501 2.31979 9.3501 1.97461C9.3501 1.62943 9.62992 1.34961 9.9751 1.34961H13.9751C14.3203 1.34961 14.6001 1.62943 14.6001 1.97461V5.97461Z"
|
||||
fill={color}
|
||||
/>
|
||||
</IconWrapper>
|
||||
);
|
||||
13
packages/propel/src/icons/actions/plus-icon.tsx
Normal file
13
packages/propel/src/icons/actions/plus-icon.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import * as React from "react";
|
||||
|
||||
import { IconWrapper } from "../icon-wrapper";
|
||||
import type { ISvgIcons } from "../type";
|
||||
|
||||
export const PlusIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
|
||||
<IconWrapper color={color} {...rest}>
|
||||
<path
|
||||
d="M7.37549 12.666V8.625H3.3335C2.98843 8.625 2.70867 8.34503 2.7085 8C2.7085 7.65482 2.98832 7.375 3.3335 7.375H7.37549V3.33301C7.37549 2.98783 7.65531 2.70801 8.00049 2.70801C8.34552 2.70818 8.62549 2.98794 8.62549 3.33301V7.375H12.6665C13.0117 7.375 13.2915 7.65482 13.2915 8C13.2913 8.34503 13.0116 8.625 12.6665 8.625H8.62549V12.666C8.62549 13.0111 8.34552 13.2908 8.00049 13.291C7.65531 13.291 7.37549 13.0112 7.37549 12.666Z"
|
||||
fill={color}
|
||||
/>
|
||||
</IconWrapper>
|
||||
);
|
||||
13
packages/propel/src/icons/actions/trash-icon.tsx
Normal file
13
packages/propel/src/icons/actions/trash-icon.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import * as React from "react";
|
||||
|
||||
import { IconWrapper } from "../icon-wrapper";
|
||||
import type { ISvgIcons } from "../type";
|
||||
|
||||
export const TrashIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
|
||||
<IconWrapper color={color} {...rest}>
|
||||
<path
|
||||
d="M13.9751 3.40039C14.3203 3.40039 14.6001 3.68021 14.6001 4.02539C14.6001 4.37057 14.3203 4.65039 13.9751 4.65039H13.2261L12.7974 11.0801C12.763 11.596 12.7354 12.0193 12.6851 12.3623C12.6336 12.713 12.553 13.0307 12.3853 13.3252C12.1227 13.7861 11.7258 14.1564 11.2485 14.3877C10.9437 14.5354 10.6222 14.595 10.269 14.623C9.92331 14.6505 9.49827 14.6504 8.98096 14.6504H6.96924C6.45193 14.6504 6.02688 14.6505 5.68115 14.623C5.32804 14.595 5.00647 14.5354 4.70166 14.3877C4.22433 14.1564 3.82754 13.7861 3.56494 13.3252C3.39718 13.0307 3.31662 12.713 3.26514 12.3623C3.21479 12.0193 3.18625 11.596 3.15186 11.0801L2.72412 4.65039H1.9751C1.62992 4.65039 1.3501 4.37057 1.3501 4.02539C1.3501 3.68021 1.62992 3.40039 1.9751 3.40039H13.9751ZM4.3999 10.9971C4.4356 11.5326 4.46 11.8981 4.50146 12.1807C4.54186 12.4558 4.59237 12.6016 4.65186 12.7061C4.78941 12.9474 4.99659 13.1415 5.24658 13.2627C5.35474 13.3151 5.50355 13.3549 5.78076 13.377C6.06553 13.3995 6.43224 13.4004 6.96924 13.4004H8.98096C9.51795 13.4004 9.88467 13.3995 10.1694 13.377C10.4466 13.355 10.5955 13.3151 10.7036 13.2627C10.9536 13.1415 11.1608 12.9474 11.2983 12.7061C11.3578 12.6017 11.4083 12.4558 11.4487 12.1807C11.4902 11.8981 11.5146 11.5326 11.5503 10.9971L11.9731 4.65039H3.97705L4.3999 10.9971ZM6.01709 10.3584V7.02539C6.01709 6.68021 6.29691 6.40039 6.64209 6.40039C6.98712 6.40057 7.26709 6.68032 7.26709 7.02539V10.3584C7.26709 10.7035 6.98712 10.9832 6.64209 10.9834C6.29691 10.9834 6.01709 10.7036 6.01709 10.3584ZM8.68311 10.3584V7.02539C8.68311 6.68032 8.96308 6.40057 9.30811 6.40039C9.65328 6.40039 9.93311 6.68021 9.93311 7.02539V10.3584C9.93311 10.7036 9.65328 10.9834 9.30811 10.9834C8.96308 10.9832 8.68311 10.7035 8.68311 10.3584ZM9.9751 1.40039C10.3203 1.40039 10.6001 1.68021 10.6001 2.02539C10.6001 2.37057 10.3203 2.65039 9.9751 2.65039H5.9751C5.62992 2.65039 5.3501 2.37057 5.3501 2.02539C5.3501 1.68021 5.62992 1.40039 5.9751 1.40039H9.9751Z"
|
||||
fill={color}
|
||||
/>
|
||||
</IconWrapper>
|
||||
);
|
||||
|
|
@ -3,11 +3,20 @@ export const ActionsIconsMap = [
|
|||
{ icon: <Icon name="action.add" />, title: "AddIcon" },
|
||||
{ icon: <Icon name="action.add-workitem" />, title: "AddWorkItemIcon" },
|
||||
{ icon: <Icon name="action.add-reaction" />, title: "AddReactionIcon" },
|
||||
{ icon: <Icon name="action.check" />, title: "CheckIcon" },
|
||||
{ icon: <Icon name="action.close" />, title: "CloseIcon" },
|
||||
{ icon: <Icon name="action.copy" />, title: "CopyIcon" },
|
||||
{ icon: <Icon name="action.edit" />, title: "EditIcon" },
|
||||
{ icon: <Icon name="action.globe" />, title: "GlobeIcon" },
|
||||
{ icon: <Icon name="action.link" />, title: "LinkIcon" },
|
||||
{ icon: <Icon name="action.lock" />, title: "LockIcon" },
|
||||
{ icon: <Icon name="action.new-tab" />, title: "NewTabIcon" },
|
||||
{ icon: <Icon name="action.filter" />, title: "FilterIcon" },
|
||||
{ icon: <Icon name="action.filter-applied" />, title: "FilterAppliedIcon" },
|
||||
{ icon: <Icon name="action.search" />, title: "SearchIcon" },
|
||||
{ icon: <Icon name="action.plus" />, title: "PlusIcon" },
|
||||
{ icon: <Icon name="action.preferences" />, title: "PreferencesIcon" },
|
||||
{ icon: <Icon name="action.trash" />, title: "TrashIcon" },
|
||||
{ icon: <Icon name="action.copy-link" />, title: "CopyLinkIcon" },
|
||||
{ icon: <Icon name="action.upgrade" />, title: "UpgradeIcon" },
|
||||
];
|
||||
|
|
@ -81,3 +90,5 @@ export const PropertyIconsMap = [
|
|||
{ icon: <Icon name="property.workflows" />, title: "WorkflowsPropertyIcon" },
|
||||
{ icon: <Icon name="property.label-filled" />, title: "LabelFilledIcon" },
|
||||
];
|
||||
|
||||
export const MiscIconsMap = [{ icon: <Icon name="misc.info" />, title: "InfoIcon" }];
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
ActionsIconsMap,
|
||||
ArrowsIconsMap,
|
||||
LayoutIconsMap,
|
||||
MiscIconsMap,
|
||||
ProjectIconsMap,
|
||||
PropertyIconsMap,
|
||||
SubBrandIconsMap,
|
||||
|
|
@ -115,6 +116,18 @@ export const AllIcons: Story = {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-custom-text-100">Misc Icons</h3>
|
||||
<div className="grid grid-cols-12 gap-6 w-full">
|
||||
{MiscIconsMap.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>
|
||||
),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -32,12 +32,12 @@ export * from "./icon-wrapper";
|
|||
export * from "./icon";
|
||||
export * from "./in-progress-icon";
|
||||
export * from "./info-fill-icon";
|
||||
export * from "./info-icon";
|
||||
export * from "./intake";
|
||||
export * from "./layer-stack";
|
||||
export * from "./layers-icon";
|
||||
export * from "./layouts";
|
||||
export * from "./lead-icon";
|
||||
export * from "./misc";
|
||||
export * from "./module";
|
||||
export * from "./monospace-icon";
|
||||
export * from "./multiple-sticky";
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
import * as React from "react";
|
||||
|
||||
import type { ISvgIcons } from "./type";
|
||||
|
||||
export function InfoIcon({ className = "text-current", ...rest }: ISvgIcons) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className={`${className} stroke-2`}
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...rest}
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 16v-4" />
|
||||
<path d="M12 8h.01" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
1
packages/propel/src/icons/misc/index.ts
Normal file
1
packages/propel/src/icons/misc/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from "./info-icon";
|
||||
17
packages/propel/src/icons/misc/info-icon.tsx
Normal file
17
packages/propel/src/icons/misc/info-icon.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import * as React from "react";
|
||||
|
||||
import { IconWrapper } from "../icon-wrapper";
|
||||
import type { ISvgIcons } from "../type";
|
||||
|
||||
export const InfoIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
|
||||
const clipPathId = React.useId();
|
||||
|
||||
return (
|
||||
<IconWrapper color={color} clipPathId={clipPathId} {...rest}>
|
||||
<path
|
||||
d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM7.375 10.666V8C7.375 7.65482 7.65482 7.375 8 7.375C8.34503 7.37518 8.625 7.65493 8.625 8V10.666C8.625 11.0111 8.34503 11.2908 8 11.291C7.65482 11.291 7.375 11.0112 7.375 10.666ZM8.00586 4.70801C8.35104 4.70801 8.63086 4.98783 8.63086 5.33301C8.63086 5.67819 8.35104 5.95801 8.00586 5.95801H8C7.65482 5.95801 7.375 5.67819 7.375 5.33301C7.375 4.98783 7.65482 4.70801 8 4.70801H8.00586ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
|
||||
fill={color}
|
||||
/>
|
||||
</IconWrapper>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,68 +1,81 @@
|
|||
// Action icons
|
||||
import {
|
||||
AddIcon,
|
||||
AddReactionIcon,
|
||||
AddWorkItemIcon,
|
||||
CheckIcon,
|
||||
CloseIcon,
|
||||
CopyIcon,
|
||||
EditIcon,
|
||||
FilterAppliedIcon,
|
||||
FilterIcon,
|
||||
GlobeIcon,
|
||||
LinkIcon,
|
||||
LockIcon,
|
||||
NewTabIcon,
|
||||
PlusIcon,
|
||||
PreferencesIcon,
|
||||
SearchIcon,
|
||||
TrashIcon,
|
||||
UpgradeIcon,
|
||||
} from "./actions";
|
||||
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 { ReplyIcon } from "./arrows/reply-icon";
|
||||
// Arrow icons
|
||||
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ReplyIcon } from "./arrows";
|
||||
// Default icon
|
||||
import { DefaultIcon } from "./default-icon";
|
||||
import { BoardLayoutIcon } from "./layouts/board-icon";
|
||||
import { CalendarLayoutIcon } from "./layouts/calendar-icon";
|
||||
import { CardLayoutIcon } from "./layouts/card-icon";
|
||||
import { GridLayoutIcon } from "./layouts/grid-icon";
|
||||
import { ListLayoutIcon } from "./layouts/list-icon";
|
||||
import { SheetLayoutIcon } from "./layouts/sheet-icon";
|
||||
import { TimelineLayoutIcon } from "./layouts/timeline-icon";
|
||||
import { CycleIcon } from "./project/cycle-icon";
|
||||
import { EpicIcon } from "./project/epic-icon";
|
||||
import { IntakeIcon } from "./project/intake-icon";
|
||||
import { ModuleIcon } from "./project/module-icon";
|
||||
import { PageIcon } from "./project/page-icon";
|
||||
import { ViewsIcon } from "./project/view-icon";
|
||||
import { WorkItemsIcon } from "./project/work-items-icon";
|
||||
import { BooleanPropertyIcon } from "./properties/boolean-icon";
|
||||
import { DropdownPropertyIcon } from "./properties/dropdown-icon";
|
||||
import { DueDatePropertyIcon } from "./properties/due-date-icon";
|
||||
import { DuplicatePropertyIcon } from "./properties/duplicate-icon";
|
||||
import { EstimatePropertyIcon } from "./properties/estimate-icon";
|
||||
import { HashPropertyIcon } from "./properties/hash-icon";
|
||||
import { LabelPropertyIcon } from "./properties/label-icon";
|
||||
import { MembersPropertyIcon } from "./properties/members-icon";
|
||||
import { OverdueDatePropertyIcon } from "./properties/overdue-date-icon";
|
||||
import { ParentPropertyIcon } from "./properties/parent-icon";
|
||||
import { PriorityPropertyIcon } from "./properties/priority-icon";
|
||||
import { RelatesToPropertyIcon } from "./properties/relates-to-icon";
|
||||
import { RelationPropertyIcon } from "./properties/relation-icon";
|
||||
import { ScopePropertyIcon } from "./properties/scope-icon";
|
||||
import { StartDatePropertyIcon } from "./properties/start-date-icon";
|
||||
import { StatePropertyIcon } from "./properties/state-icon";
|
||||
import { UserCirclePropertyIcon } from "./properties/user-circle-icon";
|
||||
import { UserPropertyIcon } from "./properties/user-icon";
|
||||
import { UserSquarePropertyIcon } from "./properties/user-square-icon";
|
||||
import { WorkflowsPropertyIcon } from "./properties/workflows-icon";
|
||||
// Layout icons
|
||||
import {
|
||||
BoardLayoutIcon,
|
||||
CalendarLayoutIcon,
|
||||
CardLayoutIcon,
|
||||
GridLayoutIcon,
|
||||
ListLayoutIcon,
|
||||
SheetLayoutIcon,
|
||||
TimelineLayoutIcon,
|
||||
} from "./layouts";
|
||||
// Misc icons
|
||||
import { InfoIcon } from "./misc";
|
||||
// Project icons
|
||||
import { CycleIcon, EpicIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "./project";
|
||||
// Property icons
|
||||
import {
|
||||
BooleanPropertyIcon,
|
||||
DropdownPropertyIcon,
|
||||
DueDatePropertyIcon,
|
||||
DuplicatePropertyIcon,
|
||||
EstimatePropertyIcon,
|
||||
HashPropertyIcon,
|
||||
LabelPropertyIcon,
|
||||
MembersPropertyIcon,
|
||||
OverdueDatePropertyIcon,
|
||||
ParentPropertyIcon,
|
||||
PriorityPropertyIcon,
|
||||
RelatesToPropertyIcon,
|
||||
RelationPropertyIcon,
|
||||
ScopePropertyIcon,
|
||||
StartDatePropertyIcon,
|
||||
StatePropertyIcon,
|
||||
UserCirclePropertyIcon,
|
||||
UserPropertyIcon,
|
||||
UserSquarePropertyIcon,
|
||||
WorkflowsPropertyIcon,
|
||||
} from "./properties";
|
||||
// Sub-brand icons
|
||||
import { CopyLinkIcon } from "./actions/copy-link";
|
||||
import { LabelFilledIcon } from "./properties/label-filled-icon";
|
||||
import { PiChatLogo } from "./sub-brand/pi-chat";
|
||||
import { PlaneNewIcon } from "./sub-brand/plane-icon";
|
||||
import { WikiIcon } from "./sub-brand/wiki-icon";
|
||||
import { AnalyticsIcon } from "./workspace/analytics-icon";
|
||||
import { ArchiveIcon } from "./workspace/archive-icon";
|
||||
import { DashboardIcon } from "./workspace/dashboard-icon";
|
||||
import { DraftIcon } from "./workspace/draft-icon";
|
||||
import { HomeIcon } from "./workspace/home-icon";
|
||||
import { InboxIcon } from "./workspace/inbox-icon";
|
||||
import { MultipleStickyIcon } from "./workspace/multiple-sticky-icon";
|
||||
import { ProjectIcon } from "./workspace/project-icon";
|
||||
import { YourWorkIcon } from "./workspace/your-work-icon";
|
||||
import { PiChatLogo, PlaneNewIcon, WikiIcon } from "./sub-brand";
|
||||
// Workspace icons
|
||||
import {
|
||||
AnalyticsIcon,
|
||||
ArchiveIcon,
|
||||
DashboardIcon,
|
||||
DraftIcon,
|
||||
HomeIcon,
|
||||
InboxIcon,
|
||||
MultipleStickyIcon,
|
||||
ProjectIcon,
|
||||
YourWorkIcon,
|
||||
} from "./workspace";
|
||||
|
||||
export const ICON_REGISTRY = {
|
||||
// Sub-brand icons
|
||||
|
|
@ -129,11 +142,20 @@ export const ICON_REGISTRY = {
|
|||
"action.add": AddIcon,
|
||||
"action.add-workitem": AddWorkItemIcon,
|
||||
"action.add-reaction": AddReactionIcon,
|
||||
"action.check": CheckIcon,
|
||||
"action.close": CloseIcon,
|
||||
"action.copy": CopyIcon,
|
||||
"action.edit": EditIcon,
|
||||
"action.globe": GlobeIcon,
|
||||
"action.link": LinkIcon,
|
||||
"action.lock": LockIcon,
|
||||
"action.new-tab": NewTabIcon,
|
||||
"action.filter": FilterIcon,
|
||||
"action.filter-applied": FilterAppliedIcon,
|
||||
"action.search": SearchIcon,
|
||||
"action.plus": PlusIcon,
|
||||
"action.preferences": PreferencesIcon,
|
||||
"action.trash": TrashIcon,
|
||||
"action.copy-link": CopyLinkIcon,
|
||||
"action.upgrade": UpgradeIcon,
|
||||
|
||||
|
|
@ -142,6 +164,9 @@ export const ICON_REGISTRY = {
|
|||
"arrow.chevron-left": ChevronLeftIcon,
|
||||
"arrow.chevron-right": ChevronRightIcon,
|
||||
"arrow.chevron-up": ChevronUpIcon,
|
||||
|
||||
// Misc icons
|
||||
"misc.info": InfoIcon,
|
||||
"arrow.reply": ReplyIcon,
|
||||
|
||||
// Default fallback
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import {
|
|||
Underline,
|
||||
Strikethrough,
|
||||
Code,
|
||||
Link,
|
||||
ListOrdered,
|
||||
Quote,
|
||||
AlignLeft,
|
||||
|
|
@ -13,9 +12,8 @@ import {
|
|||
AlignRight,
|
||||
Undo,
|
||||
Redo,
|
||||
Globe2,
|
||||
Lock,
|
||||
} from "lucide-react";
|
||||
import { LinkIcon, GlobeIcon, LockIcon } from "../icons";
|
||||
import { ListLayoutIcon } from "../icons/layouts/list-icon";
|
||||
import { Toolbar } from "./toolbar";
|
||||
|
||||
|
|
@ -61,7 +59,7 @@ export const Default: Story = {
|
|||
<Toolbar.Item icon={AlignRight} tooltip="Align Right" />
|
||||
</Toolbar.Group>
|
||||
<Toolbar.Group>
|
||||
<Toolbar.Item icon={Link} tooltip="Link" />
|
||||
<Toolbar.Item icon={LinkIcon} tooltip="Link" />
|
||||
<Toolbar.Item icon={Code} tooltip="Code" />
|
||||
</Toolbar.Group>
|
||||
</Toolbar>
|
||||
|
|
@ -106,8 +104,8 @@ export const CommentToolbar: Story = {
|
|||
<Toolbar>
|
||||
{/* Access Specifier */}
|
||||
<div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[0.5px] border-subtle p-1">
|
||||
<Toolbar.Item icon={Lock} tooltip="Private" isActive />
|
||||
<Toolbar.Item icon={Globe2} tooltip="Public" />
|
||||
<Toolbar.Item icon={LockIcon} tooltip="Private" isActive />
|
||||
<Toolbar.Item icon={GlobeIcon} tooltip="Public" />
|
||||
</div>
|
||||
|
||||
<div className="flex w-full items-stretch justify-between gap-2 rounded-sm border-[0.5px] border-subtle p-1">
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ import {
|
|||
Camera,
|
||||
CameraOff,
|
||||
Cast,
|
||||
Check,
|
||||
CheckCircle,
|
||||
CheckSquare,
|
||||
Clipboard,
|
||||
|
|
@ -50,7 +49,6 @@ import {
|
|||
Columns,
|
||||
Command,
|
||||
Compass,
|
||||
Copy,
|
||||
CornerDownLeft,
|
||||
CornerDownRight,
|
||||
CornerLeftDown,
|
||||
|
|
@ -77,7 +75,6 @@ import {
|
|||
Edit,
|
||||
Edit2,
|
||||
Edit3,
|
||||
ExternalLink,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Facebook,
|
||||
|
|
@ -103,7 +100,6 @@ import {
|
|||
GitPullRequest,
|
||||
Github,
|
||||
Gitlab,
|
||||
Globe,
|
||||
Grid,
|
||||
HardDrive,
|
||||
Hash,
|
||||
|
|
@ -121,12 +117,9 @@ import {
|
|||
Layers,
|
||||
Layout,
|
||||
LifeBuoy,
|
||||
Link,
|
||||
Link2,
|
||||
Linkedin,
|
||||
List,
|
||||
Loader,
|
||||
Lock,
|
||||
LogIn,
|
||||
LogOut,
|
||||
Mail,
|
||||
|
|
@ -148,10 +141,21 @@ import {
|
|||
CircleChevronDown,
|
||||
UsersRound,
|
||||
ToggleLeft,
|
||||
Search,
|
||||
User,
|
||||
} from "lucide-react";
|
||||
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "@plane/propel/icons";
|
||||
import {
|
||||
LinkIcon,
|
||||
CopyIcon,
|
||||
GlobeIcon,
|
||||
LockIcon,
|
||||
NewTabIcon,
|
||||
CheckIcon,
|
||||
SearchIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
ChevronUpIcon,
|
||||
} from "@plane/propel/icons";
|
||||
|
||||
export const MATERIAL_ICONS_LIST = [
|
||||
{
|
||||
|
|
@ -794,7 +798,7 @@ export const LUCIDE_ICONS_LIST = [
|
|||
{ name: "CameraOff", element: CameraOff },
|
||||
{ name: "Cast", element: Cast },
|
||||
{ name: "CircleChevronDown", element: CircleChevronDown },
|
||||
{ name: "Check", element: Check },
|
||||
{ name: "Check", element: CheckIcon },
|
||||
{ name: "CheckCircle", element: CheckCircle },
|
||||
{ name: "CheckSquare", element: CheckSquare },
|
||||
{ name: "ChevronDown", element: ChevronDownIcon },
|
||||
|
|
@ -816,7 +820,7 @@ export const LUCIDE_ICONS_LIST = [
|
|||
{ name: "Columns", element: Columns },
|
||||
{ name: "Command", element: Command },
|
||||
{ name: "Compass", element: Compass },
|
||||
{ name: "Copy", element: Copy },
|
||||
{ name: "Copy", element: CopyIcon },
|
||||
{ name: "CornerDownLeft", element: CornerDownLeft },
|
||||
{ name: "CornerDownRight", element: CornerDownRight },
|
||||
{ name: "CornerLeftDown", element: CornerLeftDown },
|
||||
|
|
@ -843,7 +847,7 @@ export const LUCIDE_ICONS_LIST = [
|
|||
{ name: "Edit", element: Edit },
|
||||
{ name: "Edit2", element: Edit2 },
|
||||
{ name: "Edit3", element: Edit3 },
|
||||
{ name: "ExternalLink", element: ExternalLink },
|
||||
{ name: "ExternalLink", element: NewTabIcon },
|
||||
{ name: "Eye", element: Eye },
|
||||
{ name: "EyeOff", element: EyeOff },
|
||||
{ name: "Facebook", element: Facebook },
|
||||
|
|
@ -869,7 +873,7 @@ export const LUCIDE_ICONS_LIST = [
|
|||
{ name: "GitPullRequest", element: GitPullRequest },
|
||||
{ name: "Github", element: Github },
|
||||
{ name: "Gitlab", element: Gitlab },
|
||||
{ name: "Globe", element: Globe },
|
||||
{ name: "Globe", element: GlobeIcon },
|
||||
{ name: "Grid", element: Grid },
|
||||
{ name: "HardDrive", element: HardDrive },
|
||||
{ name: "Hash", element: Hash },
|
||||
|
|
@ -887,12 +891,12 @@ export const LUCIDE_ICONS_LIST = [
|
|||
{ name: "Layers", element: Layers },
|
||||
{ name: "Layout", element: Layout },
|
||||
{ name: "LifeBuoy", element: LifeBuoy },
|
||||
{ name: "Link", element: Link },
|
||||
{ name: "Link2", element: Link2 },
|
||||
{ name: "Link", element: LinkIcon },
|
||||
{ name: "Link2", element: LinkIcon },
|
||||
{ name: "Linkedin", element: Linkedin },
|
||||
{ name: "List", element: List },
|
||||
{ name: "Loader", element: Loader },
|
||||
{ name: "Lock", element: Lock },
|
||||
{ name: "Lock", element: LockIcon },
|
||||
{ name: "LogIn", element: LogIn },
|
||||
{ name: "LogOut", element: LogOut },
|
||||
{ name: "Mail", element: Mail },
|
||||
|
|
@ -911,7 +915,7 @@ export const LUCIDE_ICONS_LIST = [
|
|||
{ name: "Minus", element: Minus },
|
||||
{ name: "MinusCircle", element: MinusCircle },
|
||||
{ name: "MinusSquare", element: MinusSquare },
|
||||
{ name: "Search", element: Search },
|
||||
{ name: "Search", element: SearchIcon },
|
||||
{ name: "ToggleLeft", element: ToggleLeft },
|
||||
{ name: "User", element: User },
|
||||
{ name: "UsersRound", element: UsersRound },
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { Combobox } from "@headlessui/react";
|
||||
import { Search } from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { SearchIcon } from "@plane/propel/icons";
|
||||
// helpers
|
||||
import { cn } from "../../utils";
|
||||
|
||||
|
|
@ -43,7 +42,7 @@ export function InputSearch(props: IInputSearch) {
|
|||
inputContainerClassName
|
||||
)}
|
||||
>
|
||||
{inputIcon ? <>{inputIcon}</> : <Search className="h-4 w-4 text-tertiary" aria-hidden="true" />}
|
||||
{inputIcon ? <>{inputIcon}</> : <SearchIcon className="h-4 w-4 text-tertiary" aria-hidden="true" />}
|
||||
<Combobox.Input
|
||||
as="input"
|
||||
ref={inputRef}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Combobox } from "@headlessui/react";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
import React from "react";
|
||||
import { CheckIcon } from "@plane/propel/icons";
|
||||
// helpers
|
||||
import { cn } from "../../utils";
|
||||
// types
|
||||
|
|
@ -69,7 +70,7 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
|
|||
) : (
|
||||
<>
|
||||
<span className="flex-grow truncate">{option.value}</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" />}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { Combobox } from "@headlessui/react";
|
||||
import { Check, Info, Search } from "lucide-react";
|
||||
import { Info } from "lucide-react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { usePopper } from "react-popper";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
import { ChevronDownIcon } from "@plane/propel/icons";
|
||||
import { CheckIcon, SearchIcon, ChevronDownIcon } from "@plane/propel/icons";
|
||||
// plane imports
|
||||
// local imports
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
|
|
@ -148,7 +148,7 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
|
|||
{...attributes.popper}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 rounded-sm border border-subtle px-2 mx-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
|
||||
className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
|
||||
value={query}
|
||||
|
|
@ -190,7 +190,7 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
|
|||
{({ 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" />}
|
||||
{option.tooltip && (
|
||||
<>
|
||||
{typeof option.tooltip === "string" ? (
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { Combobox } from "@headlessui/react";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
import React, { createContext, useCallback, useContext, useRef, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { usePopper } from "react-popper";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
import { ChevronDownIcon } from "@plane/propel/icons";
|
||||
import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
|
||||
// plane helpers
|
||||
// hooks
|
||||
import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
|
||||
|
|
@ -172,7 +172,7 @@ function Option(props: ICustomSelectItemProps) {
|
|||
{({ selected }) => (
|
||||
<div className="flex items-center justify-between gap-2 w-full">
|
||||
{children}
|
||||
{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>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ import {
|
|||
FileCode,
|
||||
Mail,
|
||||
Chrome,
|
||||
Link2,
|
||||
} from "lucide-react";
|
||||
import { LinkIcon } from "@plane/propel/icons";
|
||||
|
||||
type IconMatcher = {
|
||||
pattern: RegExp;
|
||||
|
|
@ -60,5 +60,5 @@ export const getIconForLink = (url: string) => {
|
|||
const allMatchers = [...SOCIAL_MEDIA_MATCHERS, ...PRODUCTIVITY_MATCHERS, ...FILE_TYPE_MATCHERS, ...OTHER_MATCHERS];
|
||||
|
||||
const matchedIcon = allMatchers.find(({ pattern }) => pattern.test(lowerUrl));
|
||||
return matchedIcon?.icon ?? Link2;
|
||||
return matchedIcon?.icon ?? LinkIcon;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue