[Stepper] Fix optional label is not centered when alternativeLabel …

…is used (#34335)
mui · Sep 20, 2022 · a0ccc0c · a0ccc0c
1 parent 89ecedc
commit a0ccc0c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js
@@ -36,7 +36,7 @@ const useUtilityClasses = (ownerState) => {
       disabled && 'disabled',
       alternativeLabel && 'alternativeLabel',
     ],
-    labelContainer: ['labelContainer'],
+    labelContainer: ['labelContainer', alternativeLabel && 'alternativeLabel'],
   };
 
   return composeClasses(slots, getStepLabelUtilityClass, classes);
@@ -84,7 +84,6 @@ const StepLabelLabel = styled('span', {
     fontWeight: 500,
   },
   [`&.${stepLabelClasses.alternativeLabel}`]: {
-    textAlign: 'center',
     marginTop: 16,
   },
   [`&.${stepLabelClasses.error}`]: {
@@ -112,6 +111,9 @@ const StepLabelLabelContainer = styled('span', {
 })(({ theme }) => ({
   width: '100%',
   color: (theme.vars || theme).palette.text.secondary,
+  [`&.${stepLabelClasses.alternativeLabel}`]: {
+    textAlign: 'center',
+  },
 }));
 
 const StepLabel = React.forwardRef(function StepLabel(inProps, ref) {

diff --git a/test/regressions/fixtures/StepLabel/AlternativeLabelOptionalText.js b/test/regressions/fixtures/StepLabel/AlternativeLabelOptionalText.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+
+const steps = ['Select master blaster campaign settings', 'Create an ad group', 'Create an ad'];
+
+export default function AlternativeLabelOptionalText() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Stepper activeStep={1} alternativeLabel>
+        {steps.map((label) => (
+          <Step key={label} expanded>
+            <StepLabel optional="optional">{label}</StepLabel>
+          </Step>
+        ))}
+      </Stepper>
+    </Box>
+  );
+}