fix(dialog): maxWidth default & configuration

also improves docs & samples
lumada-design · May 22, 2023 · 1b2047d · 1b2047d
1 parent b61e29d
commit 1b2047d
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 84 deletions.
diff --git a/packages/core/src/components/Banner/BannerContent/BannerContent.tsx b/packages/core/src/components/Banner/BannerContent/BannerContent.tsx
@@ -64,8 +64,7 @@ export const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(
     },
     ref
   ) => {
-    const icon =
-      customIcon || (showIcon && iconVariant(variant, "base_dark", undefined));
+    const icon = customIcon || (showIcon && iconVariant(variant, "base_dark"));
 
     // default to inline
     // this might try to be more intelligent in the future,

diff --git a/packages/core/src/components/Dialog/Dialog.stories.tsx b/packages/core/src/components/Dialog/Dialog.stories.tsx
@@ -84,17 +84,21 @@ export const Main: StoryObj<HvDialogProps> = {
     fullscreen: false,
     disableBackdropClick: false,
     buttonTitle: "Close",
+    maxWidth: "sm",
+    fullWidth: false,
   },
   argTypes: {
+    maxWidth: { control: "select", options: ["xs", "sm", "md", "lg", "xl"] },
     classes: { control: { disable: true } },
     BackdropComponent: { control: { disable: true } },
     BackdropProps: { control: { disable: true } },
     slotProps: { control: { disable: true } },
     components: { control: { disable: true } },
     componentsProps: { control: { disable: true } },
   },
-  render: ({ fullscreen, disableBackdropClick, buttonTitle }) => {
+  render: (args) => {
     const [open, setOpen] = useState(false);
+
     return (
       <div>
         <HvButton
@@ -105,21 +109,23 @@ export const Main: StoryObj<HvDialogProps> = {
           Open Dialog
         </HvButton>
         <HvDialog
-          disableBackdropClick={disableBackdropClick}
           id="test"
           open={open}
-          fullscreen={fullscreen}
+          {...args}
           onClose={() => setOpen(false)}
           firstFocusable="test-close"
-          buttonTitle={buttonTitle}
         >
           <HvDialogTitle variant="warning">Switch model view?</HvDialogTitle>
           <HvDialogContent indentContent>
             Switching to model view will clear all the fields in your
             visualization. You will need to re-select your fields.
           </HvDialogContent>
           <HvDialogActions>
-            <HvButton id="apply" variant="secondaryGhost">
+            <HvButton
+              id="apply"
+              variant="secondaryGhost"
+              onClick={() => setOpen(false)}
+            >
               Apply
             </HvButton>
             <HvButton
@@ -136,12 +142,13 @@ export const Main: StoryObj<HvDialogProps> = {
   },
 };
 
-export const TextAndSemantic: StoryObj<HvDialogProps> = {
+export const IconAndSemantic: StoryObj<HvDialogProps> = {
   parameters: {
     docs: {
       description: {
         story:
-          "The modal allow the definition of variants, that alters the presented icon.",
+          "`HvDialogTitle` accepts a `variant` prop, that changes the icon. <br />\
+          Alternatively, the `customIcon` prop allows for any custom icon",
       },
     },
   },
@@ -150,58 +157,37 @@ export const TextAndSemantic: StoryObj<HvDialogProps> = {
       <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
         <SimpleDialog
           buttonMessage="No icon"
-          title={<HvDialogTitle showIcon={false}>Are you sure?</HvDialogTitle>}
-          content={
-            <HvDialogContent>
-              Switching to model view will clear all the fields in your
-              visualization. You will need to re-select your fields.
-            </HvDialogContent>
-          }
+          title={<HvDialogTitle showIcon={false}>Dialog</HvDialogTitle>}
         />
         <SimpleDialog
           buttonMessage="Warning"
-          title={<HvDialogTitle variant="warning">Are you sure?</HvDialogTitle>}
+          title={<HvDialogTitle variant="warning">Warn Dialog</HvDialogTitle>}
           indentContent
         />
         <SimpleDialog
           buttonMessage="Info"
-          title={<HvDialogTitle variant="info">Are you sure?</HvDialogTitle>}
+          title={<HvDialogTitle variant="info">Info Dialog</HvDialogTitle>}
           indentContent
         />
         <SimpleDialog
           buttonMessage="Error"
-          title={<HvDialogTitle variant="error">Are you sure?</HvDialogTitle>}
+          title={<HvDialogTitle variant="error">Error Dialog</HvDialogTitle>}
+          indentContent
+        />
+        <SimpleDialog
+          buttonMessage="Custom icon"
+          title={
+            <HvDialogTitle customIcon={<Ungroup iconSize="S" />}>
+              Custom icon Dialog
+            </HvDialogTitle>
+          }
           indentContent
         />
       </div>
     );
   },
 };
 
-export const CustomIcon: StoryObj<HvDialogProps> = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "The standard icon can be replaced by a custom or just removed. The firstFocusable is set to the Switch Away button.",
-      },
-    },
-  },
-  render: () => {
-    return (
-      <SimpleDialog
-        buttonMessage="Custom icon"
-        title={
-          <HvDialogTitle customIcon={<Ungroup iconSize="S" />}>
-            Are you sure?
-          </HvDialogTitle>
-        }
-        indentContent
-      />
-    );
-  },
-};
-
 export const Accessibility: StoryObj<HvDialogProps> = {
   parameters: {
     docs: {

diff --git a/packages/core/src/components/Dialog/Dialog.styles.tsx b/packages/core/src/components/Dialog/Dialog.styles.tsx
@@ -1,8 +1,5 @@
 import styled from "@emotion/styled";
-import {
-  paperClasses as MuiPaperClasses,
-  Backdrop as MuiBackdrop,
-} from "@mui/material";
+import { Backdrop as MuiBackdrop } from "@mui/material";
 import { theme } from "@hitachivantara/uikit-styles";
 import { transientOptions } from "@core/utils/transientOptions";
 import fade from "@core/utils/hexToRgbA";
@@ -11,37 +8,14 @@ import { forwardRef, Ref } from "react";
 import { CSSInterpolation } from "@emotion/serialize";
 import { HvDialogClasses } from "./dialogClasses";
 
-export const styles: Partial<Record<keyof HvDialogClasses, CSSInterpolation>> =
-  {
-    paper: {
-      [`&.MuiDialog-paper`]: {
-        maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,
-        display: "flex",
-        flexDirection: "column",
-        color: theme.colors.secondary,
-        flex: "0 0 83.3333333%",
-        backgroundColor: theme.colors.atmo1,
-        padding: "0px",
-        overflow: "auto",
-        boxShadow: ["none", "0 2px 12px rgba(65,65,65,0.12)"],
-        borderRadius: theme.dialog.borderRadius,
-        [`&.${MuiPaperClasses.root}`]: {
-          // width: "inherit",
-          minWidth: "33.3333333%",
-          maxWidth: "83.3333333%",
-          "&.fullscreen": {
-            flex: "1",
-            borderRadius: "0",
-            width: "inherit",
-            minWidth: "100%",
-            maxWidth: "100%",
-            minHeight: "100%",
-            maxHeight: "100%",
-          },
-        },
-      },
-    },
-  };
+export const styles = {
+  paper: {
+    color: theme.colors.secondary,
+    backgroundColor: theme.colors.atmo1,
+    boxShadow: ["none", theme.colors.shadow],
+    borderRadius: theme.dialog.borderRadius,
+  },
+} satisfies Partial<Record<keyof HvDialogClasses, CSSInterpolation>>;
 
 export const StyledBackdrop = styled(
   MuiBackdrop,

diff --git a/packages/core/src/components/Dialog/Dialog.tsx b/packages/core/src/components/Dialog/Dialog.tsx
@@ -30,6 +30,10 @@ export interface HvDialogProps
     event: React.SyntheticEvent,
     reason?: "escapeKeyDown" | "backdropClick"
   ) => void;
+  /** @inheritdoc */
+  maxWidth?: MuiDialogProps["maxWidth"];
+  /** @inheritdoc */
+  fullWidth?: MuiDialogProps["fullWidth"];
   /** Element id that should be focus when the Dialog opens. */
   firstFocusable?: string;
   /** Title for the button close. */
@@ -178,8 +182,6 @@ export const HvDialog = ({
           fullScreen={fullscreen}
           onClose={(event, reason) => wrappedClose(event, undefined, reason)}
           onKeyDown={keyDownHandler}
-          fullWidth
-          maxWidth={false}
           slots={slots}
           classes={{ container: css({ position: "relative" }) }}
           BackdropProps={{

diff --git a/packages/core/src/components/Dialog/Title/Title.tsx b/packages/core/src/components/Dialog/Title/Title.tsx
@@ -46,7 +46,7 @@ export const HvDialogTitle = ({
   const { fullscreen } = others as any;
   delete (others as any).fullscreen;
 
-  const icon = customIcon || (showIcon && iconVariant(variant, "", ""));
+  const icon = customIcon || (showIcon && iconVariant(variant));
 
   return (
     <StyledTitle

diff --git a/packages/core/src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.tsx b/packages/core/src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.tsx
@@ -54,8 +54,7 @@ const HvSnackbarContent = forwardRef<HTMLDivElement, HvSnackbarContentProps>(
     },
     ref
   ) => {
-    const icon =
-      customIcon || (showIcon && iconVariant(variant, "base_dark", undefined));
+    const icon = customIcon || (showIcon && iconVariant(variant, "base_dark"));
     const innerAction: any = isValidElement(action) ? action : [action];
 
     return (

diff --git a/packages/core/src/utils/iconVariant.tsx b/packages/core/src/utils/iconVariant.tsx
@@ -4,9 +4,15 @@ import {
   Success,
   Caution,
   Info,
+  IconBaseProps,
 } from "@hitachivantara/uikit-react-icons";
+import { HvDialogTitleVariant } from "..";
 
-const iconVariant = (variant, color, semantic) => {
+const iconVariant = (
+  variant: HvDialogTitleVariant,
+  color?: IconBaseProps["color"],
+  semantic?: true
+) => {
   switch (variant) {
     case "success":
       return <Success color={color} semantic={semantic && "positive"} />;