Label Text left aligned when dir=rtl

[mbrevda]

When using a RTL language, the label text seems to still be left aligned.

• I have searched the issues of this repository and believe that this is not a duplicate. This is also apparently NOT related to [InputLabel] Fix transformOrigin when direction=rtl #9007 (comment). cc @alitaheri who might know more about this!

Expected Behavior

Label text should be right aligned when dir="rtl"

Current Behavior

Label text is always left aligned:

dir="ltr"	dir="rtl"

Steps to Reproduce (for bugs)

Here is a minimal demo: https://942ywwnk4w.codesandbox.io/

Context

My labels are showing on misaligned, as per the screenshot above.

Inspecting the styles shows the text is `transform`ed to `top left` instead of `top right`

.MuiInputLabel-formControl-188 {
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(0, 23px) scale(1);
}

.MuiInputLabel-root-187 {
    transform-origin: top left;
}

Your Environment

Tech	Version
Material-UI	beta.22
React	16.1
browser	Chrome

[alitaheri]

Make sure you've properly set up rtl for material-ui ( you can find it in the docs ). I'm sure you haven't properly set up rtl support. The docs are working properly when rtl.

[oliviertassinari]

@alitaheri I think he has: https://codesandbox.io/s/m5nl4547yp

[oliviertassinari]

Wait, the demo is all broken.

[oliviertassinari]

I think we can close, the demo is invalid, plus it's working on the documentation side:

[mbrevda]

Can you elaborate about what is invalid in the demo?

[oliviertassinari]

@mbrevda You need to follow the steps of the documentation: https://material-ui.com/guides/right-to-left/

[mbrevda]

I did step 1 2 & 3 seem to apply only for custom themes? Or did I misunderstand?

[oliviertassinari]

@mbrevda No, 3 has nothing to do with the theme. But you need a custom theme for 2.

[mbrevda]

this has nothing to do with the theme.

Indeed. I found the instructions confusing. Thanks!

[mbrookes]

@mbrevda Since you've been through the exercise, please could you submit a small PR to clarify the docs in the area you found confusing? It would help us and everyone else. 👍

[mbrevda]

I was thinking of a RTL component that would alleviate a lot of the pain. I'm not familiar enough with either jss or this project, but I put something together for myself. It seems a component (if doable/scalable) would be a lot simpler?

…

On Wed, Nov 29, 2017, 9:49 PM Matt Brookes ***@***.***> wrote: @mbrevda <https://github.com/mbrevda> Since you've been through the exercise, please could you submit a small PR to clarify the docs in the area you found confusing? It would help us and everyone else. 👍 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9332 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAR4jBj6hyhdSyYlColNcUjDnkuhxDmNks5s7bVVgaJpZM4QvE8o> .