fix(core): address Avatar Group issues #12530

khotcholava · 2024-10-10T11:31:41Z

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

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.

closes (#12369)[#12369] ## Description - Implemented avatar details placement feature - Implemented avatar overflow button circle state

closes (#12369)[#12369] ## Description - Add maxVisibleItems input to limit the number of visible avatars in AvatarGroupHostComponent, retaining default behavior when unset

- Fixed focus on avatar group

…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.

netlify · 2024-10-10T11:33:52Z

❌ Check the deploy log for errors here: https://app.netlify.com/sites/fundamental-ngx/deploys

Name	Link
🔨 Latest commit	`3420564`
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-ngx/deploys/6776d3def1388300088ec47e

github-actions · 2024-10-10T11:36:25Z

Visit the preview URL for this PR (updated for commit 3420564):

https://fundamental-ngx-gh--pr12530-fix-core-avatar-gro-0buuy2zc.web.app

_{(expires Sun, 05 Jan 2025 18:03:28 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 41b993ee8e451bd7c6770b342ce142dc886eacff}

…hancements Closes [#12369](#12369) ## Description - Removed unused files

mikerodonnell89 · 2024-10-14T16:14:34Z

libs/docs/core/avatar-group/avatar-group-docs.component.html

-    <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>-->


Accidental commit?

Yes, it's not ready yet for review. I converted this PR as a draft. @mikerodonnell89

mikerodonnell89

Looks good but what is going on with all of the commented out html?

closes [#12369](#12369) - Fixed avatar overflow body focus issue

mikerodonnell89

In the "group type standard usage" examples, after opening the popover, i can not navigate through the avatars with the arrow keys or tab key. Because each avatar in the popover is clickable, we do need this functionality with keyboard control as well

khotcholava · 2024-10-24T07:49:40Z

@mikerodonnell89 In this example, the web components avatar group features tab navigation but lacks arrow navigation.

I'm currently working on implementing tab navigation.

…hancements closes [#12369](#12369) ## Description Remove unused event handlers and update focus behavior

khotcholava · 2024-10-25T09:06:40Z

@mikerodonnell89 Implemented arrow navigation.

closes [#12530](#12530) - Fixing tab indexes

dpavlenishvili · 2024-11-11T15:34:51Z

...omponents/default-avatar-group-overflow-body/default-avatar-group-overflow-body.component.ts

+     **/
+    avatars = input<AvatarGroupItemRendererDirective[]>([]);
+
+    /**


missing declaration or wrong place for this jsDoc.

closes [#12530](#12530) - Removed unused avatars

droshev · 2024-11-20T14:48:26Z

@mikerodonnell89 @dpavlenishvili Can you review it again?

droshev · 2024-11-25T19:27:17Z

@dpavlenishvili any update?

mikerodonnell89

Does not look like the first issue (regarding the focus staying on the first avatar group after interacting with a second) was fixed. In this example I've used the mouse to click both, then the escape key to close the second group

Screen.Recording.2024-11-25.at.2.45.53.PM.mov

closes [#12530](#12530) Fixed first item auto focus on popover open

closes [#12530](#12530) fixed space click event

droshev · 2024-11-27T16:25:53Z

@khotcholava Can you check the e2e?

dpavlenishvili · 2024-12-02T15:52:59Z

libs/core/avatar-group/avatar-group.component.ts

@@ -88,6 +94,10 @@ export class AvatarGroupComponent implements AvatarGroupHostConfig {
    @Input()
    size: AvatarGroupHostConfig['size'] = 'l';

+    /** Popover placement */
+    @Input()
+    popoverPlacement: Placement | null = null;


use Nullable type.

PopoverPlacement type is Placement | null. It's not Nullable. If I change it I'm afraid it will broke already existing functionality

dpavlenishvili · 2024-12-02T15:58:05Z

libs/core/avatar-group/components/avatar-group-host.component.ts

add or update relevant unit tests for maxVisibleItems

There is not e2e test for avatar group host

dpavlenishvili · 2024-12-02T16:07:47Z

libs/core/popover/popover-service/popover.service.ts

@@ -127,6 +131,13 @@ export class PopoverService extends BasePopoverClass {
                this._removeOverlay(this._modalBodyClass, this._modalTriggerClass);
            }
        });
+
+        // Add keydown listener for space key
+        this._renderer.listen('document', 'keydown', (event: KeyboardEvent) => {


Listening for keydown events globally on the document level can lead some performance issues, if it is possible scope the event listener to the popover element directly.
for example:
`
const popoverElement = this._elementRef.nativeElement;

this._renderer.listen(popoverElement, 'keydown', (event: KeyboardEvent) => {
if (event.code === 'Space' && this.isOpen) {
this._storeAndFocusFirstTabbable();
}
});
`

…o fix(core)-avatar-group-bugs # Conflicts: # libs/core/popover/popover-body/popover-body.component.ts

droshev · 2024-12-18T15:14:52Z

@khotcholava needs to update with the comments from UX, check e2e/unit and make it as PR. Needs to be reviewed afterwards

droshev · 2024-12-19T13:55:44Z

@khotcholava needs to update with the comments from UX, check e2e/unit and make it as PR. Needs to be reviewed afterwards

droshev · 2024-12-20T14:37:03Z

@khotcholava Can you summarize what you did and what needs to be implemented?

khotcholava and others added 5 commits September 25, 2024 17:55

fix(core): avatar group bugs

22be6e6

closes (#12369)[#12369] ## Description - Implemented avatar details placement feature - Implemented avatar overflow button circle state

fix(core): avatar group bugs

4a87b4d

closes (#12369)[#12369] ## Description - Add maxVisibleItems input to limit the number of visible avatars in AvatarGroupHostComponent, retaining default behavior when unset

fix(core): avatar group

b39b871

- Fixed focus on avatar group

Merge branch 'main' into fix(core)-avatar-group-bugs

aedf05e

khotcholava self-assigned this Oct 10, 2024

khotcholava added 3 commits October 10, 2024 15:42

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

fe4920e

…hancements Closes [#12369](#12369) ## Description - Removed unused files

Make avatar group circle

0ead287

Make avatar group circle

1f11a17

InnaAtanasova changed the title ~~Fix(core) avatar group bugs~~ fix(core): address Avatar Group issues Oct 11, 2024

InnaAtanasova requested a review from a team October 11, 2024 14:55

InnaAtanasova added the bug Something isn't working label Oct 11, 2024

InnaAtanasova added this to the Sprint 139 - October 2024 milestone Oct 11, 2024

Implemented first selection of popover avatar items

da922ad

mikerodonnell89 reviewed Oct 14, 2024

View reviewed changes

khotcholava marked this pull request as draft October 14, 2024 16:15

mikerodonnell89 requested changes Oct 14, 2024

View reviewed changes

fix(core): avatar group

f587f50

closes [#12369](#12369) - Fixed avatar overflow body focus issue

khotcholava requested a review from mikerodonnell89 October 15, 2024 08:58

khotcholava marked this pull request as ready for review October 15, 2024 08:58

droshev requested a review from a team October 15, 2024 14:02

mikerodonnell89 requested changes Oct 21, 2024

View reviewed changes

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

4373cde

…hancements closes [#12369](#12369) ## Description Remove unused event handlers and update focus behavior

khotcholava requested a review from mikerodonnell89 October 25, 2024 09:06

Merge branch 'main' into fix(core)-avatar-group-bugs

b6af950

droshev requested a review from a team October 29, 2024 22:48

fix(core): avatar groups

8b1e6de

closes [#12530](#12530) - Fixing tab indexes

khotcholava requested a review from mikerodonnell89 November 8, 2024 11:28

dpavlenishvili reviewed Nov 11, 2024

View reviewed changes

mikerodonnell89 and others added 2 commits November 12, 2024 10:44

Merge branch 'main' into fix(core)-avatar-group-bugs

8251f84

fix(core): avatar groups

d20946e

closes [#12530](#12530) - Removed unused avatars

khotcholava requested a review from dpavlenishvili November 13, 2024 09:46

mikerodonnell89 requested changes Nov 25, 2024

View reviewed changes

khotcholavaSuzy added 2 commits November 27, 2024 17:13

fix(core): avatar group fixed first item focus

cb1c93d

closes [#12530](#12530) Fixed first item auto focus on popover open

fix(core): avatar group fixed first item focus

d353a20

closes [#12530](#12530) fixed space click event

khotcholava requested a review from mikerodonnell89 November 27, 2024 13:49

khotcholava marked this pull request as draft December 2, 2024 12:19

khotcholava added 2 commits December 2, 2024 16:20

fix e2e test

18fc966

Fixed popover focus

827ef21

dpavlenishvili reviewed Dec 2, 2024

View reviewed changes

droshev modified the milestones: Sprint 140 - November 2024, Sprint 141 - December 2024 Dec 2, 2024

dpavlenishvili reviewed Dec 2, 2024

View reviewed changes

khotcholava and others added 4 commits December 2, 2024 22:29

fix e2e test

d4bd252

Merge remote-tracking branch 'origin/fix(core)-avatar-group-bugs' int…

bc16f40

…o fix(core)-avatar-group-bugs # Conflicts: # libs/core/popover/popover-body/popover-body.component.ts

fixed time picker tests

728a86b

fixed time picker tests

87c2469

Merge branch 'main' into fix(core)-avatar-group-bugs

fada1bc

Merge branch 'main' into fix(core)-avatar-group-bugs

3420564

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(core): address Avatar Group issues #12530

fix(core): address Avatar Group issues #12530

khotcholava commented Oct 10, 2024

netlify bot commented Oct 10, 2024 •

edited

Loading

github-actions bot commented Oct 10, 2024 •

edited

Loading

mikerodonnell89 Oct 14, 2024

khotcholava Oct 14, 2024

mikerodonnell89 left a comment

mikerodonnell89 left a comment •

edited

Loading

khotcholava commented Oct 24, 2024

khotcholava commented Oct 25, 2024

dpavlenishvili Nov 11, 2024

droshev commented Nov 20, 2024

droshev commented Nov 25, 2024

mikerodonnell89 left a comment •

edited

Loading

droshev commented Nov 27, 2024

dpavlenishvili Dec 2, 2024

khotcholava Dec 3, 2024

dpavlenishvili Dec 2, 2024

khotcholava Dec 3, 2024

dpavlenishvili Dec 2, 2024 •

edited

Loading

droshev commented Dec 18, 2024

droshev commented Dec 19, 2024

droshev commented Dec 20, 2024

fix(core): address Avatar Group issues #12530

Are you sure you want to change the base?

fix(core): address Avatar Group issues #12530

Conversation

khotcholava commented Oct 10, 2024

Description

netlify bot commented Oct 10, 2024 • edited Loading

❌ Check the deploy log for errors here: https://app.netlify.com/sites/fundamental-ngx/deploys

github-actions bot commented Oct 10, 2024 • edited Loading

mikerodonnell89 Oct 14, 2024

Choose a reason for hiding this comment

khotcholava Oct 14, 2024

Choose a reason for hiding this comment

mikerodonnell89 left a comment

Choose a reason for hiding this comment

mikerodonnell89 left a comment • edited Loading

Choose a reason for hiding this comment

khotcholava commented Oct 24, 2024

khotcholava commented Oct 25, 2024

dpavlenishvili Nov 11, 2024

Choose a reason for hiding this comment

droshev commented Nov 20, 2024

droshev commented Nov 25, 2024

mikerodonnell89 left a comment • edited Loading

Choose a reason for hiding this comment

droshev commented Nov 27, 2024

dpavlenishvili Dec 2, 2024

Choose a reason for hiding this comment

khotcholava Dec 3, 2024

Choose a reason for hiding this comment

dpavlenishvili Dec 2, 2024

Choose a reason for hiding this comment

khotcholava Dec 3, 2024

Choose a reason for hiding this comment

dpavlenishvili Dec 2, 2024 • edited Loading

Choose a reason for hiding this comment

droshev commented Dec 18, 2024

droshev commented Dec 19, 2024

droshev commented Dec 20, 2024

netlify bot commented Oct 10, 2024 •

edited

Loading

github-actions bot commented Oct 10, 2024 •

edited

Loading

mikerodonnell89 left a comment •

edited

Loading

mikerodonnell89 left a comment •

edited

Loading

dpavlenishvili Dec 2, 2024 •

edited

Loading