fix(loading): remove progress bar on inactive state (#9209)

* fix(Loading): use consistent radius * fix(loading): create progress percentage function * fix(loading): remove progress bar on inactive state * refactor(loading): remove unneeded import * fix(loading): remove progress bar on inactive state in @carbon/styles Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jul 29, 2021 · b01e485 · b01e485
1 parent cb374d8
commit b01e485
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 54 deletions.
diff --git a/packages/components/src/components/inline-loading/_inline-loading.scss b/packages/components/src/components/inline-loading/_inline-loading.scss
@@ -21,14 +21,6 @@
     width: 100%;
     min-height: 2rem;
     align-items: center;
-
-    .#{$prefix}--loading__svg circle {
-      stroke-width: 12;
-    }
-
-    .#{$prefix}--loading__stroke {
-      stroke-dashoffset: $loading--small__gap;
-    }
   }
 
   .#{$prefix}--inline-loading__text {

diff --git a/packages/components/src/components/loading/_functions.scss b/packages/components/src/components/loading/_functions.scss
@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@function loading-progress($circumference, $percentage) {
+  @return $circumference - $percentage / 100 * $circumference;
+}
diff --git a/packages/components/src/components/loading/_keyframes.scss b/packages/components/src/components/loading/_keyframes.scss
@@ -6,6 +6,7 @@
 //
 
 @import 'vars';
+@import 'functions';
 
 @keyframes rotate {
   0% {
@@ -31,18 +32,18 @@
 /* Stroke animations */
 @keyframes init-stroke {
   0% {
-    stroke-dashoffset: 240;
+    stroke-dashoffset: loading-progress($circumference, 0);
   }
   100% {
-    stroke-dashoffset: $loading__gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
 }
 
 @keyframes stroke-end {
   0% {
-    stroke-dashoffset: $loading__gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
   100% {
-    stroke-dashoffset: 240;
+    stroke-dashoffset: loading-progress($circumference, 0);
   }
 }
diff --git a/packages/components/src/components/loading/_loading.scss b/packages/components/src/components/loading/_loading.scss
@@ -8,9 +8,10 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
-@import 'keyframes';
-@import 'mixins';
+@import 'functions';
 @import 'vars';
+@import 'mixins';
+@import 'keyframes';
 
 /// Loading styles
 /// @access private
@@ -30,18 +31,18 @@
   }
 
   .#{$prefix}--loading__svg circle {
-    stroke-dasharray: 240;
+    stroke-dasharray: $circumference $circumference;
     stroke-linecap: butt;
     stroke-width: 10;
   }
 
   .#{$prefix}--loading__stroke {
     stroke: $interactive-04;
-    stroke-dashoffset: $loading__gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
 
   .#{$prefix}--loading--small .#{$prefix}--loading__stroke {
-    stroke-dashoffset: $loading--small__gap;
+    stroke-dashoffset: loading-progress($circumference, 48);
   }
 
   .#{$prefix}--loading--stop {

diff --git a/packages/components/src/components/loading/_vars.scss b/packages/components/src/components/loading/_vars.scss
@@ -8,12 +8,12 @@
 /// @type Number
 /// @access private
 /// @group loading
-$loading__gap: 16;
+$radius: 44;
 
 /// @type Number
 /// @access private
 /// @group loading
-$loading--small__gap: 110;
+$circumference: $radius * 2 * 3.1416;
 
 /// @type Number
 /// @access private

diff --git a/packages/react/src/components/Loading/Loading.js b/packages/react/src/components/Loading/Loading.js
@@ -34,7 +34,6 @@ function Loading({
     [`${prefix}--loading-overlay--stop`]: !active,
   });
   const loadingId = id || `loading-id-${instanceId}`;
-  const spinnerRadius = small ? '42' : '44';
 
   const loading = (
     <div
@@ -53,14 +52,14 @@ function Loading({
             className={`${prefix}--loading__background`}
             cx="50%"
             cy="50%"
-            r={spinnerRadius}
+            r="44"
           />
         ) : null}
         <circle
           className={`${prefix}--loading__stroke`}
           cx="50%"
           cy="50%"
-          r={spinnerRadius}
+          r="44"
         />
       </svg>
     </div>

diff --git a/packages/styles/scss/components/inline-loading/_inline-loading.scss b/packages/styles/scss/components/inline-loading/_inline-loading.scss
@@ -26,14 +26,6 @@ $-loading-gap-small: 110;
     width: 100%;
     min-height: 2rem;
     align-items: center;
-
-    .#{$prefix}--loading__svg circle {
-      stroke-width: 12;
-    }
-
-    .#{$prefix}--loading__stroke {
-      stroke-dashoffset: $-loading-gap-small;
-    }
   }
 
   .#{$prefix}--inline-loading__text {

