Material-ui: Label Text left aligned when dir=rtl

[mbrevda]

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

• [x] I have searched the issues of this repository and believe that this is not a duplicate. This is also apparently NOT related to https://github.com/mui-org/material-ui/pull/9007#issuecomment-347857227. 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 transformed 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-next.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 [e-mail] 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
https://github.com/mui-org/material-ui/issues/9332#issuecomment-347975420,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAR4jBj6hyhdSyYlColNcUjDnkuhxDmNks5s7bVVgaJpZM4QvE8o
.