search

SAP / fundamental-ngx

Fundamental Library for Angular is SAP Design System Angular component library
https://sap.github.io/fundamental-ngx
Apache License 2.0
269 stars 130 forks source link

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

Open egorwow70 opened 2 months ago

egorwow70 commented 2 months ago

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

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 commented 1 month ago

@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

khotcholava commented 1 month ago

@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 commented 1 month ago

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

droshev commented 1 month ago

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