Skip to content

Commit fd60e90

Browse files
fifoosidfifoosid
authored
fix(ui5-avatar-group): deprecate avatarSize property (#3229)
BREAKING_CHANGE: avatarSize property of ui5-avatar-group has been deprecated. You can set the size property to every avatar that you pass in the default slot
1 parent 84b2844 commit fd60e90

File tree

7 files changed

+162
-202
lines changed

7 files changed

+162
-202
lines changed

‎packages/main/src/AvatarGroup.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
aria-label="{{_overflowButtonAriaLabelText}}"
2222
?hidden="{{_overflowBtnHidden}}"
2323
?non-interactive={{_isGroup}}
24-
class="ui5-avatar-group-overflow-btn"
24+
class="{{classes.overflowButton}}"
2525
>
2626
{{_overflowButtonText}}
2727
</ui5-button>

‎packages/main/src/AvatarGroup.js

+17-26
Original file line numberDiff line numberDiff line change
@@ -79,26 +79,6 @@ const metadata = {
7979
defaultValue: AvatarGroupType.Group,
8080
},
8181

82-
/**
83-
* Defines predefined size of the <code>ui5-avatar</code>.
84-
* <br><br>
85-
* Available options are:
86-
* <ul>
87-
* <li><code>XS</code></li>
88-
* <li><code>S</code></li>
89-
* <li><code>M</code></li>
90-
* <li><code>L</code></li>
91-
* <li><code>XL</code></li>
92-
* </ul>
93-
* @type {AvatarSize}
94-
* @defaultValue "S"
95-
* @public
96-
*/
97-
avatarSize: {
98-
type: String,
99-
defaultValue: AvatarSize.S,
100-
},
101-
10282
/**
10383
* Defines the aria-haspopup value of the component on:
10484
* <br><br>
@@ -122,7 +102,6 @@ const metadata = {
122102
type: String,
123103
noAttribute: true,
124104
},
125-
126105
},
127106
slots: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */ {
128107
/**
@@ -411,6 +390,23 @@ class AvatarGroup extends UI5Element {
411390
return button.offsetWidth;
412391
}
413392

393+
get firstAvatarSize() {
394+
return this.items[0].size;
395+
}
396+
397+
get classes() {
398+
return {
399+
overflowButton: {
400+
"ui5-avatar-group-overflow-btn": true,
401+
"ui5-avatar-group-overflow-btn-xs": this.firstAvatarSize === "XS",
402+
"ui5-avatar-group-overflow-btn-s": this.firstAvatarSize === "S",
403+
"ui5-avatar-group-overflow-btn-m": this.firstAvatarSize === "M",
404+
"ui5-avatar-group-overflow-btn-l": this.firstAvatarSize === "L",
405+
"ui5-avatar-group-overflow-btn-xl": this.firstAvatarSize === "XL",
406+
},
407+
};
408+
}
409+
414410
onAfterRendering() {
415411
this._overflowItems();
416412
}
@@ -503,11 +499,6 @@ class AvatarGroup extends UI5Element {
503499
avatar.setAttribute("_color-scheme", AvatarColorScheme[`Accent${colorIndex}`]);
504500
}
505501

506-
if (!avatar.getAttribute("size")) {
507-
// AvatarGroup respects sizes set to ui5-avatar
508-
avatar.setAttribute("_size", this.avatarSize);
509-
}
510-
511502
// last avatar should not be offset as it breaks the container width and focus styles are no set correctly
512503
if (index !== this._itemsCount - 1 || this._customOverflowButton) {
513504
// based on RTL margin left or right is set to avatars

‎packages/main/src/themes/AvatarGroup.css

+5-10
Original file line numberDiff line numberDiff line change
@@ -45,41 +45,36 @@
4545
outline-offset: var(--_ui5_avatar_group_overflow_button_focus_offset);
4646
}
4747

48-
:host([avatar-size="XS"]) ::slotted([ui5-button]),
49-
:host([avatar-size="XS"]) .ui5-avatar-group-overflow-btn {
48+
.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {
5049
height: 2rem;
5150
width: 2rem;
5251
min-width: 2rem;
5352
font-size: .75rem;
5453
}
5554

5655
::slotted([ui5-button]),
57-
:host([avatar-size="S"]) ::slotted([ui5-button]),
58-
:host([avatar-size="S"]) .ui5-avatar-group-overflow-btn {
56+
.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-s {
5957
height: 3rem;
6058
width: 3rem;
6159
min-width: 3rem;
6260
font-size: 1.125rem;
6361
}
6462

65-
:host([avatar-size="M"]) ::slotted([ui5-button]),
66-
:host([avatar-size="M"]) .ui5-avatar-group-overflow-btn {
63+
.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-m {
6764
height: 4rem;
6865
width: 4rem;
6966
min-width: 4rem;
7067
font-size: 1.625rem;
7168
}
7269

73-
:host([avatar-size="L"]) ::slotted([ui5-button]),
74-
:host([avatar-size="L"]) .ui5-avatar-group-overflow-btn {
70+
.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-l {
7571
height: 5rem;
7672
width: 5rem;
7773
min-width: 5rem;
7874
font-size: 2rem;
7975
}
8076

81-
:host([avatar-size="XL"]) ::slotted([ui5-button]),
82-
:host([avatar-size="XL"]) .ui5-avatar-group-overflow-btn {
77+
.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xl {
8378
height: 7rem;
8479
width: 7rem;
8580
min-width: 7rem;

‎packages/main/test/pages/AvatarGroup.html

+68-68
Original file line numberDiff line numberDiff line change
@@ -107,60 +107,60 @@ <h5>Business card</h5>
107107
<p>this is footer</p>
108108
</div>
109109
</ui5-popover>
110-
<ui5-avatar-group aria-haspopup="menu" type="Individual" avatar-size="XL" id="avatar-group-individual">
111-
<ui5-avatar interactive aria-haspopup="menu" icon="home" initials="XL" id="avatar-1"></ui5-avatar>
112-
<ui5-avatar interactive aria-haspopup="dialog" initials="XL"></ui5-avatar>
113-
<ui5-avatar interactive aria-haspopup="listbox" initials="XL"></ui5-avatar>
114-
<ui5-avatar interactive aria-haspopup="tree" initials="XL"></ui5-avatar>
115-
<ui5-avatar interactive aria-haspopup="grid" initials="XL"></ui5-avatar>
116-
<ui5-avatar interactive aria-haspopup="none" initials="XL"></ui5-avatar>
117-
<ui5-avatar interactive icon="home"></ui5-avatar>
118-
<ui5-avatar interactive initials="XL"></ui5-avatar>
119-
<ui5-avatar interactive initials="XL"></ui5-avatar>
120-
<ui5-avatar interactive icon="home"></ui5-avatar>
121-
<ui5-avatar interactive icon="home"></ui5-avatar>
122-
<ui5-avatar interactive initials="XL"></ui5-avatar>
110+
<ui5-avatar-group aria-haspopup="menu" type="Individual" id="avatar-group-individual">
111+
<ui5-avatar interactive size="XL" aria-haspopup="menu" icon="home" initials="XL" id="avatar-1"></ui5-avatar>
112+
<ui5-avatar interactive size="XL" aria-haspopup="dialog" initials="XL"></ui5-avatar>
113+
<ui5-avatar interactive size="XL" aria-haspopup="listbox" initials="XL"></ui5-avatar>
114+
<ui5-avatar interactive size="XL" aria-haspopup="tree" initials="XL"></ui5-avatar>
115+
<ui5-avatar interactive size="XL" aria-haspopup="grid" initials="XL"></ui5-avatar>
116+
<ui5-avatar interactive size="XL" aria-haspopup="none" initials="XL"></ui5-avatar>
117+
<ui5-avatar interactive size="XL" icon="home"></ui5-avatar>
118+
<ui5-avatar interactive size="XL" initials="XL"></ui5-avatar>
119+
<ui5-avatar interactive size="XL" initials="XL"></ui5-avatar>
120+
<ui5-avatar interactive size="XL" icon="home"></ui5-avatar>
121+
<ui5-avatar interactive size="XL" icon="home"></ui5-avatar>
122+
<ui5-avatar interactive size="XL" initials="XL"></ui5-avatar>
123123
</ui5-avatar-group>
124124
<br>
125-
<ui5-avatar-group aria-haspopup="menu" type="Group" avatar-size="M" id="avatar-group-group">
126-
<ui5-avatar initials="M" image="./img/woman_avatar_5.png"></ui5-avatar>
127-
<ui5-avatar initials="M"></ui5-avatar>
128-
<ui5-avatar icon="home"></ui5-avatar>
129-
<ui5-avatar initials="M" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
130-
<ui5-avatar icon="home"></ui5-avatar>
131-
<ui5-avatar initials="M"></ui5-avatar>
132-
<ui5-avatar initials="M"></ui5-avatar>
133-
<ui5-avatar icon="home" image="./img/John_Miller.png"></ui5-avatar>
134-
<ui5-avatar initials="M"></ui5-avatar>
135-
<ui5-avatar icon="home"></ui5-avatar>
136-
<ui5-avatar initials="M"></ui5-avatar>
137-
<ui5-avatar initials="M"></ui5-avatar>
138-
<ui5-avatar initials="M" image="./img/woman_avatar_5.png"></ui5-avatar>
139-
<ui5-avatar icon="home"></ui5-avatar>
140-
<ui5-avatar initials="M"></ui5-avatar>
141-
<ui5-avatar initials="M" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
142-
<ui5-avatar initials="M"></ui5-avatar>
143-
<ui5-avatar initials="M"></ui5-avatar>
125+
<ui5-avatar-group aria-haspopup="menu" type="Group" id="avatar-group-group">
126+
<ui5-avatar size="M" initials="M" image="./img/woman_avatar_5.png"></ui5-avatar>
127+
<ui5-avatar size="M" initials="M"></ui5-avatar>
128+
<ui5-avatar size="M" icon="home"></ui5-avatar>
129+
<ui5-avatar size="M" initials="M" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
130+
<ui5-avatar size="M" icon="home"></ui5-avatar>
131+
<ui5-avatar size="M" initials="M"></ui5-avatar>
132+
<ui5-avatar size="M" initials="M"></ui5-avatar>
133+
<ui5-avatar size="M" icon="home" image="./img/John_Miller.png"></ui5-avatar>
134+
<ui5-avatar size="M" initials="M"></ui5-avatar>
135+
<ui5-avatar size="M" icon="home"></ui5-avatar>
136+
<ui5-avatar size="M" initials="M"></ui5-avatar>
137+
<ui5-avatar size="M" initials="M"></ui5-avatar>
138+
<ui5-avatar size="M" initials="M" image="./img/woman_avatar_5.png"></ui5-avatar>
139+
<ui5-avatar size="M" icon="home"></ui5-avatar>
140+
<ui5-avatar size="M" initials="M"></ui5-avatar>
141+
<ui5-avatar size="M" initials="M" image="./img/Lamp_avatar_01.jpg"></ui5-avatar>
142+
<ui5-avatar size="M" initials="M"></ui5-avatar>
143+
<ui5-avatar size="M" initials="M"></ui5-avatar>
144144
</ui5-avatar-group>
145145
<br>
146146

147147
<h3>Test Fired Events</h3>
148148
<br>
149149
<div style="width: 400px;">
150-
<ui5-avatar-group type="Individual" avatar-size="XL" id="avatar-group-individual-events">
151-
<ui5-avatar interactive icon="home" initials="XL" id="avatar-1-test-events"></ui5-avatar>
152-
<ui5-avatar interactive initials="XL"></ui5-avatar>
153-
<ui5-avatar interactive icon="home"></ui5-avatar>
154-
<ui5-avatar interactive initials="XL"></ui5-avatar>
150+
<ui5-avatar-group type="Individual" id="avatar-group-individual-events">
151+
<ui5-avatar size="XL" interactive icon="home" initials="XL" id="avatar-1-test-events"></ui5-avatar>
152+
<ui5-avatar size="XL" interactive initials="XL"></ui5-avatar>
153+
<ui5-avatar size="XL" interactive icon="home"></ui5-avatar>
154+
<ui5-avatar size="XL" interactive initials="XL"></ui5-avatar>
155155
</ui5-avatar-group>
156156
</div>
157157
<br>
158158
<div style="width: 400px;">
159-
<ui5-avatar-group type="Group" avatar-size="XL" id="avatar-group-group-events">
160-
<ui5-avatar interactive icon="home" initials="XL"></ui5-avatar>
161-
<ui5-avatar interactive initials="XL"></ui5-avatar>
162-
<ui5-avatar interactive icon="home"></ui5-avatar>
163-
<ui5-avatar interactive initials="XL"></ui5-avatar>
159+
<ui5-avatar-group type="Group" id="avatar-group-group-events">
160+
<ui5-avatar size="XL" interactive icon="home" initials="XL"></ui5-avatar>
161+
<ui5-avatar size="XL" interactive initials="XL"></ui5-avatar>
162+
<ui5-avatar size="XL" interactive icon="home"></ui5-avatar>
163+
<ui5-avatar size="XL" interactive initials="XL"></ui5-avatar>
164164
</ui5-avatar-group>
165165
</div>
166166
<br>
@@ -190,38 +190,38 @@ <h3>Test Fired Events</h3>
190190
<br>
191191

192192
<h3>"XS" size</h3>
193-
<ui5-avatar-group type="Individual" avatar-size="XS">
194-
<ui5-avatar interactive initials="XS"></ui5-avatar>
195-
<ui5-avatar interactive initials="XS"></ui5-avatar>
196-
<ui5-avatar interactive initials="XS"></ui5-avatar>
197-
<ui5-avatar interactive initials="XS"></ui5-avatar>
198-
<ui5-avatar interactive initials="XS"></ui5-avatar>
199-
<ui5-avatar interactive initials="XS"></ui5-avatar>
200-
<ui5-avatar interactive initials="XS"></ui5-avatar>
201-
<ui5-avatar interactive initials="XS"></ui5-avatar>
202-
<ui5-avatar interactive initials="XS"></ui5-avatar>
203-
<ui5-avatar interactive initials="XS"></ui5-avatar>
204-
<ui5-avatar interactive initials="XS"></ui5-avatar>
205-
<ui5-avatar interactive initials="XS"></ui5-avatar>
193+
<ui5-avatar-group type="Individual">
194+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
195+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
196+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
197+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
198+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
199+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
200+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
201+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
202+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
203+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
204+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
205+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
206206
</ui5-avatar-group>
207207

208208
<br>
209209
<br>
210210

211211
<h3>"S" size</h3>
212-
<ui5-avatar-group type="Individual" avatar-size="S">
213-
<ui5-avatar interactive initials="S"></ui5-avatar>
214-
<ui5-avatar interactive initials="S"></ui5-avatar>
215-
<ui5-avatar interactive initials="S"></ui5-avatar>
216-
<ui5-avatar interactive initials="S"></ui5-avatar>
217-
<ui5-avatar interactive initials="S"></ui5-avatar>
218-
<ui5-avatar interactive initials="S"></ui5-avatar>
219-
<ui5-avatar interactive initials="S"></ui5-avatar>
220-
<ui5-avatar interactive initials="S"></ui5-avatar>
221-
<ui5-avatar interactive initials="S"></ui5-avatar>
222-
<ui5-avatar interactive initials="S"></ui5-avatar>
223-
<ui5-avatar interactive initials="S"></ui5-avatar>
224-
<ui5-avatar interactive initials="S"></ui5-avatar>
212+
<ui5-avatar-group type="Individual">
213+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
214+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
215+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
216+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
217+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
218+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
219+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
220+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
221+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
222+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
223+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
224+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
225225
</ui5-avatar-group>
226226

227227
<br>

0 commit comments

Comments
 (0)