feat(progress): update linear progres props and add variants for circular

projects/igniteui-angular/migrations/update-19_1_0/changes/theme-changes.json

@@ -120,6 +120,12 @@
         "owner": "color-classes",
         "remove": true,
         "type": "property"
+      },
+      {
+        "name": "$progress-circle-color",
+        "replaceWith": "$fill-color-default",
+        "owner": "circular-theme",
+        "type": "property"
       }
     ]
   }

projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-component.scss

@@ -49,6 +49,12 @@
             }
         }
 
+        @each $modifier in ('danger', 'warning', 'info', 'success') {
+            @include m($modifier) {
+                @extend %display-circular--#{$modifier} !optional;
+            }
+        }
+
         @include m(animation-none) {
             @extend %animation-none !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss

@@ -9,22 +9,30 @@
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 ///
 /// @param {Color} $base-circle-color [null] - The base circle fill color.
-/// @param {Color | List<Color>} $progress-circle-color [null] - The progress circle fill color.
+/// @param {Color | List<Color>} $fill-color-default [null] - The progress circle fill color.
+/// @param {Color} $fill-color-danger [null] - The track danger fill color.
+/// @param {Color} $fill-color-warning [null] - The track warning fill color.
+/// @param {Color} $fill-color-info [null] - The track info fill color.
+/// @param {Color} $fill-color-success [null] - The track success fill color.
 /// @param {Color} $text-color [null] - The value text color.
 /// @param {Number} $diameter [null] - The progress circle diameter.
 ///
 /// @requires $light-material-schema
 ///
 /// @example scss Change the circle progress color
 ///   $my-progress-circular-theme: progress-circular-theme(
-///     $progress-circle-color: purple
+///     $fill-color-default: purple
 ///   );
 ///   // Pass the theme to the igx-progress-circular component mixin
 ///   @include igx-progress-circular($my-progress-circle-theme);
 @function progress-circular-theme(
     $schema: $light-material-schema,
     $base-circle-color: null,
-    $progress-circle-color: null,
+    $fill-color-default: null,
+    $fill-color-danger: null,
+    $fill-color-warning: null,
+    $fill-color-info: null,
+    $fill-color-success: null,
     $text-color: null,
     $diameter: null
 ) {
@@ -40,24 +48,28 @@
     $theme: digest-schema($circular-bar-schema);
     $meta: map.get($theme, '_meta');
 
-    $progress-circle-color-start: map.get($theme, 'progress-circle-color');
-    $progress-circle-color-end: map.get($theme, 'progress-circle-color');
+    $fill-color-default-start: map.get($theme, 'fill-color-default');
+    $fill-color-default-end: map.get($theme, 'fill-color-default');
 
-    @if meta.type-of($progress-circle-color) == 'color' {
-        $progress-circle-color-start: $progress-circle-color;
-        $progress-circle-color-end: $progress-circle-color;
+    @if meta.type-of($fill-color-default) == 'color' {
+        $fill-color-default-start: $fill-color-default;
+        $fill-color-default-end: $fill-color-default;
     }
 
-    @if list.length($progress-circle-color) == 2 {
-        $progress-circle-color-start: list.nth($progress-circle-color, 1);
-        $progress-circle-color-end: list.nth($progress-circle-color, 2);
+    @if list.length($fill-color-default) == 2 {
+        $fill-color-default-start: list.nth($fill-color-default, 1);
+        $fill-color-default-end: list.nth($fill-color-default, 2);
     }
 
     @return extend($theme, (
         name: $name,
         base-circle-color: $base-circle-color,
-        progress-circle-color-start: $progress-circle-color-start,
-        progress-circle-color-end: $progress-circle-color-end,
+        fill-color-default-start: $fill-color-default-start,
+        fill-color-default-end: $fill-color-default-end,
+        fill-color-danger: $fill-color-danger,
+        fill-color-warning: $fill-color-warning,
+        fill-color-info: $fill-color-info,
+        fill-color-success: $fill-color-success,
         text-color: $text-color,
         diameter: $diameter,
         theme: map.get($schema, '_meta', 'theme'),
@@ -238,6 +250,14 @@
         }
     }
 
+    @each $mod in ('success','info','warning','danger') {
+        %display-circular--#{$mod} {
+            svg %outer {
+                stroke: var-get($theme, 'fill-color-#{$mod}');
+            }
+        }
+    }
+
     %outer--indeterminate {
         stroke-dasharray: 289;
         @include animation(igx-indeterminate-accordion var(--_transition-duration) cubic-bezier(0, .085, .68, .53) normal infinite);
@@ -292,11 +312,11 @@
     }
 
     %gradient-start {
-        stop-color: var-get($theme, 'progress-circle-color-start');
+        stop-color: var-get($theme, 'fill-color-default-start');
     }
 
     %gradient-end {
-        stop-color: var-get($theme, 'progress-circle-color-end');
+        stop-color: var-get($theme, 'fill-color-default-end');
     }
 
     @keyframes igx-indeterminate-accordion {

projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss

@@ -23,6 +23,8 @@
 /// @param {Color} $stripes-color [null] - The track stripes color.
 /// @param {Color} $text-color [null] - The track value text color.
 /// @param {List} $track-border-radius [null] - The border radius fraction, between 0 - 8 to be used fot the progress bar track
+/// @param {Number} $track-height [null] - The linear progress track height.
+/// @param {Number} $strip-size [null] - The linear progress bar strip width.
 /// @requires $light-material-schema
 /// @example scss Change the stripes color
 ///   $my-progress-linear-theme: progress-linear-theme(
@@ -41,6 +43,8 @@
     $stripes-color: null,
     $text-color: null,
     $track-border-radius: null,
+    $track-height: null,
+    $strip-size: null
 ) {
     $name: 'igx-linear-bar';
     $linear-bar-schema: ();
@@ -65,6 +69,8 @@
         stripes-color: $stripes-color,
         text-color: $text-color,
         track-border-radius: $track-border-radius,
+        track-height: $track-height,
+        strip-size: $strip-size,
         theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
@@ -123,21 +129,6 @@ $easing-curves: (
 
     $variant: map.get($theme, '_meta', 'variant');
 
-    // TODO all of these should be listed as design tokens in the component schema. [$bar-height, $strip-size]
-    $bar-height: map.get((
-        'material': rem(4px),
-        'fluent': rem(2px),
-        'bootstrap': rem(16px),
-        'indigo': rem(4px),
-    ), $variant);
-
-    $strip-size: map.get((
-        'material': rem(16px),
-        'fluent': rem(16px),
-        'bootstrap': rem(5px),
-        'indigo': rem(16px),
-    ), $variant);
-
     %display-linear {
         position: relative;
         display: flex;
@@ -169,14 +160,14 @@ $easing-curves: (
     }
 
     %base {
-        --stripe-size: #{$strip-size};
+        --stripe-size: #{var-get($theme, 'strip-size')};
         --linear-animation-duration: 2000ms;
 
         display: flex;
         flex-direction: column;
         position: relative;
         width: inherit;
-        height: $bar-height;
+        height: var-get($theme, 'track-height');
         background: var-get($theme, 'track-color');
         overflow: hidden;
         border-radius: var-get($theme, 'track-border-radius');

projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts

@@ -107,14 +107,13 @@ describe('IgxCircularProgressBarComponent', () => {
         expect(gradientId).toContain('igx-circular-gradient-');
 
         fixture.detectChanges();
-
         await fixture.whenStable();
 
         const outerCircle = circularBar.querySelector('.igx-circular-bar__outer') as SVGElement;
         expect(outerCircle).not.toBeNull();
 
-        // Check the `stroke` style instead of the attribute
-        const strokeStyle = outerCircle?.style.stroke;
+        // Use getComputedStyle to get the applied stroke
+        const strokeStyle = getComputedStyle(outerCircle).stroke;
 
         // Removing quotes from the stroke style
         const normalizedStrokeStyle = strokeStyle?.replace(/"/g, '');

projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts

@@ -519,7 +519,7 @@ export class IgxLinearProgressBarComponent extends BaseProgressDirective impleme
     templateUrl: 'templates/circular-bar.component.html',
     imports: [NgTemplateOutlet, NgClass]
 })
-export class IgxCircularProgressBarComponent extends BaseProgressDirective implements AfterViewInit, AfterContentInit {
+export class IgxCircularProgressBarComponent extends BaseProgressDirective implements AfterContentInit {
     /**
      * @hidden
      */
@@ -603,15 +603,57 @@ export class IgxCircularProgressBarComponent extends BaseProgressDirective imple
         super();
     }
 
+    /**
+     * Set type of the `IgxCircularProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `error`.
+     * ```html
+     * <igx-circular-bar [type]="'error'"></igx-circular-bar>
+     * ```
+     */
+    @Input()
+    public type = 'default';
+
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-circular-bar--danger')
+    public get error() {
+        return this.type === IgxProgressType.ERROR;
+    }
+
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-circular-bar--info')
+    public get info() {
+        return this.type === IgxProgressType.INFO;
+    }
+
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-circular-bar--warning')
+    public get warning() {
+        return this.type === IgxProgressType.WARNING;
+    }
+
+    /**
+     * @hidden
+     */
+    @HostBinding('class.igx-circular-bar--success')
+    public get success() {
+        return this.type === IgxProgressType.SUCCESS;
+    }
+
+    /**
+     * @hidden
+     */
+    @HostBinding('style.stroke')
+    public get strokeStyle() {
+        return this.type === 'default' ? `url(#${this.gradientId})` : 'none';
+    }
+
     public ngAfterContentInit() {
         this._contentInit = true;
     }
 
-    public ngAfterViewInit() {
-        this.renderer.setStyle(
-            this._svgCircle.nativeElement,
-            'stroke',
-            `url(#${this.gradientId})`
-        );
-    }
 }

src/app/circular-progress-showcase/circular-progress-showcase.sample.html

@@ -13,6 +13,7 @@ <h4 class="sample-title">Circular progress Angular</h4>
             [value]="properties.value"
             [text]="properties.text"
             [max]="properties.max"
+            [type]="variantAngular"
             [animate]="properties.hasAnimation"
             [textVisibility]="!properties.hideLabel">
             </igx-circular-bar>

src/app/circular-progress-showcase/circular-progress-showcase.sample.ts

@@ -101,4 +101,17 @@ export class CircularProgressSampleComponent {
 
         this.destroyRef.onDestroy(() => unsubscribe);
     }
+
+    protected get variantAngular() {
+        const variantValue = this.propertyChangeService.getProperty('variant');
+
+        switch (variantValue) {
+            case 'primary':
+                return 'default';
+            case 'danger':
+                return 'error';
+            default:
+                return variantValue;
+        }
+    }
 }