wip

webiny · Jan 14, 2025 · 3a9708d · 3a9708d
1 parent 879bd31
commit 3a9708d
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 31 deletions.
diff --git a/packages/admin-ui/src/Dialog/Dialog.stories.tsx b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Dialog } from "./Dialog";
 import { Button } from "~/Button";
 import { DropdownMenu } from "~/DropdownMenu";
+import { ReactComponent as DoorbellIcon } from "@material-design-icons/svg/outlined/ring_volume.svg";
 
 const meta: Meta<typeof Dialog> = {
     title: "Components/Dialog",
@@ -121,6 +122,13 @@ export const DropdownMenuInDialog: Story = {
     }
 };
 
+export const WithTitleIcon: Story = {
+    args: {
+        ...Default.args,
+        titleIcon: <DoorbellIcon />
+    }
+};
+
 export const PreventOutsideDismiss: Story = {
     args: {
         ...Default.args,

diff --git a/packages/admin-ui/src/Dialog/Dialog.tsx b/packages/admin-ui/src/Dialog/Dialog.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
 import { makeDecoratable, withStaticProps } from "~/utils";
 import { DialogContent } from "./components/DialogContent";
-import { DialogFooter } from "~/Dialog/components/DialogFooter";
 import { DialogHeader } from "~/Dialog/components/DialogHeader";
+import { DialogBody } from "~/Dialog/components/DialogBody";
+import { DialogFooter } from "~/Dialog/components/DialogFooter";
 import { DialogOverlay } from "~/Dialog/components/DialogOverlay";
 import { DialogPortal } from "./components/DialogPortal";
 import { DialogRoot } from "./components/DialogRoot";
@@ -15,16 +16,18 @@ export interface DialogProps
         Omit<React.ComponentPropsWithoutRef<typeof DialogContent>, "title"> {
     trigger?: React.ReactNode;
     title?: React.ReactNode | string;
+    titleIcon?: React.ReactElement;
     showCloseButton?: boolean;
     preventOutsideDismiss?: boolean;
+    bodyPadding?: boolean;
     description?: React.ReactNode | string;
     children: React.ReactNode;
     actions?: React.ReactNode;
     info?: React.ReactNode;
 }
 
 const DialogBase = (props: DialogProps) => {
-    const { rootProps, triggerProps, contentProps, headerProps, footerProps } =
+    const { rootProps, triggerProps, contentProps, headerProps, bodyProps, footerProps } =
         React.useMemo(() => {
             const {
                 // Root props.
@@ -39,7 +42,13 @@ const DialogBase = (props: DialogProps) => {
 
                 // Header props.
                 title,
+                titleIcon,
                 description,
+                showCloseButton,
+
+                // Body props.
+                children,
+                bodyPadding,
 
                 // Footer props.
                 actions,
@@ -62,7 +71,8 @@ const DialogBase = (props: DialogProps) => {
                     // that are decorated with `makeDecoratable`. This will be fixed in the future.
                     children: <div className={"inline-block"}>{trigger}</div>
                 },
-                headerProps: { title, description },
+                headerProps: { title, titleIcon, description, showCloseButton },
+                bodyProps: { children, bodyPadding },
                 footerProps: { info, actions },
                 contentProps
             };
@@ -74,11 +84,8 @@ const DialogBase = (props: DialogProps) => {
             <DialogPortal>
                 <DialogOverlay />
                 <DialogContent {...contentProps}>
-                    <div>
-                        <DialogHeader {...headerProps} />
-                        {contentProps.children}
-                    </div>
-
+                    <DialogHeader {...headerProps} />
+                    <DialogBody {...bodyProps} />
                     <DialogFooter {...footerProps} />
                 </DialogContent>
             </DialogPortal>

diff --git a/packages/admin-ui/src/Dialog/components/DialogBody.tsx b/packages/admin-ui/src/Dialog/components/DialogBody.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { cn } from "~/utils";
+import type { DialogProps } from "~/Dialog";
+
+export type DialogBodyProps = Pick<DialogProps, "children" | "bodyPadding">;
+
+export const DialogBody = ({ bodyPadding, children }: DialogBodyProps) => {
+    return <div className={cn("py-sm ", { "px-lg": bodyPadding !== false })}>{children}</div>;
+};
diff --git a/packages/admin-ui/src/Dialog/components/DialogContent.tsx b/packages/admin-ui/src/Dialog/components/DialogContent.tsx
@@ -1,19 +1,16 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { ReactComponent as XIcon } from "@material-design-icons/svg/filled/close.svg";
 import { cn } from "~/utils";
-import { IconButton } from "~/Button";
 
 export interface DialogContentProps
     extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-    showCloseButton?: boolean;
     preventOutsideDismiss?: boolean;
 }
 
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     DialogContentProps
->(({ className, children, showCloseButton, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
     let preventOutsideDismissProps: Pick<
         DialogPrimitive.DialogContentProps,
         "onInteractOutside" | "onEscapeKeyDown"
@@ -31,20 +28,14 @@ const DialogContent = React.forwardRef<
             {...props}
             ref={ref}
             className={cn(
-                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg border bg-neutral-base pt-md-extra pb-lg px-lg shadow-lg focus-visible:outline-none rounded-xl text-md text-neutral-strong",
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg border bg-neutral-base shadow-lg focus-visible:outline-none rounded-xl text-md text-neutral-strong",
                 "translate-x-[-50%] translate-y-[-50%] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
                 className
             )}
         >
             {/* We needed to add this wrapper so that absolute-positioned elements can be placed */}
             {/* inside the dialog. We noticed this while showing a loader inside the dialog. */}
-            <div className={"relative gap-xl flex flex-col"}>{children}</div>
-
-            {showCloseButton !== false && (
-                <DialogPrimitive.Close asChild className="absolute right-4 top-4">
-                    <IconButton size="md" iconSize="lg" variant={"ghost"} icon={<XIcon />} />
-                </DialogPrimitive.Close>
-            )}
+            <div className={"flex flex-col"}>{children}</div>
         </DialogPrimitive.Content>
     );
 });

diff --git a/packages/admin-ui/src/Dialog/components/DialogFooter.tsx b/packages/admin-ui/src/Dialog/components/DialogFooter.tsx
@@ -12,7 +12,7 @@ export const DialogFooter = ({ actions, info, className, ...props }: DialogFoote
     }
 
     return (
-        <div {...props} className={cn("flex justify-between", className)}>
+        <div {...props} className={cn("flex justify-between p-lg pt-md-extra", className)}>
             <div className={"text-sm flex items-center"}>
                 <div>{info}</div>
             </div>

diff --git a/packages/admin-ui/src/Dialog/components/DialogHeader.tsx b/packages/admin-ui/src/Dialog/components/DialogHeader.tsx
@@ -4,12 +4,36 @@ import { type DialogProps } from "../Dialog";
 import { DialogTitle } from "./DialogTitle";
 import { DialogDescription } from "./DialogDescription";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { ReactComponent as XIcon } from "@material-design-icons/svg/filled/close.svg";
+import { IconButton } from "~/Button";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Icon } from "~/Icon";
 
 export type DialogHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
-    Pick<DialogProps, "title" | "description">;
+    Pick<DialogProps, "title" | "titleIcon" | "description" | "showCloseButton">;
 
-export const DialogHeader = ({ title, description, className, ...props }: DialogHeaderProps) => {
-    let renderedTitle = <DialogTitle>{title}</DialogTitle>;
+export const DialogHeader = ({
+    title,
+    titleIcon,
+    description,
+    showCloseButton,
+    className,
+    ...props
+}: DialogHeaderProps) => {
+    let renderedTitle = (
+        <DialogTitle>
+            {titleIcon && (
+                <Icon
+                    icon={titleIcon}
+                    label={"asd"}
+                    size={"lg"}
+                    color={"neutral-strong"}
+                    className={"pt-xs"}
+                />
+            )}
+            {title}
+        </DialogTitle>
+    );
     if (!title) {
         renderedTitle = <VisuallyHidden.Root>{renderedTitle}</VisuallyHidden.Root>;
     }
@@ -32,11 +56,18 @@ export const DialogHeader = ({ title, description, className, ...props }: Dialog
         <div
             {...props}
             className={cn(
-                "flex flex-col gap-y-xxs mb-lg text-center sm:text-left text-neutral-primary",
+                "flex flex-col gap-sm px-lg py-md text-center sm:text-left text-neutral-primary",
                 className
             )}
         >
-            {renderedTitle}
+            <div className={"relative"}>
+                {showCloseButton !== false && (
+                    <DialogPrimitive.Close asChild className="absolute right-0 top-0">
+                        <IconButton size="md" iconSize="lg" variant={"ghost"} icon={<XIcon />} />
+                    </DialogPrimitive.Close>
+                )}
+                {renderedTitle}
+            </div>
             {renderedDescription}
         </div>
     );

diff --git a/packages/admin-ui/src/Dialog/components/DialogTitle.tsx b/packages/admin-ui/src/Dialog/components/DialogTitle.tsx
@@ -5,7 +5,7 @@ import { cn } from "~/utils";
 export type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
 
 export const DialogTitle = ({ className, ...props }: DialogTitleProps) => (
-    <DialogPrimitive.Title {...props} className={cn("text-h4", className)} />
+    <DialogPrimitive.Title {...props} className={cn("text-h4 flex gap-sm", className)} />
 );
 
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
diff --git a/todo.txt b/todo.txt