ui5-avatar-group performance : not render hidden avatar item

[JosephineSu]

In most cases, there are more than 99 avatar items in avatar group in our app. You can see details in following image.
If all of these avatars rendered in dom tree, it is a big challenge to make good performance. So we suggest that avatar group component only render avatars displayed on page and the overflowbutton when current screen size is limit. For the hidden avatar items, there is no need to render.

[ilhan007]

Hello @JosephineSu

With this PR #3037 we introduce a new slot, called "overflowButton", which allows to add custom overflow button to the Avatar Group. The slot is provided to allow you defining the text of the overflow button (and let you set additional aria attributes, such as aria-label) so you don't need to add all the avatars in your model, you can add just few avatars, but set the text to "+999", resolving the issue with rendering many avatars.

Also, we add an event, called "overflow" to let you know when avatars hide/show in order to update the overflow button text. Note: there is "hiddenAvatars" getter you can use to get the count of the hidden avatars at particular moment.

Note: you would have to bind for the click event of the provided slot (button) to handle user clicks on the overflow - in most cases to open a popup with all avatars.

Usage

<ui5-avatar-group>
    <ui5-button slot="overflowButton"  aria-label="your text">+99</ui5-button>
</ui5-avatar-group>