fix(Stepper): mui styles refactor Closes #646

Canadian-Geospatial-Platform · Oct 25, 2023 · ad469a0 · ad469a0
1 parent 7a00183
commit ad469a0
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 54 deletions.
diff --git a/packages/geoview-core/src/ui/stepper/custom-stepper-style.ts b/packages/geoview-core/src/ui/stepper/custom-stepper-style.ts
@@ -0,0 +1,38 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  stepperContainer: {
+    padding: 15,
+    width: 500,
+    minWidth: 150,
+    border: '0.5px solid grey',
+    flexWrap: 'wrap',
+    '& .MuiSvgIcon-root.Mui-active': {
+      color: '#90caf9',
+    },
+    '& .MuiSvgIcon-root.Mui-completed': {
+      color: '#666666',
+    },
+  },
+  actionContainer: {
+    marginTop: 20,
+    width: '100%',
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    '&>*:first-child': {
+      width: '100%',
+      marginBottom: 8,
+    },
+    '& > button': {
+      width: '30%',
+    },
+    '& > button > *': {
+      textAlign: 'center',
+    },
+  },
+  disabledButton: {
+    color: `${theme.palette.primary.contrastText}!important`,
+  },
+});
diff --git a/packages/geoview-core/src/ui/stepper/custom-stepper.tsx b/packages/geoview-core/src/ui/stepper/custom-stepper.tsx
@@ -1,13 +1,12 @@
 /* eslint-disable react/require-default-props */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, CSSProperties } from 'react';
-import { Box, Stepper as MaterialStepper, Step, StepButton, StepContent, StepLabel, Typography } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { Box, Stepper as MaterialStepper, Step, StepButton, StepContent, StepLabel, Typography, useTheme } from '@mui/material';
 
 import { Button } from '../button/button';
 
 import { HtmlToReact } from '@/core/containers/html-to-react';
+import { getSxClasses } from './custom-stepper-style';
 
 /**
  * Properties for the Custom Stepper
@@ -57,43 +56,6 @@ export interface TypeStepperSteps {
   disableStepMovement?: boolean;
 }
 
-const useStyles = makeStyles((theme) => ({
-  stepperContainer: {
-    padding: 15,
-    width: 500,
-    minWidth: 150,
-    border: '0.5px solid grey',
-    flexWrap: 'wrap',
-    '& .MuiSvgIcon-root.Mui-active': {
-      color: '#90caf9',
-    },
-    '& .MuiSvgIcon-root.Mui-completed': {
-      color: '#666666',
-    },
-  },
-  actionContainer: {
-    marginTop: 20,
-    width: '100%',
-    display: 'flex',
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    '&>*:first-child': {
-      width: '100%',
-      marginBottom: 8,
-    },
-    '& > button': {
-      width: '30%',
-    },
-    '& > button > *': {
-      textAlign: 'center',
-    },
-  },
-  disabledButton: {
-    color: `${theme.palette.primary.contrastText}!important`,
-  },
-}));
-
 /**
  * Create a customizable Material UI Stepper
  *
@@ -104,7 +66,10 @@ export function CustomStepper(props: TypeCustomStepperProps): JSX.Element {
   const [activeStep, setActiveStep] = useState(0);
   const [completed, setCompleted] = useState<any>({});
   const [isReset, setIsReset] = useState<any>(false);
-  const classes = useStyles();
+
+  const sxtheme = useTheme();
+  const classes = getSxClasses(sxtheme);
+
   const {
     className,
     style,
@@ -245,16 +210,16 @@ export function CustomStepper(props: TypeCustomStepperProps): JSX.Element {
             </Step>
           );
         })}
-        <Box className={classes.actionContainer}>
+        <Box sx={classes.actionContainer}>
           <>
             <Typography>{isReset ? 'Steps Completed' : `Step ${activeStep + 1}`}</Typography>
             {!isReset && (
               <>
-                <Button type="text" disabled={activeStep < 1} className={activeStep < 1 ? classes.disabledButton : ''} onClick={handleBack}>
+                <Button type="text" disabled={activeStep < 1} sx={activeStep < 1 ? classes.disabledButton : {}} onClick={handleBack}>
                   {backButtonText || 'Back'}
                 </Button>
 
-                <Button type="text" onClick={handleNext} disabled={stepIsDisabled} className={stepIsDisabled ? classes.disabledButton : ''}>
+                <Button type="text" onClick={handleNext} disabled={stepIsDisabled} sx={stepIsDisabled ? classes.disabledButton : {}}>
                   {nextButtonText || 'Next'}
                 </Button>
 

diff --git a/packages/geoview-core/src/ui/stepper/stepper-style.ts b/packages/geoview-core/src/ui/stepper/stepper-style.ts
@@ -0,0 +1,7 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  stepper: {
+    color: theme.palette.text.primary,
+  },
+});
diff --git a/packages/geoview-core/src/ui/stepper/stepper.tsx b/packages/geoview-core/src/ui/stepper/stepper.tsx
@@ -7,15 +7,9 @@ import {
   StepLabelProps,
   StepContentProps,
   StepProps,
+  useTheme,
 } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
-
-const useStyles = makeStyles((theme) => ({
-  stepper: {
-    color: theme.palette.text.primary,
-  },
-}));
+import { getSxClasses } from './stepper-style';
 
 /**
  * Custom MUI Stepper Props
@@ -44,9 +38,12 @@ interface TypeStep {
  */
 export function Stepper(props: TypeStepperProps): JSX.Element {
   const { steps, ...stepperProps } = props;
-  const classes = useStyles();
+
+  const sxtheme = useTheme();
+  const classes = getSxClasses(sxtheme);
+
   return (
-    <MaterialStepper className={classes.stepper} {...stepperProps}>
+    <MaterialStepper sx={classes.stepper} {...stepperProps}>
       {steps &&
         steps.map((step: TypeStep | null, index) => {
           if (step) {