fix(HvWizard, HvStepNavigation): step navigation with maxWidth on xl …

…breakpoint; #3368 (#3369) * `HvStepNavigation`: Definition of missing maxWidth on `xl` breakpoint * `HvWizard`: Extend definition of props `maxWidth` and `fullWidth` of `HvDialog`
lumada-design · May 24, 2023 · 915d176 · 915d176
1 parent 04c5503
commit 915d176
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 20 deletions.
diff --git a/packages/lab/src/components/StepNavigation/StepNavigation.tsx b/packages/lab/src/components/StepNavigation/StepNavigation.tsx
@@ -248,11 +248,10 @@ export const HvStepNavigation = ({
     const next = Object.keys(themeBreakpoints).find((_, index, self) =>
       index - 1 >= 0 ? self[index - 1] === breakpoint : false
     );
-
-    const navWidth =
-      (next && Math.min(maxWidth, themeBreakpoints[next] ?? maxWidth)) ||
-      themeBreakpoints[breakpoint];
-
+    const navWidth = Math.min(
+      maxWidth,
+      next ? themeBreakpoints[next] : maxWidth
+    );
     const titleWidth =
       Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);
     const separatorWidth =

diff --git a/packages/lab/src/components/StepNavigation/__snapshots__/StepNavigation.test.tsx.snap b/packages/lab/src/components/StepNavigation/__snapshots__/StepNavigation.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`StepNavigation > should render correctly 1`] = `
 <div>
   <div>
     <nav
-      style="margin: 0px;"
+      style="width: 700px; margin: 0px;"
     >
       <ol
         class="HvStepNavigation-ol css-fg3xwr"
@@ -79,7 +79,7 @@ exports[`StepNavigation > should render correctly 1`] = `
         </li>
         <li
           aria-hidden="true"
-          class="HvStepNavigation-separator css-1h0nyka-StyledLi e1wrrltm1"
+          class="HvStepNavigation-separator css-qletfj-StyledLi e1wrrltm1"
         >
           <div
             aria-label="separator-Completed"
@@ -153,7 +153,7 @@ exports[`StepNavigation > should render correctly 1`] = `
         </li>
         <li
           aria-hidden="true"
-          class="HvStepNavigation-separator css-1mktd4n-StyledLi e1wrrltm1"
+          class="HvStepNavigation-separator css-1rte3m9-StyledLi e1wrrltm1"
         >
           <div
             aria-label="separator-Failed"
@@ -222,7 +222,7 @@ exports[`StepNavigation > should render correctly 1`] = `
         </li>
         <li
           aria-hidden="true"
-          class="HvStepNavigation-separator css-qr06ca-StyledLi e1wrrltm1"
+          class="HvStepNavigation-separator css-hle24q-StyledLi e1wrrltm1"
         >
           <div
             aria-label="separator-Pending"
@@ -276,7 +276,7 @@ exports[`StepNavigation > should render correctly 1`] = `
         </li>
         <li
           aria-hidden="true"
-          class="HvStepNavigation-separator css-15jv2oq-StyledLi e1wrrltm1"
+          class="HvStepNavigation-separator css-18yd98g-StyledLi e1wrrltm1"
         >
           <div
             aria-label="separator-Current"
@@ -328,7 +328,7 @@ exports[`StepNavigation > should render correctly 1`] = `
         </li>
         <li
           aria-hidden="true"
-          class="HvStepNavigation-separator css-kway43-StyledLi e1wrrltm1"
+          class="HvStepNavigation-separator css-1pqgfqb-StyledLi e1wrrltm1"
         >
           <div
             aria-label="separator-Enabled"

diff --git a/packages/lab/src/components/Wizard/Wizard.tsx b/packages/lab/src/components/Wizard/Wizard.tsx
@@ -1,4 +1,4 @@
-import { HvBaseProps } from "@hitachivantara/uikit-react-core";
+import { HvBaseProps, HvDialogProps } from "@hitachivantara/uikit-react-core";
 import { ModalProps } from "@mui/material";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { HvWizardClasses } from "./wizardClasses";
@@ -14,7 +14,9 @@ import {
 } from ".";
 import { HvStepNavigationProps } from "..";
 
-export interface HvWizardProps extends HvBaseProps {
+export interface HvWizardProps
+  extends HvBaseProps,
+    Pick<HvDialogProps, "maxWidth" | "fullWidth"> {
   /** Current state of the Wizard. */
   open: boolean;
   /** Function executed on close. */

diff --git a/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.tsx b/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.tsx
@@ -1,12 +1,18 @@
 import React from "react";
 import { ClassNames } from "@emotion/react";
-import { HvBaseProps, HvDialog } from "@hitachivantara/uikit-react-core";
+import {
+  HvBaseProps,
+  HvDialog,
+  HvDialogProps,
+} from "@hitachivantara/uikit-react-core";
 import wizardContainerClasses, {
   HvWizardContainerClasses,
 } from "./wizardContainerClasses";
 import { styles } from "./WizardContainer.styles";
 
-export interface HvWizardContainerProps extends Omit<HvBaseProps, "onClose"> {
+export interface HvWizardContainerProps
+  extends Omit<HvBaseProps, "onClose">,
+    Pick<HvDialogProps, "maxWidth" | "fullWidth"> {
   /** Current state of the Wizard. */
   open: boolean;
   /** Function executed on close. */
@@ -45,6 +51,7 @@ export const HvWizardContainer = ({
           className={cx(wizardContainerClasses.root, className, classes?.root)}
           open={open}
           onClose={handleClose}
+          maxWidth="lg"
           {...others}
         >
           {children}

diff --git a/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.tsx b/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.tsx
@@ -123,11 +123,16 @@ export const HvWizardTitle = ({
                   classes?.stepContainer
                 )}
                 steps={steps}
-                type={customStep?.type ?? "Default"}
-                stepSize={customStep?.stepSize ?? "xs"}
-                width={
-                  customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }
-                }
+                type="Default"
+                stepSize="xs"
+                width={{
+                  xs: 200,
+                  sm: 350,
+                  md: 600,
+                  lg: 800,
+                  xl: 1000,
+                }}
+                {...customStep}
               />
             )}
             {hasSummary && (