feat(Dialog): add fullHeight & fix styles on large heights

apps/docs/src/pages/components/dialog.mdx

@@ -316,6 +316,7 @@ export default function Demo() {
       <pre>{JSON.stringify(postData, null, 2)}</pre>
       <HvDialog
         disableBackdropClick
+        fullHeight
         open={open}
         onClose={() => setOpen(false)}
         aria-describedby={descId}

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

@@ -3,12 +3,12 @@ import { theme } from "@hitachivantara/uikit-styles";
 
 export const { staticClasses, useClasses } = createClasses("HvDialog-Action", {
   root: {
-    margin: "0",
+    margin: 0,
     padding: theme.space.sm,
+    backgroundColor: "inherit",
     borderTop: `3px solid ${theme.colors.atmo2}`,
     height: 65,
     maxHeight: 65,
-    flex: 1,
   },
   fullscreen: { position: "fixed", width: "100%", bottom: 0, left: 0 },
   spacing: {

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

@@ -30,15 +30,15 @@ export const HvDialogActions = (props: HvDialogActionsProps) => {
     ...others
   } = useDefaultProps("HvDialogActions", props);
   const context = useDialogContext();
-  const fullscreen = fullScreenProp ?? context.fullscreen;
+  const fullScreen = fullScreenProp ?? context.fullScreen;
 
   const { classes, cx } = useClasses(classesProp);
 
   return (
     <MuiDialogActions
       className={className}
       classes={{
-        root: cx(classes.root, { [classes.fullscreen]: fullscreen }),
+        root: cx(classes.root, { [classes.fullscreen]: fullScreen }),
         spacing: classes.spacing,
       }}
       {...others}

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

@@ -3,13 +3,11 @@ import { theme } from "@hitachivantara/uikit-styles";
 
 export const { staticClasses, useClasses } = createClasses("HvDialog-Content", {
   root: {
-    padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,
-    flex: "none",
+    padding: theme.spacing(0, "sm", "sm"),
   },
   textContent: {
     marginLeft: "42px",
     paddingRight: "62px",
-    flex: 1,
     overflowY: "auto",
   },
 });

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

@@ -48,14 +48,6 @@ export const Main: StoryObj<HvDialogProps> = {
     docs: {
       source: { code: MainStoryRaw },
     },
-    ...setupChromatic(["DS3 dawn", "DS5 dawn", "Pentaho+ dawn"]),
-  },
-  // For visual testing and a11y
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole("button", { name: /open dialog/i });
-    await userEvent.click(button);
-    await expect(canvas.getByRole("dialog")).toBeInTheDocument();
   },
   render: (args) => <MainStory {...args} />,
 };
@@ -105,6 +97,18 @@ export const Form: StoryObj<HvDialogProps> = {
           Accessibility-wise, `HvDialogTitle` automatically labels the dialog. A `aria-describedby` can be used to describe the content.",
       },
     },
+    chromatic: {
+      modes: {
+        md: { viewport: 1200 },
+      },
+    },
+  },
+  // For visual testing and a11y
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /create a post/i });
+    await userEvent.click(button);
+    await expect(canvas.getByRole("dialog")).toBeInTheDocument();
   },
   decorators: [(Story) => <div style={{ minHeight: 440 }}>{Story()}</div>],
   render: () => <FormStory />,

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

