feat(Dialog): variant prop added for dialog status bar (#3503)

packages/core/src/components/Dialog/Actions/Actions.tsx

@@ -16,6 +16,7 @@ export interface HvDialogActionsProps
     HvBaseProps {
   /** Set the dialog to fullscreen mode. */
   fullscreen?: boolean;
+  /** A Jss Object used to override or extend the styles applied to the component. */
   classes?: HvDialogActionClasses;
 }
 

packages/core/src/components/Dialog/Content/Content.tsx

@@ -17,6 +17,7 @@ export interface HvDialogContentProps
     HvBaseProps {
   /** Content should be indented in relationship to the Dialog title. */
   indentContent?: boolean;
+  /** A Jss Object used to override or extend the styles applied to the component. */
   classes?: HvDialogContentClasses;
 }
 

packages/core/src/components/Dialog/Dialog.stories.tsx

@@ -1,5 +1,12 @@
+import { useState } from "react";
+
 import { Ungroup } from "@hitachivantara/uikit-react-icons";
+import { theme } from "@hitachivantara/uikit-styles";
+
+import { css } from "@emotion/css";
+
 import { Meta, StoryObj } from "@storybook/react";
+
 import {
   HvButton,
   HvDialogContent,
@@ -11,25 +18,48 @@ import {
   HvTextArea,
   HvGrid,
 } from "@core/components";
-import { useState } from "react";
 
 type SimpleDialogProps = {
   buttonMessage?: string;
   title?: React.ReactNode;
   content?: React.ReactNode;
   classes?: any;
   indentContent?: boolean;
+  variant?: HvDialogProps["variant"];
 };
 
 const SimpleDialog = ({
   buttonMessage,
   title,
   content,
   classes,
+  variant,
   indentContent = false,
 }: SimpleDialogProps) => {
   const [open, setOpen] = useState(false);
 
+  const styles = {
+    success: {
+      backgroundColor: theme.colors.positive,
+      ":hover": {
+        backgroundColor: theme.colors.positive_120,
+      },
+    },
+    warning: {
+      backgroundColor: theme.colors.warning,
+      color: theme.colors.secondary,
+      ":hover": {
+        backgroundColor: theme.colors.warning_120,
+      },
+    },
+    error: {
+      backgroundColor: theme.colors.negative,
+      ":hover": {
+        backgroundColor: theme.colors.negative_120,
+      },
+    },
+  };
+
   return (
     <div>
       <HvButton
@@ -44,20 +74,27 @@ const SimpleDialog = ({
         classes={classes}
         open={open}
         onClose={() => setOpen(false)}
+        variant={variant}
       >
         {title}
-
         {content || (
           <HvDialogContent indentContent={indentContent}>
-            Switching to model view will clear all the fields in your
-            visualization. You will need to re-select your fields.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </HvDialogContent>
         )}
         <HvDialogActions>
-          <HvButton variant="secondaryGhost" onClick={() => setOpen(false)}>
+          <HvButton
+            className={variant ? css(styles[variant]) : undefined}
+            variant={variant ? "primary" : "secondaryGhost"}
+            onClick={() => setOpen(false)}
+          >
             Apply
           </HvButton>
-          <HvButton variant="secondaryGhost" onClick={() => setOpen(false)}>
+          <HvButton
+            variant={variant ? "secondarySubtle" : "secondaryGhost"}
+            onClick={() => setOpen(false)}
+          >
             Cancel
           </HvButton>
         </HvDialogActions>
@@ -73,6 +110,7 @@ const meta: Meta<typeof HvDialog> = {
   parameters: {
     eyes: { include: false },
   },
+  decorators: [(Story) => <div style={{ height: 250 }}>{Story()}</div>],
 };
 export default meta;
 
@@ -125,43 +163,46 @@ export const Main: StoryObj<HvDialogProps> = {
   },
 };
 
-export const IconAndSemantic: StoryObj<HvDialogProps> = {
+export const SemanticVariants: StoryObj<HvDialogProps> = {
   parameters: {
     docs: {
       description: {
         story:
-          "`HvDialogTitle` accepts a `variant` prop, that changes the icon. <br />\
-          Alternatively, the `customIcon` prop allows for any custom icon",
+          "The `HvDialog` component can receive a `variant` prop to set the status of the dialog. `HvDialogTitle` also accepts a `variant` prop that changes the icon. Alternatively, the `customIcon` prop allows for any custom icon",
       },
     },
   },
   render: () => {
     return (
       <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
-        <SimpleDialog
-          buttonMessage="No icon"
-          title={<HvDialogTitle showIcon={false}>Dialog</HvDialogTitle>}
-        />
         <SimpleDialog
           buttonMessage="Warning"
-          title={<HvDialogTitle variant="warning">Warn Dialog</HvDialogTitle>}
+          variant="warning"
+          title={<HvDialogTitle variant="error">Warning</HvDialogTitle>}
           indentContent
         />
         <SimpleDialog
-          buttonMessage="Info"
-          title={<HvDialogTitle variant="info">Info Dialog</HvDialogTitle>}
+          buttonMessage="Success"
+          variant="success"
+          title={<HvDialogTitle variant="success">Success</HvDialogTitle>}
           indentContent
         />
         <SimpleDialog
           buttonMessage="Error"
-          title={<HvDialogTitle variant="error">Error Dialog</HvDialogTitle>}
+          variant="error"
+          title={<HvDialogTitle variant="error">Error</HvDialogTitle>}
+          indentContent
+        />
+        <SimpleDialog
+          buttonMessage="Info"
+          title={<HvDialogTitle variant="info">Info</HvDialogTitle>}
           indentContent
         />
         <SimpleDialog
-          buttonMessage="Custom icon"
+          buttonMessage="Custom"
           title={
             <HvDialogTitle customIcon={<Ungroup iconSize="S" />}>
-              Custom icon Dialog
+              Custom
             </HvDialogTitle>
           }
           indentContent

packages/core/src/components/Dialog/Dialog.styles.tsx

@@ -21,4 +21,19 @@ export const { staticClasses, useClasses } = createClasses("HvDialog", {
     width: 32,
     height: 32,
   },
+  statusBar: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderTopWidth: 4,
+    borderTopStyle: "solid",
+  },
+  success: {
+    borderTopColor: theme.colors.positive,
+  },
+  error: {
+    borderTopColor: theme.colors.negative,
+  },
+  warning: {
+    borderTopColor: theme.colors.warning,
+  },
 });

packages/core/src/components/Dialog/Dialog.tsx

@@ -49,9 +49,12 @@ export interface HvDialogProps
   disableBackdropClick?: boolean;
   /** A Jss Object used to override or extend the styles applied to the component. */
   classes?: HvDialogClasses;
+  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */
+  variant?: "success" | "error" | "warning";
 }
 
 export const HvDialog = ({
+  variant,
   classes: classesProp,
   className,
   id,
@@ -112,7 +115,7 @@ export const HvDialog = ({
       // TODO: review
       // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
       container={document.getElementById(rootId || "") || document.body}
-      className={cx(className, classes.root)}
+      className={cx(classes.root, className)}
       classes={{ container: css({ position: "relative" }) }}
       id={id}
       ref={measuredRef}
@@ -138,10 +141,14 @@ export const HvDialog = ({
       }}
       PaperProps={{
         classes: {
-          root: cx(css({ position: "absolute" }), classes.paper, {
-            fullscreen,
-            [classes.fullscreen]: fullscreen,
-          }),
+          root: cx(
+            css({ position: "absolute" }),
+            classes.paper,
+            variant && cx(classes.statusBar, classes[variant]),
+            {
+              [classes.fullscreen]: fullscreen,
+            }
+          ),
         },
       }}
       aria-modal

packages/core/src/components/Dialog/Title/Title.tsx

@@ -23,12 +23,13 @@ export type HvDialogTitleVariant =
 export interface HvDialogTitleProps
   extends Omit<MuiDialogTitleProps, "variant" | "classes">,
     HvBaseProps<HTMLSpanElement, "color"> {
-  /** Variant of the Dialog. */
+  /** Variant of the dialog title. */
   variant?: HvDialogTitleVariant;
   /** Controls if the associated icon to the variant should be shown. */
   showIcon?: boolean;
   /** Custom icon to replace the variant default. */
   customIcon?: React.ReactNode;
+  /** A Jss Object used to override or extend the styles applied to the component. */
   classes?: HvDialogTitleClasses;
 }