Merge branch 'refs/heads/feat/dialog' into feat/drawer

packages/admin-ui/package.json

@@ -26,7 +26,6 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@radix-ui/react-visually-hidden": "^1.1.1",
     "@webiny/react-composition": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/utils": "0.0.0",

packages/admin-ui/src/Card/Card.tsx

@@ -52,8 +52,8 @@ CardRootBase.displayName = "CardRoot";
 const CardRoot = makeDecoratable("CardRoot", CardRootBase);
 
 interface CardProps extends CardRootProps, VariantProps<typeof cardRootVariants> {
-    title?: React.ReactNode | string;
-    description?: React.ReactNode | string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
     actions?: React.ReactNode;
     options?: React.ReactNode;
 }

packages/admin-ui/src/Dialog/Dialog.stories.tsx

@@ -123,17 +123,17 @@ export const DropdownMenuInDialog: Story = {
     }
 };
 
-export const WithTitleIcon: Story = {
+export const WithIcon: Story = {
     args: {
         ...Default.args,
-        titleIcon: <Dialog.TitleIcon icon={<DoorbellIcon />} label={"Title icon"} />
+        icon: <Dialog.Icon icon={<DoorbellIcon />} label={"Title icon"} />
     }
 };
 
 export const PreventOutsideDismiss: Story = {
     args: {
         ...Default.args,
-        preventOutsideDismiss: true
+        dismissible: false
     }
 };
 

packages/admin-ui/src/Dialog/Dialog.tsx

@@ -8,20 +8,20 @@ import { DialogOverlay } from "~/Dialog/components/DialogOverlay";
 import { DialogPortal } from "./components/DialogPortal";
 import { DialogRoot } from "./components/DialogRoot";
 import { DialogTrigger } from "./components/DialogTrigger";
-import { TitleIcon } from "./components/TitleIcon";
+import { Icon } from "./components/Icon";
 import { ConfirmButton } from "./components/ConfirmButton";
 import { CancelButton } from "./components/CancelButton";
 
 export interface DialogProps
     extends React.ComponentPropsWithoutRef<typeof DialogRoot>,
         Omit<React.ComponentPropsWithoutRef<typeof DialogContent>, "title"> {
     trigger?: React.ReactNode;
-    title?: React.ReactNode | string;
-    titleIcon?: React.ReactElement;
+    title?: React.ReactNode;
+    icon?: React.ReactElement;
     showCloseButton?: boolean;
-    preventOutsideDismiss?: boolean;
+    dismissible?: boolean;
     bodyPadding?: boolean;
-    description?: React.ReactNode | string;
+    description?: React.ReactNode;
     children: React.ReactNode;
     actions?: React.ReactNode;
     info?: React.ReactNode;
@@ -43,7 +43,7 @@ const DialogBase = (props: DialogProps) => {
 
                 // Header props.
                 title,
-                titleIcon,
+                icon,
                 description,
                 showCloseButton,
 
@@ -72,7 +72,7 @@ const DialogBase = (props: DialogProps) => {
                     // that are decorated with `makeDecoratable`. This will be fixed in the future.
                     children: <div>{trigger}</div>
                 },
-                headerProps: { title, titleIcon, description, showCloseButton },
+                headerProps: { title, icon, description, showCloseButton },
                 bodyProps: { children, bodyPadding },
                 footerProps: { info, actions },
                 contentProps
@@ -101,7 +101,7 @@ const DecoratableDialog = makeDecoratable("Dialog", DialogBase);
 const Dialog = withStaticProps(DecoratableDialog, {
     ConfirmButton,
     CancelButton,
-    TitleIcon
+    Icon
 });
 
 export { Dialog };

packages/admin-ui/src/Dialog/components/DialogContent.tsx

@@ -4,27 +4,29 @@ import { cn } from "~/utils";
 
 export interface DialogContentProps
     extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-    preventOutsideDismiss?: boolean;
+    dismissible?: boolean;
 }
 
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     DialogContentProps
->(({ className, preventOutsideDismiss, children, ...props }, ref) => {
-    let preventOutsideDismissProps: Pick<
-        DialogPrimitive.DialogContentProps,
-        "onInteractOutside" | "onEscapeKeyDown"
-    > = {};
-    if (preventOutsideDismiss) {
-        preventOutsideDismissProps = {
-            onInteractOutside: event => event.preventDefault(),
-            onEscapeKeyDown: event => event.preventDefault()
-        };
-    }
+>(({ className, dismissible, children, ...props }, ref) => {
+    const dismissibleProps = React.useMemo<
+        Pick<DialogPrimitive.DialogContentProps, "onInteractOutside" | "onEscapeKeyDown">
+    >(() => {
+        if (dismissible === false) {
+            return {
+                onInteractOutside: event => event.preventDefault(),
+                onEscapeKeyDown: event => event.preventDefault()
+            };
+        }
+
+        return {};
+    }, [dismissible]);
 
     return (
         <DialogPrimitive.Content
-            {...preventOutsideDismissProps}
+            {...dismissibleProps}
             {...props}
             ref={ref}
             className={cn(

packages/admin-ui/src/Dialog/components/DialogDescription.tsx

@@ -12,5 +12,3 @@ export const DialogDescription = ({ className, ...props }: DialogDescriptionProp
         className={cn("text-sm text-neutral-strong", className)}
     />
 );
-
-DialogDescription.displayName = DialogPrimitive.Description.displayName;

packages/admin-ui/src/Dialog/components/DialogFooter.tsx

@@ -13,10 +13,12 @@ export const DialogFooter = ({ actions, info, className, ...props }: DialogFoote
 
     return (
         <div {...props} className={cn("flex justify-between p-lg pt-md-extra", className)}>
-            <div className={"text-sm flex items-center"}>
-                <div>{info}</div>
-            </div>
-            <div className={"flex gap-x-sm"}>{actions}</div>
+            {info && (
+                <div className={"text-sm flex items-center"}>
+                    <div>{info}</div>
+                </div>
+            )}
+            {actions && <div className={"flex gap-x-sm ml-auto"}>{actions}</div>}
         </div>
     );
 };

packages/admin-ui/src/Dialog/components/DialogHeader.tsx

@@ -3,44 +3,23 @@ import { cn } from "~/utils";
 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";
 
 export type DialogHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
-    Pick<DialogProps, "title" | "titleIcon" | "description" | "showCloseButton">;
+    Pick<DialogProps, "title" | "icon" | "description" | "showCloseButton">;
 
 export const DialogHeader = ({
     title,
-    titleIcon,
+    icon,
     description,
     showCloseButton,
     className,
     ...props
 }: DialogHeaderProps) => {
-    let renderedTitle = (
-        <DialogTitle>
-            {titleIcon}
-            {title}
-        </DialogTitle>
-    );
-    if (!title) {
-        renderedTitle = <VisuallyHidden.Root>{renderedTitle}</VisuallyHidden.Root>;
-    }
-
-    let renderedDescription = <DialogDescription>{description}</DialogDescription>;
-    if (!description) {
-        renderedDescription = <VisuallyHidden.Root>{renderedDescription}</VisuallyHidden.Root>;
-    }
-
     if (!title && !description) {
-        return (
-            <>
-                {renderedTitle}
-                {renderedDescription}
-            </>
-        );
+        return null;
     }
 
     return (
@@ -57,9 +36,12 @@ export const DialogHeader = ({
                         <IconButton size="md" iconSize="lg" variant={"ghost"} icon={<XIcon />} />
                     </DialogPrimitive.Close>
                 )}
-                {renderedTitle}
+                <DialogTitle>
+                    {icon}
+                    {title}
+                </DialogTitle>
             </div>
-            {renderedDescription}
+            <DialogDescription>{description}</DialogDescription>
         </div>
     );
 };

packages/admin-ui/src/Dialog/components/DialogTitle.tsx

@@ -7,5 +7,3 @@ export type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimi
 export const DialogTitle = ({ className, ...props }: DialogTitleProps) => (
     <DialogPrimitive.Title {...props} className={cn("text-h4 flex gap-sm", className)} />
 );
-
-DialogTitle.displayName = DialogPrimitive.Title.displayName;

packages/admin-ui/src/Dialog/components/Icon.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn, makeDecoratable } from "~/utils";
+import { Icon as IconComponent, IconProps as IconComponentProps } from "~/Icon";
+
+type IconProps = IconComponentProps;
+
+const IconBase = ({ className, ...props }: IconProps) => {
+    return (
+        <IconComponent
+            size={"lg"}
+            color={"neutral-strong"}
+            {...props}
+            className={cn("pt-xs", className)}
+        />
+    );
+};
+
+export const Icon = makeDecoratable("Icon", IconBase);

packages/admin-ui/src/Heading/Heading.tsx

@@ -3,7 +3,7 @@ import { makeDecoratable } from "@webiny/react-composition";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "~/utils";
 
-export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
+export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
 
 // Create a mapping of variant to tag

packages/app-admin-rmwc/src/modules/Overlays/Dialog.tsx

@@ -73,7 +73,6 @@ export const DialogContainer = () => {
                     <DialogAccept
                         data-testid={"confirmationdialog-confirm-action"}
                         onClick={handleConfirm}
-                        text={actions.accept.label}
                     >
                         {actions.accept.label}
                     </DialogAccept>

packages/ui/package.json

@@ -37,7 +37,6 @@
     "load-script": "^1.0.0",
     "lodash": "^4.17.21",
     "material-components-web": "^14.0.0",
-    "nprogress": "^0.2.0",
     "nuka-carousel": "4.7.1",
     "react-butterfiles": "^1.3.3",
     "react-color": "^2.19.3",
@@ -50,7 +49,6 @@
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
     "@testing-library/react": "^15.0.7",
-    "@types/nprogress": "^0.2.0",
     "@types/react-color": "^2.17.11",
     "@types/react-custom-scrollbars": "^4.0.10",
     "@types/react-transition-group": "^4.4.4",

packages/ui/src/Dialog/Dialog.tsx

@@ -113,7 +113,7 @@ export const Dialog = ({
         <AdminUiDialog
             open={open}
             bodyPadding={false}
-            preventOutsideDismiss={preventOutsideDismiss}
+            dismissible={preventOutsideDismiss === true ? false : true}
             showCloseButton={showCloseButton}
             onOpenChange={opened => {
                 if (!opened && onClose) {