RTL Support #1638
RTL Support #1638
Conversation
|
Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel. A member of the Team first needs to authorize it. |
|
This is interesting. I wonder if we could have this as an option via the cli. Turn on |
That's a great idea! The changes I have added result in support of both RTL and LTR directions, by simply adding Acheiving all of this via the cli would result in full RTL support, but I am not sure how can it be done. |
|
@nahasco I can take a look at this. Having this in the cli would be awesome. Adding it to the next milestone. I'll push to this PR and make sure you're credited for the work you've done here. Thank you. |
Regarding the choice between physical and logical properties, I'd like to clarify whether you intend to use logical properties as the default for all languages. Logical properties offer the flexibility needed for seamless direction switching, and I believe they could simplify the codebase and improve adaptability for various languages. For other specific elements like icons and HTML or radix direction values, there could be an option to manage these through the CLI to give a starting ground to the user. This approach allows us to make logical properties the primary choice for simplicity and flexibility while maintaining control over other elements that may require manual adjustments. I'm curious to know your thoughts on this approach and whether logical properties are indeed the direction you're leaning towards. Your input on this would be highly valuable. Once again, thank you for your contribution to this! |
|
please keep in mind the use case of supporting both LTR and RTL in the same codebase. |
|
It would be great to have it rn 😅 |
nahasco
changed the title
| @@ -65,7 +65,7 @@ const AlertDialogFooter = ({ | |||
| }: React.HTMLAttributes<HTMLDivElement>) => ( | |||
| <div | |||
| className={cn( | |||
| "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", | |||
| "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse", | |||
There was a problem hiding this comment.
Why not flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2? I think it'd be cleaner.
There was a problem hiding this comment.
I didnt want to change the original styling alot. Just adding rtl:space-x-reverse at the end is the most minimal, i think.
|
It's really shocking that a modern UI library doesn't fully support RTL or Internationalization (like calendar). Love shadcn but I with they would consider these stuff more seriously. |
nahasco
changed the title
…sing the useDirection context
|
any update on this? |
|
Waiting for updates! |
|
I will continue working on this in the next few days. I am hoping I add RTL support to as much components as I can before I open the PR again. Then we will have to wait for it to get merged. In the meantime, you may copy the RTL supported components from this PR. |
RTL support for almost all components in the registry.
Mainly replaced physical properties with logical properties and added
rtl:space-x-reversewherespace-x-*is used. In addition to using radix direction provider to return chevrons dynamically.This fixes #530
Up to date list of adjusted components:
"🔸" means the component didn't need any changes to be compatible with RTL layouts