From eebd54e9636353a0ad60869755454895b51bb2a6 Mon Sep 17 00:00:00 2001 From: Markus Fichtner Date: Mon, 7 Oct 2024 22:28:13 +0200 Subject: [PATCH 1/4] Add new Custom DialogTitle to @comet/admin --- .changeset/curvy-bulldogs-boil.md | 11 +++ .../admin/admin/src/common/DialogTitle.tsx | 75 +++++++++++++++++++ packages/admin/admin/src/index.ts | 1 + storybook/src/admin/DialogTitle.tsx | 33 ++++++++ 4 files changed, 120 insertions(+) create mode 100644 .changeset/curvy-bulldogs-boil.md create mode 100644 packages/admin/admin/src/common/DialogTitle.tsx create mode 100644 storybook/src/admin/DialogTitle.tsx diff --git a/.changeset/curvy-bulldogs-boil.md b/.changeset/curvy-bulldogs-boil.md new file mode 100644 index 0000000000..fabe822881 --- /dev/null +++ b/.changeset/curvy-bulldogs-boil.md @@ -0,0 +1,11 @@ +--- +"@comet/admin": minor +--- + +Add new custom `DialogTitle` to @comet/admin + +- optional `onClose` prop adds Close Button to the Component + +Example: + +- ` {...}} />` diff --git a/packages/admin/admin/src/common/DialogTitle.tsx b/packages/admin/admin/src/common/DialogTitle.tsx new file mode 100644 index 0000000000..fbe34ccd68 --- /dev/null +++ b/packages/admin/admin/src/common/DialogTitle.tsx @@ -0,0 +1,75 @@ +import { Close } from "@comet/admin-icons"; +import { ComponentsOverrides, css, 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 DialogTitleClassKey = "dialogTitle" | "iconButton" | "contentWrapper"; + +export interface DialogTitleProps + extends ThemedComponentBaseProps<{ + iconButton: typeof MUIIconButton; + dialogTitle: typeof MUIDialogTitle; + contentWrapper: "div"; + }> { + children?: ReactNode; + onClose?: () => void; + iconMapping?: { + closeIcon?: React.ReactNode; + }; +} +export function DialogTitle(inProps: DialogTitleProps) { + const { slotProps, iconMapping = {}, children, onClose, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminDialogTitle" }); + const { closeIcon = } = iconMapping; + return ( + + <ContentWrapper {...slotProps?.contentWrapper}>{children}</ContentWrapper> + {onClose && ( + <IconButton {...slotProps?.iconButton} onClick={onClose}> + {closeIcon} + </IconButton> + )} + + ); +} + +const Title = createComponentSlot(MUIDialogTitle)({ + componentName: "DialogTitle", + slotName: "dialogTitle", +})(css` + display: flex; + justify-content: space-between; + align-items: center; +`); + +const IconButton = createComponentSlot(MUIIconButton)({ + componentName: "DialogTitle", + slotName: "iconButton", +})(css` + color: inherit; +`); + +const ContentWrapper = createComponentSlot("div")({ + componentName: "DialogTitle", + slotName: "contentWrapper", +})(css` + color: inherit; +`); + +declare module "@mui/material/styles" { + interface ComponentsPropsList { + CometAdminDialogTitle: DialogTitleProps; + } + + interface ComponentNameToClassKey { + CometAdminDialogTitle: DialogTitleClassKey; + } + + interface Components { + CometAdminDialogTitle?: { + defaultProps?: Partial; + styleOverrides?: ComponentsOverrides["CometAdminDialogTitle"]; + }; + } +} diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index 30187bdaf7..9de3168244 100644 --- a/packages/admin/admin/src/index.ts +++ b/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 { DialogTitle, DialogTitleClassKey, DialogTitleProps } from "./common/DialogTitle"; export { FieldSet, FieldSetClassKey, FieldSetProps } from "./common/FieldSet"; export { HoverActions, HoverActionsClassKey, HoverActionsProps } from "./common/HoverActions"; export { Loading, LoadingProps } from "./common/Loading"; diff --git a/storybook/src/admin/DialogTitle.tsx b/storybook/src/admin/DialogTitle.tsx new file mode 100644 index 0000000000..234ff4666f --- /dev/null +++ b/storybook/src/admin/DialogTitle.tsx @@ -0,0 +1,33 @@ +import { DialogTitle } from "@comet/admin"; +import { Dialog, 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/DialogTitle", module) + .add("DialogTitle", () => ( + + Title + + {textContent} + + + )) + .add("DialogTitle with Close Button", () => ( + + {}}>Title + + {textContent} + + + )) + .add("DialogTitle without children", () => ( + + {}} /> + + {textContent} + + + )); From 4b8f950e27d352576c75c8dba9de0e4bfcafcf75 Mon Sep 17 00:00:00 2001 From: Markus Fichtner Date: Tue, 22 Oct 2024 22:54:19 +0200 Subject: [PATCH 2/4] Change styling of DialogTitle --- .changeset/curvy-bulldogs-boil.md | 2 +- packages/admin/admin/src/common/DialogTitle.tsx | 17 ++++++++++------- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/.changeset/curvy-bulldogs-boil.md b/.changeset/curvy-bulldogs-boil.md index fabe822881..7afb08964b 100644 --- a/.changeset/curvy-bulldogs-boil.md +++ b/.changeset/curvy-bulldogs-boil.md @@ -2,7 +2,7 @@ "@comet/admin": minor --- -Add new custom `DialogTitle` to @comet/admin +Add new custom `DialogTitle` - optional `onClose` prop adds Close Button to the Component diff --git a/packages/admin/admin/src/common/DialogTitle.tsx b/packages/admin/admin/src/common/DialogTitle.tsx index fbe34ccd68..049f034241 100644 --- a/packages/admin/admin/src/common/DialogTitle.tsx +++ b/packages/admin/admin/src/common/DialogTitle.tsx @@ -5,12 +5,12 @@ import { ReactNode } from "react"; import { createComponentSlot } from "../helpers/createComponentSlot"; import { ThemedComponentBaseProps } from "../helpers/ThemedComponentBaseProps"; -export type DialogTitleClassKey = "dialogTitle" | "iconButton" | "contentWrapper"; +export type DialogTitleClassKey = "root" | "iconButton" | "contentWrapper"; export interface DialogTitleProps extends ThemedComponentBaseProps<{ iconButton: typeof MUIIconButton; - dialogTitle: typeof MUIDialogTitle; + root: typeof MUIDialogTitle; contentWrapper: "div"; }> { children?: ReactNode; @@ -23,23 +23,22 @@ export function DialogTitle(inProps: DialogTitleProps) { const { slotProps, iconMapping = {}, children, onClose, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminDialogTitle" }); const { closeIcon = } = iconMapping; return ( - + <Root {...slotProps?.root} {...restProps}> <ContentWrapper {...slotProps?.contentWrapper}>{children}</ContentWrapper> {onClose && ( <IconButton {...slotProps?.iconButton} onClick={onClose}> {closeIcon} </IconButton> )} - + ); } -const Title = createComponentSlot(MUIDialogTitle)({ +const Root = createComponentSlot(MUIDialogTitle)({ componentName: "DialogTitle", - slotName: "dialogTitle", + slotName: "root", })(css` display: flex; - justify-content: space-between; align-items: center; `); @@ -48,6 +47,8 @@ const IconButton = createComponentSlot(MUIIconButton)({ slotName: "iconButton", })(css` color: inherit; + position: absolute; + right: 20px; `); const ContentWrapper = createComponentSlot("div")({ @@ -55,6 +56,8 @@ const ContentWrapper = createComponentSlot("div")({ slotName: "contentWrapper", })(css` color: inherit; + width: 100%; + padding-right: 40px; `); declare module "@mui/material/styles" { From a47226c126e821cd10e6a0ac7eb1d842cb48ee21 Mon Sep 17 00:00:00 2001 From: Markus Fichtner Date: Tue, 29 Oct 2024 23:12:40 +0100 Subject: [PATCH 3/4] Refactor to create custom Dialog instead of DialogTitle --- .changeset/curvy-bulldogs-boil.md | 5 +- packages/admin/admin/src/common/Dialog.tsx | 106 ++++++++++++++++++ .../admin/admin/src/common/DialogTitle.tsx | 78 ------------- packages/admin/admin/src/index.ts | 2 +- .../src/admin/{DialogTitle.tsx => Dialog.tsx} | 21 ++-- 5 files changed, 119 insertions(+), 93 deletions(-) create mode 100644 packages/admin/admin/src/common/Dialog.tsx delete mode 100644 packages/admin/admin/src/common/DialogTitle.tsx rename storybook/src/admin/{DialogTitle.tsx => Dialog.tsx} (56%) diff --git a/.changeset/curvy-bulldogs-boil.md b/.changeset/curvy-bulldogs-boil.md index 7afb08964b..46143f3dae 100644 --- a/.changeset/curvy-bulldogs-boil.md +++ b/.changeset/curvy-bulldogs-boil.md @@ -2,10 +2,11 @@ "@comet/admin": minor --- -Add new custom `DialogTitle` +Add new custom `Dialog` +- `title` props allows setting DialogTitle - optional `onClose` prop adds Close Button to the Component Example: -- ` {...}} />` +- ` {...}} />` diff --git a/packages/admin/admin/src/common/Dialog.tsx b/packages/admin/admin/src/common/Dialog.tsx new file mode 100644 index 0000000000..cc5ad5b051 --- /dev/null +++ b/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 = } = iconMapping; + return ( + + + {title} + {onClose && ( + + {closeIcon} + + )} + + {children} + + ); +} + +const Root = createComponentSlot(MUIDialog)({ + componentName: "Dialog", + slotName: "root", +})(css``); + +const DialogTitle = createComponentSlot(MUIDialogTitle)({ + componentName: "Dialog", + slotName: "dialogTitle", +})(css` + display: flex; + align-items: center; +`); + +const IconButton = createComponentSlot(MUIIconButton)({ + componentName: "Dialog", + slotName: "iconButton", +})(css` + color: inherit; + position: absolute; + right: 20px; +`); + +const TitleWrapper = createComponentSlot("div")({ + 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; + styleOverrides?: ComponentsOverrides["CometAdminDialog"]; + }; + } +} diff --git a/packages/admin/admin/src/common/DialogTitle.tsx b/packages/admin/admin/src/common/DialogTitle.tsx deleted file mode 100644 index 049f034241..0000000000 --- a/packages/admin/admin/src/common/DialogTitle.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { Close } from "@comet/admin-icons"; -import { ComponentsOverrides, css, 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 DialogTitleClassKey = "root" | "iconButton" | "contentWrapper"; - -export interface DialogTitleProps - extends ThemedComponentBaseProps<{ - iconButton: typeof MUIIconButton; - root: typeof MUIDialogTitle; - contentWrapper: "div"; - }> { - children?: ReactNode; - onClose?: () => void; - iconMapping?: { - closeIcon?: React.ReactNode; - }; -} -export function DialogTitle(inProps: DialogTitleProps) { - const { slotProps, iconMapping = {}, children, onClose, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminDialogTitle" }); - const { closeIcon = } = iconMapping; - return ( - - {children} - {onClose && ( - - {closeIcon} - - )} - - ); -} - -const Root = createComponentSlot(MUIDialogTitle)({ - componentName: "DialogTitle", - slotName: "root", -})(css` - display: flex; - align-items: center; -`); - -const IconButton = createComponentSlot(MUIIconButton)({ - componentName: "DialogTitle", - slotName: "iconButton", -})(css` - color: inherit; - position: absolute; - right: 20px; -`); - -const ContentWrapper = createComponentSlot("div")({ - componentName: "DialogTitle", - slotName: "contentWrapper", -})(css` - color: inherit; - width: 100%; - padding-right: 40px; -`); - -declare module "@mui/material/styles" { - interface ComponentsPropsList { - CometAdminDialogTitle: DialogTitleProps; - } - - interface ComponentNameToClassKey { - CometAdminDialogTitle: DialogTitleClassKey; - } - - interface Components { - CometAdminDialogTitle?: { - defaultProps?: Partial; - styleOverrides?: ComponentsOverrides["CometAdminDialogTitle"]; - }; - } -} diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index 9de3168244..9f4c97bd03 100644 --- a/packages/admin/admin/src/index.ts +++ b/packages/admin/admin/src/index.ts @@ -22,7 +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 { DialogTitle, DialogTitleClassKey, DialogTitleProps } from "./common/DialogTitle"; +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"; diff --git a/storybook/src/admin/DialogTitle.tsx b/storybook/src/admin/Dialog.tsx similarity index 56% rename from storybook/src/admin/DialogTitle.tsx rename to storybook/src/admin/Dialog.tsx index 234ff4666f..ef5cbf0956 100644 --- a/storybook/src/admin/DialogTitle.tsx +++ b/storybook/src/admin/Dialog.tsx @@ -1,31 +1,28 @@ -import { DialogTitle } from "@comet/admin"; -import { Dialog, DialogContent, Typography } from "@mui/material"; +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/DialogTitle", module) - .add("DialogTitle", () => ( - - Title +storiesOf("@comet/admin/Dialog", module) + .add("Dialog", () => ( + {textContent} )) - .add("DialogTitle with Close Button", () => ( - - {}}>Title + .add("Dialog with Close Button", () => ( + {}}> {textContent} )) - .add("DialogTitle without children", () => ( - - {}} /> + .add("Dialog with empty title", () => ( + {}}> {textContent} From b070d7dc358eb8dd611c381f81a577679220cae6 Mon Sep 17 00:00:00 2001 From: Markus Fichtner Date: Thu, 7 Nov 2024 21:31:01 +0100 Subject: [PATCH 4/4] Update Dialog Story --- packages/admin/admin/src/common/Dialog.tsx | 34 +++++++++++----------- storybook/src/admin/Dialog.tsx | 30 ------------------- storybook/src/admin/mui/Dialog.tsx | 30 ++++++++++++------- 3 files changed, 37 insertions(+), 57 deletions(-) delete mode 100644 storybook/src/admin/Dialog.tsx diff --git a/packages/admin/admin/src/common/Dialog.tsx b/packages/admin/admin/src/common/Dialog.tsx index cc5ad5b051..42a384cb81 100644 --- a/packages/admin/admin/src/common/Dialog.tsx +++ b/packages/admin/admin/src/common/Dialog.tsx @@ -2,9 +2,10 @@ import { Close } from "@comet/admin-icons"; import { ComponentsOverrides, css, - Dialog as MUIDialog, - DialogTitle as MUIDialogTitle, - IconButton as MUIIconButton, + Dialog as MuiDialog, + DialogProps as MuiDialogProps, + DialogTitle as MuiDialogTitle, + IconButton as MuiIconButton, Theme, useThemeProps, } from "@mui/material"; @@ -15,21 +16,20 @@ 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"; - }> { +export type DialogProps = ThemedComponentBaseProps<{ + iconButton: typeof MuiIconButton; + root: typeof MuiDialog; + dialogTitle: typeof MuiDialogTitle; + titleWrapper: "div"; +}> & { children?: ReactNode; - title: ReactNode; - open?: boolean; + title?: ReactNode; onClose?: () => void; iconMapping?: { closeIcon?: ReactNode; }; -} +} & MuiDialogProps; + export function Dialog(inProps: DialogProps) { const { slotProps, @@ -56,12 +56,12 @@ export function Dialog(inProps: DialogProps) { ); } -const Root = createComponentSlot(MUIDialog)({ +const Root = createComponentSlot(MuiDialog)({ componentName: "Dialog", slotName: "root", -})(css``); +})(); -const DialogTitle = createComponentSlot(MUIDialogTitle)({ +const DialogTitle = createComponentSlot(MuiDialogTitle)({ componentName: "Dialog", slotName: "dialogTitle", })(css` @@ -69,7 +69,7 @@ const DialogTitle = createComponentSlot(MUIDialogTitle)({ align-items: center; `); -const IconButton = createComponentSlot(MUIIconButton)({ +const IconButton = createComponentSlot(MuiIconButton)({ componentName: "Dialog", slotName: "iconButton", })(css` diff --git a/storybook/src/admin/Dialog.tsx b/storybook/src/admin/Dialog.tsx deleted file mode 100644 index ef5cbf0956..0000000000 --- a/storybook/src/admin/Dialog.tsx +++ /dev/null @@ -1,30 +0,0 @@ -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", () => ( - - - {textContent} - - - )) - .add("Dialog with Close Button", () => ( - {}}> - - {textContent} - - - )) - .add("Dialog with empty title", () => ( - {}}> - - {textContent} - - - )); diff --git a/storybook/src/admin/mui/Dialog.tsx b/storybook/src/admin/mui/Dialog.tsx index 9aa8cbb210..cab29fb945 100644 --- a/storybook/src/admin/mui/Dialog.tsx +++ b/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 (
@@ -39,6 +51,8 @@ function Story() {
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", () => ); function ConfirmationDialogContent(): React.ReactElement { return ( - <> - This is a small confirmation dialog. - - - - - + + + + ); } function DefaultDialogContent(): React.ReactElement { return ( <> - Form in Dialog Lorem ipsum nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus