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

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

@@ -4,6 +4,7 @@ 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";
+import { Tabs, TabsContent, TabsTrigger } from "~/Tabs";
 
 const meta: Meta<typeof Dialog> = {
     title: "Components/Dialog",
@@ -125,7 +126,7 @@ export const DropdownMenuInDialog: Story = {
 export const WithTitleIcon: Story = {
     args: {
         ...Default.args,
-        titleIcon: <DoorbellIcon />
+        titleIcon: <Dialog.TitleIcon icon={<DoorbellIcon />} label={"Title icon"} />
     }
 };
 
@@ -135,3 +136,44 @@ export const PreventOutsideDismiss: Story = {
         preventOutsideDismiss: true
     }
 };
+
+export const WithTabs: Story = {
+    args: {
+        ...Default.args,
+        bodyPadding: false,
+        children: (
+            <>
+                <Tabs
+                    triggers={[
+                        <TabsTrigger key="account" value="account" text={"Account"} />,
+                        <TabsTrigger key="company" value="company" text={"Company"} />,
+                        <TabsTrigger key="security" value="security" text={"Security"} />,
+                        <TabsTrigger key="development" value="development" text={"development"} />
+                    ]}
+                    contents={[
+                        <TabsContent
+                            key="account"
+                            value="account"
+                            text={"Make changes to your account here."}
+                        />,
+                        <TabsContent
+                            key="company"
+                            value="company"
+                            text={"Make changes to your company info here."}
+                        />,
+                        <TabsContent
+                            key="security"
+                            value="security"
+                            text={"Make changes to your security settings here."}
+                        />,
+                        <TabsContent
+                            key="development"
+                            value="development"
+                            text={"Make changes to your development settings here."}
+                        />
+                    ]}
+                />
+            </>
+        )
+    }
+};

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

@@ -9,7 +9,9 @@ import { DialogPortal } from "./components/DialogPortal";
 import { DialogRoot } from "./components/DialogRoot";
 import { DialogTrigger } from "./components/DialogTrigger";
 import { DialogClose } from "./components/DialogClose";
-import { Button, ButtonProps } from "~/Button";
+import { TitleIcon } from "./components/TitleIcon";
+import { ConfirmButton } from "./components/ConfirmButton";
+import { CancelButton } from "./components/CancelButton";
 
 export interface DialogProps
     extends React.ComponentPropsWithoutRef<typeof DialogRoot>,
@@ -97,19 +99,10 @@ DialogBase.displayName = "Dialog";
 
 const DecoratableDialog = makeDecoratable("Dialog", DialogBase);
 
-const ConfirmButton = makeDecoratable("ConfirmButton", (props: ButtonProps) => (
-    <Button text={"Confirm"} {...props} variant="primary" />
-));
-
-const CancelButton = makeDecoratable("CancelButton", (props: ButtonProps) => (
-    <DialogClose asChild>
-        <Button text={"Cancel"} {...props} variant="secondary" />
-    </DialogClose>
-));
-
 const Dialog = withStaticProps(DecoratableDialog, {
     ConfirmButton,
-    CancelButton
+    CancelButton,
+    TitleIcon
 });
 
 export { Dialog };

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import { DialogClose } from "./DialogClose";
+import { Button, ButtonProps } from "~/Button";
+
+const CancelButtonBase = (props: ButtonProps) => (
+    <DialogClose asChild>
+        <Button text={"Cancel"} {...props} variant="secondary" />
+    </DialogClose>
+);
+
+export const CancelButton = makeDecoratable("CancelButton", CancelButtonBase);

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { makeDecoratable } from "~/utils";
+import { Button, ButtonProps } from "~/Button";
+
+const ConfirmButtonBase = (props: ButtonProps) => (
+    <Button text={"Confirm"} {...props} variant="primary" />
+);
+
+export const ConfirmButton = makeDecoratable("ConfirmButton", ConfirmButtonBase);

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

@@ -10,12 +10,12 @@ export interface DialogContentProps
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     DialogContentProps
->(({ className, children, ...props }, ref) => {
+>(({ className, preventOutsideDismiss, children, ...props }, ref) => {
     let preventOutsideDismissProps: Pick<
         DialogPrimitive.DialogContentProps,
         "onInteractOutside" | "onEscapeKeyDown"
     > = {};
-    if (props.preventOutsideDismiss) {
+    if (preventOutsideDismiss) {
         preventOutsideDismissProps = {
             onInteractOutside: event => event.preventDefault(),
             onEscapeKeyDown: event => event.preventDefault()

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

@@ -7,7 +7,6 @@ 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" | "titleIcon" | "description" | "showCloseButton">;
@@ -22,15 +21,7 @@ export const DialogHeader = ({
 }: DialogHeaderProps) => {
     let renderedTitle = (
         <DialogTitle>
-            {titleIcon && (
-                <Icon
-                    icon={titleIcon}
-                    label={"asd"}
-                    size={"lg"}
-                    color={"neutral-strong"}
-                    className={"pt-xs"}
-                />
-            )}
+            {titleIcon}
             {title}
         </DialogTitle>
     );

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

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

packages/ui/src/Dialog/Dialog.tsx

@@ -99,7 +99,15 @@ export interface DialogProps extends AdminUiDialogProps {
  * @deprecated This component is deprecated and will be removed in future releases.
  * Please use the `Dialog` component from the `@webiny/admin-ui` package instead.
  */
-export const Dialog = ({ onClose, onOpened, open, showCloseButton, children, preventOutsideDismiss, ...rest }: DialogProps) => {
+export const Dialog = ({
+    onClose,
+    onOpened,
+    open,
+    showCloseButton,
+    children,
+    preventOutsideDismiss,
+    ...rest
+}: DialogProps) => {
     return (
         <AdminUiDialog
             open={open}
@@ -113,8 +121,6 @@ export const Dialog = ({ onClose, onOpened, open, showCloseButton, children, pre
                 if (opened && onOpened) {
                     onOpened();
                 }
-
-
             }}
             {...rest}
         >