Skip to content

Commit 629a58e

Browse files
plamenivanov91plamenivanov91
authored
fix(ui5-avatar-group): aligned with the latest design spec (#13113)
In Group mode, the focus border-radius is now dynamically set to half of the avatar height for all sizes (XS, S, M, L, XL), ensuring consistent visual appearance across different avatar sizes. Added hover and active states for all avatars and the overflow button in Group mode. When hovering or clicking the group, all avatars display the appropriate visual feedback simultaneously, maintaining the unified group behavior. Key changes: Focus border-radius in Group mode: height/2 (Horizon theme only) Group hover: all avatars show box-shadow and accent hover backgrounds Group active: all avatars show active background, border, and color Overflow button: shows standard button hover/active states in Group mode Template: added size-specific CSS classes for dynamic styling Test page: added examples for all Group type sizes (XS, S, M, L)
1 parent daf9a11 commit 629a58e

6 files changed

Lines changed: 100 additions & 5 deletions

File tree

‎packages/main/cypress/specs/AvatarGroup.cy.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,8 @@ describe("AvatarGroup Rendering and Events", () => {
292292
})
293293
.its("targetRef")
294294
.then((targetRef) => {
295-
expect(targetRef.tagName + "." + targetRef.className).to.equal("DIV.ui5-avatar-group-items");
295+
expect(targetRef.tagName).to.equal("DIV");
296+
expect(targetRef.className).to.contain("ui5-avatar-group-items");
296297
});
297298
});
298299

