diff --git a/src/components/Stepper/StepIconContainer.tsx b/src/components/Stepper/StepIconContainer.tsx index 5497a462..e81e512c 100644 --- a/src/components/Stepper/StepIconContainer.tsx +++ b/src/components/Stepper/StepIconContainer.tsx @@ -1,16 +1,35 @@ import { styled } from "@mui/material/styles"; -import Text, { typographyClasses } from "@mui/material/Typography"; import CheckIcon from "@mui/icons-material/Check"; +import DotDotDotIcon from "@mui/icons-material/MoreHoriz"; import AlertTriangleIcon from "@mui/icons-material/Warning"; import type { StepIconProps } from "@mui/material/StepIcon"; -export const StepIconContainer = ({ icon, active, completed, className, error }: StepIconProps) => ( - - {completed ? : active ? error ? : icon : ...} +export const StepIconContainer = ({ + icon, + active, + completed, + className, + error, + ...containerProps +}: StepIconContainerProps) => ( + + {completed ? ( + + ) : active ? ( + error ? ( + + ) : ( + icon + ) + ) : ( + + )} ); -const StyledDiv = styled("div")(({ theme: { palette }, ownerState }) => ({ +const StyledDiv = styled("div", { + shouldForwardProp: (propName) => propName !== "ownerState", +})(({ theme: { palette }, ownerState }) => ({ width: "100%", height: "100%", zIndex: 1, @@ -32,11 +51,12 @@ const StyledDiv = styled("div")(({ theme: { palette }, owner ...(ownerState.error && { backgroundImage: `linear-gradient(135deg, ${palette.error.dark} 40%, ${palette.error.light})`, + "& > svg": { + // These styles nudge the icon up a bit and ensures it doesn't visually overflow the container + transform: "translateY(-1px)", + maxWidth: "80%", + }, }), - - [`& > .${typographyClasses.root}`]: { - transform: "translateY(-2px)", - }, })); interface StepIconOwnerState { @@ -46,3 +66,6 @@ interface StepIconOwnerState { error?: boolean; }; } + +export type StepIconContainerProps = StepIconProps & + Omit, "ownerState" | "className" | "children">;