add CustomModal

Author: veej

Diff for: packages/bento-design-system/src/Modal/createModal.tsx

@@ -25,6 +25,10 @@ type Props = {
   size?: "small" | "medium" | "large";
 };
 
+type CustomModalProps = Pick<Props, "children" | "isDestructive" | "size"> & {
+  ["aria-label"]: string;
+};
+
 export function createModal(
   config: ModalConfig,
   {
@@ -35,7 +39,7 @@ export function createModal(
     IconButton: FunctionComponent<IconButtonProps>;
   }
 ) {
-  return function Modal(props: Props) {
+  function CustomModal(props: CustomModalProps) {
     const ref = useRef<HTMLDivElement>(null);
     const { overlayProps, underlayProps } = useOverlay({ ...props, isOpen: true }, ref);
 
@@ -45,20 +49,12 @@ export function createModal(
 
     const { dialogProps } = useDialog(
       {
-        "aria-label": props.title,
+        "aria-label": props["aria-label"],
         role: props.isDestructive ? "alertdialog" : "dialog",
       },
       ref
     );
 
-    // Trigger the primary action on 'Enter' if there is one
-    useKeyPressEvent(
-      (key) => key.code === "Enter",
-      () => props.primaryAction?.onPress()
-    );
-
-    const { defaultMessages } = useDefaultMessages();
-
     return createPortal(
       <Box className={underlay} {...underlayProps} color={undefined}>
         <ModalContext.Provider value={true}>
@@ -71,44 +67,62 @@ export function createModal(
               color={undefined}
               borderRadius={config.radius}
             >
-              <Inset space={config.padding}>
-                <Columns space={16} alignY="top">
-                  <Title size={config.titleSize}>{props.title}</Title>
-                  <Column width="content">
-                    <IconButton
-                      icon={config.closeIcon}
-                      label={props.closeButtonLabel ?? defaultMessages.Modal.closeButtonLabel}
-                      onPress={props.onClose}
-                      size={config.closeIconSize}
-                      tabIndex={-1}
-                      kind="transparent"
-                      hierarchy="secondary"
-                    />
-                  </Column>
-                </Columns>
-              </Inset>
-              <Box className={modalBody} paddingX={config.padding}>
-                {props.children}
-              </Box>
-              <Inset space={config.padding}>
-                <Actions
-                  primaryAction={
-                    props.primaryAction
-                      ? { ...props.primaryAction, isDestructive: props.isDestructive }
-                      : undefined
-                  }
-                  secondaryAction={props.secondaryAction}
-                  size="large"
-                  loadingMessage={props.loadingMessage}
-                  error={props.error}
-                />
-              </Inset>
+              {props.children}
             </Box>
           </FocusScope>
         </ModalContext.Provider>
       </Box>
     );
-  };
+  }
+
+  function Modal(props: Props) {
+    // Trigger the primary action on 'Enter' if there is one
+    useKeyPressEvent(
+      (key) => key.code === "Enter",
+      () => props.primaryAction?.onPress()
+    );
+
+    const { defaultMessages } = useDefaultMessages();
+
+    return (
+      <CustomModal {...props} aria-label={props.title}>
+        <Inset space={config.padding}>
+          <Columns space={16} alignY="top">
+            <Title size={config.titleSize}>{props.title}</Title>
+            <Column width="content">
+              <IconButton
+                icon={config.closeIcon}
+                label={props.closeButtonLabel ?? defaultMessages.Modal.closeButtonLabel}
+                onPress={props.onClose}
+                size={config.closeIconSize}
+                tabIndex={-1}
+                kind="transparent"
+                hierarchy="secondary"
+              />
+            </Column>
+          </Columns>
+        </Inset>
+        <Box className={modalBody} paddingX={config.padding}>
+          {props.children}
+        </Box>
+        <Inset space={config.padding}>
+          <Actions
+            primaryAction={
+              props.primaryAction
+                ? { ...props.primaryAction, isDestructive: props.isDestructive }
+                : undefined
+            }
+            secondaryAction={props.secondaryAction}
+            size="large"
+            loadingMessage={props.loadingMessage}
+            error={props.error}
+          />
+        </Inset>
+      </CustomModal>
+    );
+  }
+
+  return { CustomModal, Modal };
 }
 
 export type { Props as ModalProps };

Diff for: packages/storybook/stories/Components/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import { Modal, Body, Placeholder, Stack } from "../";
+import { Modal, Body, Placeholder, Stack, CustomModal, Feedback, Inset } from "../";
 import { createComponentStories, formatMessage, textArgType } from "../util";
 import { action } from "@storybook/addon-actions";
 import { screen } from "@storybook/testing-library";
@@ -132,3 +132,21 @@ export const Large = createStory({
     onPress: action("Cancel"),
   },
 });
+
+export const Custom = () => {
+  return (
+    <CustomModal aria-label="Custom modal" isDestructive size="medium">
+      <Inset space={24}>
+        <Stack space={0} align="center">
+          <Feedback
+            size="medium"
+            status="negative"
+            title={formatMessage("Something went wrong")}
+            description={formatMessage("Wait a few minutes and retry")}
+            action={{ label: formatMessage("retry"), onPress: action("onPress") }}
+          />
+        </Stack>
+      </Inset>
+    </CustomModal>
+  );
+};

Diff for: packages/storybook/stories/index.tsx

@@ -80,7 +80,7 @@ export const BentoProvider = createBentoProvider(ToastProvider);
 export const Card = createCard<24 | 32 | 40>(defaultConfigs.card);
 export const Link = createLink(defaultConfigs.link);
 export const Breadcrumb = createBreadcrumb(defaultConfigs.breadcrumb, { Link });
-export const Modal = createModal(defaultConfigs.modal, { Actions, IconButton });
+export const { Modal, CustomModal } = createModal(defaultConfigs.modal, { Actions, IconButton });
 export const Chip = createChip(
   {
     ...defaultConfigs.chip,