‎packages/main/src/AvatarGroup.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -493,6 +493,8 @@ class AvatarGroup extends UI5Element {
493493

494494
this._slottedItems.forEach((avatar, index) => {
495495
const colorIndex = this._getNextBackgroundColor();
496+
// In Group mode: avatars are not individually interactive, but visual states are applied at group level
497+
// In Individual mode: each avatar is interactive
496498
avatar.interactive = !this._isGroup;
497499

498500
if (avatar.getAttribute("_color-scheme") === AvatarColorScheme.Auto) {

‎packages/main/src/AvatarGroupTemplate.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ export default function AvatarGroupTemplate(this: AvatarGroup) {
66
return (
77
<div class="ui5-avatar-group-root">
88
<div
9-
class="ui5-avatar-group-items"
9+
class={{
10+
"ui5-avatar-group-items": true,
11+
"ui5-avatar-group-items-xs": this.firstAvatarSize === AvatarSize.XS,
12+
"ui5-avatar-group-items-s": this.firstAvatarSize === AvatarSize.S,
13+
"ui5-avatar-group-items-m": this.firstAvatarSize === AvatarSize.M,
14+
"ui5-avatar-group-items-l": this.firstAvatarSize === AvatarSize.L,
15+
"ui5-avatar-group-items-xl": this.firstAvatarSize === AvatarSize.XL,
16+
}}
1017
role={this._role}
1118
tabindex={this._groupTabIndex}
1219
aria-label={this._ariaLabelText}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,30 @@
3131
cursor: pointer;
3232
}
3333

34+
/* In Group mode: apply hover/active states to ALL avatars when container is hovered/active */
35+
:host([type="Group"]) .ui5-avatar-group-items:not(:active):hover ::slotted([ui5-avatar]:not([disabled])) {
36+
box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
37+
}
38+
39+
:host([type="Group"]) .ui5-avatar-group-items:active ::slotted([ui5-avatar]) {
40+
background-color: var(--sapButton_Active_Background);
41+
border-color: var(--sapButton_Active_BorderColor);
42+
color: var(--sapButton_Active_TextColor);
43+
}
44+
45+
/* Overflow button hover/active states in Group mode */
46+
:host([type="Group"]) .ui5-avatar-group-items:not(:active):hover .ui5-avatar-group-overflow-btn {
47+
box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
48+
background-color: var(--sapButton_Lite_Hover_Background);
49+
}
50+
51+
:host([type="Group"]) .ui5-avatar-group-items:active .ui5-avatar-group-overflow-btn {
52+
background-color: var(--sapButton_Active_Background);
53+
border-color: var(--sapButton_Active_BorderColor);
54+
color: var(--sapButton_Active_TextColor);
55+
}
56+
57+
/* Prevent individual avatars and buttons from intercepting clicks/focus in Group mode */
3458
:host([type="Group"]) ::slotted([ui5-button]),
3559
:host([type="Group"]) ::slotted([ui5-avatar]),
3660
:host([type="Group"]) .ui5-avatar-group-overflow-btn {

‎packages/main/src/themes/sap_horizon/AvatarGroup-parameters.css‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
11
@import "../base/AvatarGroup-parameters.css";
22

3-
:host {
4-
--_ui5_avatar_group_focus_border_radius: 0.375rem;
5-
}
3+
/* Context-aware border-radius - dynamically set based on avatar size (height / 2) */
4+
.ui5-avatar-group-items-xs {
5+
--_ui5_avatar_group_focus_border_radius: 1rem; /* 2rem / 2 */
6+
}
7+
8+
.ui5-avatar-group-items-s {
9+
--_ui5_avatar_group_focus_border_radius: 1.5rem; /* 3rem / 2 */
10+
}
11+
12+
.ui5-avatar-group-items-m {
13+
--_ui5_avatar_group_focus_border_radius: 2rem; /* 4rem / 2 */
14+
}
15+
16+
.ui5-avatar-group-items-l {
17+
--_ui5_avatar_group_focus_border_radius: 2.5rem; /* 5rem / 2 */
18+
}
19+
20+
.ui5-avatar-group-items-xl {
21+
--_ui5_avatar_group_focus_border_radius: 3.5rem; /* 7rem / 2 */
22+
}

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,50 @@ <h3>Test Fired Events</h3>
149149
</div>
150150
<br>
151151

152+
<h3>Group Type - XS size</h3>
153+
<div class="avatargroup4auto">
154+
<ui5-avatar-group type="Group">
155+
<ui5-avatar size="XS" interactive icon="home" initials="XS"></ui5-avatar>
156+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
157+
<ui5-avatar size="XS" interactive icon="home"></ui5-avatar>
158+
<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
159+
</ui5-avatar-group>
160+
</div>
161+
<br>
162+
163+
<h3>Group Type - S size</h3>
164+
<div class="avatargroup4auto">
165+
<ui5-avatar-group type="Group">
166+
<ui5-avatar size="S" interactive icon="home" initials="S"></ui5-avatar>
167+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
168+
<ui5-avatar size="S" interactive icon="home"></ui5-avatar>
169+
<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
170+
</ui5-avatar-group>
171+
</div>
172+
<br>
173+
174+
<h3>Group Type - M size</h3>
175+
<div class="avatargroup4auto">
176+
<ui5-avatar-group type="Group">
177+
<ui5-avatar size="M" interactive icon="home" initials="M"></ui5-avatar>
178+
<ui5-avatar size="M" interactive initials="M"></ui5-avatar>
179+
<ui5-avatar size="M" interactive icon="home"></ui5-avatar>
180+
<ui5-avatar size="M" interactive initials="M"></ui5-avatar>
181+
</ui5-avatar-group>
182+
</div>
183+
<br>
184+
185+
<h3>Group Type - L size</h3>
186+
<div class="avatargroup4auto">
187+
<ui5-avatar-group type="Group">
188+
<ui5-avatar size="L" interactive icon="home" initials="L"></ui5-avatar>
189+
<ui5-avatar size="L" interactive initials="L"></ui5-avatar>
190+
<ui5-avatar size="L" interactive icon="home"></ui5-avatar>
191+
<ui5-avatar size="L" interactive initials="L"></ui5-avatar>
192+
</ui5-avatar-group>
193+
</div>
194+
<br>
195+
152196
<div class="demo-section">
153197
<span>TargetRef Tag Name: </span>
154198
<input type="text" id="event-target" />

0 commit comments

Comments
 (0)