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 129 forks source link

[BUG] fd-illustrated-message responsiveness works incorrectly with async events and display flex container #12721

Open egorwow70 opened 1 week ago

egorwow70 commented 1 week ago

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

Hello, fundamentals team. Out project migrated from "@fundamental-ngx/core": "0.52.0" to "@fundamental-ngx/core": "0.53.1" and it seems a bug with illustrated messages appeared (when container is either display flex or setTimeout/async event used on illustration) (please, check stackblitz example below).

image

We did some investigation and maybe the root cause of this is that PR: https://github.com/SAP/fundamental-ngx/pull/12405 https://github.com/SAP/fundamental-ngx/pull/12405/commits/f9218a0e6af57b0bbd465e1b2be5ea283852b9bc#diff-f8f65cc03cf295441636862ce2883f06d22e29937c2aeea09193ac268de1b9a9

Also it seems, that now the illustration component works responsive according to the container size, is it possible to escape this behavior? Maybe you can add a flag responsive: true/false. Because we have a place where a text now looks too huge (it is scene, but we want to make it type=dialog)

Also it seems like for what reason we need a [type] propery passed, because the illustrated message type will be calculated according to the container size now....

I think maybe if [responsive]=true the [type] can be omitted, but if [responsive]=false the [type] can be passed

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;

  1. Open link - https://stackblitz.com/edit/ukxmk6?file=src%2Fapp%2Fparent.component.html
  2. Wait 5 sec
  3. Illustration with setTimeout will have bad dimensions and svg won't be visible

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

https://stackblitz.com/edit/ukxmk6?file=src%2Fapp%2Fparent.component.html

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

No

Did you check the documentation and the API?

Yes, there is no responsive prop to escape this behavior - https://sap.github.io/fundamental-ngx/#/core/illustrated-message/api

Did you search for similar issues?

Yes, possibly this issue can have the same root cause - https://github.com/SAP/fundamental-ngx/issues/12678

Is there anything else we should know?

No

IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.