Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG] fd-avatar-group focus, overflow bugs #12369

Open
egorwow70 opened this issue Sep 5, 2024 · 8 comments · May be fixed by #12530
Open

[BUG] fd-avatar-group focus, overflow bugs #12369

egorwow70 opened this issue Sep 5, 2024 · 8 comments · May be fixed by #12530
Assignees
@khotcholava
Milestone
Sprint 142 - Janu...

Comments

@egorwow70
Copy link

egorwow70 commented Sep 5, 2024 •
edited
Loading

Is this a bug, enhancement, or feature request?

Couple of bugs connected to fd-avatar-group component from fundamental-ngx/core library.

Control - https://docs-0-49--fundamental-ngx.netlify.app/#/core/avatar-group.

Describe your proposal.

I think it should be fixed on the library side.

Can you handle that on the application side

No.

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

  • "@fundamental-ngx/core": "0.49.0",
  • "@sap-theming/theming-base-content": "11.13.0",
  • "fundamental-styles": "0.34.0",
  • "@angular/core": "17.3.0",

If this is a bug, please provide steps for reproducing it; the exact components you are using;

a) Bug with focus:

  1. Open stackblitz example - https://stackblitz.com/edit/uy2qbh?file=src%2Fapp%2Fdynamic-page-tabs-example.component.html
  2. Open default tabs example.
  3. When there is more than one avatar group control on the page, firstly click on the first one, you should see a blue border, that highlights a focus state.
  4. After click on the second control, focus will still remain on the first one.
    image

b) Bug with switching tabs and avatar group control rendering:

  1. Open stackblitz example - https://stackblitz.com/edit/uy2qbh?file=src%2Fapp%2Fdynamic-page-tabs-example.component.html
  2. Open default tabs example.
  3. Select the second tab.
  4. Go back to the first tab.
  5. You see only "+n more button", but you should see the whole avatar group row with images as well.
    image

c) Not a bug, but a feature request

Is it possible to hide a standard avatar group item details popover header? But then we need access to navigate between group and item views
image

I found the way how to custom the body of the popover with <ng-template #details>, but didn't find the way how to hide this header
image

d) Not a bug, but a feature request
Is it possible to open group popover from the center of the avatar group?

Like this:

image

e) Not a bug, but a feature request

Is it possible to make +n button in circle shape, because avatars are mostly used with circle type? Maybe via configuration prop is the best choice for it

design:
image

f) Not a bug, but a feature request

Is it possible to have a property to set the number of visible circles? we have a strict requirement to display 5 avatars and after +n button

design:
image

Please provide stackblitz example(s).

Link - https://stackblitz.com/edit/uy2qbh?file=src%2Fapp%2Fdynamic-page-tabs-example.component.html.

Did you check the documentation and the API?

Yes.

Did you search for similar issues?

Yes.
@egorwow70 egorwow70 changed the title [BUG] fd-avatar-group bugs [BUG] fd-avatar-group focus, overflow bugs Sep 5, 2024
khotcholava added a commit that referenced this issue Sep 25, 2024
@khotcholava
fix(core): avatar group bugs
22be6e6 
closes (#12369)[#12369]

## Description
- Implemented avatar details placement feature
- Implemented avatar overflow button circle state
khotcholava added a commit that referenced this issue Sep 26, 2024
@khotcholava
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
@egorwow70
Copy link
Author

@khotcholava @droshev

As for point c) I found the way how to customize overflow popover inside fd-avatar-group, but have a question, is it possible to close this popover? We need to display a cross icon inside the popover, that closes it

image

@droshev droshev added this to the Sprint 138 - September 2024 milestone Sep 27, 2024
@khotcholava
Copy link
Contributor

@droshev

  1. Please refer to point A. I've made the necessary adjustments, but when I click outside the popover, the focus on the selected popover disappears. Should it disappear, or should it remain on the selected avatar group?

  2. FYI: Point C is a new feature as well as D,E,F points.

@droshev
Copy link
Contributor

droshev commented Oct 1, 2024 •
edited
Loading

@khotcholava where can i see your PR? What about point B? Can you elaborate more your comment about point A?

@droshev
Copy link
Contributor

droshev commented Oct 8, 2024 •
edited
Loading

@egorwow70 regarding point C you can use AvatarGroupOverflowBodyDirective and pass any template you want. Example

@khotcholava I guess you can open PR for the others:
point A and B are bugs and should be fixes. C should be doable. D is a BUG. For E and F we should offer that through the API. Can you also create some examples?

khotcholava added a commit that referenced this issue Oct 10, 2024
@khotcholava
fix(core): Resolve focus retention & rendering issues, add feature en…
b32ae7e 
…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.
@khotcholava khotcholava linked a pull request Oct 10, 2024 that will close this issue
Draft
khotcholava added a commit that referenced this issue Oct 10, 2024
@khotcholava
fix(core): Resolve focus retention & rendering issues, add feature en…
fe4920e 
…hancements

Closes [#12369](#12369)

## Description
- Removed unused files
khotcholava added a commit that referenced this issue Oct 15, 2024
@khotcholava
fix(core): avatar group
f587f50 
closes [#12369](#12369)

- Fixed avatar overflow body focus issue
khotcholava added a commit that referenced this issue Oct 25, 2024
@khotcholava
fix(core): Resolve focus retention & rendering issues, add feature en…
4373cde 
…hancements

closes [#12369](#12369)

## Description
Remove unused event handlers and update focus behavior
@egorwow70
Copy link
Author

@droshev

Hello, Deno. Our team is really interested in those fixes, I see that you attached a November 2024 label, do you know when those fixes will be released?

@droshev
Copy link
Contributor

droshev commented Dec 2, 2024

@egorwow70 @khotcholava is working on that ticket and we should be able to fix it anytime now.

@khotcholava
Copy link
Contributor

Imagine this scenario: I have a group of multiple avatars. When I click on the first avatar, its associated popover opens. If I then click on the second avatar and close its popover, the focus stays on the first avatar. Is this the expected behavior?
For more details, refer to section A regarding this issue. @droshev

@droshev
Copy link
Contributor

droshev commented Dec 3, 2024

@nikolay-kolarov Can you advise us in this question?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@khotcholava khotcholava

Labels
None yet
Projects
None yet
Milestone
Sprint 142 - January 2025
Development

Successfully merging a pull request may close this issue.

fix(core): address Avatar Group issues SAP/fundamental-ngx
5 participants
@droshev @khotcholava @InnaAtanasova @egorwow70 @dpavlenishvili