Material UI: Mobile Stepper with determinate progress bar

in #utopian-io7 years ago (edited)

Bug Fixes

  • What was the issue(s)?
    When using a mobile stepper with a determinate progress bar, it renders the indeterminate version instead of the determinate.
    This is how currently the determinate version renders incorectly:
    image.png

Code for this example:

<MobileStepper
  variant="progress"
  steps={6}
  position="static"
  activeStep={1}
  backButton={<div style={{ width: 64, height: 38 }} />}
  nextButton={<div style={{ width: 64, height: 38 }} />}
/>
  • What was the solution?

Fix the regression by changing the mode prop to variant. This aligned the component with some previous refactoring in material-ui components.
This is how the correct version looks after the fix.
image.png

Original Pull Request: https://github.com/mui-org/material-ui/pull/10190/files



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Congratulations @m0rc! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

You published your First Post

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

Your contribution cannot be approved because it is too small of a contribution. See the Utopian Rules.

You can contact us on Discord.
[utopian-moderator]

Congratulations @m0rc! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

Click here to view your Board

Do not miss the last post from @steemitboard:

Valentine challenge - Love is in the air!

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @m0rc! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

Valentine's day challenge - Give a badge to your beloved!
Vote for @Steemitboard as a witness to get one more award and increased upvotes!