@@ -7,10 +7,14 @@ export const { staticClasses, useClasses } = createClasses("HvDialog", {
   paper: {
     color: theme.colors.secondary,
     backgroundColor: theme.colors.atmo1,
-    boxShadow: ["none", theme.colors.shadow],
+    boxShadow: theme.colors.shadow,
+    borderColor: theme.colors.atmo4,
     borderRadius: theme.radii.round,
   },
   fullscreen: {},
+  fullHeight: {
+    height: "100%",
+  },
   closeButton: {
     padding: 0,
     minWidth: "auto",
@@ -24,15 +28,14 @@ export const { staticClasses, useClasses } = createClasses("HvDialog", {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
     borderTopWidth: 4,
-    borderTopStyle: "solid",
   },
   success: {
-    borderTopColor: theme.colors.positive,
+    borderColor: theme.colors.positive,
   },
   error: {
-    borderTopColor: theme.colors.negative,
+    borderColor: theme.colors.negative,
   },
   warning: {
-    borderTopColor: theme.colors.warning,
+    borderColor: theme.colors.warning,
   },
 });

packages/core/src/Dialog/Dialog.tsx

@@ -30,6 +30,8 @@ export interface HvDialogProps
   maxWidth?: MuiDialogProps["maxWidth"];
   /** @inheritdoc */
   fullWidth?: MuiDialogProps["fullWidth"];
+  /** If true, the dialog stretches vertically, limited by the margins. @default false */
+  fullHeight?: boolean;
   /**
    * Element id that should be focus when the Dialog opens.
    * Auto-focusing elements can cause usability issues, so this should be avoided.
@@ -63,12 +65,13 @@ export const HvDialog = (props: HvDialogProps) => {
     onClose,
     firstFocusable,
     buttonTitle = "Close",
-    fullscreen = false,
+    fullHeight,
+    fullscreen: fullScreen = false, // TODO: rename to `fullScreen` in v6
     disableBackdropClick = false,
     ...others
   } = useDefaultProps("HvDialog", props);
 
-  const { classes, css, cx } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const { rootId } = useTheme();
 
   const measuredRef = useCallback(() => {
@@ -78,17 +81,24 @@ export const HvDialog = (props: HvDialogProps) => {
     element?.focus();
   }, [firstFocusable]);
 
-  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);
+  const contextValue = useMemo(() => ({ fullScreen }), [fullScreen]);
 
   return (
     <MuiDialog
       container={getElementById(rootId)}
-      className={cx(classes.root, className)}
-      classes={{ container: css({ position: "relative" }) }}
+      className={className}
+      classes={{
+        root: classes.root,
+        paper: cx(classes.paper, classes[variant!], {
+          [classes.fullHeight]: fullHeight,
+          [classes.statusBar]: !!variant,
+          [classes.fullscreen]: fullScreen,
+        }),
+      }}
       id={id}
       ref={measuredRef}
       open={open}
-      fullScreen={fullscreen}
+      fullScreen={fullScreen}
       onClose={(event, reason) => {
         // `disableBackdropClick` property was removed in MUI5
         // and we want to maintain that functionality
@@ -103,27 +113,13 @@ export const HvDialog = (props: HvDialogProps) => {
           },
         },
       }}
-      PaperProps={{
-        classes: {
-          root: cx(
-            css({ position: "absolute" }),
-            classes.paper,
-            variant && cx(classes.statusBar, classes[variant]),
-            {
-              [classes.fullscreen]: fullscreen,
-            },
-          ),
-        },
-      }}
       {...others}
     >
-      <HvIconButton
+      <HvIconButton<"button">
         title={buttonTitle}
         id={setId(id, "close")}
         className={classes.closeButton}
-        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
-          onClose?.(event, undefined)
-        }
+        onClick={(event) => onClose?.(event, undefined)}
       >
         <Close />
       </HvIconButton>

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

@@ -3,21 +3,18 @@ import { theme } from "@hitachivantara/uikit-styles";
 
 export const { staticClasses, useClasses } = createClasses("HvDialog-Title", {
   root: {
-    fontFamily: theme.fontFamily.body, // override MUI font
     padding: theme.space.sm,
-    margin: 0,
-  },
-  fullscreen: {},
-  messageContainer: {
+    paddingRight: 32 + 16, // close icon padding
+    backgroundColor: "inherit",
     display: "flex",
     alignItems: "center",
+    gap: theme.space.xs,
   },
-  textWithIcon: {
-    marginLeft: theme.space.xs,
-    // 32px is the icon width
-    marginRight: `calc(32px + ${theme.space.xs})`,
-  },
-  titleText: {
-    ...theme.typography.title4,
-  },
+  fullscreen: {},
+  /** @deprecated use `classes.root` instead  */
+  messageContainer: {},
+  // TODO: consider deprecating
+  textWithIcon: {},
+  /** @deprecated use `classes.root` instead */
+  titleText: {},
 });

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

@@ -6,6 +6,7 @@ import {
   type ExtractNames,
 } from "@hitachivantara/uikit-react-utils";
 
+import { HvTypography } from "../../Typography";
 import { iconVariant } from "../../utils/iconVariant";
 import { useDialogContext } from "../context";
 import { staticClasses, useClasses } from "./Title.styles";
@@ -40,40 +41,33 @@ export const HvDialogTitle = (props: HvDialogTitleProps) => {
     children,
     variant = "default",
     showIcon = true,
-    customIcon = null,
+    customIcon,
     ...others
   } = useDefaultProps("HvDialogTitle", props);
 
