fix(progressbar): fix circular indeterminate state in rtl and clean u…

…p the code
IgniteUI · Dec 11, 2024 · b07c57e · b07c57e
1 parent 57ce47e
commit b07c57e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/src/components/progress/themes/circular/circular.progress.base.scss b/src/components/progress/themes/circular/circular.progress.base.scss
@@ -5,15 +5,17 @@
 @use '../vars' as *;
 
 [part~='base'] {
-    @extend %base !optional;
-
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--ig-font-family), serif;
     position: relative;
 }
 
 [part~='label'] {
-    @extend %label !optional;
-
+    display: flex;
+    align-items: center;
+    color: inherit;
     position: absolute;
     transform: translate(-50%, -50%);
     top: 50%;
@@ -114,4 +116,12 @@
             stroke-dashoffset: calc(#{$circumference} + var(--_progress-percentage) * #{$circumference});
         }
     }
+
+    [part~='svg'] {
+        &:not([part~='indeterminate']) [part~='fill'] {
+            animation: initial-dashoffset-rtl var(--_transition-duration) linear;
+            stroke-dasharray: #{$circumference} #{$circumference};
+            stroke-dashoffset: calc(#{$circumference} + var(--_progress-percentage) * #{$circumference});
+        }
+    }
 }
diff --git a/src/components/progress/themes/circular/shared/circular.progress.common.scss b/src/components/progress/themes/circular/shared/circular.progress.common.scss
@@ -28,20 +28,18 @@ $theme: $material;
 
 // Mixin for Gradient Colors
 @mixin gradient-variant($variant, $color) {
-    :host([variant='#{$variant}']) [part~='gradient_start'],
-    :host([variant='#{$variant}']) [part~='gradient_end'] {
-        stop-color: $color;
+    :host([variant='#{$variant}']) {
+        --gradient-stop-color: #{$color};
     }
 }
 
-// Default Gradient Colors
-[part~='gradient_start'],
-[part~='gradient_end'] {
-    stop-color: var-get($theme, 'progress-circle-color');
-}
-
-// Apply Gradient Variants
 @include gradient-variant('danger', color(error, 500));
 @include gradient-variant('warning', color(warn, 500));
 @include gradient-variant('info', color(info, 500));
 @include gradient-variant('success', color(success, 500));
+
+[part~='gradient_start'],
+[part~='gradient_end'] {
+    stop-color: var(--gradient-stop-color, var-get($theme, 'progress-circle-color'));
+}
+
diff --git a/src/components/progress/themes/circular/shared/circular.progress.fluent.scss b/src/components/progress/themes/circular/shared/circular.progress.fluent.scss
@@ -30,10 +30,6 @@ $theme: $fluent;
 
 :host(:dir(rtl)),
 :host([dir='rtl']) {
-    // [part='svg'] {
-    //     transform: rotate(-260deg);
-    // }
-
     [part='svg indeterminate'] [part~='fill'] {
         animation-name: indeterminate-circular-fluent-rtl;
     }