[AvatarGroup] Avatar group should not have an auto width of 100%

[web-padawan]

@stefanuebe commented on Fri Mar 04 2022

Describe the bug Currently the avatar group has a width of 100 % set to it. This makes it necessary to add an extra step, when this sample here shall be reproduced with a horizontal layout and positioning the elements at the right side (e.g. as it is known from google docs).

To fix this, the dev has to manually override the width to something like

group.setWidth("auto");

Default:

Expected:

Sample code (in a vertical layout)

UserInfo userInfo = getUserInfo();

CollaborationAvatarGroup group = new CollaborationAvatarGroup(userInfo, getTopicId());
// Exclude own avatar from the group:
group.setOwnAvatarVisible(false);

Avatar ownAvatar = new Avatar();
ownAvatar.setName(userInfo.getName());
ownAvatar.setImage(userInfo.getImage());

HorizontalLayout avatars = new HorizontalLayout(group, ownAvatar);
avatars.setJustifyContentMode(JustifyContentMode.END);
add(avatars);

setHorizontalComponentAlignment(Alignment.END, group);

// this does not work
group.setSizeUndefined();

// this does work
group.setWidth("auto");

[danielvanmil]

We want to render a vaadin-avatar-group in a flexbox with a maxItemsVisible, but this also doesn't seem to go well.

See https://stackblitz.com/edit/vaadin-example-fkru7p?file=views/engatta-app.ts

How can we do this or should the vaadin-avatar-group get an option to render without resizing?