Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add rtl support to components #79

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

LowLevelLover
Copy link

@LowLevelLover LowLevelLover commented Feb 19, 2023

replace right with end and left with start to support rtl languages.
To have this ability in tailwind I use tailwindcss-rtl package.

@mihar-22
Copy link
Contributor

Hey @FarzinVatani!

  • There's a minor issue in that [dir="ltr"] is not applied to the <html> tag so the CSS selectors that rely on that being present don't work. I think we can safely remove it from selectors as [dir="rtl"] will overwrite.
  • I haven't investigated but popovers have stopped working correctly. It might have to do with margin/padding property changes. You can test this by shrinking the page and clicking the hamburger in the top right.

If you can resolve those then we can get this merged. Thanks!

@LowLevelLover
Copy link
Author

Ok I will remove all ltr prefixes as rtl overwrite them.

@LowLevelLover
Copy link
Author

LowLevelLover commented Feb 20, 2023

Hey @mihar-22

I have been trying to handle margins, paddings, etc. but it could add some complexity.

For example:

<div class="mr-4 rtl:mr-0 rtl:ml-4" /> I should reset mr
<div class="mr-2 ml-4 rtl:mr-4 rtl:ml-2 1280:mr-3 1280:rtl:mr-2 1280:rtl:ml-3 1440:mr-4 1440:rtl:mr-2 1440:rtl:ml-4" /> I sould reset all right-left values in breakpoints to previous one.

UPDATE: I think we could warn users to use dir="ltr" in html tag in changelog info.

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.

2 participants