feat(avatar): add rounded shape (#12733)

SisIvanova · simeonoff · web-flow · commit 87a61664512c · 2023-03-09T09:15:37.000+02:00
* feat(avatar): add rounded shape
---------

Co-authored-by: Simeon Simeonoff &lt;sim.simeonoff@gmail.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,7 +24,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxRadio`, `IgxRadioGroup`
     - Added component validation along with styles for invalid state
 - `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 either `square` or `rounded`. The default shape of the avatar is `square`. 
+    - **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
 
diff --git a/projects/igniteui-angular/migrations/update-15_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-15_1_0/index.spec.ts
@@ -134,7 +134,7 @@ describe(`Update to ${version}`, () => {
 
         expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
         `
-        <igx-avatar initials="MS" shape="rounded" size="large"></igx-avatar>
+        <igx-avatar initials="MS" shape="circle" size="large"></igx-avatar>
         `
         );
     });
diff --git a/projects/igniteui-angular/migrations/update-15_1_0/index.ts b/projects/igniteui-angular/migrations/update-15_1_0/index.ts
@@ -18,13 +18,13 @@ export default (options: Options): Rule => async (host: Tree, context: Schematic
 
         switch (args.value) {
             case 'true':
-                args.value = 'rounded';
+                args.value = 'circle';
                 break;
             case 'false':
                 args.value = 'square';
                 break;
             default:
-                args.value += ` ? 'rounded' : 'square' `;
+                args.value += ` ? 'circle' : 'square' `;
         }
     });
     update.applyChanges();
diff --git a/projects/igniteui-angular/src/lib/avatar/avatar.component.spec.ts b/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,15 +58,25 @@ describe('Avatar', () => {
         const hostEl = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
         expect(instance.roundShape).toBeTruthy();
-        expect(instance.shape).toEqual('rounded');
-        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.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', () => {
@@ -103,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');
     });
diff --git a/projects/igniteui-angular/src/lib/avatar/avatar.component.ts b/projects/igniteui-angular/src/lib/avatar/avatar.component.ts
@@ -117,26 +117,27 @@ export class IgxAvatarComponent implements OnInit {
 
     /**
      * @deprecated in version 15.1.0.
-     * Sets a round shape to the avatar, if `[roundShape]` is set to `true`.
+     * 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--rounded')
+    @HostBinding('class.igx-avatar--circle')
     public get roundShape() {
-        return this.shape === 'rounded';
+        return this.shape === 'circle';
     }
 
     public set roundShape(value: boolean) {
-        this.shape = value === true ? 'rounded' : 'square';
+        this.shape = value === true ? 'circle' : 'square';
     }  
 
     /**
-     * Sets a rounded shape to the avatar, if `shape` is set to `rounded`.
+     * Sets square, rounded or circular shape to the avatar.
      * By default the shape of the avatar is square.
      *
      * @example
@@ -145,7 +146,13 @@ export class IgxAvatarComponent implements OnInit {
      * ```
      */
     @Input()
-    public shape: 'square' | 'rounded' = 'square';
+    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.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss
@@ -20,6 +20,10 @@
             @extend %igx-avatar-image !optional;
         }
 
+        @include m(circle) {
+            @extend %igx-avatar--circle !optional;
+        }
+
         @include m(rounded) {
             @extend %igx-avatar--rounded !optional;
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
@@ -61,6 +61,7 @@
 @mixin avatar($theme) {
     @include css-vars($theme);
 
+    $variant: map.get($theme, variant);
     $size: map.get($theme, 'size');
     $small-size: rem(40px);
     $medium-size: rem(64px);
@@ -120,10 +121,18 @@
         background-position: center;
     }
 
-    %igx-avatar--rounded {
+    %igx-avatar--circle {
         --igx-avatar-border-radius: #{rem(44px)};
     }
 
+    %igx-avatar--rounded {
+        --igx-avatar-border-radius: #{rem(8px)};
+
+        @if $variant == 'bootstrap' {
+            --igx-avatar-border-radius: #{rem(4px)};
+        }
+    }
+
     %igx-avatar--initials {
         text-transform: uppercase;
     }
diff --git a/src/app/avatar/avatar.sample.html b/src/app/avatar/avatar.sample.html
@@ -1,10 +1,34 @@
 <div class="sample-content">
-    <!--Round Avatars-->
+    <!--Circular Avatars-->
     <section class="sample-column">
         <h4 class="sample-title">Circular Avatars</h4>
         <article class="avatars">
             <igx-avatar class="avatar-theme" icon="tag_faces" [roundShape]="true"></igx-avatar>
 
+            <igx-avatar igxDrag icon="tag_faces" size="medium" shape="circle"></igx-avatar>
+
+            <igx-avatar icon="tag_faces" size="large" shape="circle"></igx-avatar>
+
+            <igx-avatar initials="AZ" shape="circle"></igx-avatar>
+
+            <igx-avatar initials="AZ" size="medium" shape="circle"></igx-avatar>
+
+            <igx-avatar initials="AZ" size="large" shape="circle"></igx-avatar>
+
+            <igx-avatar color="red" bgColor="black" src="https://images.unsplash.com/photo-1514041790697-53f1f86214d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7ac79503fbe78855a346c8d814f95ba&auto=format&fit=crop&w=1650&q=80" shape="circle"></igx-avatar>
+
+            <igx-avatar src="assets/images/avatar/17.jpg" size="medium" shape="circle"></igx-avatar>
+
+            <igx-avatar src="https://images.unsplash.com/photo-1506804880640-f3205deb1b8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2f8dd0c16478825034602dce63d9aaca&auto=format&fit=crop&w=1350&q=80" size="large" shape="circle"></igx-avatar>
+        </article>
+    </section>
+
+    <!--Round Avatars-->
+    <section class="sample-column">
+        <h4 class="sample-title">Rounded Avatars</h4>
+        <article class="avatars">
+            <igx-avatar class="avatar-theme" icon="tag_faces" shape="rounded"></igx-avatar>
+
             <igx-avatar igxDrag icon="tag_faces" size="medium" shape="rounded"></igx-avatar>
 
             <igx-avatar icon="tag_faces" size="large" shape="rounded"></igx-avatar>

Original file line number	Diff line number	Diff line change
@@ -134,7 +134,7 @@ describe(`Update to ${version}`, () => {
`134`	`134`
`135`	`135`	`expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(`
`136`	`136`	`
`137`		`- <igx-avatar initials="MS" shape="rounded" size="large"></igx-avatar>`
	`137`	`+ <igx-avatar initials="MS" shape="circle" size="large"></igx-avatar>`
`138`	`138`	`
`139`	`139`	`);`
`140`	`140`	`});`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,10 @@`
`20`	`20`	`@extend %igx-avatar-image !optional;`
`21`	`21`	`}`
`22`	`22`
	`23`	`+ @include m(circle) {`
	`24`	`+ @extend %igx-avatar--circle !optional;`
	`25`	`+ }`
	`26`	`+`
`23`	`27`	`@include m(rounded) {`
`24`	`28`	`@extend %igx-avatar--rounded !optional;`
`25`	`29`	`}`