chore(icon): update inputs and methods names

CHANGELOG.md

@@ -13,7 +13,11 @@ All notable changes for each version of this project will be documented in this
     - Added new property `alignment` that determines the radio group alignment. Available options are `horizontal` (default) and `vertical`.
 - `IgxDialog`
     - Added new `onOpened` and `onClosed` events.
-
+- `IgxIcon`
+    - **Breaking Change** - The `color` input property has been deprecated. 
+    - **Renamed inputs**
+        `isActive` to `active`
+        `fontSet` to `family`
 ## 11.0.4
 
 ### General

projects/igniteui-angular/migrations/migration-collection.json

@@ -90,6 +90,11 @@
             "version": "11.0.0",
             "description": "Updates Ignite UI for Angular from v10.2.x to v11.0.0",
             "factory": "./update-11_0_0"
+        },
+        "migration-19": {
+            "version": "11.1.0",
+            "description": "Updates Ignite UI for Angular from v11.0.x to v11.1.0",
+            "factory": "./update-11_1_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-11_1_0/changes/inputs.json

@@ -0,0 +1,21 @@
+{
+    "@scheme": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "fontSet",
+            "replaceWith": "family",
+            "owner": {
+                "selector": "igx-icon",
+                "type": "component"
+            }
+        },
+        {
+            "name": "isActive",
+            "replaceWith": "active",
+            "owner": {
+                "selector": "igx-icon",
+                "type": "component"
+            }
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-11_1_0/changes/members.json

@@ -0,0 +1,47 @@
+{
+    "$schema": "../../common/schema/members-changes.schema.json",
+    "changes": [
+        {
+            "member": "defaultFontSet",
+            "replaceWith": "defaultFamily",
+            "definedIn": [
+                "IgxIconService"
+            ]
+        },
+        {
+            "member": "registerFontSetAlias",
+            "replaceWith": "registerFamilyAlias",
+            "definedIn": [
+                "IgxIconService"
+            ]
+        },
+        {
+            "member": "fontSetClassName",
+            "replaceWith": "familyClassName",
+            "definedIn": [
+                "IgxIconService"
+            ]
+        },
+        {
+            "member": "getFontSet",
+            "replaceWith": "getFamily",
+            "definedIn": [
+                "IgxIconComponent"
+            ]
+        },
+        {
+            "member": "getIconName",
+            "replaceWith": "getName",
+            "definedIn": [
+                "IgxIconComponent"
+            ]
+        },
+        {
+            "member": "getIconColor",
+            "replaceWith": "getColor",
+            "definedIn": [
+                "IgxIconComponent"
+            ]
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-11_1_0/index.spec.ts

@@ -0,0 +1,58 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Update to 11.1.0', () => {
+    let appTree: UnitTestTree;
+    const runner = new SchematicTestRunner(
+        'ig-migrate',
+        path.join(__dirname, '../migration-collection.json')
+    );
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc',
+            },
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix',
+            },
+        },
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    it('should update fontSet to family', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/icon.component.html`,
+            '<igx-icon fontSet="material">settings</igx-icon>'
+        );
+
+        const tree = await runner.runSchematicAsync('migration-19', {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/icon.component.html'))
+            .toEqual('<igx-icon family="material">settings</igx-icon>');
+
+    });
+
+    it('should update isActive to active', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/icon.component.html`,
+            '<igx-icon [isActive]="false">settings</igx-icon>'
+        );
+
+        const tree = await runner.runSchematicAsync('migration-19', {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/icon.component.html'))
+            .toEqual('<igx-icon [active]="false">settings</igx-icon>');
+
+    });
+});

projects/igniteui-angular/migrations/update-11_1_0/index.ts

@@ -0,0 +1,15 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '11.1.0';
+
+export default function (): Rule {
+    return (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();
+    };
+}

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.html

@@ -2,14 +2,14 @@
 
     <ng-container *ngIf="!asMenuItem">
         <button igxButton="icon" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
-            <igx-icon *ngIf="iconSet" [fontSet]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
+            <igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
             <igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
         </button>
     </ng-container>
 
     <ng-container *ngIf="asMenuItem">
         <div #container [className]='containerClass'>
-            <igx-icon *ngIf="iconSet" [fontSet]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
+            <igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
             <igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
             <label *ngIf='asMenuItem' igxLabel>{{labelText}}</label>
         </div>

projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html

@@ -12,7 +12,7 @@
         [igxRipple]="button.ripple"
     >
         <span class="igx-button-group__item-content {{ itemContentCssClass }}">
-            <igx-icon *ngIf="button.icon" fontSet="material">{{button.icon}}</igx-icon>
+            <igx-icon *ngIf="button.icon">{{button.icon}}</igx-icon>
             <span class="igx-button-group__button-text" *ngIf="button.label">{{button.label}}</span>
         </span>
     </button>

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

@@ -70,7 +70,7 @@ <h2 id="igx-aria-calendar-title-month" class="igx-calendar__header-date">
             [startScroll]="startPrevMonthScroll"
             [stopScroll]="stopMonthScroll"
             [ngStyle]="{ 'min-width.%': 100/(monthsViewNumber*7)}">
-            <igx-icon fontSet="material" aria-hidden="true">keyboard_arrow_left</igx-icon>
+            <igx-icon aria-hidden="true">keyboard_arrow_left</igx-icon>
         </div>
         <div class="igx-calendar-picker__dates"
              *ngFor="let view of monthsViewNumber | IgxMonthViewSlots; index as i;"
@@ -90,7 +90,7 @@ <h2 id="igx-aria-calendar-title-month" class="igx-calendar__header-date">
             [startScroll]="startNextMonthScroll"
             [stopScroll]="stopMonthScroll"
             [ngStyle]="{'min-width.%': 100/(monthsViewNumber*7)}">
-            <igx-icon fontSet="material" aria-hidden="true">keyboard_arrow_right</igx-icon>
+            <igx-icon aria-hidden="true">keyboard_arrow_right</igx-icon>
         </div>
     </section>
 

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html

@@ -16,7 +16,7 @@
             role="button"
             [attr.aria-label]="'Previous Year ' + getPreviousYear()"
             data-action="prev">
-            <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
+            <igx-icon>keyboard_arrow_left</igx-icon>
         </div>
         <div [style.width.%]="100">
             <span
@@ -39,7 +39,7 @@
             [attr.aria-label]="'Next Year ' + getNextYear()"
             data-action="next">
 
-            <igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
+            <igx-icon>keyboard_arrow_right</igx-icon>
         </div>
     </div>
 

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

@@ -50,8 +50,8 @@ The **IgxCarousel** supports templating indicators and navigation buttons
 <igx-carousel #carousel>
         ...
     <ng-template igxCarouselIndicator let-slide>
-        <igx-icon *ngIf="slide.active"  fontSet="material">brightness_7</igx-icon>
-        <igx-icon *ngIf="!slide.active"  fontSet="material">brightness_5</igx-icon>
+        <igx-icon *ngIf="slide.active">brightness_7</igx-icon>
+        <igx-icon *ngIf="!slide.active">brightness_5</igx-icon>
     </ng-template>
 </igx-carousel>
 ```
@@ -62,7 +62,7 @@ The **IgxCarousel** supports templating indicators and navigation buttons
         ...
     <ng-template igxCarouselNextButton let-disabled>
         <button igxButton="fab" igxRipple="white" [disabled]="disabled">
-            <igx-icon fontSet="material">add</igx-icon>
+            <igx-icon>add</igx-icon>
         </button>
     </ng-template>
 </igx-carousel>
@@ -74,7 +74,7 @@ The **IgxCarousel** supports templating indicators and navigation buttons
         ...
     <ng-template igxCarouselPrevButton let-disabled>
         <button igxButton="fab" igxRipple="white" [disabled]="disabled">
-            <igx-icon fontSet="material">remove</igx-icon>
+            <igx-icon>remove</igx-icon>
         </button>
     </ng-template>
 </igx-carousel>

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

@@ -9,15 +9,15 @@
     <a class="igx-nav-arrow"
         [class.igx-nav-arrow--disabled]="disabled"
     >
-        <igx-icon fontSet="material">arrow_forward</igx-icon>
+        <igx-icon>arrow_forward</igx-icon>
     </a>
 </ng-template>
 
 <ng-template #defaultPrevButton let-disabled>
     <a class="igx-nav-arrow"
         [class.igx-nav-arrow--disabled]="disabled"
     >
-        <igx-icon fontSet="material">arrow_back</igx-icon>
+        <igx-icon>arrow_back</igx-icon>
     </a>
 </ng-template>
 

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

@@ -306,8 +306,8 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      *  <igx-carousel #carousel>
      *      ...
      *      <ng-template igxCarouselIndicator let-slide>
-     *         <igx-icon *ngIf="slide.active"  fontSet="material">brightness_7</igx-icon>
-     *         <igx-icon *ngIf="!slide.active"  fontSet="material">brightness_5</igx-icon>
+     *         <igx-icon *ngIf="slide.active">brightness_7</igx-icon>
+     *         <igx-icon *ngIf="!slide.active">brightness_5</igx-icon>
      *      </ng-template>
      *  </igx-carousel>
      * ```
@@ -329,7 +329,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      *      ...
      *      <ng-template igxCarouselNextButton let-disabled>
      *            <button igxButton="fab" igxRipple="white" [disabled]="disabled">
-     *                <igx-icon fontSet="material">add</igx-icon>
+     *                <igx-icon>add</igx-icon>
      *           </button>
      *      </ng-template>
      *  </igx-carousel>
@@ -352,7 +352,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      *      ...
      *      <ng-template igxCarouselPrevButton let-disabled>
      *            <button igxButton="fab" igxRipple="white" [disabled]="disabled">
-     *                <igx-icon fontSet="material">remove</igx-icon>
+     *                <igx-icon>remove</igx-icon>
      *           </button>
      *      </ng-template>
      *  </igx-carousel>

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

