fix(StepNavigation): fix StepNavigation breaking when in the biggest …

…breakpoint (#3323) Co-authored-by: Paulo Lagoá <paulo.lagoa@@hitachivantara.com>
lumada-design · May 12, 2023 · bc3b6d1 · bc3b6d1
1 parent 2770c65
commit bc3b6d1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/packages/lab/src/components/StepNavigation/StepNavigation.tsx b/packages/lab/src/components/StepNavigation/StepNavigation.tsx
@@ -239,29 +239,27 @@ export const HvStepNavigation = ({
   };
 
   const getDynamicValues = (stepsWidth) => {
+    const themeBreakpoints = activeTheme?.breakpoints.values || {};
     const maxWidth =
       width?.[breakpoint] ??
       Math.max(
         Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -
           TITLE_MARGIN,
         SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth
       );
-    const next = Object.keys(theme.breakpoints.values).find((_, index, self) =>
+    const next = Object.keys(themeBreakpoints).find((_, index, self) =>
       index - 1 >= 0 ? self[index - 1] === breakpoint : false
     );
+
     const navWidth =
-      (next &&
-        Math.min(
-          maxWidth,
-          activeTheme?.breakpoints.values[next] ?? maxWidth
-        )) ||
-      0;
+      (next && Math.min(maxWidth, themeBreakpoints[next] ?? maxWidth)) ||
+      themeBreakpoints[breakpoint];
+
     const titleWidth =
       Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);
     const separatorWidth =
       Number(!hasTitles) *
       Math.ceil((navWidth - stepsWidth) / (steps.length - 1));
-
     return { width: navWidth, titleWidth, 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="width: 700px; margin: 0px;"
+      style="margin: 0px;"
     >
       <ol
         class="css-fg3xwr HvStepNavigation-ol"
@@ -79,7 +79,7 @@ exports[`StepNavigation > should render correctly 1`] = `
         </li>
         <li
           aria-hidden="true"
-          class="HvStepNavigation-separator css-qletfj-StyledLi e1wrrltm1"
+          class="HvStepNavigation-separator css-1h0nyka-StyledLi e1wrrltm1"
         >
           <div
             aria-label="separator-Completed"
@@ -154,7 +154,7 @@ exports[`StepNavigation > should render correctly 1`] = `
         </li>
         <li
           aria-hidden="true"
-          class="HvStepNavigation-separator css-1rte3m9-StyledLi e1wrrltm1"
+          class="HvStepNavigation-separator css-1mktd4n-StyledLi e1wrrltm1"
         >
           <div
             aria-label="separator-Failed"
@@ -224,7 +224,7 @@ exports[`StepNavigation > should render correctly 1`] = `
         </li>
         <li
           aria-hidden="true"
-          class="HvStepNavigation-separator css-hle24q-StyledLi e1wrrltm1"
+          class="HvStepNavigation-separator css-qr06ca-StyledLi e1wrrltm1"
         >
           <div
             aria-label="separator-Pending"
@@ -279,7 +279,7 @@ exports[`StepNavigation > should render correctly 1`] = `
         </li>
         <li
           aria-hidden="true"
-          class="HvStepNavigation-separator css-18yd98g-StyledLi e1wrrltm1"
+          class="HvStepNavigation-separator css-15jv2oq-StyledLi e1wrrltm1"
         >
           <div
             aria-label="separator-Current"
@@ -332,7 +332,7 @@ exports[`StepNavigation > should render correctly 1`] = `
         </li>
         <li
           aria-hidden="true"
-          class="HvStepNavigation-separator css-1pqgfqb-StyledLi e1wrrltm1"
+          class="HvStepNavigation-separator css-kway43-StyledLi e1wrrltm1"
         >
           <div
             aria-label="separator-Enabled"