fix(core): Resolve focus retention & rendering issues, add feature en…

…hancements Closes [#12369](#12369) ## Description - Fixed focus bug where focus remained on the first avatar group control after interacting with the second one. - Fixed rendering issue where only "+n more" button displayed after switching tabs instead of the full avatar group row. - Added feature to open group popover from the center of the avatar group. - Added configuration option to make "+n more" button circular to match avatars typically being in circle shapes. - Introduced property to set the number of visible avatars before displaying the "+n more" button.
SAP · Oct 10, 2024 · b32ae7e · b32ae7e
1 parent aedf05e
commit b32ae7e
Show file tree

Hide file tree

Showing 5 changed files with 562 additions and 268 deletions.
diff --git a/libs/core/avatar-group/avatar-group.component.html b/libs/core/avatar-group/avatar-group.component.html
@@ -1,5 +1,4 @@
 <ng-content></ng-content>
-<pre>{{ _avatars.length }}</pre>
 @if (type === 'individual') {
     <fd-avatar-group-host
         #avatarGroupHostComponent

diff --git a/libs/docs/core/avatar-group/avatar-group-docs.component.html b/libs/docs/core/avatar-group/avatar-group-docs.component.html
@@ -1,14 +1,14 @@
-<!--<fd-docs-section-title id="default" componentName="AvatarGroup"> Avatar Group Standard Usage </fd-docs-section-title>-->
-<!--<description>-->
-<!--    <p>-->
-<!--        In this example, which is called <code>individual</code> type avatar group, which means that every item is-->
-<!--        displayed separately, every item can be focused separately and details template will be displayed for that item.-->
-<!--    </p>-->
-<!--</description>-->
-<!--<component-example>-->
-<!--    <fd-avatar-group-default-example></fd-avatar-group-default-example>-->
-<!--</component-example>-->
-<!--<code-example [exampleFiles]="avatarGroupDefaultExample"></code-example>-->
+<fd-docs-section-title id="default" componentName="AvatarGroup"> Avatar Group Standard Usage </fd-docs-section-title>
+<description>
+    <p>
+        In this example, which is called <code>individual</code> type avatar group, which means that every item is
+        displayed separately, every item can be focused separately and details template will be displayed for that item.
+    </p>
+</description>
+<component-example>
+    <fd-avatar-group-default-example></fd-avatar-group-default-example>
+</component-example>
+<code-example [exampleFiles]="avatarGroupDefaultExample"></code-example>
 
 <fd-docs-section-title id="group" componentName="AvatarGroup"> Group Type Standard Usage </fd-docs-section-title>
 <description>
@@ -23,14 +23,14 @@
 </component-example>
 <code-example [exampleFiles]="avatarGroupGroupExample"></code-example>
 
-<!--<fd-docs-section-title id="vertical" componentName="AvatarGroup"> Vertical Avatar Group Usage </fd-docs-section-title>-->
-<!--<description>-->
-<!--    <p>-->
-<!--        The <code>fd-avatar-group</code> supports <code>vertical</code> orientation as well. In this case, all items are-->
-<!--        displayed in a vertical list and overflow is not supported.-->
-<!--    </p>-->
-<!--</description>-->
-<!--<component-example>-->
-<!--    <fd-avatar-group-vertical-example></fd-avatar-group-vertical-example>-->
-<!--</component-example>-->
-<!--<code-example [exampleFiles]="verticalAvatarGroupExample"></code-example>-->
+<fd-docs-section-title id="vertical" componentName="AvatarGroup"> Vertical Avatar Group Usage </fd-docs-section-title>
+<description>
+    <p>
+        The <code>fd-avatar-group</code> supports <code>vertical</code> orientation as well. In this case, all items are
+        displayed in a vertical list and overflow is not supported.
+    </p>
+</description>
+<component-example>
+    <fd-avatar-group-vertical-example></fd-avatar-group-vertical-example>
+</component-example>
+<code-example [exampleFiles]="verticalAvatarGroupExample"></code-example>
diff --git a/...up/examples/group-type/avatar-group-test-example/avatar-group-test-example.component.html b/...up/examples/group-type/avatar-group-test-example/avatar-group-test-example.component.html
@@ -1,48 +1,48 @@
-<fd-avatar-group [maxVisibleItems]="3" [circle]="true" [popoverPlacement]="'bottom'" [size]="'m'" type="group" overflowPopoverTitle="Team members">
-    @for (person of people; track person) { @if (!person.imageUrl &&
-    !person.glyph) {
-        <fd-avatar
-            *fdAvatarGroupItem="
-      details;
-      title: person.firstName + ' ' + person.lastName
-    "
-            [circle]="true"
-            [border]="true"
-            [size]="'m'"
-            role="img"
-            [title]="person.firstName + ' ' + person.lastName"
-            [label]="person.firstName + ' ' + person.lastName"
-            [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
-        ></fd-avatar>
-    } @if (person.imageUrl) {
-        <fd-avatar
-            *fdAvatarGroupItem="
-      details;
-      title: person.firstName + ' ' + person.lastName
-    "
-            [circle]="true"
-            [border]="true"
-            [size]="'m'"
-            [image]="person.imageUrl"
-            role="img"
-            [title]="person.firstName + ' ' + person.lastName"
-            [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
-        ></fd-avatar>
-    } @if (person.glyph) {
-        <fd-avatar
-            *fdAvatarGroupItem="
-      details;
-      title: person.firstName + ' ' + person.lastName
-    "
-            [circle]="true"
-            [border]="true"
-            [size]="'m'"
-            [glyph]="person.glyph"
-            role="img"
-            [title]="person.firstName + ' ' + person.lastName"
-            [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
-        ></fd-avatar>
-    }
+<fd-avatar-group
+    [circle]="true"
+    [size]="'m'"
+    popoverPlacement="bottom"
+    type="group"
+    [maxVisibleItems]="7"
+    overflowPopoverTitle="Team members"
+>
+    @for (person of people; track person) {
+        @if (!person.imageUrl && !person.glyph) {
+            <fd-avatar
+                *fdAvatarGroupItem="details; title: person.firstName + ' ' + person.lastName"
+                [circle]="true"
+                [border]="true"
+                [size]="'m'"
+                role="img"
+                [title]="person.firstName + ' ' + person.lastName"
+                [label]="person.firstName + ' ' + person.lastName"
+                [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
+            ></fd-avatar>
+        }
+        @if (person.imageUrl) {
+            <fd-avatar
+                *fdAvatarGroupItem="details; title: person.firstName + ' ' + person.lastName"
+                [circle]="true"
+                [border]="true"
+                [size]="'m'"
+                [image]="person.imageUrl"
+                role="img"
+                [title]="person.firstName + ' ' + person.lastName"
+                [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
+            ></fd-avatar>
+        }
+        @if (person.glyph) {
+            <fd-avatar
+                *fdAvatarGroupItem="details; title: person.firstName + ' ' + person.lastName"
+                [circle]="true"
+                [border]="true"
+                [size]="'m'"
+                [glyph]="person.glyph"
+                role="img"
+                [title]="person.firstName + ' ' + person.lastName"
+                [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
+            ></fd-avatar>
+        }
         <ng-template #details>
             <fd-quick-view [id]="person.id">
                 <fd-quick-view-subheader>
@@ -55,32 +55,31 @@
                             [title]="person.firstName + ' ' + person.lastName"
                             [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
                         ></fd-avatar>
-                    } @if (person.imageUrl) {
-                    <fd-avatar
-                        [circle]="true"
-                        size="s"
-                        role="img"
-                        [title]="person.firstName + ' ' + person.lastName"
-                        [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
-                        [image]="person.imageUrl"
-                    ></fd-avatar>
-                } @if (person.glyph) {
-                    <fd-avatar
-                        [circle]="true"
-                        size="s"
-                        role="img"
-                        [title]="person.firstName + ' ' + person.lastName"
-                        [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
-                        [glyph]="person.glyph"
-                    ></fd-avatar>
-                }
+                    }
+                    @if (person.imageUrl) {
+                        <fd-avatar
+                            [circle]="true"
+                            size="s"
+                            role="img"
+                            [title]="person.firstName + ' ' + person.lastName"
+                            [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
+                            [image]="person.imageUrl"
+                        ></fd-avatar>
+                    }
+                    @if (person.glyph) {
+                        <fd-avatar
+                            [circle]="true"
+                            size="s"
+                            role="img"
+                            [title]="person.firstName + ' ' + person.lastName"
+                            [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
+                            [glyph]="person.glyph"
+                        ></fd-avatar>
+                    }
                     <fd-quick-view-subheader-title
-                    >{{ person.firstName }}
-                        {{ person.lastName }}</fd-quick-view-subheader-title
+                        >{{ person.firstName }} {{ person.lastName }}</fd-quick-view-subheader-title
                     >
-                    <fd-quick-view-subheader-subtitle>{{
-                            person.position
-                        }}</fd-quick-view-subheader-subtitle>
+                    <fd-quick-view-subheader-subtitle>{{ person.position }}</fd-quick-view-subheader-subtitle>
                 </fd-quick-view-subheader>
                 <fd-quick-view-group>
                     <fd-quick-view-group-title>Contact Details</fd-quick-view-group-title>
@@ -91,9 +90,7 @@
                         </fd-quick-view-group-item-content>
                     </fd-quick-view-group-item>
                     <fd-quick-view-group-item>
-                        <fd-quick-view-group-item-label
-                        >Mobile</fd-quick-view-group-item-label
-                        >
+                        <fd-quick-view-group-item-label>Mobile</fd-quick-view-group-item-label>
                         <fd-quick-view-group-item-content>
                             <a fd-link [href]="'tel:' + person.mobile">{{ person.mobile }}</a>
                         </fd-quick-view-group-item-content>