fix: feedback optimizations, rebase updates

okta · Jan 28, 2025 · 04df1a9 · 04df1a9
1 parent 16e29c2
commit 04df1a9
Show file tree

Hide file tree

Showing 10 changed files with 354 additions and 261 deletions.
diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
@@ -105,7 +105,6 @@ export * from "./shadow-dom/index.js";
 export * from "./Stack.js";
 export * from "./Status.js";
 export * from "./Surface.js";
-export * from "./Stepper";
 export * from "./Switch.js";
 export * from "./Tabs.js";
 export * from "./Tag.js";
@@ -116,4 +115,4 @@ export * from "./Toast.js";
 export * from "./ToastStack.js";
 export * from "./Tooltip.js";
 export * from "./Typography.js";
-export * from "./useUniqueId.js";
+export * from "./useUniqueId.js";
diff --git a/packages/odyssey-react-mui/src/labs/Stepper/StepIcon.tsx b/packages/odyssey-react-mui/src/labs/Stepper/StepIcon.tsx
@@ -11,13 +11,13 @@
  */
 
 import styled from "@emotion/styled";
-import { CheckIcon } from "../../icons.generated";
-import { DesignTokens } from "../../OdysseyDesignTokensContext";
-import type { StepIconProps } from "./Stepper.types";
+import { CheckIcon } from "../../icons.generated/index.js";
+import { DesignTokens } from "../../OdysseyDesignTokensContext.js";
+import type { StepIconProps } from "./Stepper.types.js";
 import {
   shouldForwardStepIconContainerProps,
   shouldForwardStepNumberProps,
-} from "./Stepper.utils";
+} from "./Stepper.utils.js";
 
 const StyledStepNumber = styled("span", {
   shouldForwardProp: shouldForwardStepNumberProps,
@@ -28,16 +28,24 @@ const StyledStepNumber = styled("span", {
   nonLinear: boolean;
 }>(({ completed, active, nonLinear, odysseyDesignTokens }) => ({
   fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
-  color:
-    completed || active
-      ? odysseyDesignTokens.HueNeutralWhite
-      : odysseyDesignTokens.HueNeutral600,
+  //Base color
+  color: odysseyDesignTokens.HueNeutral600,
 
+  //Override color for completed or active states
+  ...(completed && {
+    color: odysseyDesignTokens.HueNeutralWhite,
+  }),
+  ...(active && {
+    color: odysseyDesignTokens.HueNeutralWhite,
+  }),
+
+  //Hover state
   ".MuiStep-root:hover &": {
-    color:
-      !active && !completed && nonLinear
-        ? odysseyDesignTokens.HueNeutral900
-        : undefined,
+    ...(!active &&
+      !completed &&
+      nonLinear && {
+        color: odysseyDesignTokens.HueNeutral900,
+      }),
   },
 }));
 
@@ -49,53 +57,64 @@ const StyledStepIconContainer = styled("div", {
   nonLinear: boolean;
   odysseyDesignTokens: DesignTokens;
   variant: "numeric" | "nonNumeric";
-}>(({ active, completed, variant, nonLinear, odysseyDesignTokens }) => ({
-  width:
-    variant === "numeric"
+}>(({ active, completed, variant, nonLinear, odysseyDesignTokens }) => {
+  const isNumeric = variant === "numeric";
+
+  return {
+    width: isNumeric
       ? odysseyDesignTokens.Spacing5
       : odysseyDesignTokens.Spacing4,
-  height:
-    variant === "numeric"
+    height: isNumeric
       ? odysseyDesignTokens.Spacing5
       : odysseyDesignTokens.Spacing4,
-  borderRadius: "50%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color:
-    completed || active
-      ? odysseyDesignTokens.HueNeutralWhite
-      : odysseyDesignTokens.HueNeutral700,
-  border: `1px solid ${
-    completed
-      ? odysseyDesignTokens.HueGreen400
-      : active
-        ? odysseyDesignTokens.HueBlue600
-        : odysseyDesignTokens.HueNeutral600
-  }`,
-  background: completed
-    ? odysseyDesignTokens.HueGreen400
-    : active
-      ? odysseyDesignTokens.HueBlue600
-      : "transparent",
-  transition: `all ${odysseyDesignTokens.TransitionDurationMain}`,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: `color ${odysseyDesignTokens.TransitionDurationMain}, 
+    background-color ${odysseyDesignTokens.TransitionDurationMain}, 
+    border ${odysseyDesignTokens.TransitionDurationMain}`,
 
-  ".MuiStep-root:hover &":
-    !active && !completed && nonLinear
-      ? { border: `1px solid ${odysseyDesignTokens.HueNeutral900}` }
-      : undefined,
+    //Base color state
+    color: odysseyDesignTokens.HueNeutral700,
+    backgroundColor: "transparent",
+    border: "1px solid",
+    borderColor: `1px solid ${odysseyDesignTokens.HueNeutral600}`,
 
-  "& svg": {
-    width:
-      variant === "numeric"
-        ? odysseyDesignTokens.Spacing4
-        : odysseyDesignTokens.Spacing3,
-    height:
-      variant === "numeric"
-        ? odysseyDesignTokens.Spacing4
-        : odysseyDesignTokens.Spacing3,
-  },
-}));
+    ...(completed && {
+      color: odysseyDesignTokens.HueNeutralWhite,
+      backgroundColor: odysseyDesignTokens.HueGreen400,
+      borderColor: odysseyDesignTokens.HueGreen400,
+    }),
+
+    ...(active && {
+      color: odysseyDesignTokens.HueNeutralWhite,
+      backgroundColor: odysseyDesignTokens.HueBlue600,
+      borderColor: odysseyDesignTokens.HueBlue600,
+    }),
+
+    //Hover state for non-linear, non-active, non-completed
+    ".MuiStep-root:hover &": {
+      ...(!active &&
+        !completed &&
+        nonLinear && {
+          border: `1px solid ${odysseyDesignTokens.HueNeutral900}`,
+        }),
+    },
+
+    svg: {
+      ...(isNumeric
+        ? {
+            width: odysseyDesignTokens.Spacing4,
+            height: odysseyDesignTokens.Spacing4,
+          }
+        : {
+            width: odysseyDesignTokens.Spacing3,
+            height: odysseyDesignTokens.Spacing3,
+          }),
+    },
+  };
+});
 
 export const StepIcon = ({
   active,

diff --git a/packages/odyssey-react-mui/src/labs/Stepper/Stepper.test.tsx b/packages/odyssey-react-mui/src/labs/Stepper/Stepper.test.tsx
@@ -11,13 +11,13 @@
  */
 
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { userEvent } from "@testing-library/user-event";
 import { vi } from "vitest";
-import { Stepper } from "./Stepper";
-import { StepperNavigation } from "./StepperNavigation";
-import { OdysseyProvider } from "../../OdysseyProvider";
-import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
-import { StepperNavigationProps } from "./Stepper.types";
+import { Stepper } from "./Stepper.js";
+import { StepperNavigation } from "./StepperNavigation.js";
+import { OdysseyProvider } from "../../OdysseyProvider.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { StepperNavigationProps } from "./Stepper.types.js";
 import { useState } from "react";
 
 const defaultSteps = [