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.

Sign up for GitHub

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

Jump to bottom

[v5] Does not work with RTL with nested selectors #24899

Closed
2 tasks done
acomanescu opened this issue Feb 13, 2021 · 4 comments
Closed
2 tasks done

[v5] Does not work with RTL with nested selectors #24899

acomanescu opened this issue Feb 13, 2021 · 4 comments
Labels
bug 🐛 Something doesn't work external dependency Blocked by external dependency, we can’t do anything about it package: styled-engine Specific to @mui/styled-engine

Comments

@acomanescu
Copy link

acomanescu commented Feb 13, 2021 •
edited by oliviertassinari
Loading

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

On version 5.0.0-alpha.25, when using RTL with emotion strategy Grid component does is affected. Negative margins push the grid content outside of Card component and gets cut out.

Expected Behavior 🤔

Should remain visually as LTR mode.

Steps to Reproduce 🕹

Steps:

  1. Open https://next.material-ui.com/components/grid/#main-content
  2. Go to settings (top bar) and change to "Right to Left"
  3. View examples
@acomanescu acomanescu added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 13, 2021
@oliviertassinari
Copy link
Member

We depend on styled-components/stylis-plugin-rtl#22.

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work external dependency Blocked by external dependency, we can’t do anything about it package: styled-engine Specific to @mui/styled-engine and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 13, 2021
@oliviertassinari oliviertassinari changed the title Grid component does not work with RTL [Grid] Does not work with RTL Feb 13, 2021
@oliviertassinari oliviertassinari changed the title [Grid] Does not work with RTL [v5] Does not work with RTL with nested selectors Mar 3, 2021
@oliviertassinari oliviertassinari mentioned this issue Mar 3, 2021
Closed
2 tasks
@mnajdova mnajdova mentioned this issue Apr 8, 2021
Merged
@mnajdova
Copy link
Member

mnajdova commented Apr 8, 2021

Is this still broken? I could not notice anything on the prod version. Anyway, I prepared #25661 for updating the stylis-plugin-rtl dependency.

@mnajdova
Copy link
Member

mnajdova commented Apr 9, 2021

Update the stylis-plugin-rtl to version 2.0.2 which includes the fix styled-components/stylis-plugin-rtl#21 that will resolve the issue

@mnajdova mnajdova closed this as completed Apr 9, 2021
@oliviertassinari
Copy link
Member

Great 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 Something doesn't work external dependency Blocked by external dependency, we can’t do anything about it package: styled-engine Specific to @mui/styled-engine
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@oliviertassinari @mnajdova @acomanescu