fix(inline-loading): shrink spinner radius #4382
Conversation
asudoh
changed the title
|
Deploy preview for the-carbon-components ready! Built with commit 322db53 https://deploy-preview-4382--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit 322db53 |
|
Deploy preview for carbon-components-react failed. Built with commit 322db53 https://app.netlify.com/sites/carbon-components-react/deploys/5db0d82b33ad5000086ad28c |
| .#{$prefix}--loading__background, | ||
| .#{$prefix}--loading__stroke { | ||
| // Ensures (r * 2 + (stroke width)) / (viewbox unit size) * (viewbox pixel size) === 14 | ||
| r: 26.8125; |
There was a problem hiding this comment.
it looks like Firefox still does not properly support modifying r with CSS?
Firefox 69 and 71
Chrome
There was a problem hiding this comment.
The 16px loader should be used in three different places:
Vanilla
- small loader under Loading. (its currently using the 20px)
- inline loading (currently seems to be getting extra padding than the success icon)
- file uploader (looks correct)
React
- small loader under Loading. (its currently using the 20px)
- inline loading (its currently using the 20px)
- file uploader (looks correct size, but it is jumping to the left. It should stay in place like the complete and edit states )
asudoh
force-pushed
the
spinner-radius-inline-loading
branch
from
27e1b13 to
2fd8547
Compare
|
Thank you for reviewing @laurenmrice - Updated the right padding for file uploader as well as the size for small loading and inline loading. I tried to make the spinner the size the same as complete/invalid icon (to get the same padding as them), but please let me know if a larger size is desired. |
emyarod
changed the title
|
Thank you for catching that @laurenmrice - Fixed. |
Fixes #3040.
Changelog
Changed
Testing / Reviewing
Testing should make sure our inline loading component is not broken.