From 11ec84d900ab870d3c6761e2279c1f79ff9a54bc Mon Sep 17 00:00:00 2001 From: Bruno Henriques Date: Thu, 9 Jan 2025 15:05:23 +0000 Subject: [PATCH] feat(Dialog): add fullHeight & fix stlyes on large heights --- apps/docs/src/pages/components/dialog.mdx | 3 +- .../src/Dialog/Actions/Actions.styles.tsx | 4 +- packages/core/src/Dialog/Actions/Actions.tsx | 4 +- .../src/Dialog/Content/Content.styles.tsx | 4 +- packages/core/src/Dialog/Dialog.stories.tsx | 16 ++++---- packages/core/src/Dialog/Dialog.styles.tsx | 3 ++ packages/core/src/Dialog/Dialog.tsx | 40 +++++++++---------- .../core/src/Dialog/Title/Title.styles.tsx | 23 +++++------ packages/core/src/Dialog/Title/Title.tsx | 39 +++++++----------- packages/core/src/Dialog/context.ts | 2 +- .../core/src/Dialog/stories/FormStory.tsx | 6 ++- 11 files changed, 67 insertions(+), 77 deletions(-) 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