@@ -112,9 +112,9 @@ Example of using an icon for a `prefix`, text for content and a custom icon agai
 
 ```html
 <igx-chip *ngFor="let chip of chipList" [id]="chip.id">
-    <igx-icon igxPrefix fontSet="material">drag_indicator</igx-icon>
+    <igx-icon igxPrefix>drag_indicator</igx-icon>
     {{chip.text}}
-    <igx-icon igxSuffix fontSet="material">close</igx-icon>
+    <igx-icon igxSuffix>close</igx-icon>
 </igx-chip>
 ```
 

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -70,7 +70,7 @@ let CHIP_ID = 0;
  * @example
  * ```html
  * <igx-chip class="chipStyle" [id]="901" [draggable]="true" [removable]="true" (onRemove)="chipRemoved($event)">
- *    <igx-avatar class="chip-avatar-resized" igxPrefix fontSet="material" roundShape="true"></igx-avatar>
+ *    <igx-avatar class="chip-avatar-resized" igxPrefix roundShape="true"></igx-avatar>
  * </igx-chip>
  * ```
  */

projects/igniteui-angular/src/lib/chips/chip.spec.ts

@@ -22,7 +22,7 @@ import { ControlsFunction } from '../test-utils/controls-functions.spec';
             [removable]="chip.removable" [selectable]="chip.selectable"
             [displayDensity]="chip.density" (onRemove)="chipRemoved($event)">
                 <span #label [class]="'igx-chip__text'">{{chip.text}}</span>
-                <igx-icon igxPrefix fontSet="material">drag_indicator</igx-icon>
+                <igx-icon igxPrefix>drag_indicator</igx-icon>
             </igx-chip>
             <igx-chip #chipElem tabIndex="1" [id]="tabChipAttr">
                 <span #label [class]="'igx-chip__text'">Tab Chip</span>

projects/igniteui-angular/src/lib/chips/chips-area.spec.ts

@@ -16,7 +16,7 @@ import { wait, UIInteractions } from '../test-utils/ui-interactions.spec';
         <igx-chips-area #chipsArea class="customClass">
             <igx-chip #chipElem *ngFor="let chip of chipList"
             [id]="chip.id" [draggable]="chip.draggable" [removable]="chip.removable" [selectable]="chip.selectable">
-                <igx-icon igxPrefix fontSet="material">drag_indicator</igx-icon>
+                <igx-icon igxPrefix>drag_indicator</igx-icon>
                 <span #label [class]="'igx-chip__text'">{{chip.text}}</span>
             </igx-chip>
         </igx-chips-area>
@@ -62,7 +62,7 @@ class TestChipSelectComponent extends TestChipComponent {
         <igx-chips-area #chipsArea (onReorder)="chipsOrderChanged($event)">
             <igx-chip #chipElem *ngFor="let chip of chipList" [id]="chip.id" [draggable]="true"
                 [removable]="true" [selectable]="true" (onRemove)="chipRemoved($event)">
-                <igx-icon igxPrefix fontSet="material">drag_indicator</igx-icon>
+                <igx-icon igxPrefix>drag_indicator</igx-icon>
                 <span #label [class]="'igx-chip__text'">{{chip.text}}</span>
             </igx-chip>
         </igx-chips-area>

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

@@ -18,15 +18,15 @@
         <ng-container *ngIf="clearIconTemplate">
             <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
         </ng-container>
-        <igx-icon *ngIf="!clearIconTemplate" fontSet="material">
+        <igx-icon *ngIf="!clearIconTemplate">
             clear
         </igx-icon>
     </igx-suffix>
     <igx-suffix class="igx-combo__toggle-button">
         <ng-container *ngIf="toggleIconTemplate">
             <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
         </ng-container>
-        <igx-icon *ngIf="!toggleIconTemplate" fontSet="material">
+        <igx-icon *ngIf="!toggleIconTemplate">
             {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}
         </igx-icon>
     </igx-suffix>
@@ -40,7 +40,7 @@
             (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
             aria-autocomplete="both" [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
         <igx-suffix *ngIf="showSearchCaseIcon">
-            <igx-icon fontSet="imx-icons" name="case-sensitive" [isActive]="filteringOptions.caseSensitive"
+            <igx-icon family="imx-icons" name="case-sensitive" [active]="filteringOptions.caseSensitive"
                 (click)="toggleCaseSensitive()">
             </igx-icon>
         </igx-suffix>

projects/igniteui-angular/src/lib/directives/autocomplete/README.md

@@ -184,7 +184,7 @@ Using the `igxDropDown` as `igxAutocomplete` options provider allows the develop
 
 ```html
 <igx-input-group class="group">
-    <igx-prefix igxRipple><igx-icon fontSet="material">place</igx-icon> </igx-prefix>
+    <igx-prefix igxRipple><igx-icon>place</igx-icon> </igx-prefix>
     <input igxInput name="towns" type="text" [(ngModel)]="townSelected" required
         [igxAutocomplete]='townsPanel'/>
     <label igxLabel for="towns">Towns</label>