Skip to content

Commit bbd5b80

Browse files
SisIvanovasimeonoff
SisIvanova
and
simeonoff
authored
feat(avatar): implement shape attribute (#12726)
* feat(avatar): implement shape attribute Closes #12712 --------- Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent fa6875c commit bbd5b80

File tree

24 files changed

+125
-65
lines changed

24 files changed

+125
-65
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ All notable changes for each version of this project will be documented in this
2323
- **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`.
2424
- `IgxRadio`, `IgxRadioGroup`
2525
- Added component validation along with styles for invalid state
26-
26+
- `IgxAvatar`
27+
- **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`.
2728

2829
## 15.0.1
2930

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"@scheme": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "roundShape",
6+
"replaceWith": "shape",
7+
"valueTransform": "roundShape_is_deprecated",
8+
"owner": {
9+
"selector": "igx-avatar",
10+
"type": "component"
11+
}
12+
}
13+
]
14+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,4 +122,20 @@ describe(`Update to ${version}`, () => {
122122
<igx-query-builder (densityChanged)="onDensityChanged($event)"></igx-query-builder>
123123
<igx-tree (densityChanged)="onDensityChanged($event)"></igx-tree>`);
124124
});
125+
126+
it('should replace avatar roundShape property with shape', async () => {
127+
appTree.create(`/testSrc/appPrefix/component/test.component.html`,
128+
`
129+
<igx-avatar initials="MS" [roundShape]="true" size="large"></igx-avatar>
130+
`
131+
);
132+
133+
const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
134+
135+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
136+
`
137+
<igx-avatar initials="MS" shape="rounded" size="large"></igx-avatar>
138+
`
139+
);
140+
});
125141
});

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
Tree
55
} from '@angular-devkit/schematics';
66
import { Options } from '../../schematics/interfaces/options';
7-
import { UpdateChanges } from '../common/UpdateChanges';
7+
import { BoundPropertyObject, InputPropertyType, UpdateChanges } from '../common/UpdateChanges';
88

99
const version = '15.1.0';
1010

@@ -13,5 +13,19 @@ export default (options: Options): Rule => async (host: Tree, context: Schematic
1313

1414
const update = new UpdateChanges(__dirname, host, context);
1515
update.shouldInvokeLS = options['shouldInvokeLS'];
16+
update.addValueTransform('roundShape_is_deprecated', (args: BoundPropertyObject): void => {
17+
args.bindingType = InputPropertyType.STRING;
18+
19+
switch (args.value) {
20+
case 'true':
21+
args.value = 'rounded';
22+
break;
23+
case 'false':
24+
args.value = 'square';
25+
break;
26+
default:
27+
args.value += ` ? 'rounded' : 'square' `;
28+
}
29+
});
1630
update.applyChanges();
1731
};

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
55

66
# Usage
77
```html
8-
<igx-avatar [roundShape]="true" icon="person" bgColor="#0375be" data-init="SS">
8+
<igx-avatar shape="rounded" icon="person" bgColor="#0375be" data-init="SS">
99
</igx-avatar>
1010
```
1111

@@ -18,7 +18,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
1818
| `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. |
1919
| `bgColor` | string | Set the background color of initials or icon avatars. |
2020
| `color` | string | Set the color of initials or icon avatars. (optional) |
21-
| `roundShape` | boolean | Set the shape of the avatar to circle. The default shape is square. |
21+
| `shape` | boolean | Set the shape of the avatar to rounded. The default shape is square. |
2222
| `size` | string | Set the size of the avatar to either small, medium, or large. |
2323

2424
*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
2727

2828
Using `igx-avatar` tag to include it into your app.
2929
```html
30-
<igx-avatar [roundShape]="true" icon="person" bgColor="#0375be" data-init="SS">
30+
<igx-avatar icon="person" bgColor="#0375be" data-init="SS">
3131
</igx-avatar>
3232
```
3333

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,14 @@ describe('Avatar', () => {
5757
const hostEl = fixture.debugElement.query(By.css(baseClass)).nativeElement;
5858

5959
expect(instance.roundShape).toBeTruthy();
60+
expect(instance.shape).toEqual('rounded');
6061
expect(hostEl.classList).toContain(classes.round);
6162

62-
instance.roundShape = false;
63+
instance.shape = "square";
6364

6465
fixture.detectChanges();
6566
expect(instance.roundShape).toBeFalsy();
67+
expect(instance.shape).toEqual('square');
6668
expect(hostEl.classList).not.toContain(classes.round);
6769
});
6870

@@ -188,7 +190,7 @@ class InitAvatarComponent {
188190
[bgColor]="bgColor"
189191
[color]="color"
190192
size="small"
191-
[roundShape]="roundShape">
193+
[roundShape]="true">
192194
</igx-avatar>`
193195
})
194196
class AvatarWithAttribsComponent {
@@ -197,7 +199,6 @@ class AvatarWithAttribsComponent {
197199
public initials = 'ZK';
198200
public color = 'orange';
199201
public bgColor = 'royalblue';
200-
public roundShape = 'true';
201202
}
202203

203204
@Component({

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
4646
*
4747
* @example
4848
* ```html
49-
* <igx-avatar initials="MS" [roundShape]="true" size="large">
49+
* <igx-avatar initials="MS" shape="rounded" size="large">
5050
* </igx-avatar>
5151
* ```
5252
*/
@@ -116,18 +116,36 @@ export class IgxAvatarComponent implements OnInit {
116116
public id = `igx-avatar-${NEXT_ID++}`;
117117

118118
/**
119+
* @deprecated in version 15.1.0.
119120
* Sets a round shape to the avatar, if `[roundShape]` is set to `true`.
120121
* By default the shape of the avatar is a square.
121-
*
122+
*
122123
* @example
123124
* ```html
124125
* <igx-avatar [roundShape]="true" ></igx-avatar>
125126
* ```
126127
*/
127-
128+
@Input()
128129
@HostBinding('class.igx-avatar--rounded')
130+
public get roundShape() {
131+
return this.shape === 'rounded';
132+
}
133+
134+
public set roundShape(value: boolean) {
135+
this.shape = value === true ? 'rounded' : 'square';
136+
}
137+
138+
/**
139+
* Sets a rounded shape to the avatar, if `shape` is set to `rounded`.
140+
* By default the shape of the avatar is square.
141+
*
142+
* @example
143+
* ```html
144+
* <igx-avatar shape="rounded"></igx-avatar>
145+
* ```
146+
*/
129147
@Input()
130-
public roundShape = false;
148+
public shape: 'square' | 'rounded' = 'square';
131149

132150
/**
133151
* Sets the color of the avatar's initials or icon.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
2222

2323
Using `igx-badge` with the `igx-avatar` component to show active status.
2424
```html
25-
<igx-avatar [src]="src" [roundShape]="true">
25+
<igx-avatar [src]="src">
2626
<igx-badge type="info" value="8"></igx-badge>
2727
</igx-avatar>
2828
```

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -555,8 +555,7 @@ export class IgxBannerSampleComponent {
555555
<igx-card>
556556
<igx-card-header class="compact">
557557
<igx-avatar
558-
src="https://www.infragistics.com/angular-demos/assets/images/card/avatars/brad_stanley.jpg"
559-
[roundShape]="true">
558+
src="https://www.infragistics.com/angular-demos/assets/images/card/avatars/brad_stanley.jpg">
560559
</igx-avatar>
561560
<div class="igx-card-header__tgroup">
562561
<h3 class="igx-card-header__title--small">Brad Stanley</h3>

‎projects/igniteui-angular/src/lib/card/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Supporting directives and components:
1414
```html
1515
<igx-card>
1616
<igx-card-header>
17-
<igx-avatar src="https://upload.wikimedia.org/wikipedia/commons/4/49/Elon_Musk_2015.jpg" [roundShape]="true"></igx-avatar>
17+
<igx-avatar src="https://upload.wikimedia.org/wikipedia/commons/4/49/Elon_Musk_2015.jpg"></igx-avatar>
1818
<h4 igxCardHeaderTitle>Elon Musk</h4>
1919
<h5 igxCardHeaderSubtitle>Entrepreneur</h5>
2020
</igx-card-header>

0 commit comments

Comments
 (0)