Material-ui: Error: <circle> attribute r: A negative value is not valid. ("-0.75")

Created on 28 Sep 2016 · 7Comments · Source: mui-org/material-ui

Problem description

I just updated to 0.16.0-rc2 and I am getting this error.

Error: <circle> attribute r: A negative value is not valid. ("-0.75")

Steps to reproduce

I just updated to 0.16.0-rc2.

Versions

Material-UI: 0.16.0-rc2
React: 15.3.2
Browser: Chrome & Safari, not in Firefox.

Source

PolGuixe

Most helpful comment

@lucasbento Right, I'm gonna close this issue. For anyone having this issue, here is the migration transformation function taken from the _breaking changes_ section:

newSize = 59.5 * oldSize;
thickness = 3.5 * oldSize;
margin = (oldSize < 0.71) ?
  ((50 - 59.5 * oldSize) / 2) :
  (5.25 * oldSize);

E.g.

- <CircularProgress />
+<CircularProgress size={59.5} style={{margin: 5.25}} /> // Thickness is 3.5 by default

- <CircularProgress size={2} />
+<CircularProgress size={119} thickness={7} style={{margin: 10.5}} />

We have done it to reduce the gap with the next branch.

oliviertassinari on 9 Oct 2016

❤2

All 7 comments

@PolGuixe actually, increase the size to bigger number and it would work! The document is for 0.15.4, not for 0.16.0.

Instead of

<CircularProgress size={2} />

Use

<CircularProgress size={60} />

quanglam2807 on 30 Sep 2016

👍2

@quanglam2807 is this a bug or is the intented way in v0.16.0?

PolGuixe on 30 Sep 2016

I think this was first introduced by https://github.com/callemall/material-ui/commit/db8d5b20f32090b8d4db10f592329e102585a60f.

I guess this should be documented somewhere.

cc @oliviertassinari.

lucasbento on 6 Oct 2016

We have introduced one breaking changes on the CircularProgress API. It's documented in the changelog. Unless I'm missing something, it's expected.

oliviertassinari on 6 Oct 2016

👍1

@oliviertassinari: we may close this issue then.

lucasbento on 6 Oct 2016

@lucasbento Right, I'm gonna close this issue. For anyone having this issue, here is the migration transformation function taken from the _breaking changes_ section:

newSize = 59.5 * oldSize;
thickness = 3.5 * oldSize;
margin = (oldSize < 0.71) ?
  ((50 - 59.5 * oldSize) / 2) :
  (5.25 * oldSize);

E.g.

- <CircularProgress />
+<CircularProgress size={59.5} style={{margin: 5.25}} /> // Thickness is 3.5 by default

- <CircularProgress size={2} />
+<CircularProgress size={119} thickness={7} style={{margin: 10.5}} />

We have done it to reduce the gap with the next branch.

oliviertassinari on 9 Oct 2016

❤2

It did not work me well, but I found another solution: css transform - scale. (The issue is the spinner rotates in a weird way if I use the values calculated above ..)