Skip to content

Refactor directional classes for RTL support#3

Merged
pasqualevitiello merged 4 commits intocosscom:mainfrom
iftachhh:main
Oct 22, 2024
Merged

Refactor directional classes for RTL support#3
pasqualevitiello merged 4 commits intocosscom:mainfrom
iftachhh:main

Conversation

@iftachhh
Copy link
Copy Markdown
Contributor

This PR refactors all directional class names (pr-*, pl-*, mr-*, ml-*, left-*, right-*, etc) to contextual equivalents (pe-*, ps-*, me-*, ms-*, start-*, end-*, etc) to better support RTL languages like Hebrew and Arabic. By making these classes directionally agnostic, the layout will adjust dynamically based on text direction, improving flexibility and localization.

BEFORE (demo page with dir=rtl):

before

AFTER:

after

@vercel
Copy link
Copy Markdown

vercel Bot commented Oct 16, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
origin-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 22, 2024 11:40am

@yishayhaz
Copy link
Copy Markdown

+1
Very useful and should be a standard practice in every UI library!

@pasqualevitiello
Copy link
Copy Markdown
Contributor

Hey @yishayhaz, I've just merged your PR. Thanks a lot for contributing!

@yishayhaz
Copy link
Copy Markdown

It's not mine! credit goes to @iftachhh 🙌

@pasqualevitiello
Copy link
Copy Markdown
Contributor

Sure! 🤦 Thanks @iftachhh!

@nahasco
Copy link
Copy Markdown

nahasco commented Oct 29, 2024

Why force input 46 (Phone number input) to ltr?

@pasqualevitiello
Copy link
Copy Markdown
Contributor

Fixed 4741f92

@nahasco
Copy link
Copy Markdown

nahasco commented Oct 29, 2024

Fixed 4741f92

@iftachhh might have set it to ltr intentionally. I see he didn't adjust the border radius and margins to support rtl when the component is in rtl.

@pasqualevitiello
Copy link
Copy Markdown
Contributor

@iftachhh can you please confirm?

@iftachhh
Copy link
Copy Markdown
Contributor Author

iftachhh commented Oct 30, 2024

Hey @nahasco @pasqualevitiello , I intentionally forced the phone number input to be left-to-right as the preliminary dropdown is for the country code which will always be left to the phone number, also in Arabic and Hebrew. It is in fact may be problematic as the direction applies also to the label and all the elements surrounding the field so I'll try later to revise it and cover it as well.

@pasqualevitiello
Copy link
Copy Markdown
Contributor

Thanks for confirming @iftachhh, ltr property was just restored: 6ac4ffa

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants