Merge branch 'master' into puppeteer

Author: kdinev

CHANGELOG.md

@@ -23,7 +23,10 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** The `onSlideChanged`, `onSlideAdded`, `onSlideRemoved`, `onCarouselPaused` and `onCarouselPlaying` outputs have been renamed to `slideChanged`, `slideAdded`, `slideRemoved`, `carouselPaused` and `carouselPlaying` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
 - `IgxRadio`, `IgxRadioGroup`
     - Added component validation along with styles for invalid state
-
+- `IgxBadge`
+    - Added `shape` property that controls the shape of the badge and can be either `square` or `rounded`. The default shape of the badge is rounded. 
+- `IgxAvatar`
+    - **Breaking Change** The `roundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `shape` attribute that can be `square`, `rounded` or `circle`. The default shape of the avatar is `square`. 
 
 ## 15.0.1
 

README.md

@@ -41,9 +41,9 @@ There are many ways in which you can [participate](https://github.com/IgniteUI/i
 
 ## Browser Support
 
-![chrome_48x48](https://user-images.githubusercontent.com/2188411/168109445-fbd7b217-35f9-44d1-8002-1eb97e39cdc6.png) | ![firefox_48x48](https://user-images.githubusercontent.com/2188411/168109465-e46305ee-f69f-4fa5-8f4a-14876f7fd3ca.png) | ![edge_48x48](https://user-images.githubusercontent.com/2188411/168109472-a730f8c0-3822-4ae6-9f54-785a66695245.png) | ![opera_48x48](https://user-images.githubusercontent.com/2188411/168109520-b6865a6c-b69f-44a4-9948-748d8afd687c.png) | ![safari_48x48](https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png) | ![ie_48x48](https://user-images.githubusercontent.com/2188411/168135931-ce5259bb-5b26-4003-8b89-dbee3d4f247c.png)
---- | --- | --- | --- | --- |:---:|
-Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11* |
+| ![chrome][] | ![firefox][] | ![edge][] | ![opera][] | ![safari][] | ![ie][] |
+|:-----------:|:------------:|:---------:|:----------:|:-----------:|:-------:|
+|  Latest ✔   |   Latest ✔   | Latest ✔  |  Latest ✔  |  Latest ✔   |   11*   |
 
 \* *IE 11 is only supported in Ignite UI for Angular < 13.0.0*
 
@@ -293,4 +293,14 @@ For information on that license, please go to our website [https://www.infragist
 
 
 
+<!-- browser logos -->
+[chrome]: https://user-images.githubusercontent.com/2188411/168109445-fbd7b217-35f9-44d1-8002-1eb97e39cdc6.png "Google Chrome"
+[firefox]: https://user-images.githubusercontent.com/2188411/168109465-e46305ee-f69f-4fa5-8f4a-14876f7fd3ca.png "Mozilla Firefox"
+[edge]: https://user-images.githubusercontent.com/2188411/168109472-a730f8c0-3822-4ae6-9f54-785a66695245.png "Microsoft Edge"
+[opera]: https://user-images.githubusercontent.com/2188411/168109520-b6865a6c-b69f-44a4-9948-748d8afd687c.png "Opera"
+[safari]: https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png "Safari"
+[ie]: https://user-images.githubusercontent.com/2188411/168135931-ce5259bb-5b26-4003-8b89-dbee3d4f247c.png "Internet Explorer"
+
+
+
 

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

@@ -0,0 +1,14 @@
+{
+    "@scheme": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "roundShape",
+            "replaceWith": "shape",
+            "valueTransform": "roundShape_is_deprecated",
+            "owner": {
+                "selector": "igx-avatar",
+                "type": "component"
+            }
+        }
+    ]
+}

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

@@ -122,4 +122,20 @@ describe(`Update to ${version}`, () => {
             <igx-query-builder (densityChanged)="onDensityChanged($event)"></igx-query-builder>
             <igx-tree (densityChanged)="onDensityChanged($event)"></igx-tree>`);
     });
+
+    it('should replace avatar roundShape property with shape', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-avatar initials="MS" [roundShape]="true" size="large"></igx-avatar>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-avatar initials="MS" shape="circle" size="large"></igx-avatar>
+        `
+        );
+    });
 });

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

@@ -4,7 +4,7 @@ import {
     Tree
 } from '@angular-devkit/schematics';
 import { Options } from '../../schematics/interfaces/options';
-import { UpdateChanges } from '../common/UpdateChanges';
+import { BoundPropertyObject, InputPropertyType, UpdateChanges } from '../common/UpdateChanges';
 
 const version = '15.1.0';
 
@@ -13,5 +13,19 @@ export default (options: Options): Rule => async (host: Tree, context: Schematic
 
     const update = new UpdateChanges(__dirname, host, context);
     update.shouldInvokeLS = options['shouldInvokeLS'];
+    update.addValueTransform('roundShape_is_deprecated', (args: BoundPropertyObject): void => {
+        args.bindingType = InputPropertyType.STRING;
+
+        switch (args.value) {
+            case 'true':
+                args.value = 'circle';
+                break;
+            case 'false':
+                args.value = 'square';
+                break;
+            default:
+                args.value += ` ? 'circle' : 'square' `;
+        }
+    });
     update.applyChanges();
 };

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

@@ -5,7 +5,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 
 # Usage
 ```html
-<igx-avatar [roundShape]="true" icon="person" bgColor="#0375be" data-init="SS">
+<igx-avatar shape="rounded" icon="person" bgColor="#0375be" data-init="SS">
 </igx-avatar>
 ```
 
@@ -18,7 +18,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `icon` | string | Set the icon of the avatar. Currently all icons from the material icon set are supported. Not applicable for initials and image avatars. |
 | `bgColor` | string | Set the background color of initials or icon avatars. |
 | `color` | string | Set the color of initials or icon avatars. (optional) |
-| `roundShape` | boolean | Set the shape of the avatar to circle. The default shape is square. |
+| `shape` | boolean | Set the shape of the avatar to rounded. The default shape is square. |
 | `size` | string | Set the size of the avatar to either small, medium, or large. |
 
 *You can also set all igx-avatar properties programmatically.
@@ -27,7 +27,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 
 Using `igx-avatar` tag to include it into your app.
 ```html
-<igx-avatar [roundShape]="true" icon="person" bgColor="#0375be" data-init="SS">
+<igx-avatar icon="person" bgColor="#0375be" data-init="SS">
 </igx-avatar>
 ```
 

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

@@ -12,6 +12,7 @@ describe('Avatar', () => {
 
     const classes = {
         round: `${baseClass}--rounded`,
+        circle: `${baseClass}--circle`,
         small: `${baseClass}--small`,
         medium: `${baseClass}--medium`,
         large: `${baseClass}--large`,
@@ -57,13 +58,25 @@ describe('Avatar', () => {
         const hostEl = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
         expect(instance.roundShape).toBeTruthy();
-        expect(hostEl.classList).toContain(classes.round);
+        expect(instance.shape).toEqual('circle');
+        expect(hostEl.classList).toContain(classes.circle);
+        expect(hostEl.classList).not.toContain(classes.round);
 
-        instance.roundShape = false;
+        instance.shape = "square";
 
         fixture.detectChanges();
         expect(instance.roundShape).toBeFalsy();
+        expect(instance.shape).toEqual('square');
         expect(hostEl.classList).not.toContain(classes.round);
+        expect(hostEl.classList).not.toContain(classes.circle);
+
+        instance.shape = "rounded";
+
+        fixture.detectChanges();
+        expect(instance.roundShape).toBeFalsy();
+        expect(instance.shape).toEqual('rounded');
+        expect(hostEl.classList).toContain(classes.round);
+        expect(hostEl.classList).not.toContain(classes.circle);
     });
 
     it('Can change its size', () => {
@@ -101,6 +114,7 @@ describe('Avatar', () => {
         expect(instance.initials).toBeUndefined();
         expect(instance.src).toBeUndefined();
         expect(instance.icon).toBeUndefined();
+        expect(instance.shape).toEqual('square');
 
         expect(hostEl.textContent).toEqual('TEST');
     });
@@ -188,7 +202,7 @@ class InitAvatarComponent {
         [bgColor]="bgColor"
         [color]="color"
         size="small"
-        [roundShape]="roundShape">
+        [roundShape]="true">
     </igx-avatar>`
 })
 class AvatarWithAttribsComponent {
@@ -197,7 +211,6 @@ class AvatarWithAttribsComponent {
     public initials = 'ZK';
     public color = 'orange';
     public bgColor = 'royalblue';
-    public roundShape = 'true';
 }
 
 @Component({

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

@@ -46,7 +46,7 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
  *
  * @example
  * ```html
- * <igx-avatar initials="MS" [roundShape]="true" size="large">
+ * <igx-avatar initials="MS" shape="rounded" size="large">
  * </igx-avatar>
  * ```
  */
@@ -116,18 +116,43 @@ export class IgxAvatarComponent implements OnInit {
     public id = `igx-avatar-${NEXT_ID++}`;
 
     /**
-     * Sets a round shape to the avatar, if `[roundShape]` is set to `true`.
+     * @deprecated in version 15.1.0.
+     * Sets a circular shape to the avatar, if `[roundShape]` is set to `true`.
      * By default the shape of the avatar is a square.
-     *
+     * 
      * @example
      * ```html
      * <igx-avatar [roundShape]="true" ></igx-avatar>
      * ```
      */
+    /** @hidden @internal */
+    @Input()
+    @HostBinding('class.igx-avatar--circle')
+    public get roundShape() {
+        return this.shape === 'circle';
+    }
 
-    @HostBinding('class.igx-avatar--rounded')
+    public set roundShape(value: boolean) {
+        this.shape = value === true ? 'circle' : 'square';
+    }  
+
+    /**
+     * Sets square, rounded or circular shape to the avatar.
+     * By default the shape of the avatar is square.
+     *
+     * @example
+     * ```html
+     * <igx-avatar shape="rounded"></igx-avatar>
+     * ```
+     */
     @Input()
-    public roundShape = false;
+    public shape: 'square' | 'rounded' | 'circle' = 'square';
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--rounded')
+    public get isRounded(): boolean {
+        return this.shape === 'rounded';
+    }
 
     /**
      * Sets the color of the avatar's initials or icon.

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

@@ -22,7 +22,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 
 Using `igx-badge` with the `igx-avatar` component to show active status.
 ```html
-<igx-avatar [src]="src" [roundShape]="true">
+<igx-avatar [src]="src">
     <igx-badge type="info" value="8"></igx-badge>
 </igx-avatar>
 ```

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

@@ -555,8 +555,7 @@ export class IgxBannerSampleComponent {
                 <igx-card>
                     <igx-card-header class="compact">
                         <igx-avatar
-                            src="https://www.infragistics.com/angular-demos/assets/images/card/avatars/brad_stanley.jpg"
-                            [roundShape]="true">
+                            src="https://www.infragistics.com/angular-demos/assets/images/card/avatars/brad_stanley.jpg">
                         </igx-avatar>
                         <div class="igx-card-header__tgroup">
                             <h3 class="igx-card-header__title--small">Brad Stanley</h3>