Buttons props on MobileStepper could be optional

[macabeus]

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

Summary 💡

Currently we have many components to display a progress to user. One of these components is MobileStepper.

This component is good, but I think that it could be more flexible if we change its interface seting nextButton and backButton as optional and, when these props isn't set, should change LinearProgressProps's style to width: '100%'

Examples 🌈

Motivation 🔦

It's because sometimes we want to use this component, but displaying "next" and "back" buttons on others place of screen.

I know that sometimes we could just use LinearProgress component, but MobileStepper has one variant with a very different visual and its interface is better to this case.

[eps1lon]

Thanks for opening this issue and providing some context.

I don't think we want to make them optional to indicate that you should take care of the next and previous button.

It seems like you already identified a workaround. Could you show example code why this workaround does not work or works badly?

[macabeus]

@eps1lon Of course. Here's my workaround:

import MobileStepper from '@material-ui/core/MobileStepper'
import { makeStyles } from '@material-ui/core/styles'
import React, { FunctionComponent } from 'react'

const useStyles = makeStyles(theme => ({
  // we should remove padding and background
  progress: {
    padding: 0,
    background: null
  },

  // as well as set width as 100%
  linearProgress: {
    width: '100%'
  }
}))

interface Props {
  countSteps: number
  activeStep: number
}

const Progress: FunctionComponent<Props> = ({ countSteps, activeStep }) => {
  const classes = useStyles({})

  return (
    <MobileStepper
      variant='progress'
      steps={countSteps}
      position='static'
      activeStep={activeStep}
      nextButton={null} // set as null these buttons
      backButton={null}
      className={classes.progress} // set this class
      LinearProgressProps={{
        className: classes.linearProgress // and set this class
      }}
    />
  )
}

export default Progress

If we set these props as optional, we could remove ~10 lines of a workaround code, improving its readability.

[rschpdr]

I second this. Just had to pass empty Fragments as arguments to the button props (Typescript wouldn't let me pass null). It's not a hard or lengthy workaround, but it's not something that's easy to understand from the perspective of someone looking at the code for the first time.

[Nattyfro]

31stJuly2022 - from macabeus comment below the backButton={null} type in this... sx={{ '& .MuiLinearProgress-root' : { width: '100%' } }}

I hope this helped somebody!! ✌️