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,
+    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 interface DialogProps
+    extends ThemedComponentBaseProps<{
+        iconButton: typeof MUIIconButton;
+        root: typeof MUIDialog;
+        dialogTitle: typeof MUIDialogTitle;
+        titleWrapper: "div";
+    }> {
+    children?: ReactNode;
+    title: ReactNode;
+    open?: boolean;
+    onClose?: () => void;
+    iconMapping?: {
+        closeIcon?: ReactNode;
+    };
+}
+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",
+})(css``);
+
+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/Dialog.tsx

@@ -0,0 +1,30 @@
+import { Dialog } from "@comet/admin";
+import { DialogContent, Typography } from "@mui/material";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+const textContent =
+    "Dialog content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+
+storiesOf("@comet/admin/Dialog", module)
+    .add("Dialog", () => (
+        <Dialog open title="Title">
+            <DialogContent>
+                <Typography>{textContent}</Typography>
+            </DialogContent>
+        </Dialog>
+    ))
+    .add("Dialog with Close Button", () => (
+        <Dialog open title="Title" onClose={() => {}}>
+            <DialogContent>
+                <Typography>{textContent}</Typography>
+            </DialogContent>
+        </Dialog>
+    ))
+    .add("Dialog with empty title", () => (
+        <Dialog open title="" onClose={() => {}}>
+            <DialogContent>
+                <Typography>{textContent}</Typography>
+            </DialogContent>
+        </Dialog>
+    ));