Respect RTL in CSS classes

[AliOsm]

Currently, multiple components are using pl, pr, and similar classes. These could be replaced with ps, pe, and similar classes to have components that support RTL and LTR.

If you are ok with this, I will start working on making components RTL compatible.

[cirdes]

@AliOsm, we're currently working on the v1 branch. Could you check if this issue exists on the v1 branch as well?

Also, the CSS for our components comes from shadcn. If they are using ps and pe, it will be even simpler to support it here!

[AliOsm]

Hi @cirdes , I'm already on v1 branch, and the issue still exist. The root cause is that shadcn is using, for example, right-4 to align the dialog dismiss button. This works fine for LTR, but for RTL it should be left-4. For shadcn use-case it is reasonable to do that as shadcn copies the code to your project and allows you to edit it completely. On the other hand, RBUI is providing pre-styled components, so I will need to re-style them for RTL everytime I use them. In the case of dialog's dismiss button I need to add rtl:left-4 rtl:right-auto to make sure that the button will be on the left for RTL language. So, I think we should add these classes to each components in the source code.

I can start with a small PR for dialog component, and then continue on the others, what do you think?

[cirdes]

The root cause is that ShadCN is using, for example, right-4 to align the dialog dismiss button. This works fine for LTR, but for RTL, it should be left-4. For ShadCN’s use case, it makes sense to do this since ShadCN copies the code to your project and allows you to edit it completely.

We have just moved everything from v1 to main and also added the ability to copy/eject a component, similar to what ShadCN does. Take a look at this PR.

On the other hand, RBUI is providing pre-styled components, so I will need to re-style them for RTL every time I use them. In the case of the dialog's dismiss button, I need to add rtl:left-4 and rtl:right-auto to ensure that the button is on the left for RTL languages. Therefore, I think we should add these classes to each component in the source code.

ShadCN uses Radix, which supports RTL, so I agree with you that we should address this as well.

I can start with a small PR for the dialog component and then continue with the others. What do you think?

It would be great if you could help us improve RTL support, and starting with the dialog component seems like a good plan.