-  const { classes, css, cx } = useClasses(classesProp);
-  const { fullscreen } = useDialogContext();
-
-  const isString = typeof children === "string";
+  const { classes, cx } = useClasses(classesProp);
+  const { fullScreen } = useDialogContext();
 
   const icon = customIcon || (showIcon && iconVariant(variant));
 
   return (
-    <MuiDialogTitle
+    <HvTypography
+      component={MuiDialogTitle}
+      variant="title4"
       className={cx(
-        !fullscreen && css({ flex: 1 }),
         classes.root,
+        classes.messageContainer,
         {
-          [classes.fullscreen]: fullscreen,
+          [classes.fullscreen]: fullScreen,
+          [classes.textWithIcon]: icon,
+          [classes.titleText]: typeof children === "string",
         },
         className,
       )}
       {...others}
     >
-      <div className={classes.messageContainer}>
-        {icon}
-        <div
-          className={cx({
-            [classes.textWithIcon]: !!icon,
-            [classes.titleText]: isString,
-          })}
-        >
-          {children}
-        </div>
-      </div>
-    </MuiDialogTitle>
+      {icon}
+      {children}
+    </HvTypography>
   );
 };

packages/core/src/Dialog/context.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
 
-export const DialogContext = createContext({ fullscreen: false });
+export const DialogContext = createContext({ fullScreen: false });
 
 export const useDialogContext = () => useContext(DialogContext);

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

@@ -39,11 +39,14 @@ export const FormStory = () => {
       <pre>{JSON.stringify(postData, null, 2)}</pre>
       <HvDialog
         disableBackdropClick
+        fullHeight
         open={open}
         onClose={() => setOpen(false)}
         aria-describedby={descId}
       >
-        <HvDialogTitle>Create a new post</HvDialogTitle>
+        <HvDialogTitle>
+          <span>Create a new post</span>
+        </HvDialogTitle>
         <HvDialogContent>
           <div id={descId} style={{ marginBottom: 10 }}>
             Fill the following form to create a post.

packages/core/src/Section/Section.stories.tsx

@@ -22,6 +22,7 @@ export default meta;
 export const Main: StoryObj<HvSectionProps> = {
   args: {
     title: "Section Title",
+    raisedHeader: false,
     expandable: false,
     defaultExpanded: true,
   },

packages/core/src/Section/Section.styles.tsx

@@ -14,6 +14,7 @@ export const { staticClasses, useClasses } = createClasses("HvSection", {
   header: {
     display: "flex",
     alignItems: "center",
+    borderColor: "inherit",
     position: "relative",
     minHeight: theme.sizes.sm,
     padding: theme.space.sm,
@@ -36,6 +37,7 @@ export const { staticClasses, useClasses } = createClasses("HvSection", {
   raisedHeader: {
     "& $header": {
       zIndex: 1,
+      borderBottomWidth: 1,
       boxShadow: theme.colors.shadow,
     },
     "& $content": {

packages/core/src/Section/Section.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { Down } from "@hitachivantara/uikit-react-icons";
+import { DropDownXS } from "@hitachivantara/uikit-react-icons";
 import {
   useDefaultProps,
   type ExtractNames,
@@ -94,7 +94,7 @@ export const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(
                 {...buttonProps}
                 {...expandButtonProps}
               >
-                <Down rotate={isOpen} />
+                <DropDownXS rotate={isOpen} />
               </HvButton>
             )}
             {title}

packages/core/src/TableSection/TableSection.styles.tsx

@@ -13,7 +13,6 @@ export const { staticClasses, useClasses } = createClasses("HvTableSection", {
   header: {
     // Only apply the border to divide the header and content when both are displayed
     "+ div": {
-      borderTop: `1px solid ${theme.colors.atmo3}`,
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
     },

packages/lab/src/Flow/Node/Node.tsx

@@ -11,7 +11,7 @@ import {
   theme,
   useLabels,
 } from "@hitachivantara/uikit-react-core";
-import { Down, Info, Up } from "@hitachivantara/uikit-react-icons";
+import { DropDownXS, Info } from "@hitachivantara/uikit-react-icons";
 
 import { useFlowContext, useFlowNode, useFlowNodeUtils } from "../hooks";
 import { HvFlowNodeParam } from "../types";
@@ -137,11 +137,7 @@ export const HvFlowNode = ({
               }
               {...expandParamsButtonProps}
             >
-              {showParams ? (
-                <Up color="base_dark" />
-              ) : (
-                <Down color="base_dark" />
-              )}
+              <DropDownXS rotate={showParams} color="base_dark" />
             </HvButton>
           )}
         </>