Unstable - RTL issues

[pcenov]

Observed behavior

When bulk editing the language of the resources in Arabic the text is not right aligned with the radio buttons. This is also the case at the Content library in the Language filter.

Expected behavior

The strings should be right aligned

Steps to reproduce the issue

See the attached screenshots

Additional information

Usage Details

• OS: Windows 10, Ubuntu
• Browser: Chrome, Firefox
• URL: https://unstable.studio.learningequality.org/
• Caused by: Bulk Edit Release #4635

[pcenov]

@radinamatic

[AlexVelezLl]

I think I saw this some time ago. This is an issue with KCheckbox and KRadioButton applying dir: auto to the label, (e.g. here) and this makes that the alignment takes the dir of the text rather than the dir of the user language. The solution would be to remove that dir prop on the label, but I dont know if this is going to bring any inconsistency somewhere. Do you have any thoughts about this @nucleogenesis @MisRob?

I think for now at least we can add a prop to disable this behaviour.

[MisRob]

Yes @AlexVelezLl, that makes sense to me. Thank you.

[MisRob]

Perhaps more general labelDirection or labelDir prop would make sense. We could have it set by default to 'auto' so that it doesn't break any of the existing places, but it would be ready to accept any other dir values such as 'ltr', 'rtl'. This would have benefit of being aligned with the native platform.