Merge pull request #6503 from IgniteUI/types-refactoring

refactor(*): make type enumerators more consistent across components

Author: Lipata

CHANGELOG.md

@@ -6,13 +6,18 @@ All notable changes for each version of this project will be documented in this
 
 ### General
 - Added support for the Ivy renderer.
-- **Breaking Changes** The following classes have been renamed. Using `ng update` will apply automatically migrate your project to use the new names.
+- **Breaking Changes** The following classes and enumarators have been renamed. Using `ng update` will apply automatically migrate your project to use the new names.
     - `IgxDropDownBase` -> `IgxDropDownBaseDirective`
     - `IgxDropDownItemBase` -> `IgxDropDownItemBaseDirective`
     - `IgxGridBaseComponent` -> `IgxGridBaseDirective`
     - `IgxRowComponent` -> `IgxRowDirective`
     - `IgxHierarchicalGridBaseComponent` -> `IgxHierarchicalGridBaseDirective`
     - `IgxMonthPickerBase` -> `IgxMonthPickerBaseDirective`
+    - `AvatarType` -> `IgxAvatarType`
+    - `Size` -> `IgxAvatarSize`
+    - `Type` -> `IgxBadgeType`
+    - `SliderType` -> `IgxSliderType`
+    - `TabsType` -> `IgxTabsType`
 
 - **Breaking Changes** Due to a breaking change in Angular 9 with Ivy, Hammer providers are no longer included by default. You can find more information at: https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-9 . Because of this change the following components require `HammerModule` to be imported in the root module of the application in order for user interactions to work as expected:
     - `IgxSlider`
@@ -41,6 +46,21 @@ All notable changes for each version of this project will be documented in this
 - `IgxCarousel`:
     - **Breaking Changes** -The carousel slides are no longer array, they are changed to QueryList.
     - **Behavioural change** - When slides are more than 5, a label is shown instead of the indicators. The count limit of visible indicators can be changed with the input `maximumIndicatorsCount`
+- `IgxAvatar`:
+    - **Breaking Changes** - renamed the `default` enumeration member to `custom` in `IgxAvatarType`;
+- `IgxBadge`:
+    - **Breaking Changes** - renamed the `default` enumeration member to `primary` in `IgxBadgeType`;
+- `IgxCard`:
+    - **Breaking Changes** - renamed the `default` enumeration member to `elevated` in `IgxCardType`;
+    - **Breaking Changes** - renamed the `default` enumeration member to `start` in `IgxCardActionsLayout`;
+- `IgxDivider`:
+    - **Breaking Changes** - renamed the `default` enumeration member to `solid` in `IgxDividerType`;
+    - **Breaking Changes** - renamed the `isDefault` getter to `isSolid`;
+- `IgxProgress`:
+    - **Breaking Changes** - renamed the `danger` enumeration member to `error` in `IgxProgresType`;
+    - **Breaking Changes** - renamed the `danger` getter to `error`;
+- `IgxTabs`:
+    - **Breaking Changes** - The `tabsType` input property has been renamed to `type`. It should get renamed in your components via `ng update`;
 - `igxOverlay`:
     - **Behavioural Change** - `igxOverlay` - no longer persists element scrolling `out of the box`. In order to persist an element scroll position after attaching the element to an overlay, handle the exposed `onAppended` overlay event and manage/restore the scroll position.
 

projects/igniteui-angular/migrations/update-9_0_0/changes/classes.json

@@ -28,6 +28,26 @@
         {
             "name": "IgxBaseExporter",
             "replaceWith": "IgxBaseExporterDirective"
+        },
+        {
+            "name": "AvatarType",
+            "replaceWith": "IgxAvatarType"
+        },
+        {
+            "name": "Size",
+            "replaceWith": "IgxAvatarSize"
+        },
+        {
+            "name": "Type",
+            "replaceWith": "IgxBadgeType"
+        },
+        {
+            "name": "SliderType",
+            "replaceWith": "IgxSliderType"
+        },
+        {
+            "name": "TabsType",
+            "replaceWith": "IgxTabsType"
         }
     ]
 }

projects/igniteui-angular/migrations/update-9_0_0/changes/inputs.json

@@ -8,6 +8,14 @@
                 "selector": "igx-slider",
                 "type": "component"
             }
+        },
+        {
+            "name": "tabsType",
+            "replaceWith": "type",
+            "owner": {
+                "selector": "igx-tabs",
+                "type": "component"
+            }
         }
     ]
 }

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

