Skip to content

Commit 5234632

Browse files
simeonoffsimeonoff
committed
fix(avatar): size attribute should be more specific
Closes #13533
1 parent 721dc79 commit 5234632

File tree

5 files changed

+27
-61
lines changed

5 files changed

+27
-61
lines changed

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { IgxAvatarComponent, IgxAvatarType, IgxAvatarSize } from './avatar.compo
55

66
import { configureTestSuite } from '../test-utils/configure-suite';
77

8-
describe('Avatar', () => {
8+
fdescribe('Avatar', () => {
99
configureTestSuite();
1010
const baseClass = 'igx-avatar';
1111

@@ -80,25 +80,20 @@ describe('Avatar', () => {
8080
const fixture = TestBed.createComponent(AvatarWithAttribsComponent);
8181
fixture.detectChanges();
8282
const instance = fixture.componentInstance.avatar;
83-
const hostEl = fixture.debugElement.query(By.css(baseClass)).nativeElement;
8483

8584
expect(instance.size).toEqual(IgxAvatarSize.SMALL);
86-
expect(hostEl.classList).toContain(classes.small);
8785

8886
instance.size = IgxAvatarSize.MEDIUM;
8987
fixture.detectChanges();
9088
expect(instance.size).toEqual(IgxAvatarSize.MEDIUM);
91-
expect(hostEl.classList).toContain(classes.medium);
9289

9390
instance.size = IgxAvatarSize.LARGE;
9491
fixture.detectChanges();
9592
expect(instance.size).toEqual(IgxAvatarSize.LARGE);
96-
expect(hostEl.classList).toContain(classes.large);
9793

9894
instance.size = 'nonsense' as any;
9995
fixture.detectChanges();
10096
expect(instance.size).toEqual(IgxAvatarSize.SMALL);
101-
expect(hostEl.classList).toContain(classes.small);
10297
});
10398

10499
it('Initializes default avatar', () => {

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

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,8 @@ export class IgxAvatarComponent implements OnInit {
237237
* @hidden
238238
* @internal
239239
*/
240-
private _size: string | IgxAvatarSize = IgxAvatarSize.SMALL;
240+
private _size: string | IgxAvatarSize;
241+
241242
/**
242243
* Returns the size of the avatar.
243244
*
@@ -248,7 +249,7 @@ export class IgxAvatarComponent implements OnInit {
248249
*/
249250
@Input()
250251
public get size(): string | IgxAvatarSize {
251-
return this._size;
252+
return this._size || IgxAvatarSize.SMALL;
252253
}
253254

254255
/**
@@ -272,22 +273,6 @@ export class IgxAvatarComponent implements OnInit {
272273
}
273274
}
274275

275-
/** @hidden @internal */
276-
@HostBinding('class.igx-avatar--small')
277-
public get _isSmallSize(): boolean {
278-
return this.size === 'small';
279-
}
280-
/** @hidden @internal */
281-
@HostBinding('class.igx-avatar--medium')
282-
public get _isMediumSize(): boolean {
283-
return this.size === 'medium';
284-
}
285-
/** @hidden @internal */
286-
@HostBinding('class.igx-avatar--large')
287-
public get _isLargeSize(): boolean {
288-
return this.size === 'large';
289-
}
290-
291276
/**
292277
* Returns the type of the avatar.
293278
*
@@ -328,6 +313,13 @@ export class IgxAvatarComponent implements OnInit {
328313
return this.type === IgxAvatarType.INITIALS;
329314
}
330315

316+
@HostBinding('style.--component-size')
317+
protected get componentSize() {
318+
if(this._size) {
319+
return `var(--ig-size-${this._size})`;
320+
}
321+
}
322+
331323
/**
332324
* Returns the template of the avatar.
333325
*

‎projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
66
@mixin component {
77
@include b(igx-avatar) {
8-
@include sizable();
98
// Register the component in the component registry
109
$this: bem--selector-to-string(&);
1110

@@ -30,18 +29,6 @@
3029
@extend %igx-avatar--rounded !optional;
3130
}
3231

33-
@include m(small) {
34-
@extend %igx-avatar--small !optional;
35-
}
36-
37-
@include m(medium) {
38-
@extend %igx-avatar--medium !optional;
39-
}
40-
41-
@include m(large) {
42-
@extend %igx-avatar--large !optional;
43-
}
44-
4532
@include m(initials) {
4633
@extend %igx-avatar--initials !optional;
4734
}

‎projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,9 @@
8181
}
8282

8383
%igx-avatar-display {
84+
@include sizable();
85+
--component-size: var(--ig-size, var(--ig-size-small));
86+
8487
position: relative;
8588
display: inline-flex;
8689
justify-content: center;
@@ -94,6 +97,10 @@
9497
width: var-get($theme, 'size');
9598
height: var-get($theme, 'size');
9699

100+
igx-icon {
101+
--component-size: 3;
102+
}
103+
97104
&::after {
98105
box-shadow: none;
99106
@if $bootstrap-theme {
@@ -129,19 +136,4 @@
129136
font-size: calc(#{var-get($theme, 'size')} / 2);
130137
line-height: calc(#{var-get($theme, 'size')} / 2);
131138
}
132-
133-
%igx-avatar--small,
134-
%igx-avatar-initials--small {
135-
--component-size: var(--ig-size, var(--ig-size-small));
136-
}
137-
138-
%igx-avatar--medium,
139-
%igx-avatar-initials--medium {
140-
--component-size: var(--ig-size, var(--ig-size-medium));
141-
}
142-
143-
%igx-avatar--large,
144-
%igx-avatar-initials--large {
145-
--component-size: var(--ig-size, var(--ig-size-large));
146-
}
147139
}

‎src/app/avatar/avatar.sample.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@
33
<section class="sample-column">
44
<h4 class="sample-title">Circular Avatars</h4>
55
<article class="avatars">
6-
<igx-avatar class="avatar-theme" icon="tag_faces" [roundShape]="true"></igx-avatar>
6+
<igx-avatar class="avatar-theme" icon="tag_faces" size="small" [roundShape]="true"></igx-avatar>
77

88
<igx-avatar igxDrag icon="tag_faces" size="medium" shape="circle"></igx-avatar>
99

1010
<igx-avatar icon="tag_faces" size="large" shape="circle"></igx-avatar>
1111

12-
<igx-avatar initials="AZ" shape="circle"></igx-avatar>
12+
<igx-avatar initials="AZ" size="small" shape="circle"></igx-avatar>
1313

1414
<igx-avatar initials="AZ" size="medium" shape="circle"></igx-avatar>
1515

1616
<igx-avatar initials="AZ" size="large" shape="circle"></igx-avatar>
1717

18-
<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>
18+
<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" size="small" shape="circle"></igx-avatar>
1919

2020
<igx-avatar src="assets/images/avatar/17.jpg" size="medium" shape="circle"></igx-avatar>
2121

@@ -27,19 +27,19 @@ <h4 class="sample-title">Circular Avatars</h4>
2727
<section class="sample-column">
2828
<h4 class="sample-title">Rounded Avatars</h4>
2929
<article class="avatars">
30-
<igx-avatar class="avatar-theme" icon="tag_faces" shape="rounded"></igx-avatar>
30+
<igx-avatar class="avatar-theme" icon="tag_faces" size="small" shape="rounded"></igx-avatar>
3131

3232
<igx-avatar igxDrag icon="tag_faces" size="medium" shape="rounded"></igx-avatar>
3333

3434
<igx-avatar icon="tag_faces" size="large" shape="rounded"></igx-avatar>
3535

36-
<igx-avatar initials="AZ" shape="rounded"></igx-avatar>
36+
<igx-avatar initials="AZ" size="small" shape="rounded"></igx-avatar>
3737

3838
<igx-avatar initials="AZ" size="medium" shape="rounded"></igx-avatar>
3939

4040
<igx-avatar initials="AZ" size="large" shape="rounded"></igx-avatar>
4141

42-
<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="rounded"></igx-avatar>
42+
<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" size="small" shape="rounded"></igx-avatar>
4343

4444
<igx-avatar src="assets/images/avatar/17.jpg" size="medium" shape="rounded"></igx-avatar>
4545

@@ -51,19 +51,19 @@ <h4 class="sample-title">Rounded Avatars</h4>
5151
<section class="sample-column">
5252
<h4 class="sample-title">Square Avatars</h4>
5353
<article class="avatars">
54-
<igx-avatar icon="tag_faces" [roundShape]="false"></igx-avatar>
54+
<igx-avatar icon="tag_faces" size="small" [roundShape]="false"></igx-avatar>
5555

5656
<igx-avatar icon="tag_faces" size="medium" shape="square"></igx-avatar>
5757

5858
<igx-avatar icon="tag_faces" size="large"></igx-avatar>
5959

60-
<igx-avatar initials="AZ"></igx-avatar>
60+
<igx-avatar initials="AZ" size="small"></igx-avatar>
6161

6262
<igx-avatar initials="AZ" size="medium"></igx-avatar>
6363

6464
<igx-avatar initials="AZ" size="large"></igx-avatar>
6565

66-
<igx-avatar src="assets/images/avatar/18.jpg"></igx-avatar>
66+
<igx-avatar src="assets/images/avatar/18.jpg" size="small"></igx-avatar>
6767

6868
<igx-avatar src="assets/images/avatar/16.jpg" size="medium"></igx-avatar>
6969

0 commit comments

Comments
 (0)