diff --git a/packages/main/src/AvatarGroup.hbs b/packages/main/src/AvatarGroup.hbs
index a3d964e3e0ff..b7a7a0c675be 100644
--- a/packages/main/src/AvatarGroup.hbs
+++ b/packages/main/src/AvatarGroup.hbs
@@ -10,8 +10,12 @@
>
-
- {{_overflowButtonText}}
-
+ {{#if _customOverflowButton}}
+
+ {{else}}
+
+ {{_overflowButtonText}}
+
+ {{/if}}
\ No newline at end of file
diff --git a/packages/main/src/AvatarGroup.js b/packages/main/src/AvatarGroup.js
index fd636d66a4f0..4bd97c586ce3 100644
--- a/packages/main/src/AvatarGroup.js
+++ b/packages/main/src/AvatarGroup.js
@@ -113,6 +113,20 @@ const metadata = {
type: HTMLElement,
propertyName: "items",
},
+ /**
+ * Defines the overflow button of ui5-avatar-group.
+ * Note: We recommend using the ui5-button component.
+ *
+ * Note: If this slot is not used, the ui5-avatar-group will
+ * display the built-in overflow button.
+ * @type {HTMLElement}
+ * @slot overflowButton
+ * @public
+ * @since 1.0.0-rc.13
+ */
+ overflowButton: {
+ type: HTMLElement,
+ },
},
events: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */ {
/**
@@ -130,6 +144,14 @@ const metadata = {
overflowButtonClicked: { type: Boolean },
},
},
+ /**
+ * Fired when the count of visible ui5-avatar elements in the
+ * ui5-avatar-group has changed
+ * @event
+ * @public
+ * @since 1.0.0-rc.13
+ */
+ overflow: {},
},
};
@@ -241,6 +263,10 @@ class AvatarGroup extends UI5Element {
return this.items.map(avatar => avatar._effectiveBackgroundColor);
}
+ get _customOverflowButton() {
+ return this.overflowButton.length ? this.overflowButton[0] : undefined;
+ }
+
get _hiddenStartIndex() {
return this._itemsCount - this._hiddenItems;
}
@@ -261,10 +287,6 @@ class AvatarGroup extends UI5Element {
return this._isGroup ? "0" : "-1";
}
- get _overflowButtonTabIndex() {
- return this._isGroup ? "-1" : false;
- }
-
get _overflowButton() {
return this.shadowRoot.querySelector(AVATAR_GROUP_OVERFLOW_BTN_SELECTOR);
}
@@ -278,19 +300,20 @@ class AvatarGroup extends UI5Element {
* @private
*/
get _overflowButtonEffectiveWidth() {
+ const button = this._customOverflowButton ? this._customOverflowButton : this._overflowButton;
// if in "Group" mode overflow button size is equal to the offset from second item
if (this._isGroup) {
let item = this.items[1];
// in some cases when second avatar is overflowed the offset of the button is the right one
if (!item || item.hidden) {
- item = this._overflowButton;
+ item = button;
}
return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : item.offsetLeft;
}
- return this._overflowButton.offsetWidth;
+ return button.offsetWidth;
}
onAfterRendering() {
@@ -298,6 +321,10 @@ class AvatarGroup extends UI5Element {
}
onBeforeRendering() {
+ if (this._customOverflowButton) {
+ this._customOverflowButton.nonInteractive = this._isGroup;
+ }
+
this._prepareAvatars();
}
@@ -332,7 +359,7 @@ class AvatarGroup extends UI5Element {
}
_fireGroupEvent(targetRef) {
- const isOverflowButtonClicked = targetRef.classList.contains(OVERFLOW_BTN_CLASS);
+ const isOverflowButtonClicked = targetRef.classList.contains(OVERFLOW_BTN_CLASS) || targetRef === this._customOverflowButton;
this.fireEvent("click", {
targetRef,
@@ -384,7 +411,7 @@ class AvatarGroup extends UI5Element {
}
// last avatar should not be offset as it breaks the container width and focus styles are no set correctly
- if (index !== this._itemsCount - 1) {
+ if (index !== this._itemsCount - 1 || this._customOverflowButton) {
// based on RTL margin left or right is set to avatars
avatar.style[`margin-${RTL ? "left" : "right"}`] = offsets[avatar._effectiveSize][this.type];
}
@@ -437,7 +464,7 @@ class AvatarGroup extends UI5Element {
// used to determine whether the following items will fit the container or not
let totalWidth = this._getWidthToItem(item) + item.offsetWidth;
- if (index !== this._itemsCount - 1) {
+ if (index !== this._itemsCount - 1 || this._customOverflowButton) {
totalWidth += this._overflowButtonEffectiveWidth;
}
@@ -460,6 +487,8 @@ class AvatarGroup extends UI5Element {
}
_setHiddenItems(hiddenItems) {
+ const shouldFireEvent = this._hiddenItems !== hiddenItems;
+
this._hiddenItems = hiddenItems;
this.items.forEach((item, index) => {
@@ -467,6 +496,10 @@ class AvatarGroup extends UI5Element {
});
this._overflowButtonText = `+${hiddenItems > 99 ? 99 : hiddenItems}`;
+
+ if (shouldFireEvent) {
+ this.fireEvent("overflow");
+ }
}
}
diff --git a/packages/main/src/themes/AvatarGroup.css b/packages/main/src/themes/AvatarGroup.css
index 9be21998e3ad..06675310a8f6 100644
--- a/packages/main/src/themes/AvatarGroup.css
+++ b/packages/main/src/themes/AvatarGroup.css
@@ -26,21 +26,25 @@
cursor: pointer;
}
+:host([type="Group"]) ::slotted([ui5-button]),
:host([type="Group"]) ::slotted([ui5-avatar]) {
pointer-events: none;
}
+::slotted([ui5-button]:not([hidden])),
.ui5-avatar-group-overflow-btn:not([hidden]) {
border-radius: 50%;
display: inline-flex;
- text-overflow: unset;
+ text-overflow: initial;
}
+::slotted([ui5-button][focused]),
.ui5-avatar-group-overflow-btn[focused] {
outline: var(--_ui5_button_outline);
outline-offset: var(--_ui5_avatar_group_overflow_button_focus_offset);
}
+:host([avatar-size="XS"]) ::slotted([ui5-button]),
:host([avatar-size="XS"]) .ui5-avatar-group-overflow-btn {
height: 2rem;
width: 2rem;
@@ -48,6 +52,8 @@
font-size: .75rem;
}
+::slotted([ui5-button]),
+:host([avatar-size="S"]) ::slotted([ui5-button]),
:host([avatar-size="S"]) .ui5-avatar-group-overflow-btn {
height: 3rem;
width: 3rem;
@@ -55,6 +61,7 @@
font-size: 1.125rem;
}
+:host([avatar-size="M"]) ::slotted([ui5-button]),
:host([avatar-size="M"]) .ui5-avatar-group-overflow-btn {
height: 4rem;
width: 4rem;
@@ -62,6 +69,7 @@
font-size: 1.625rem;
}
+:host([avatar-size="L"]) ::slotted([ui5-button]),
:host([avatar-size="L"]) .ui5-avatar-group-overflow-btn {
height: 5rem;
width: 5rem;
@@ -69,6 +77,7 @@
font-size: 2rem;
}
+:host([avatar-size="XL"]) ::slotted([ui5-button]),
:host([avatar-size="XL"]) .ui5-avatar-group-overflow-btn {
height: 7rem;
width: 7rem;
diff --git a/packages/main/test/pages/AvatarGroup.html b/packages/main/test/pages/AvatarGroup.html
index 580d5ab84a8b..b63ce6334a0b 100644
--- a/packages/main/test/pages/AvatarGroup.html
+++ b/packages/main/test/pages/AvatarGroup.html
@@ -213,6 +213,21 @@ Unordinary group
+
+ AvatarGroup with user defined overflow button
+
+
+
+
+
+
+
+
+
+
+
+ +99
+