diff --git a/apps/docs/src/pages/components/dialog.mdx b/apps/docs/src/pages/components/dialog.mdx
index 2b376c6fde..387a160bb5 100644
--- a/apps/docs/src/pages/components/dialog.mdx
+++ b/apps/docs/src/pages/components/dialog.mdx
@@ -316,6 +316,7 @@ export default function Demo() {
{JSON.stringify(postData, null, 2)}
setOpen(false)}
aria-describedby={descId}
@@ -337,7 +338,7 @@ export default function Demo() {
-
+
Create
diff --git a/packages/core/src/Dialog/Actions/Actions.styles.tsx b/packages/core/src/Dialog/Actions/Actions.styles.tsx
index 5ae998dab8..a40f858579 100644
--- a/packages/core/src/Dialog/Actions/Actions.styles.tsx
+++ b/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: {
diff --git a/packages/core/src/Dialog/Actions/Actions.tsx b/packages/core/src/Dialog/Actions/Actions.tsx
index 566b2b5832..85da334985 100644
--- a/packages/core/src/Dialog/Actions/Actions.tsx
+++ b/packages/core/src/Dialog/Actions/Actions.tsx
@@ -30,7 +30,7 @@ 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);
@@ -38,7 +38,7 @@ export const HvDialogActions = (props: HvDialogActionsProps) => {
= {
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) => ,
};
@@ -105,6 +97,14 @@ export const Form: StoryObj = {
Accessibility-wise, `HvDialogTitle` automatically labels the dialog. A `aria-describedby` can be used to describe the content.",
},
},
+ ...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: /create a post/i });
+ await userEvent.click(button);
+ await expect(canvas.getByRole("dialog")).toBeInTheDocument();
},
decorators: [(Story) => {Story()}
],
render: () => ,
diff --git a/packages/core/src/Dialog/Dialog.styles.tsx b/packages/core/src/Dialog/Dialog.styles.tsx
index fb66422c82..2ce07d21c6 100644
--- a/packages/core/src/Dialog/Dialog.styles.tsx
+++ b/packages/core/src/Dialog/Dialog.styles.tsx
@@ -11,6 +11,9 @@ export const { staticClasses, useClasses } = createClasses("HvDialog", {
borderRadius: theme.radii.round,
},
fullscreen: {},
+ fullHeight: {
+ height: "100%",
+ },
closeButton: {
padding: 0,
minWidth: "auto",
diff --git a/packages/core/src/Dialog/Dialog.tsx b/packages/core/src/Dialog/Dialog.tsx
index c659315d32..9a2d84467b 100644
--- a/packages/core/src/Dialog/Dialog.tsx
+++ b/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 (
{
// `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}
>
-
title={buttonTitle}
id={setId(id, "close")}
className={classes.closeButton}
- onClick={(event: React.MouseEvent) =>
- onClose?.(event, undefined)
- }
+ onClick={(event) => onClose?.(event, undefined)}
>
diff --git a/packages/core/src/Dialog/Title/Title.styles.tsx b/packages/core/src/Dialog/Title/Title.styles.tsx
index 398df651e2..4179c82e94 100644
--- a/packages/core/src/Dialog/Title/Title.styles.tsx
+++ b/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: {
+ marginRight: 32, // close icon padding
+ flex: "0 0 auto",
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: {},
});
diff --git a/packages/core/src/Dialog/Title/Title.tsx b/packages/core/src/Dialog/Title/Title.tsx
index 524e18cca2..2942bb4f2b 100644
--- a/packages/core/src/Dialog/Title/Title.tsx
+++ b/packages/core/src/Dialog/Title/Title.tsx
@@ -1,11 +1,9 @@
-import MuiDialogTitle, {
- DialogTitleProps as MuiDialogTitleProps,
-} from "@mui/material/DialogTitle";
import {
useDefaultProps,
type ExtractNames,
} from "@hitachivantara/uikit-react-utils";
+import { HvTypography, HvTypographyProps } from "../../Typography";
import { iconVariant } from "../../utils/iconVariant";
import { useDialogContext } from "../context";
import { staticClasses, useClasses } from "./Title.styles";
@@ -22,7 +20,7 @@ export type HvDialogTitleVariant =
| "default";
export interface HvDialogTitleProps
- extends Omit {
+ extends Omit {
/** Variant of the dialog title. */
variant?: HvDialogTitleVariant;
/** Controls if the associated icon to the variant should be shown. */
@@ -40,40 +38,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 (
-
-
- {icon}
-
- {children}
-
-
-
+ {icon}
+ {children}
+
);
};
diff --git a/packages/core/src/Dialog/context.ts b/packages/core/src/Dialog/context.ts
index 9eaea5fefd..d1aab2d207 100644
--- a/packages/core/src/Dialog/context.ts
+++ b/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);
diff --git a/packages/core/src/Dialog/stories/FormStory.tsx b/packages/core/src/Dialog/stories/FormStory.tsx
index 0913ba9578..c6d7e2e226 100644
--- a/packages/core/src/Dialog/stories/FormStory.tsx
+++ b/packages/core/src/Dialog/stories/FormStory.tsx
@@ -39,6 +39,7 @@ export const FormStory = () => {
{JSON.stringify(postData, null, 2)}
setOpen(false)}
aria-describedby={descId}
@@ -60,7 +61,10 @@ export const FormStory = () => {
-
+
Create