diff --git a/web/packages/base/components/MiniDialog.tsx b/web/packages/base/components/MiniDialog.tsx index 703dcd85a9..226d4b1f85 100644 --- a/web/packages/base/components/MiniDialog.tsx +++ b/web/packages/base/components/MiniDialog.tsx @@ -227,6 +227,75 @@ export function MiniDialog({ // } // } +export interface DialogBoxV2Attributes { + icon?: React.ReactNode; + /** + * The dialog's title. + * + * Usually this will be a string, but it can be any {@link ReactNode}. Note + * that it always gets wrapped in a Typography element to set the font + * style, so if your ReactNode wants to do its own thing, it'll need to + * reset or override these customizations. + */ + title?: React.ReactNode; + staticBackdrop?: boolean; + nonClosable?: boolean; + /** + * The dialog's content. + */ + content?: React.ReactNode; + /** + * Customize the cancel (dismiss) action button offered by the dialog box. + * + * Usually dialog boxes should have a cancel action, but this can be skipped + * to only show one of the other types of buttons. + */ + close?: { + /** The string to use as the label for the cancel button. */ + text?: string; + /** The color of the button. */ + variant?: ButtonProps["color"]; + /** + * The function to call when the user cancels. + * + * If provided, this callback is invoked before closing the dialog. + */ + action?: () => void; + }; + /** + * Customize the primary action button offered by the dialog box. + */ + proceed?: { + /** The string to use as the label for the primary action. */ + text: string; + /** + * The function to call when the user presses the primary action button. + * + * It is passed a {@link setLoading} function that can be used to show + * or hide loading indicator or the primary action button. + */ + action: + | (() => void | Promise) + | ((setLoading: (value: boolean) => void) => void | Promise); + variant?: ButtonProps["color"]; + disabled?: boolean; + }; + secondary?: { + text: string; + action: () => void; + variant?: ButtonProps["color"]; + disabled?: boolean; + }; + buttonDirection?: "row" | "column"; +} + +type DialogBoxV2Props = React.PropsWithChildren< + Omit & { + onClose: () => void; + attributes?: DialogBoxV2Attributes; + } +>; + /** * TODO This is a duplicate of MiniDialog. This is for use by call sites that * were using the MiniDialog not as a dialog but as a base container. Such use @@ -240,7 +309,7 @@ export function DialogBoxV2({ open, onClose, ...props -}: MiniDialogProps) { +}: DialogBoxV2Props) { const [loading, setLoading] = useState(false); if (!attributes) { return <>;