fix(loading): updates upon review comments

carbon-design-system · Oct 21, 2019 · 27e1b13 · 27e1b13
1 parent 570f204
commit 27e1b13
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 14 deletions.
diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -129,8 +129,9 @@
     }
 
     .#{$prefix}--loading {
-      width: $carbon--spacing-06;
-      height: $carbon--spacing-06;
+      width: rem(32px);
+      height: rem(32px);
+      margin-right: -$carbon--spacing-03;
     }
 
     .#{$prefix}--file-filename {

diff --git a/packages/components/src/components/inline-loading/_inline-loading.scss b/packages/components/src/components/inline-loading/_inline-loading.scss
@@ -27,13 +27,7 @@
     }
 
     .#{$prefix}--loading__stroke {
-      stroke-dashoffset: 99;
-    }
-
-    .#{$prefix}--loading__background,
-    .#{$prefix}--loading__stroke {
-      // Ensures (r * 2 + (stroke width)) / (viewbox unit size) * (viewbox pixel size) === 14
-      r: 26.8125;
+      stroke-dashoffset: $loading--small__gap;
     }
   }
 

diff --git a/packages/components/src/components/inline-loading/inline-loading.hbs b/packages/components/src/components/inline-loading/inline-loading.hbs
@@ -10,8 +10,8 @@
   <div class="{{@root.prefix}}--inline-loading__animation">
     <div data-inline-loading-spinner class="{{@root.prefix}}--loading {{@root.prefix}}--loading--small">
       <svg class="{{@root.prefix}}--loading__svg" viewBox="-75 -75 150 150">
-        <circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="30" />
-        <circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="30"/>
+        <circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="26.8125" />
+        <circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="26.8125"/>
       </svg>
     </div>
     {{ carbon-icon "CheckmarkFilled16" data-inline-loading-finished='' hidden='' class=(add @root.prefix '--inline-loading__checkmark-container') }}

diff --git a/packages/components/src/components/loading/_loading.scss b/packages/components/src/components/loading/_loading.scss
@@ -39,6 +39,10 @@
     stroke-dashoffset: $loading__gap;
   }
 
+  .#{$prefix}--loading--small .#{$prefix}--loading__stroke {
+    stroke-dashoffset: $loading--small__gap;
+  }
+
   .#{$prefix}--loading--stop {
     @include animation__loading--stop;
   }

diff --git a/packages/components/src/components/loading/_vars.scss b/packages/components/src/components/loading/_vars.scss
@@ -10,6 +10,11 @@
 /// @group loading
 $loading__gap: 40;
 
+/// @type Number
+/// @access private
+/// @group loading
+$loading--small__gap: 99;
+
 /// @type Number
 /// @access private
 /// @group loading

diff --git a/packages/components/src/components/loading/loading.hbs b/packages/components/src/components/loading/loading.hbs
@@ -9,8 +9,12 @@
 <div data-loading class="{{@root.prefix}}--loading{{#if small}} {{@root.prefix}}--loading--small{{/if}}">
   <svg class="{{@root.prefix}}--loading__svg" viewBox="-75 -75 150 150">
     <title>Loading</title>
-    {{#if small}}<circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="37.5" />{{/if}}
+    {{#if small}}
+    <circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="26.8125" />
+    <circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="26.8125" />
+    {{else}}
     <circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="37.5" />
+    {{/if}}
   </svg>
 </div>
 {{#if overlay}}</div>{{/if}}
diff --git a/packages/react/src/components/Loading/Loading.js b/packages/react/src/components/Loading/Loading.js
@@ -66,6 +66,8 @@ export default class Loading extends React.Component {
       [`${prefix}--loading-overlay--stop`]: !active,
     });
 
+    const spinnerRadius = small ? '26.8125' : '37.5';
+
     const loading = (
       <div
         {...other}
@@ -79,14 +81,14 @@ export default class Loading extends React.Component {
               className={`${prefix}--loading__background`}
               cx="0"
               cy="0"
-              r="37.5"
+              r={spinnerRadius}
             />
           ) : null}
           <circle
             className={`${prefix}--loading__stroke`}
             cx="0"
             cy="0"
-            r="37.5"
+            r={spinnerRadius}
           />
         </svg>
       </div>