From bc2c37b1dde10b3055e1135033e6f0b335b0bade Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Wed, 20 Aug 2025 15:11:56 +0530 Subject: [PATCH 1/6] chore: z-index tokens added --- packages/tailwind-config/tailwind.config.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js index cf6b574aa40..cc8c1139220 100644 --- a/packages/tailwind-config/tailwind.config.js +++ b/packages/tailwind-config/tailwind.config.js @@ -442,6 +442,20 @@ module.exports = { fontFamily: { custom: ["Inter", "sans-serif"], }, + zIndex: { + base: 0 /* default content */, + header: 10 /* sticky headers, navbars */, + sidebar: 20 /* sidebars, drawers */, + dropdown: 30 /* dropdowns, select menus */, + popover: 40 /* popovers, hovercards */, + tooltip: 50 /* tooltips, hints */, + sticky: 60 /* sticky UI */, + backdrop: 90 /* backdrop / overlay */, + modal: 100 /* dialogs, modals */, + toast: 110 /* toast, alerts */, + loader: 120 /* blocking loader/spinner */, + max: 9999 /* emergency override (rare use) */, + }, }, }, plugins: [ From 3f441a289a90b3551606a5b5f8a2ae1ef8b20cbb Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Wed, 20 Aug 2025 15:48:12 +0530 Subject: [PATCH 2/6] chore: dialog component code refactor --- packages/propel/src/dialog/root.tsx | 52 ++++++++++++----------------- 1 file changed, 22 insertions(+), 30 deletions(-) diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx index 9e781a9b45a..1b9adfc9aa4 100644 --- a/packages/propel/src/dialog/root.tsx +++ b/packages/propel/src/dialog/root.tsx @@ -13,10 +13,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps ); @@ -30,35 +27,30 @@ function DialogTrigger({ ...props }: React.ComponentProps; } -function DialogPanel({ - className, - width = EDialogWidth.XXL, - children, - ...props -}: React.ComponentProps & { width?: EDialogWidth }) { - return ( - - - , + React.ComponentProps & { width?: EDialogWidth } +>(({ className, width = EDialogWidth.XXL, children, ...props }, ref) => ( + + + +
-
- {children} -
- - - ); -} + {children} +
+ + +)); function DialogTitle({ className, ...props }: React.ComponentProps) { return ( From cb4eb1699927bf1ce5669805ce357421d5feddde Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Wed, 20 Aug 2025 18:57:36 +0530 Subject: [PATCH 3/6] chore: dialog component improvements --- packages/propel/src/dialog/constants.ts | 17 --- packages/propel/src/dialog/root.tsx | 151 ++++++++++++++++-------- 2 files changed, 99 insertions(+), 69 deletions(-) delete mode 100644 packages/propel/src/dialog/constants.ts diff --git a/packages/propel/src/dialog/constants.ts b/packages/propel/src/dialog/constants.ts deleted file mode 100644 index d08202534ab..00000000000 --- a/packages/propel/src/dialog/constants.ts +++ /dev/null @@ -1,17 +0,0 @@ -export enum EDialogPosition { - TOP = "flex items-center justify-center text-center mx-4 my-10 md:my-20", - CENTER = "flex items-end sm:items-center justify-center p-4 min-h-full", -} - -export enum EDialogWidth { - SM = "sm:max-w-sm", - MD = "sm:max-w-md", - LG = "sm:max-w-lg", - XL = "sm:max-w-xl", - XXL = "sm:max-w-2xl", - XXXL = "sm:max-w-3xl", - XXXXL = "sm:max-w-4xl", - VXL = "sm:max-w-5xl", - VIXL = "sm:max-w-6xl", - VIIXL = "sm:max-w-7xl", -} diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx index 1b9adfc9aa4..36c04d8920a 100644 --- a/packages/propel/src/dialog/root.tsx +++ b/packages/propel/src/dialog/root.tsx @@ -3,67 +3,114 @@ import * as React from "react"; import { Dialog as BaseDialog } from "@base-ui-components/react"; import { cn } from "@plane/utils"; -import { EDialogWidth } from "./constants"; -function DialogPortal({ ...props }: React.ComponentProps) { - return ; +// enums + +export enum EDialogWidth { + SM = "sm:max-w-sm", + MD = "sm:max-w-md", + LG = "sm:max-w-lg", + XL = "sm:max-w-xl", + XXL = "sm:max-w-2xl", + XXXL = "sm:max-w-3xl", + XXXXL = "sm:max-w-4xl", + VXL = "sm:max-w-5xl", + VIXL = "sm:max-w-6xl", + VIIXL = "sm:max-w-7xl", } -function DialogOverlay({ className, ...props }: React.ComponentProps) { - return ( - - ); +// Types +export type DialogPosition = "center" | "top"; + +export interface DialogProps extends React.ComponentProps { + children: React.ReactNode; } -function Dialog({ ...props }: React.ComponentProps) { - return ; +export interface DialogPanelProps extends React.ComponentProps { + width?: EDialogWidth; + position?: DialogPosition; + children: React.ReactNode; } -function DialogTrigger({ ...props }: React.ComponentProps) { - return ; +export interface DialogTitleProps extends React.ComponentProps { + children: React.ReactNode; } -const DialogPanel = React.forwardRef< - React.ElementRef, - React.ComponentProps & { width?: EDialogWidth } ->(({ className, width = EDialogWidth.XXL, children, ...props }, ref) => ( - - - -
- {children} -
- - +// Constants +const OVERLAY_CLASSNAME = cn("fixed inset-0 z-backdrop bg-custom-backdrop"); +const BASE_CLASSNAME = "relative text-left bg-custom-background-100 rounded-lg shadow-md w-full z-modal"; + +// Utility functions +const getPositionClassNames = React.useCallback((position: DialogPosition) => { + return cn("isolate fixed z-modal", { + "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2": position === "center", + "top-8 left-1/2 -translate-x-1/2": position === "top", + }); +}, []); + +const DialogPortal = React.memo>(({ children, ...props }) => ( + + {children} + )); +DialogPortal.displayName = "DialogPortal"; -function DialogTitle({ className, ...props }: React.ComponentProps) { - return ( - - ); -} -// compound components -Dialog.Trigger = DialogTrigger; -Dialog.Panel = DialogPanel; -Dialog.Title = DialogTitle; +const DialogOverlay = React.memo>(({ className, ...props }) => ( + +)); +DialogOverlay.displayName = "DialogOverlay"; + +const DialogComponent = React.memo(({ children, ...props }) => ( + + {children} + +)); +DialogComponent.displayName = "Dialog"; + +const DialogTrigger = React.memo>(({ children, ...props }) => ( + + {children} + +)); +DialogTrigger.displayName = "DialogTrigger"; + +const DialogPanel = React.forwardRef, DialogPanelProps>( + ({ className, width = EDialogWidth.XXL, children, position = "center", ...props }, ref) => { + const positionClassNames = React.useMemo(() => getPositionClassNames(position), [position]); + return ( + + + + {children} + + + ); + } +); +DialogPanel.displayName = "DialogPanel"; + +const DialogTitle = React.memo(({ className, children, ...props }) => ( + + {children} + +)); + +DialogTitle.displayName = "DialogTitle"; + +// Create the compound Dialog component with proper typing +const Dialog = Object.assign(DialogComponent, { + Panel: DialogPanel, + Title: DialogTitle, +}) as typeof DialogComponent & { + Panel: typeof DialogPanel; + Title: typeof DialogTitle; +}; -export { Dialog, DialogTitle, DialogTrigger, DialogPanel }; +export { Dialog, DialogTitle, DialogPanel }; From d66bc5d6beabac61797dd4f349ae2688832f2234 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Wed, 20 Aug 2025 20:55:10 +0530 Subject: [PATCH 4/6] fix: lint error --- packages/propel/src/dialog/root.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx index 36c04d8920a..f981c19fb5c 100644 --- a/packages/propel/src/dialog/root.tsx +++ b/packages/propel/src/dialog/root.tsx @@ -41,12 +41,14 @@ const OVERLAY_CLASSNAME = cn("fixed inset-0 z-backdrop bg-custom-backdrop"); const BASE_CLASSNAME = "relative text-left bg-custom-background-100 rounded-lg shadow-md w-full z-modal"; // Utility functions -const getPositionClassNames = React.useCallback((position: DialogPosition) => { - return cn("isolate fixed z-modal", { - "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2": position === "center", - "top-8 left-1/2 -translate-x-1/2": position === "top", - }); -}, []); +const getPositionClassNames = React.useCallback( + (position: DialogPosition) => + cn("isolate fixed z-modal", { + "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2": position === "center", + "top-8 left-1/2 -translate-x-1/2": position === "top", + }), + [] +); const DialogPortal = React.memo>(({ children, ...props }) => ( From f09347985723fcaa3fefe15ff4123b41a785a4ca Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Wed, 20 Aug 2025 22:02:46 +0530 Subject: [PATCH 5/6] fix: lint error --- packages/propel/src/popover/root.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/propel/src/popover/root.tsx b/packages/propel/src/popover/root.tsx index 15ff23df675..4509b1c40fe 100644 --- a/packages/propel/src/popover/root.tsx +++ b/packages/propel/src/popover/root.tsx @@ -97,9 +97,11 @@ const PopoverPortal = React.memo return ; }); -const PopoverPositioner = React.memo>(function PopoverPositioner(props) { - return ; -}); +const PopoverPositioner = React.memo>( + function PopoverPositioner(props) { + return ; + } +); // compound components const Popover = Object.assign( @@ -119,4 +121,4 @@ PopoverPortal.displayName = "PopoverPortal"; PopoverTrigger.displayName = "PopoverTrigger"; PopoverPositioner.displayName = "PopoverPositioner"; -export { Popover}; +export { Popover }; From 6e0dd2deb1a1f2b83bd6940165af2a375e15614c Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Wed, 20 Aug 2025 22:08:22 +0530 Subject: [PATCH 6/6] fix: format error --- packages/propel/src/popover/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/propel/src/popover/index.ts b/packages/propel/src/popover/index.ts index 50a9c47c01f..1efe34c51ec 100644 --- a/packages/propel/src/popover/index.ts +++ b/packages/propel/src/popover/index.ts @@ -1 +1 @@ -export * from "./root"; \ No newline at end of file +export * from "./root";