fix: allow overriding styles on the Dialog component

lumada-design · May 2, 2023 · 1725a45 · 1725a45
1 parent 7d0680f
commit 1725a45
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 32 deletions.
diff --git a/packages/core/src/components/Dialog/Dialog.styles.tsx b/packages/core/src/components/Dialog/Dialog.styles.tsx
@@ -1,6 +1,5 @@
 import styled from "@emotion/styled";
 import {
-  Paper as MuiPaper,
   paperClasses as MuiPaperClasses,
   Backdrop as MuiBackdrop,
 } from "@mui/material";
@@ -9,32 +8,38 @@ import { transientOptions } from "@core/utils/transientOptions";
 import fade from "@core/utils/hexToRgbA";
 import { HvButton, HvButtonProps } from "@core/components";
 import { forwardRef, Ref } from "react";
+import { CSSInterpolation } from "@emotion/serialize";
 
-export const StyledPaper = styled(
-  MuiPaper,
-  transientOptions
-)(({ $fullscreen }: { $fullscreen: boolean }) => ({
-  color: theme.colors.secondary,
-  flex: $fullscreen ? "1" : "0 0 83.3333333%",
-  backgroundColor: theme.colors.atmo1,
-  padding: "0px",
-  overflow: "auto",
-  boxShadow: ["none", "0 2px 12px rgba(65,65,65,0.12)"],
-  borderRadius: theme.dialog.borderRadius,
-  ...(!$fullscreen && {
-    maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,
-    display: "flex",
-    flexDirection: "column",
-  }),
-  "& svg *.color0": {
-    fill: theme.colors.secondary,
-  },
-  [`&.${MuiPaperClasses.root}`]: {
-    width: "inherit",
-    minWidth: $fullscreen ? "100%" : "33.3333333%",
-    maxWidth: $fullscreen ? "100%" : "83.3333333%",
+export const styles: { [key: string]: CSSInterpolation } = {
+  paper: {
+    [`&.MuiDialog-paper`]: {
+      maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,
+      display: "flex",
+      flexDirection: "column",
+      color: theme.colors.secondary,
+      flex: "0 0 83.3333333%",
+      backgroundColor: theme.colors.atmo1,
+      padding: "0px",
+      overflow: "auto",
+      boxShadow: ["none", "0 2px 12px rgba(65,65,65,0.12)"],
+      borderRadius: theme.dialog.borderRadius,
+      [`&.${MuiPaperClasses.root}`]: {
+        width: "inherit",
+        minWidth: "33.3333333%",
+        maxWidth: "83.3333333%",
+        "&.fullscreen": {
+          flex: "1",
+          borderRadius: "0",
+          width: "inherit",
+          minWidth: "100%",
+          maxWidth: "100%",
+          minHeight: "100%",
+          maxHeight: "100%",
+        },
+      },
+    },
   },
-}));
+};
 
 export const StyledBackdrop = styled(
   MuiBackdrop,

diff --git a/packages/core/src/components/Dialog/Dialog.tsx b/packages/core/src/components/Dialog/Dialog.tsx
@@ -5,7 +5,7 @@ import { Close } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 import isNil from "lodash/isNil";
 import { HvBaseProps } from "@core/types/generic";
-import { StyledBackdrop, StyledClose, StyledPaper } from "./Dialog.styles";
+import { StyledBackdrop, StyledClose, styles } from "./Dialog.styles";
 import {
   isKeypress,
   keyboardCodes,
@@ -174,17 +174,19 @@ export const HvDialog = ({
               root: clsx(classes?.background, dialogClasses.background),
             },
           }}
-          PaperComponent={(paperProps) => (
-            <StyledPaper $fullscreen={fullscreen} {...paperProps} />
-          )}
           PaperProps={{
             classes: {
               root: clsx(
-                css({ position: "absolute" }),
+                css(styles.paper),
                 classes?.paper,
                 dialogClasses.paper,
+                css({ position: "absolute" }),
                 fullscreen &&
-                  clsx(dialogClasses.fullscreen, classes?.fullscreen)
+                  clsx(
+                    dialogClasses.fullscreen,
+                    classes?.fullscreen,
+                    "fullscreen"
+                  )
               ),
             },
           }}

diff --git a/packages/lab/src/components/StepNavigation/StepNavigation.tsx b/packages/lab/src/components/StepNavigation/StepNavigation.tsx
@@ -246,7 +246,6 @@ export const HvStepNavigation = ({
           TITLE_MARGIN,
         SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth
       );
-    // const next = theme.breakpoints.keys.find((_, index, self) =>
     const next = Object.keys(theme.breakpoints.values).find((_, index, self) =>
       index - 1 >= 0 ? self[index - 1] === breakpoint : false
     );