Skip to content

Comments

fix(ui5-avatar-group): aligned with the latest design spec#13113

Merged
plamenivanov91 merged 4 commits intomainfrom
avatar-group-visual-spec-update
Feb 24, 2026
Merged

fix(ui5-avatar-group): aligned with the latest design spec#13113
plamenivanov91 merged 4 commits intomainfrom
avatar-group-visual-spec-update

Conversation

@plamenivanov91
Copy link
Contributor

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)

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)
@ui5-webcomponents-bot
Copy link
Collaborator

ui5-webcomponents-bot commented Feb 18, 2026

🧹 Preview deployment cleaned up: https://pr-13113--ui5-webcomponents.netlify.app

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 18, 2026 17:00 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 19, 2026 08:41 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 23, 2026 15:40 Inactive
@plamenivanov91 plamenivanov91 merged commit 629a58e into main Feb 24, 2026
14 checks passed
@plamenivanov91 plamenivanov91 deleted the avatar-group-visual-spec-update branch February 24, 2026 10:20
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 24, 2026 10:21 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants