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

didimmova · web-flow · commit f7678a3a34c7 · 2025-03-04T14:03:16.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.1",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^15.1.1",
+    "igniteui-theming": "^16.0.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",
diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json
@@ -211,6 +211,11 @@
             "version": "19.1.0",
             "description": "Updates Ignite UI for Angular from v18.2.3 to v19.1.0",
             "factory": "./update-19_1_0"
+        },
+        "migration-43": {
+            "version": "19.1.1",
+            "description": "Updates Ignite UI for Angular from v19.1.0 to v19.1.1",
+            "factory": "./update-19_1_1"
         }
     }
 }
diff --git a/projects/igniteui-angular/migrations/update-19_1_1/changes/theme-changes.json b/projects/igniteui-angular/migrations/update-19_1_1/changes/theme-changes.json
@@ -0,0 +1,11 @@
+{
+    "$schema": "../../common/schema/theme-changes.schema.json",
+    "changes": [
+      {
+        "name": "$progress-circle-color",
+        "replaceWith": "$fill-color-default",
+        "owner": "circular-theme",
+        "type": "property"
+      }
+    ]
+  }
diff --git a/projects/igniteui-angular/migrations/update-19_1_1/index.spec.ts b/projects/igniteui-angular/migrations/update-19_1_1/index.spec.ts
@@ -0,0 +1,36 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '19.1.1';
+const themes = [
+    'circular-theme'
+];
+const testFilePath = '/testSrc/appPrefix/component/${theme}.component.scss';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-43';
+
+    themes.forEach(theme => {
+        it('should rename the progress circle color property of the circular progress', async () => {
+            appTree.create(
+                testFilePath,
+                `$custom-${theme}: ${theme}($progress-circle-color: red);`
+            );
+
+            const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+            expect(tree.readContent(testFilePath)).toEqual(
+                `$custom-${theme}: ${theme}($fill-color-default: red);`
+            );
+        });
+    });
+});
diff --git a/projects/igniteui-angular/migrations/update-19_1_1/index.ts b/projects/igniteui-angular/migrations/update-19_1_1/index.ts
@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '19.1.1';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^15.1.1",
+        "igniteui-theming": "^16.0.0",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-component.scss b/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;
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss b/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 {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss b/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');
diff --git a/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts b/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, '');
diff --git a/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts b/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})`
-        );
-    }
 }
diff --git a/src/app/circular-progress-showcase/circular-progress-showcase.sample.html b/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>
diff --git a/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts b/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts

Original file line number	Diff line number	Diff line change
`@@ -211,6 +211,11 @@`
`211`	`211`	`"version": "19.1.0",`
`212`	`212`	`"description": "Updates Ignite UI for Angular from v18.2.3 to v19.1.0",`
`213`	`213`	`"factory": "./update-19_1_0"`
	`214`	`+ },`
	`215`	`+ "migration-43": {`
	`216`	`+ "version": "19.1.1",`
	`217`	`+ "description": "Updates Ignite UI for Angular from v19.1.0 to v19.1.1",`
	`218`	`+ "factory": "./update-19_1_1"`
`214`	`219`	`}`
`215`	`220`	`}`
`216`	`221`	`}`
Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,12 @@`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`
	`52`	`+ @each $modifier in ('danger', 'warning', 'info', 'success') {`
	`53`	`+ @include m($modifier) {`
	`54`	`+ @extend %display-circular--#{$modifier} !optional;`
	`55`	`+ }`
	`56`	`+ }`
	`57`	`+`
`52`	`58`	`@include m(animation-none) {`
`53`	`59`	`@extend %animation-none !optional;`
`54`	`60`	`}`