diff --git a/packages/styles/scss/components/loading/_functions.scss b/packages/styles/scss/components/loading/_functions.scss
@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@function loading-progress($circumference, $percentage) {
+  @return $circumference - $percentage / 100 * $circumference;
+}
diff --git a/packages/styles/scss/components/loading/_loading.scss b/packages/styles/scss/components/loading/_loading.scss
@@ -12,23 +12,10 @@
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
 @use '../../utilities/z-index' as *;
+@use 'vars' as *;
+@use 'functions' as *;
 @use 'animation';
 
-/// @type Number
-/// @access private
-/// @group loading
-$-loading-gap: 16;
-
-/// @type Number
-/// @access private
-/// @group loading
-$-loading-gap-small: 110;
-
-/// @type Number
-/// @access private
-/// @group loading
-$-loading-size: 5.5rem;
-
 /// Loading styles
 /// @access private
 /// @group loading
@@ -37,8 +24,8 @@ $-loading-size: 5.5rem;
     @include component-reset.reset;
     @include animation.spin;
 
-    width: $-loading-size;
-    height: $-loading-size;
+    width: $loading-size;
+    height: $loading-size;
   }
 
   // Animation (Spin by default)
@@ -47,18 +34,18 @@ $-loading-size: 5.5rem;
   }
 
   .#{$prefix}--loading__svg circle {
-    stroke-dasharray: 240;
+    stroke-dasharray: $circumference $circumference;
     stroke-linecap: butt;
     stroke-width: 10;
   }
 
   .#{$prefix}--loading__stroke {
     stroke: $interactive;
-    stroke-dashoffset: $-loading-gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
 
   .#{$prefix}--loading--small .#{$prefix}--loading__stroke {
-    stroke-dashoffset: $-loading-gap-small;
+    stroke-dashoffset: loading-progress($circumference, 48);
   }
 
   .#{$prefix}--loading--stop {
@@ -135,19 +122,19 @@ $-loading-size: 5.5rem;
   /* Stroke animations */
   @keyframes init-stroke {
     0% {
-      stroke-dashoffset: 240;
+      stroke-dashoffset: loading-progress($circumference, 0);
     }
     100% {
-      stroke-dashoffset: $-loading-gap;
+      stroke-dashoffset: loading-progress($circumference, 81);
     }
   }
 
   @keyframes stroke-end {
     0% {
-      stroke-dashoffset: $-loading-gap;
+      stroke-dashoffset: loading-progress($circumference, 81);
     }
     100% {
-      stroke-dashoffset: 240;
+      stroke-dashoffset: loading-progress($circumference, 0);
     }
   }
 }
diff --git a/packages/styles/scss/components/loading/_vars.scss b/packages/styles/scss/components/loading/_vars.scss
@@ -0,0 +1,21 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access private
+/// @group loading
+$radius: 44;
+
+/// @type Number
+/// @access private
+/// @group loading
+$circumference: $radius * 2 * 3.1416;
+
+/// @type Number
+/// @access private
+/// @group loading
+$loading-size: 5.5rem;