Material-ui: CircularProgress sizing issue in a Dialog

Created on 13 Jun 2018  路  8Comments  路  Source: mui-org/material-ui

  • [x] This is a v1.x issue (v0.x is no longer maintained).
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The size prop should set the size of the element.

And it does but it doesn't take effect because the class .MuiDialogActions-action-1750 in a dialog sets the min-width to 64px, so anything less than 64px will have no effect.

Current Behavior

The container element can not reduce the size of the SVG child the animation however is selected applied to the parent element which is "rendered" smaller. resulting to a wobbly animation effect

Steps to Reproduce (for bugs)

Here is an example in the codesandbox for MU

  1. have an open dialog
  2. Put a <CircularProgress size={18}/> in the <DialogActions/> elemnt
  3. See the results.

Context

N/A

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.2.0 |
| React | v16.3.2 |
| browser | Chrome |
| etc | N/A |

bug 馃悰 Dialog good first issue

Most helpful comment

@oliviertassinari I can make these changes and make a PR if that's OK? that'd be a good start for me to contributing to this library as well..

Edit: On it! :)

All 8 comments

Please provide a full reproduction test case. This would help a lot 馃懛 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

Here you go
Thank you for the link.

@oliviertassinari I could not re-open the issue myself, could you please re-open it

I have been browsing the specification. I can no longer find any reference to the min-width value for the Dialog. I think that we can remove the property in
https://github.com/mui-org/material-ui/blob/1a2ebf54bbb468ee3d1e31bb02e299f9309a89c4/packages/material-ui/src/DialogActions/DialogActions.js#L18
and reduce the default button min-width to 64:
https://github.com/mui-org/material-ui/blob/1a2ebf54bbb468ee3d1e31bb02e299f9309a89c4/packages/material-ui/src/Button/Button.js#L16
This should solve your problem.

@oliviertassinari I can make these changes and make a PR if that's OK? that'd be a good start for me to contributing to this library as well..

Edit: On it! :)

The wobbling effect is not specific to Dialog. See demo on https://material-ui.com/demos/progress/

@mim-Armand Let's us know if you are doing some progress :).

Sorry for the delay! I've made the changes and all but got stuck on making the PR as wanted to make sure it's all perfect and couldn't figure out how to run the tests ( there were missing packages and multiple package.json files ) But I think I'm gonna make the PR and get your feedback if there were any issues, like it may go faster ;)
So I'll rebase to master again and make a PR shortly

Was this page helpful?
0 / 5 - 0 ratings