feat(Dialog): update Dialog according to P+ specs (#4805)

* feat(Dialog): update Dialog according to P+ specs

* chore: add borders to content of the Dialog when scrolling
* chore: remove icon from the DialogTitle when not wanted
* chore: add resize observer to dialog content
* chore: review after feedback

Author: plagoa

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

@@ -4,9 +4,12 @@ import { theme } from "@hitachivantara/uikit-styles";
 export const { staticClasses, useClasses } = createClasses("HvDialog-Content", {
   root: {
     padding: theme.spacing(0, "sm", "sm"),
+    borderColor: theme.colors.borderSubtle,
+    borderTopWidth: "var(--borderW)",
+    borderBottomWidth: "var(--borderW)",
   },
   textContent: {
-    marginLeft: "42px",
+    paddingLeft: `calc(42px + ${theme.space.sm})`,
     paddingRight: "62px",
     overflowY: "auto",
   },

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

@@ -1,10 +1,13 @@
+import { useEffect, useRef, useState } from "react";
 import MuiDialogContent, {
   DialogContentProps as MuiDialogContentProps,
 } from "@mui/material/DialogContent";
 import {
+  mergeStyles,
   useDefaultProps,
   type ExtractNames,
 } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
 
 import { HvTypography } from "../../Typography";
 import { staticClasses, useClasses } from "./Content.styles";
@@ -27,19 +30,47 @@ export const HvDialogContent = (props: HvDialogContentProps) => {
     className,
     children,
     indentContent = false,
+    style,
     ...others
   } = useDefaultProps("HvDialogContent", props);
 
   const { classes, cx } = useClasses(classesProp);
+  const [hasBorder, setHasBorder] = useState(false);
+  const elRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (typeof ResizeObserver !== "undefined") {
+      const resizeObserver = new ResizeObserver(() => {
+        const el = elRef.current as HTMLElement | null;
+        if (el) {
+          const hasOverflow = el.scrollHeight > el.clientHeight;
+          setHasBorder(hasOverflow);
+        }
+      });
+
+      if (elRef.current) {
+        resizeObserver.observe(elRef.current as HTMLElement);
+      }
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return undefined;
+  }, []);
 
   return (
     <HvTypography
+      ref={elRef}
       component={MuiDialogContent}
       className={cx(
         classes.root,
         { [classes.textContent]: !!indentContent },
         className,
       )}
+      style={mergeStyles(style, {
+        "--borderW": hasBorder ? "1px" : "0px",
+      })}
       {...others}
     >
       {children}

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

@@ -13,7 +13,10 @@ export const { staticClasses, useClasses } = createClasses("HvDialog", {
     borderColor: theme.colors.border,
     borderRadius: theme.radii.round,
   },
-  fullscreen: {},
+  fullscreen: {
+    borderRadius: 0,
+  },
+
   fullHeight: {
     height: "100%",
   },

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

@@ -6,8 +6,8 @@ import {
   type ExtractNames,
 } from "@hitachivantara/uikit-react-utils";
 
+import { HvStatusIcon } from "../../StatusIcon";
 import { HvTypography } from "../../Typography";
-import { iconVariant } from "../../utils/iconVariant";
 import { useDialogContext } from "../context";
 import { staticClasses, useClasses } from "./Title.styles";
 
@@ -48,7 +48,7 @@ export const HvDialogTitle = (props: HvDialogTitleProps) => {
   const { classes, cx } = useClasses(classesProp);
   const { fullScreen } = useDialogContext();
 
-  const icon = customIcon || (showIcon && iconVariant(variant));
+  const icon = customIcon || (showIcon && <HvStatusIcon variant={variant} />);
 
   return (
     <HvTypography

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

@@ -64,12 +64,12 @@ export const FormStory = () => {
           </form>
         </HvDialogContent>
         <HvDialogActions>
-          <HvButton type="submit" form="create-post">
-            Create
-          </HvButton>
           <HvButton variant="secondaryGhost" onClick={() => setOpen(false)}>
             Cancel
           </HvButton>
+          <HvButton type="submit" form="create-post">
+            Create
+          </HvButton>
         </HvDialogActions>
       </HvDialog>
     </>

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

@@ -23,16 +23,16 @@ export const MainStory = (props: HvDialogProps) => {
           visualization. You will need to re-select your fields.
         </HvDialogContent>
         <HvDialogActions>
-          <HvButton variant="secondaryGhost" onClick={() => setOpen(false)}>
-            Apply
-          </HvButton>
           <HvButton
             autoFocus
             variant="secondaryGhost"
             onClick={() => setOpen(false)}
           >
             Cancel
           </HvButton>
+          <HvButton variant="secondaryGhost" onClick={() => setOpen(false)}>
+            Apply
+          </HvButton>
         </HvDialogActions>
       </HvDialog>
     </div>

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

@@ -7,6 +7,7 @@ import {
   HvDialogContent,
   HvDialogProps,
   HvDialogTitle,
+  HvStatusIcon,
 } from "@hitachivantara/uikit-react-core";
 import { Ungroup } from "@hitachivantara/uikit-react-icons";
 
@@ -50,16 +51,16 @@ const SimpleDialog = ({
         </HvDialogContent>
         <HvDialogActions>
           <HvButton
-            variant={variant ? buttonVariantMap[variant] : "secondaryGhost"}
+            variant={variant ? "secondarySubtle" : "secondaryGhost"}
             onClick={() => setOpen(false)}
           >
-            Apply
+            Cancel
           </HvButton>
           <HvButton
-            variant={variant ? "secondarySubtle" : "secondaryGhost"}
+            variant={variant ? buttonVariantMap[variant] : "secondaryGhost"}
             onClick={() => setOpen(false)}
           >
-            Cancel
+            Apply
           </HvButton>
         </HvDialogActions>
       </HvDialog>
@@ -72,7 +73,7 @@ export const SemanticVariantsStory = () => (
     <SimpleDialog
       buttonMessage="Warning"
       variant="warning"
-      title={<HvDialogTitle variant="error">Warning</HvDialogTitle>}
+      title={<HvDialogTitle variant="warning">Warning</HvDialogTitle>}
     />
     <SimpleDialog
       buttonMessage="Success"
@@ -91,7 +92,14 @@ export const SemanticVariantsStory = () => (
     <SimpleDialog
       buttonMessage="Custom"
       title={
-        <HvDialogTitle customIcon={<Ungroup iconSize="S" />}>
+        <HvDialogTitle
+          customIcon={
+            <HvStatusIcon
+              variant="default"
+              customIcon={<div className="i-ph-tree-structure" />}
+            />
+          }
+        >
           Custom
         </HvDialogTitle>
       }

packages/core/src/Drawer/Drawer.stories.tsx

@@ -70,7 +70,11 @@ export const Main: StoryObj<HvDrawerProps> = {
           open={open}
           {...args}
         >
-          <HvDialogTitle component="div" className={classes.drawerTitle}>
+          <HvDialogTitle
+            component="div"
+            className={classes.drawerTitle}
+            showIcon={false}
+          >
             Lorem Ipsum
           </HvDialogTitle>
           <HvDialogContent className={classes.drawerContent}>

packages/core/src/FileUploader/FileUploader.stories.tsx

@@ -306,7 +306,7 @@ export const WithPreviewThumbnails: StoryObj<HvFileUploaderProps> = {
           }}
         />
         <HvDialog open={open} onClose={() => setOpen(false)}>
-          <HvDialogTitle>{previewTitle}</HvDialogTitle>
+          <HvDialogTitle showIcon={false}>{previewTitle}</HvDialogTitle>
           <HvDialogContent>
             <img
               alt="Preview of the uploaded file"

packages/core/src/QueryBuilder/ConfirmationDialog/ConfirmationDialog.tsx

@@ -45,7 +45,9 @@ export const ConfirmationDialog = ({
       firstFocusable="confirmation-dialog-cancel"
       buttonTitle={closeButtonTooltip}
     >
-      <HvDialogTitle variant="warning">{title}</HvDialogTitle>
+      <HvDialogTitle variant="warning" showIcon={false}>
+        {title}
+      </HvDialogTitle>
       <HvDialogContent indentContent>{message}</HvDialogContent>
       <HvDialogActions>
         <HvButton variant="primaryGhost" onClick={onConfirm}>