From 1460553ebae9c5d3acb364fe7c00ffdc68da87b8 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 20 Feb 2025 16:35:24 +0200 Subject: [PATCH 1/3] feat(progress): update linear progres props and add variants for circular --- .../update-19_1_0/changes/theme-changes.json | 6 ++ .../circular/_circular-component.scss | 6 ++ .../progress/circular/_circular-theme.scss | 50 +++++++++++----- .../progress/linear/_linear-theme.scss | 25 +++----- .../progressbar/circularbar.component.spec.ts | 5 +- .../lib/progressbar/progressbar.component.ts | 58 ++++++++++++++++--- .../circular-progress-showcase.sample.html | 1 + .../circular-progress-showcase.sample.ts | 13 +++++ 8 files changed, 121 insertions(+), 43 deletions(-) diff --git a/projects/igniteui-angular/migrations/update-19_1_0/changes/theme-changes.json b/projects/igniteui-angular/migrations/update-19_1_0/changes/theme-changes.json index bb513afe008..8d402bf75ac 100644 --- a/projects/igniteui-angular/migrations/update-19_1_0/changes/theme-changes.json +++ b/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" } ] } 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 index 1b21e1119f1..3143a559d61 100644 --- 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 index 4ccb4bd61f1..d9e55d2095e 100644 --- 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,7 +9,11 @@ /// @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} $progress-circle-color [null] - The progress circle fill color. +/// @param {Color | List} $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. /// @@ -17,14 +21,18 @@ /// /// @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 index 2b4265abe88..c4d3cfa10ec 100644 --- 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 index 87305e2eaee..61beaa2f377 100644 --- 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 index e091b1c0fb6..1f527791130 100644 --- 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 + * + * ``` + */ + @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 index 9de0147d850..68477c4c46d 100644 --- 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 @@

Circular progress Angular

[value]="properties.value" [text]="properties.text" [max]="properties.max" + [type]="variantAngular" [animate]="properties.hasAnimation" [textVisibility]="!properties.hideLabel"> diff --git a/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts b/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts index 3a411000172..ef2cd096a9b 100644 --- a/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts +++ b/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; + } + } } From 127ea8fef53a247f78b32435c8d83786ca90cd6e Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 28 Feb 2025 11:00:56 +0200 Subject: [PATCH 2/3] chore(migrations): move migrations to 19.1.1 --- .../migrations/migration-collection.json | 5 +++ .../update-19_1_0/changes/theme-changes.json | 6 ---- .../update-19_1_1/changes/theme-changes.json | 11 ++++++ .../migrations/update-19_1_1/index.spec.ts | 36 +++++++++++++++++++ .../migrations/update-19_1_1/index.ts | 14 ++++++++ .../circular-progress-showcase.sample.ts | 2 +- 6 files changed, 67 insertions(+), 7 deletions(-) create mode 100644 projects/igniteui-angular/migrations/update-19_1_1/changes/theme-changes.json create mode 100644 projects/igniteui-angular/migrations/update-19_1_1/index.spec.ts create mode 100644 projects/igniteui-angular/migrations/update-19_1_1/index.ts diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json index 36c8592e21a..0ad95a432b4 100644 --- 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_0/changes/theme-changes.json b/projects/igniteui-angular/migrations/update-19_1_0/changes/theme-changes.json index 8d402bf75ac..bb513afe008 100644 --- a/projects/igniteui-angular/migrations/update-19_1_0/changes/theme-changes.json +++ b/projects/igniteui-angular/migrations/update-19_1_0/changes/theme-changes.json @@ -120,12 +120,6 @@ "owner": "color-classes", "remove": true, "type": "property" - }, - { - "name": "$progress-circle-color", - "replaceWith": "$fill-color-default", - "owner": "circular-theme", - "type": "property" } ] } 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 new file mode 100644 index 00000000000..2c665bac840 --- /dev/null +++ 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 new file mode 100644 index 00000000000..d7c68ffaf43 --- /dev/null +++ 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 new file mode 100644 index 00000000000..33d11adb6d7 --- /dev/null +++ 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/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts b/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts index 33dd6b6a800..312baa260eb 100644 --- a/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts +++ b/src/app/circular-progress-showcase/circular-progress-showcase.sample.ts @@ -69,7 +69,7 @@ export class CircularProgressSampleComponent { } }, variant: { - label: 'Variant (WebComponents)', + label: 'Variant', control: { type: 'select', options: ['primary', 'info', 'success', 'warning', 'danger'], From 2afd70e5fb66b050bc2a4ea8fc476085b5d42262 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 4 Mar 2025 13:49:18 +0200 Subject: [PATCH 3/3] deps(theming): bump to latest version --- package-lock.json | 8 ++++---- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0efb41fd6c7..e25d31bd926 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,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", @@ -12518,9 +12518,9 @@ } }, "node_modules/igniteui-theming": { - "version": "15.1.1", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-15.1.1.tgz", - "integrity": "sha512-PvU7znjYOUAT3fSX94gRrAmgFvvM8z04x6JJNAnO/7/jYSJmSWFtW3G4NfAMm8Uross5IGZuYq4cjlQo1a/Hkw==", + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-16.0.0.tgz", + "integrity": "sha512-YzyBwGAEbsYWFE3s+uZnHjDrbt+5duBwemV1+9M1QDH2x8uPvCOEb1Wt2Q2J7ipLHSqp2xfiPiTyFdXPW1xUdw==", "license": "MIT", "peerDependencies": { "sass": "^1.69.5" diff --git a/package.json b/package.json index 3034c3cf77f..bef78922e00 100644 --- 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/package.json b/projects/igniteui-angular/package.json index 783505dac40..e586e154be2 100644 --- 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": {