[Dialog] Resize corner has wrong orientation in RTL mode

ej612 commented 4 weeks ago

Describe the bug

Hi there,

In normal left-to-right mode, the resize corner on a resizable dialog is displayed in the lower right corner. In Right-to-Left mode, it's displayed on the lower left corner. It therefore should (and used to) flip over horizontally to properly align.

Working (1.16.0):

Broken (1.26.2):

Thanks in advance!

Isolated Example

https://stackblitz.com/edit/github-h7fbl3?file=src%2FApp.tsx

UI5 Web Components for React Version

1.26.2

UI5 Web Components Version

1.23.3

Browser

Chrome

Lukas742 commented 4 weeks ago

Hi @ej612

I seems like the Dialog (or maybe even the locales detection of ui5-webcomponents in general) doesn't take the html tag into account anymore. Even when not setting the dir attribute (or property) dynamically, but setting it directly on the html tag, the behavior is the same. As a workaround you could apply it to the body: https://stackblitz.com/edit/github-h7fbl3-kdsadb?file=src%2FApp.tsx

Since the Dialog and LTR/RTL detection is implemented by the UI5 Web Components team, I'll forward this issue to their repo.

Hi colleagues,

could you please check if setting dir on the html tag should work? If it turns out to be a limitation, it's probably worth mentioning it in the docs.

Here you can find an example without our wrapper or React that is showing the issue by setting dir="rtl"attribute on the html tag: https://stackblitz.com/edit/github-pe342x?file=index.html%3AL2 It is working fine when setting the attribute on the body for example: https://stackblitz.com/edit/github-pe342x-8q92nu?file=index.html%3AL21

niyap commented 4 weeks ago

Hello @SAP/ui5-webcomponents-topic-rd,

When we have a resizable ui5-dialog in rtl mode, the resize icon is misaligned. The issue could be easily reproduced in our sample page, if you change the mode to rtl and check the "Open resizable dialog" sample Could you please analyse the issue?

Thank you in advance!

Kind Regards, Niya

LidiyaGeorgieva commented 3 weeks ago

Hello @SAP/ui5-webcomponents-topic-core, According to the documentation there should be no difference if we set dir="rtl" to the html or to the body element: https://sap.github.io/ui5-webcomponents/docs/advanced/RTL-and-compact-mode/#setting-rtl But there is - setting the dir="rtl" to the html element doesn't visualize the icons in RTL mode. You can test this locally here: http://localhost:8080/packages/main/test/pages/Icon.html