Skip to content

Commit

Permalink
[Stepper] Fix optional label is not centered when alternativeLabel
Browse files Browse the repository at this point in the history
…is used (mui#34335)
  • Loading branch information
ZeeshanTamboli authored and alexfauquette committed Oct 14, 2022
1 parent b4ccae5 commit c03086d
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 2 deletions.
6 changes: 4 additions & 2 deletions packages/mui-material/src/StepLabel/StepLabel.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const useUtilityClasses = (ownerState) => {
disabled && 'disabled',
alternativeLabel && 'alternativeLabel',
],
labelContainer: ['labelContainer'],
labelContainer: ['labelContainer', alternativeLabel && 'alternativeLabel'],
};

return composeClasses(slots, getStepLabelUtilityClass, classes);
Expand Down Expand Up @@ -84,7 +84,6 @@ const StepLabelLabel = styled('span', {
fontWeight: 500,
},
[`&.${stepLabelClasses.alternativeLabel}`]: {
textAlign: 'center',
marginTop: 16,
},
[`&.${stepLabelClasses.error}`]: {
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
}

0 comments on commit c03086d

Please sign in to comment.