Add new Custom DialogTitle to @comet/admin

.changeset/curvy-bulldogs-boil.md

@@ -0,0 +1,12 @@
+---
+"@comet/admin": minor
+---
+
+Add new custom `Dialog`
+
+-   `title` props allows setting DialogTitle
+-   optional `onClose` prop adds Close Button to the Component
+
+Example:
+
+-   `<Dialog title="Dialog Title" onClose={() => {...}} />`

packages/admin/admin/src/common/Dialog.tsx

@@ -0,0 +1,106 @@
+import { Close } from "@comet/admin-icons";
+import {
+    ComponentsOverrides,
+    css,
+    Dialog as MuiDialog,
+    DialogProps as MuiDialogProps,
+    DialogTitle as MuiDialogTitle,
+    IconButton as MuiIconButton,
+    Theme,
+    useThemeProps,
+} from "@mui/material";
+import { ReactNode } from "react";
+
+import { createComponentSlot } from "../helpers/createComponentSlot";
+import { ThemedComponentBaseProps } from "../helpers/ThemedComponentBaseProps";
+
+export type DialogClassKey = "root" | "iconButton" | "titleWrapper" | "dialogTitle";
+
+export type DialogProps = ThemedComponentBaseProps<{
+    iconButton: typeof MuiIconButton;
+    root: typeof MuiDialog;
+    dialogTitle: typeof MuiDialogTitle;
+    titleWrapper: "div";
+}> & {
+    children?: ReactNode;
+    title?: ReactNode;
+    onClose?: () => void;
+    iconMapping?: {
+        closeIcon?: ReactNode;
+    };
+} & MuiDialogProps;
+
+export function Dialog(inProps: DialogProps) {
+    const {
+        slotProps,
+        open = false,
+        title,
+        iconMapping = {},
+        children,
+        onClose,
+        ...restProps
+    } = useThemeProps({ props: inProps, name: "CometAdminDialog" });
+    const { closeIcon = <Close color="inherit" /> } = iconMapping;
+    return (
+        <Root open={open} {...slotProps?.root} {...restProps}>
+            <DialogTitle {...slotProps?.dialogTitle}>
+                <TitleWrapper {...slotProps?.titleWrapper}>{title}</TitleWrapper>
+                {onClose && (
+                    <IconButton {...slotProps?.iconButton} onClick={onClose}>
+                        {closeIcon}
+                    </IconButton>
+                )}
+            </DialogTitle>
+            {children}
+        </Root>
+    );
+}
+
+const Root = createComponentSlot(MuiDialog)<DialogClassKey>({
+    componentName: "Dialog",
+    slotName: "root",
+})();
+
+const DialogTitle = createComponentSlot(MuiDialogTitle)<DialogClassKey>({
+    componentName: "Dialog",
+    slotName: "dialogTitle",
+})(css`
+    display: flex;
+    align-items: center;
+`);
+
+const IconButton = createComponentSlot(MuiIconButton)<DialogClassKey>({
+    componentName: "Dialog",
+    slotName: "iconButton",
+})(css`
+    color: inherit;
+    position: absolute;
+    right: 20px;
+`);
+
+const TitleWrapper = createComponentSlot("div")<DialogClassKey>({
+    componentName: "Dialog",
+    slotName: "titleWrapper",
+})(css`
+    color: inherit;
+    width: 100%;
+    padding-right: 40px;
+    min-height: 20px;
+`);
+
+declare module "@mui/material/styles" {
+    interface ComponentsPropsList {
+        CometAdminDialog: DialogProps;
+    }
+
+    interface ComponentNameToClassKey {
+        CometAdminDialog: DialogClassKey;
+    }
+
+    interface Components {
+        CometAdminDialog?: {
+            defaultProps?: Partial<ComponentsPropsList["CometAdminDialog"]>;
+            styleOverrides?: ComponentsOverrides<Theme>["CometAdminDialog"];
+        };
+    }
+}

packages/admin/admin/src/index.ts

@@ -22,6 +22,7 @@ export { SplitButtonContext, SplitButtonContextOptions } from "./common/buttons/
 export { useSplitButtonContext } from "./common/buttons/split/useSplitButtonContext";
 export { ClearInputAdornment, ClearInputAdornmentProps } from "./common/ClearInputAdornment";
 export { CometLogo } from "./common/CometLogo";
+export { Dialog, DialogClassKey, DialogProps } from "./common/Dialog";
 export { FieldSet, FieldSetClassKey, FieldSetProps } from "./common/FieldSet";
 export { HoverActions, HoverActionsClassKey, HoverActionsProps } from "./common/HoverActions";
 export { Loading, LoadingProps } from "./common/Loading";

storybook/src/admin/mui/Dialog.tsx

@@ -1,6 +1,6 @@
-import { CancelButton, Field, FinalFormCheckbox, FinalFormInput, FinalFormSelect, OkayButton } from "@comet/admin";
+import { CancelButton, Dialog, Field, FinalFormCheckbox, FinalFormInput, FinalFormSelect, OkayButton } from "@comet/admin";
 import { Save } from "@comet/admin-icons";
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogProps, DialogTitle, FormControlLabel, MenuItem } from "@mui/material";
+import { Button, DialogActions, DialogContent, DialogContentText, DialogProps, FormControlLabel, MenuItem } from "@mui/material";
 import { select } from "@storybook/addon-knobs";
 import { storiesOf } from "@storybook/react";
 import * as React from "react";
@@ -19,6 +19,16 @@ const dialogSizeOptions: DialogSizeOptions = {
     FullWidth: "fullWidth",
 };
 
+const dialogTitleOptions = {
+    "Text title": "Dialog Title Example",
+    None: "",
+};
+
+const dialogOnCloseOptions = {
+    "no callback": null,
+    "provided Callback": "callback",
+};
+
 const selectOptions = [
     { value: "chocolate", label: "Chocolate" },
     { value: "strawberry", label: "Strawberry" },
@@ -27,6 +37,8 @@ const selectOptions = [
 
 function Story() {
     const selectedDialogSize = select("Dialog size", dialogSizeOptions, "sm");
+    const selectedDialogTitle = select("Dialog Title", dialogTitleOptions, "Dialog Title Example");
+    const selectedDialogOnClose = select("Dialog onClose", dialogOnCloseOptions, "no callback");
 
     return (
         <div>
@@ -39,6 +51,8 @@ function Story() {
                     <form onSubmit={handleSubmit}>
                         <Dialog
                             scroll="body"
+                            onClose={selectedDialogOnClose === "callback" ? () => console.log("Dialog closed") : undefined}
+                            title={selectedDialogTitle}
                             open={true}
                             fullWidth={selectedDialogSize === "fullWidth"}
                             maxWidth={selectedDialogSize !== "fullWidth" && selectedDialogSize}
@@ -56,20 +70,16 @@ storiesOf("@comet/admin/mui", module).add("Dialog", () => <Story />);
 
 function ConfirmationDialogContent(): React.ReactElement {
     return (
-        <>
-            <DialogTitle>This is a small confirmation dialog.</DialogTitle>
-            <DialogActions>
-                <CancelButton />
-                <OkayButton />
-            </DialogActions>
-        </>
+        <DialogActions>
+            <CancelButton />
+            <OkayButton />
+        </DialogActions>
     );
 }
 
 function DefaultDialogContent(): React.ReactElement {
     return (
         <>
-            <DialogTitle>Form in Dialog</DialogTitle>
             <DialogContent>
                 <DialogContentText>
                     Lorem ipsum nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus