fix(lint): Silder and progressbar lint warnings and on event renaming (#9045)

* fix(lint): Silder and progressbar lint warnings and on event renaming

* chore(*): fix onChange lint warning

* chore(*): move migrations to 12.0

* chore(*): add migrations index file

* chore(*): add migration-collection

* chore(*): add progressbar migrations

* chore(*): change version in migration-collection

* chore(*): refactor progressbar migrations

* chore(*): rename valueChanged event

* chore(*): rename emitValueChanged method

Co-authored-by: Zdravko Kolev <[email protected]>
Co-authored-by: Aleksandar Kamenov <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -121,6 +121,18 @@ All notable changes for each version of this project will be documented in this
     ```
 
 
+### General:
+- `IgxSliderComponent`
+    - **Breaking Change** - The following outputs are renamed:
+        - `onValueChange` to `valueChange`
+        - `onValueChanged` to `dragFinished`
+- `IgxCircularProgressBarComponent`
+    - **Breaking Change** - The following outputs are renamed:
+        - `onProgressChanged` to `progressChanged`
+- `IgxLinearProgressBarComponent`
+    - **Breaking Change** - The following outputs are renamed:
+        - `onProgressChanged` to `progressChanged`
+
 ## 11.1.1
 
 ### New Features

projects/igniteui-angular/migrations/update-12_0_0/changes/members.json

@@ -36,6 +36,34 @@
         "IgxColumnActionsComponent"
       ]
     },
+    {
+        "member": "onValueChange",
+        "replaceWith": "valueChange",
+        "definedIn": [
+            "IgxSliderComponent"
+        ]
+    },
+    {
+        "member": "onValueChanged",
+        "replaceWith": "dragFinished",
+        "definedIn": [
+            "IgxSliderComponent"
+        ]
+    },
+    {
+        "member": "onProgressChanged",
+        "replaceWith": "progressChanged",
+        "definedIn": [
+            "IgxLinearProgressBarComponent"
+        ]
+    },
+    {
+        "member": "onProgressChanged",
+        "replaceWith": "progressChanged",
+        "definedIn": [
+            "IgxCircularProgressBarComponent"
+        ]
+    },
     {
       "member": "onColumnChange",
       "replaceWith": "columnChange",

projects/igniteui-angular/migrations/update-12_0_0/changes/outputs.json

@@ -152,6 +152,38 @@
                 "selector": "igx-column-actions",
                 "type": "component"
             }
+        },
+        {
+            "name": "onValueChange",
+            "replaceWith": "valueChange",
+            "owner": {
+                "selector": "igx-slider",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onValueChanged",
+            "replaceWith": "dragFinished",
+            "owner": {
+                "selector": "igx-slider",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onProgressChanged",
+            "replaceWith": "progressChanged",
+            "owner": {
+                "selector": "igx-linear-bar",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onProgressChanged",
+            "replaceWith": "progressChanged",
+            "owner": {
+                "selector": "igx-circular-bar",
+                "type": "component"
+            }
         }
     ]
 }

projects/igniteui-angular/migrations/update-12_0_0/index.spec.ts

@@ -89,6 +89,51 @@ $theme: igx-avatar-theme(
         );
     });
 
+    it('should replace onValueChange and onValueChanged with valueChange and dragFinished in igx-slider', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/slider.component.html`,
+            `<igx-slider
+            (onValueChange)="someHandler($event)"
+            (onValueChanged)="someHandler($event)"
+            ></igx-slider>`
+        );
+
+        const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree).toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/slider.component.html')).toEqual(
+            `<igx-slider
+            (valueChange)="someHandler($event)"
+            (dragFinished)="someHandler($event)"
+            ></igx-slider>`
+        );
+    });
+
+    it('should replace onProgressChanged with progressChanged in igx-linear-bar', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/linear.component.html`,
+            `<igx-linear-bar [value]="currentValue" (onProgressChanged)="progressChange($event)"></igx-linear-bar>`
+        );
+
+        const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree).toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/linear.component.html')).toEqual(
+            `<igx-linear-bar [value]="currentValue" (progressChanged)="progressChange($event)"></igx-linear-bar>`
+        );
+    });
+
+    it('should replace onProgressChanged with progressChanged in igx-circular-bar', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/circular.component.html`,
+            `<igx-circular-bar [value]="currentValue" (onProgressChanged)="progressChange($event)"></igx-circular-bar>`
+        );
+
+        const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree).toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/circular.component.html')).toEqual(
+            `<igx-circular-bar [value]="currentValue" (progressChanged)="progressChange($event)"></igx-circular-bar>`
+        );
+    });
+
     // IgxTabs
     it('Should update igx-tab-group to igx-tab-item', async () => {
         appTree.create(

projects/igniteui-angular/src/lib/progressbar/README.md

@@ -24,9 +24,9 @@ export class AppModule {}
 ### Basic configuration
 
 ```html
-<igx-circular-bar [value]="currentValue" [max]="100" [animate]="true" [textVisibility]="false" (onProgressChanged)="progresChanged($event)"></igx-circular-bar>
+<igx-circular-bar [value]="currentValue" [max]="100" [animate]="true" [textVisibility]="false" (progressChanged)="progresChange($event)"></igx-circular-bar>
 
-<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [textTop]="true" [striped]="true" [textVisibility]="true" (onProgressChanged)="progresChanged($event)"></igx-linear-bar>>
+<igx-linear-bar type="warning" [text]="'Custom text'" [textAlign]="positionCenter" [textTop]="true" [striped]="true" [textVisibility]="true" (progressChanged)="progresChange($event)"></igx-linear-bar>>
 ```
 
 # API Summary
@@ -58,4 +58,4 @@ export class AppModule {}
 |:----------|:------|
 | `getValue()` | Return passed value to progress bar to be in range between min(0) and max. |
 | `getPercentValue()` | Calculate the percentage based on passed value. |
-| `onProgressChanged` | Exposed event, that could be handled to track progress changing |
+| `progressChanged` | Exposed event, that could be handled to track progress changing |

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

@@ -58,12 +58,12 @@ export abstract class BaseProgressDirective {
      *  //...
      * ```
      * ```html
-     * <igx-circular-bar [value]="currentValue" (onProgressChanged)="progressChange($event)"></igx-circular-bar>
-     * <igx-linear-bar [value]="currentValue" (onProgressChanged)="progressChange($event)"></igx-linear-bar>
+     * <igx-circular-bar [value]="currentValue" (progressChanged)="progressChange($event)"></igx-circular-bar>
+     * <igx-linear-bar [value]="currentValue" (progressChanged)="progressChange($event)"></igx-linear-bar>
      * ```
      */
     @Output()
-    public onProgressChanged = new EventEmitter<IChangeProgressEventArgs>();
+    public progressChanged = new EventEmitter<IChangeProgressEventArgs>();
 
     protected _initValue = 0;
     protected _contentInit = false;
@@ -88,7 +88,7 @@ export abstract class BaseProgressDirective {
      * ```
      */
     @Input()
-    get step(): number {
+    public get step(): number {
         if (this._step) {
             return this._step;
         }
@@ -103,7 +103,7 @@ export abstract class BaseProgressDirective {
      * <igx-circular-bar [max]="200" [value]="0" [step]="1"></igx-circular-bar>
      * ```
      */
-    set step(val: number) {
+    public set step(val: number) {
         this._step = Number(val);
     }
 
@@ -143,7 +143,7 @@ export abstract class BaseProgressDirective {
      */
     @HostBinding('attr.aria-valuemax')
     @Input()
-    set max(maxNum: number) {
+    public set max(maxNum: number) {
         this._max = maxNum;
     }
 
@@ -158,7 +158,7 @@ export abstract class BaseProgressDirective {
      * }
      * ```
      */
-    get max() {
+    public get max() {
         return this._max;
     }
 
@@ -208,7 +208,7 @@ export abstract class BaseProgressDirective {
             this.updateProgressDirectly(newVal);
         }
 
-        this.onProgressChanged.emit(changedValues);
+        this.progressChanged.emit(changedValues);
     }
 
     /**
@@ -416,7 +416,7 @@ export class IgxLinearProgressBarComponent extends BaseProgressDirective impleme
     */
     @HostBinding('attr.aria-valuenow')
     @Input()
-    get value(): number {
+    public get value(): number {
         return this._value;
     }
 
@@ -426,7 +426,7 @@ export class IgxLinearProgressBarComponent extends BaseProgressDirective impleme
      * <igx-linear-bar [striped]="false" [max]="200" [value]="50"></igx-linear-bar>
      * ```
      */
-    set value(val) {
+    public set value(val) {
         const valInRange = valueInRange(val, this.max);
         if (isNaN(valInRange) || this._value === val || this.indeterminate) {
             return;
@@ -567,7 +567,7 @@ export class IgxCircularProgressBarComponent extends BaseProgressDirective imple
      * ```
      */
     @Input()
-    get value(): number {
+    public get value(): number {
         return this._value;
     }
 
@@ -577,7 +577,7 @@ export class IgxCircularProgressBarComponent extends BaseProgressDirective imple
      * <igx-circular-bar [value]="50"></igx-circular-bar>
      * ```
      */
-    set value(val: number) {
+    public set value(val: number) {
         const valInRange = valueInRange(val, this.max);
         if (isNaN(valInRange) || this._value === val || this.indeterminate) {
             return;

projects/igniteui-angular/src/lib/slider/README.md

@@ -76,4 +76,5 @@ import { IgxSliderComponent } from "../../../src/main";
 
 | Name | Description |
 | :--- | :--- | 
-| onValueChange  | This event is emitted when user has stopped interacting the thumb and value is changed.  |
+| valueChange  | This event is emitted when user has stopped interacting the thumb and value is changed.  |
+| valueChanged | This event is emitted at the end of every slide interaction.

projects/igniteui-angular/src/lib/slider/slider.common.ts

@@ -1,5 +1,5 @@
 import { Directive } from '@angular/core';
-import { IBaseEventArgs, mkenum } from '../core/utils';
+import { mkenum } from '../core/utils';
 
 /**
  * Template directive that allows you to set a custom template representing the lower label value of the {@link IgxSliderComponent}

projects/igniteui-angular/src/lib/slider/slider.component.html

@@ -53,8 +53,8 @@
         [step]="step"
         [templateRef]="thumbFromTemplateRef"
         [context]="context"
-        (onChange)="onThumbChange()"
-        (onHoverChange)="onHoverChange($event)"
+        (thumbChange)="onThumbChange()"
+        (hoverChange)="onHoverChange($event)"
         [deactiveState]="deactivateThumbLabel"
         [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
 
@@ -78,8 +78,8 @@
         [step]="step"
         [templateRef]="thumbToTemplateRef"
         [context]="context"
-        (onChange)="onThumbChange()"
-        (onHoverChange)="onHoverChange($event)"
+        (thumbChange)="onThumbChange()"
+        (hoverChange)="onHoverChange($event)"
         [deactiveState]="deactivateThumbLabel"
         [thumbLabelVisibilityDuration]="thumbLabelVisibilityDuration"></igx-thumb>
 </div>