[MobileStepper] Add ability to maintain the 3 dots exactly at center of the whole stepper width, whatever is the width of "Back" and "Next"

[fmagaldea]

In you demo page https://material-ui.com/components/steppers/#dots you use words "Back" and "Next", plus an icon for each, so the width of these buttons are exactly the same, so we see 3 dots exactly at middle of the Stepper container.

But if you change the labels by let's say "Previous" and "Next" (or change locale of these labels), then the buttons width is not the same, and the 3 dots move a bit to the right and so they are not centered anymore with the whole Stepper container.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

You could add an option to let developer decide if dots should:

• current behaviour: maintain exactly the same space between: Back to 3 dots (on the left side of stepper) 3 dots to Next (on the right side of stepper) OR
• new behaviour: remain always at middle of stepper

Examples 🌈

import MobileStepper from '@material-ui/core/MobileStepper';

export default function DotsCenteredMobileStepper() {

   ...

  return (
    <MobileStepper
      ...
      variant="dots"
      dotPosition="centered"
      nextButton={
        <Button ... >
          Next
        </Button>
      }
      backButton={
        <Button ... >
          Back
        </Button>
      }
    />
  );
}

Motivation 🔦

This option would help to:

• set dot position exactly at the middle of Stepper, so in some cases it could help container design, for example to do some alignment
• maintain position of dots if Back/Next buttons label are changing during navigation through steps

[oliviertassinari]

Here is one possible approach using CSS grid:

diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.js b/packages/material-ui/src/MobileStepper/MobileStepper.js
index b9a8f7a5b..d359788c5 100644
--- a/packages/material-ui/src/MobileStepper/MobileStepper.js
+++ b/packages/material-ui/src/MobileStepper/MobileStepper.js
@@ -9,9 +9,8 @@ import LinearProgress from '../LinearProgress';
 export const styles = (theme) => ({
   /* Styles applied to the root element. */
   root: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    display: 'grid',
+    gridTemplateColumns: '1fr auto 1fr',
     alignItems: 'center',
     background: theme.palette.background.default,
     padding: 8,
@@ -79,7 +78,9 @@ const MobileStepper = React.forwardRef(function MobileStepper(props, ref) {
       ref={ref}
       {...other}
     >
-      {backButton}
+      <div style={{ justifySelf: 'start' }}>
+        {backButton}
+      </div>
       {variant === 'text' && (
         <React.Fragment>
           {activeStep + 1} / {steps}
@@ -107,8 +108,9 @@ const MobileStepper = React.forwardRef(function MobileStepper(props, ref) {
           {...LinearProgressProps}
         />
       )}
-
-      {nextButton}
+      <div style={{ justifySelf: 'end' }}>
+        {nextButton}
+      </div>
     </Paper>
   );
 });

However, it doesn't work with IE 11, and not sure about the support of older mobile browsers, which seems to be more important.

In your case, you might have to set a wrapping div with a fixed width, until our browser support target allows the above.