From b01e48549c995fbb8db4d7a2804607672c0be527 Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 29 Jul 2021 12:53:13 -0500 Subject: [PATCH] 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> --- .../inline-loading/_inline-loading.scss | 8 ----- .../src/components/loading/_functions.scss | 10 ++++++ .../src/components/loading/_keyframes.scss | 9 ++--- .../src/components/loading/_loading.scss | 11 +++--- .../src/components/loading/_vars.scss | 4 +-- .../react/src/components/Loading/Loading.js | 5 ++- .../inline-loading/_inline-loading.scss | 8 ----- .../scss/components/loading/_functions.scss | 10 ++++++ .../scss/components/loading/_loading.scss | 35 ++++++------------- .../styles/scss/components/loading/_vars.scss | 21 +++++++++++ 10 files changed, 67 insertions(+), 54 deletions(-) create mode 100644 packages/components/src/components/loading/_functions.scss create mode 100644 packages/styles/scss/components/loading/_functions.scss create mode 100644 packages/styles/scss/components/loading/_vars.scss diff --git a/packages/components/src/components/inline-loading/_inline-loading.scss b/packages/components/src/components/inline-loading/_inline-loading.scss index ac14790079e4..5f6055e4f546 100644 --- 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 new file mode 100644 index 000000000000..b70520a30121 --- /dev/null +++ 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 index fa1c5c12520b..496e70c31d0f 100644 --- 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 index d1fb593ac724..307d542970e8 100644 --- 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 index fccdf84c3680..6cfe3b3074d7 100644 --- 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 index 0357d6382e9b..23c235cc8da5 100644 --- 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 = (
) : null}
diff --git a/packages/styles/scss/components/inline-loading/_inline-loading.scss b/packages/styles/scss/components/inline-loading/_inline-loading.scss index 6d4edeae5456..eeb29b8df912 100644 --- 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 new file mode 100644 index 000000000000..b70520a30121 --- /dev/null +++ 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 index 8f652cb5ef61..9c57e212193a 100644 --- 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 new file mode 100644 index 000000000000..236c7559f093 --- /dev/null +++ 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;