@@ -43,4 +43,32 @@ describe('Update 9.0.0', () => {
             `);
         done();
     });
+
+    it('should update Enum names.', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/enum.component.ts',
+            `import { AvatarType, Size, Type, SliderType } from 'igniteui-angular';
+            `);
+
+        const tree = schematicRunner.runSchematic('migration-13', {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/enum.component.ts'))
+            .toEqual(
+            `import { IgxAvatarType, IgxAvatarSize, IgxBadgeType, IgxSliderType } from 'igniteui-angular';
+            `);
+        done();
+    });
+
+    it('should update input prop from tabsType to type', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/tabs.component.html',
+            '<igx-tabs tabsType="fixed"></igx-tabs>'
+        );
+
+        const tree = schematicRunner.runSchematic('migration-13', {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/tabs.component.html'))
+            .toEqual('<igx-tabs type="fixed"></igx-tabs>');
+
+        done();
+    });
 });

projects/igniteui-angular/src/lib/avatar/avatar.component.spec.ts

@@ -5,7 +5,7 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxIconModule } from '../icon/index';
-import { IgxAvatarComponent, AvatarType, Size } from './avatar.component';
+import { IgxAvatarComponent, IgxAvatarType, IgxAvatarSize } from './avatar.component';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
 
@@ -14,7 +14,6 @@ describe('Avatar', () => {
     const baseClass = 'igx-avatar';
 
     const classes = {
-        default: `${baseClass}--default`,
         round: `${baseClass}--rounded`,
         small: `${baseClass}--small`,
         medium: `${baseClass}--medium`,
@@ -76,22 +75,22 @@ describe('Avatar', () => {
         const instance = fixture.componentInstance.avatar;
         const hostEl = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
-        expect(instance.size).toEqual(Size.SMALL);
+        expect(instance.size).toEqual(IgxAvatarSize.SMALL);
         expect(hostEl.classList).toContain(classes.small);
 
-        instance.size = Size.MEDIUM;
+        instance.size = IgxAvatarSize.MEDIUM;
         fixture.detectChanges();
-        expect(instance.size).toEqual(Size.MEDIUM);
+        expect(instance.size).toEqual(IgxAvatarSize.MEDIUM);
         expect(hostEl.classList).not.toContain(classes.medium);
 
-        instance.size = Size.LARGE;
+        instance.size = IgxAvatarSize.LARGE;
         fixture.detectChanges();
-        expect(instance.size).toEqual(Size.LARGE);
+        expect(instance.size).toEqual(IgxAvatarSize.LARGE);
         expect(hostEl.classList).not.toContain(classes.large);
 
         instance.size = 'nonsense';
         fixture.detectChanges();
-        expect(instance.size).toEqual(Size.SMALL);
+        expect(instance.size).toEqual(IgxAvatarSize.SMALL);
         expect(hostEl.classList).toContain(classes.small);
     });
 
@@ -102,13 +101,11 @@ describe('Avatar', () => {
         const instance = fixture.componentInstance.avatar;
         const hostEl = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
-        expect(instance.type).toEqual(AvatarType.DEFAULT);
         expect(instance.initials).toBeUndefined();
         expect(instance.src).toBeUndefined();
         expect(instance.icon).toBeUndefined();
 
         expect(hostEl.textContent).toEqual('TEST');
-        expect(hostEl.classList).toContain(classes.default);
     });
 
 
@@ -119,7 +116,7 @@ describe('Avatar', () => {
         const instance = fixture.componentInstance.avatar;
         const hostEl = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
-        expect(instance.type).toEqual(AvatarType.INITIALS);
+        expect(instance.type).toEqual(IgxAvatarType.INITIALS);
         expect(instance.initials).toEqual('ZK');
         expect(hostEl.querySelector('span').textContent).toEqual('ZK');
         expect(hostEl.classList).toContain(classes.initials);
@@ -131,7 +128,7 @@ describe('Avatar', () => {
         const instance = fixture.componentInstance.avatar;
         const hostEl = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
-        expect(instance.type).toEqual(AvatarType.ICON);
+        expect(instance.type).toEqual(IgxAvatarType.ICON);
         expect(instance.icon).toBeTruthy();
         expect(hostEl.classList).toContain(classes.icon);
     });
@@ -142,7 +139,7 @@ describe('Avatar', () => {
         const instance = fixture.componentInstance.avatar;
         const hostEl = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
-        expect(instance.type).toEqual(AvatarType.IMAGE);
+        expect(instance.type).toEqual(IgxAvatarType.IMAGE);
         expect(instance.image).toBeTruthy();
         expect(instance.image.nativeElement.style.backgroundImage).toBeDefined();
 

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

@@ -14,17 +14,17 @@ import { IgxIconModule } from '../icon/index';
 
 let NEXT_ID = 0;
 
-export enum Size {
+export enum IgxAvatarSize {
     SMALL = 'small',
     MEDIUM = 'medium',
     LARGE = 'large'
 }
 
-export enum AvatarType {
-    DEFAULT = 'default',
+export enum IgxAvatarType {
     INITIALS = 'initials',
     IMAGE = 'image',
-    ICON = 'icon'
+    ICON = 'icon',
+    CUSTOM = 'custom',
 }
 
 /**
@@ -118,22 +118,25 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
 
     /**
      * Returns the type of the avatar.
-     * The avatar can be: `"initials type avatar"`, `"icon type avatar"` or `"image type avatar"`.
+     * The avatar can be:
+     * - `"initials type avatar"`
+     * - `"icon type avatar"`
+     * - `"image type avatar"`.
+     * - `"custom type avatar"`.
      *
      * ```typescript
      * let avatarDescription = this.avatar.roleDescription;
      * ```
      *
      * @memberof IgxAvatarComponent
      */
-
     @HostBinding('attr.aria-roledescription')
     public roleDescription: string;
 
     /**
      * @hidden
      */
-    private _size: string | Size = 'small';
+    private _size: string | IgxAvatarSize = IgxAvatarSize.SMALL;
 
     /**
      * Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `"igx-avatar-0"`.
@@ -237,7 +240,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
      * @memberof IgxAvatarComponent
      */
     @Input()
-    public get size(): string | Size {
+    public get size(): string | IgxAvatarSize {
         return this._size;
     }
 
@@ -251,7 +254,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
      *
      * @memberof IgxAvatarComponent
      */
-    public set size(value: string | Size) {
+    public set size(value: string | IgxAvatarSize) {
         switch (value) {
             case 'small':
             case 'medium':
@@ -272,20 +275,20 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
      *
      * @memberof IgxAvatarComponent
      */
-    get type(): AvatarType {
+    get type(): IgxAvatarType {
         if (this.src) {
-            return AvatarType.IMAGE;
+            return IgxAvatarType.IMAGE;
         }
 
         if (this.icon) {
-            return AvatarType.ICON;
+            return IgxAvatarType.ICON;
         }
 
         if (this.initials) {
-            return AvatarType.INITIALS;
+            return IgxAvatarType.INITIALS;
         }
 
-        return AvatarType.DEFAULT;
+        return IgxAvatarType.CUSTOM;
     }
 
     /**
@@ -299,11 +302,11 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
      */
     get template(): TemplateRef<any> {
         switch (this.type) {
-            case AvatarType.IMAGE:
+            case IgxAvatarType.IMAGE:
                 return this.imageTemplate;
-            case AvatarType.INITIALS:
+            case IgxAvatarType.INITIALS:
                 return this.initialsTemplate;
-            case AvatarType.ICON:
+            case IgxAvatarType.ICON:
                 return this.iconTemplate;
             default:
                 return this.defaultTemplate;
@@ -323,20 +326,23 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
      *@hidden
      */
     public ngAfterViewInit() {
-        this.elementRef.nativeElement.classList
-            .add(`igx-avatar--${this._size}`, `igx-avatar--${this.type}`);
+        if (this.type !== IgxAvatarType.CUSTOM) {
+            this.elementRef.nativeElement.classList.add(`igx-avatar--${this.type}`);
+        }
+
+        this.elementRef.nativeElement.classList.add(`igx-avatar--${this._size}`);
     }
 
     /**
      * @hidden
      */
     private getRole(): string {
         switch (this.type) {
-            case AvatarType.IMAGE:
+            case IgxAvatarType.IMAGE:
                 return 'image avatar';
-            case AvatarType.ICON:
+            case IgxAvatarType.ICON:
                 return 'icon avatar';
-            case AvatarType.INITIALS:
+            case IgxAvatarType.INITIALS:
                 return 'initials avatar';
             default:
                 return 'custom avatar';

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

@@ -13,7 +13,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | Name   |      Type      |  Description |
 |:----------|:-------------:|:------|
 | `id` | string | Unique identifier of the component. If not provided it will be automatically generated.|
-| `type` | string | Set the type of the badge to either `default`, `info`, `success`, `warning`, or `error`. This will change the background color of the badge according to the values set in the default theme. |
+| `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, or `error`. This will change the background color of the badge according to the values set in the default theme. |
 | `position` | string | Set the position of the badge relative to its parent container to either `top-right`, `top-left`, `bottom-right`, or `bottom-left`. |
 | `value` | string | Set the value to be displayed inside the badge. |
 | `icon` | string | Set an icon for the badge from the material icons set. Will not be displayed if `value` for the badge is already set. |

projects/igniteui-angular/src/lib/badge/badge.component.spec.ts

@@ -5,7 +5,7 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxIconModule } from '../icon/index';
-import { IgxBadgeComponent, IgxBadgeModule } from './badge.component';
+import { IgxBadgeComponent, IgxBadgeType } from './badge.component';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
 
@@ -74,7 +74,7 @@ describe('Badge', () => {
         const badge = fixture.componentInstance.badge;
 
         expect(badge.icon === 'person').toBeTruthy();
-        expect(badge.type === 'info').toBeTruthy();
+        expect(badge.type === IgxBadgeType.INFO).toBeTruthy();
         expect(badge.value === '').toBeTruthy();
 
         expect(fixture.debugElement.query(By.css('.igx-badge__circle'))).toBeTruthy();