Merge pull request #522 from JulianKniephoff/align-wizard-steps

Properly align wizard stepper labels
opencast · Jun 4, 2024 · df844de · df844de
2 parents 89e0580 + a65c8de
commit df844de
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/components/shared/wizard/WizardStepper.tsx b/src/components/shared/wizard/WizardStepper.tsx
@@ -4,6 +4,7 @@ import cn from "classnames";
 import { Step, StepButton, StepLabel, Stepper } from "@mui/material";
 import {
 	isSummaryReachable,
+	useStepLabelStyles,
 	useStepperStyle,
 } from "../../../utils/wizardUtils";
 import CustomStepIcon from "./CustomStepIcon";
@@ -38,7 +39,8 @@ const WizardStepper = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const classes = useStepperStyle();
+	const stepperClasses = useStepperStyle();
+	const labelClasses = useStepLabelStyles();
 
 	const handleOnClick = async (key: number) => {
 		if (isSummaryReachable(key, steps, completed)) {
@@ -67,13 +69,13 @@ const WizardStepper = ({
 			alternativeLabel
 // @ts-expect-error TS(2322): Type 'boolean' is not assignable to type 'ReactEle... Remove this comment to see the full error message
 			connector={false}
-			className={cn("step-by-step", classes.root)}
+			className={cn("step-by-step", stepperClasses.root)}
 		>
 			{steps.map((label, key) =>
 				!label.hidden ? (
 					<Step key={label.translation} completed={completed[key]}>
 						<StepButton onClick={() => handleOnClick(key)} disabled={disabled}>
-							<StepLabel StepIconComponent={CustomStepIcon}>
+							<StepLabel className={labelClasses.root} StepIconComponent={CustomStepIcon}>
 								{t(label.translation)}
 							</StepLabel>
 						</StepButton>

diff --git a/src/components/shared/wizard/WizardStepperEvent.tsx b/src/components/shared/wizard/WizardStepperEvent.tsx
@@ -4,6 +4,7 @@ import cn from "classnames";
 import { Step, StepButton, StepLabel, Stepper } from "@mui/material";
 import {
 	isSummaryReachable,
+	useStepLabelStyles,
 	useStepperStyle,
 } from "../../../utils/wizardUtils";
 import CustomStepIcon from "./CustomStepIcon";
@@ -30,7 +31,8 @@ const WizardStepperEvent = ({
 }) => {
 	const { t } = useTranslation();
 
-	const classes = useStepperStyle();
+	const stepperClasses = useStepperStyle();
+	const labelClasses = useStepLabelStyles();
 
 	const handleOnClick = async (key: number) => {
 		if (isSummaryReachable(key, steps, completed)) {
@@ -60,13 +62,13 @@ const WizardStepperEvent = ({
 			alternativeLabel
 // @ts-expect-error TS(2322): Type 'boolean' is not assignable to type 'ReactEle... Remove this comment to see the full error message
 			connector={false}
-			className={cn("step-by-step", classes.root)}
+			className={cn("step-by-step", stepperClasses.root)}
 		>
 			{steps.map((label, key) =>
 				!label.hidden ? (
 					<Step key={label.translation} completed={completed[key]}>
 						<StepButton onClick={() => handleOnClick(key)}>
-							<StepLabel StepIconComponent={CustomStepIcon}>
+							<StepLabel className={labelClasses.root} StepIconComponent={CustomStepIcon}>
 								{t(label.translation)}
 							</StepLabel>
 						</StepButton>

diff --git a/src/utils/wizardUtils.ts b/src/utils/wizardUtils.ts
@@ -9,6 +9,13 @@ export const useStepperStyle = makeStyles({
 	},
 });
 
+// Properly align multi-line wizard step labels
+export const useStepLabelStyles = makeStyles({
+	root: {
+		alignSelf: "flex-start",
+	},
+});
+
 // Style of icons used in Stepper
 type stepIconStyleProps = {
 	active: boolean,