@material-ui/styles RTL support

[mbrevda]

Does the new ThemeProvider have full RTL support?

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

With RTL enabled TextFileds, including labels and placeholders, should be right aligned.

Current Behavior 😯

TextFileds seem left aligned

Steps to Reproduce 🕹

https://codesandbox.io/s/wq787oxnml

Your Environment 🌎

Tech	Version
Material-UI	v3.9.0
Material-UI styles	3.0.0-alpha.8
React	16.8.0-alpha.1

[oliviertassinari]

@mbrevda Yes, it does:

import React from "react";
import ReactDOM from "react-dom";
import { createMuiTheme } from "@material-ui/core/styles";
import { StylesProvider, ThemeProvider, jssPreset } from "@material-ui/styles";
import { create } from "jss";
import rtl from "jss-rtl";
import Demo from "./demo";

const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
const theme = createMuiTheme({
  direction: "rtl"
});

ReactDOM.render(
  <StylesProvider jss={jss}>
    <ThemeProvider theme={theme}>
      <Demo />
    </ThemeProvider>
  </StylesProvider>,
  document.querySelector("#root")
);

https://codesandbox.io/s/material-demo-3uhoj

We will have to upgrade the RTL guide documentation with v4.

[mbrevda]

Brilliant, thanks so much!

[eps1lon]

As I understand the commonet of @mbrevda this issue can be closed.

[mbrevda]

I thought this was staying open as a to-do for updating the docs?

Otherwise, my issue is resolved, thanks.

[oliviertassinari]

Yes, we will need to update the documentation.

[eps1lon]

I think https://material-ui.com/css-in-js/advanced/#jss-plugins is already covering this.

[oliviertassinari]

@eps1lon Yes, for @material-ui/core/styles, but not for @material-ui/styes.

[eps1lon]

The linked section is about @material-ui/styles. It is also discoverable by simply searching for rtl.

I think we can add a link to that section to https://material-ui.com/customization/css-in-js/#jss to improve discoverability.

[oliviertassinari]

https://material-ui.com/guides/right-to-left/

[eps1lon]

So we have one for core/styles and just styles. Looks good to me.

[oliviertassinari]

From my perspective, we only have a single true RTL documentation page, it's the guide, that is using the legacy styles module. The other references are incomplet, following them won't be enough.

[eps1lon]

I don't understand why not. Since our components are listening to the a custom theme then obviously people need to change the direction in that theme too. How to enable rtl with the styles package is already documented. How to provide the mui theme is documented. The full guide is documented and the parts that use core/styles are also documented in styles. Do you want to duplicate every documentation that is using core/styles with just styles?

[oliviertassinari]

Do you want to duplicate every documentation that is using core/styles with just styles?

No, I don't. It was a reminder to update the guide documentation once we release v4. Also, people often have a hard time to put all the pieces together. We often have to give them something working outside of the box.

However, we might not need it after all. We have another problem to solve, how do we handle the default theme? @material-ui/styles doesn't have a default theme. We could keep @material-ui/core/styles to encapsulate it.

[TrueMoein]

@mbrevda Yes, it does:

import "./bootstrap.js";
import React from "react";
import ReactDOM from "react-dom";
import { createMuiTheme } from "@material-ui/core/styles";
import { StylesProvider, ThemeProvider } from "@material-ui/styles";
import { create } from "jss";
import rtl from "jss-rtl";
import { jssPreset } from "@material-ui/core/styles";
import Demo from "./demo";

const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
const theme = createMuiTheme({
  typography: { useNextVariants: true },
  direction: "rtl"
});

ReactDOM.render(
  <StylesProvider jss={jss}>
    <ThemeProvider theme={theme}>
      <Demo />
    </ThemeProvider>
  </StylesProvider>,
  document.querySelector("#root")
);

https://codesandbox.io/s/kwowy9278v

We will have to upgrade the RTL guide documentation with v4.

Hi @oliviertassinari, can you test this example again? It seems not working now.
Thanks.

[oliviertassinari]

@TrueMoein I have updated my original comment to reflect how it should be done with v4, latest.

[aminesi]

Hi @oliviertassinari did you test your solution with typescript cause i get this error:

Argument of type '{ plugins: (Plugin | { onProcessStyle(style: any, rule: any, sheet: any): any; })[]; }' is not assignable to parameter of type 'Partial'.
Types of property 'plugins' are incompatible.
Type '(Plugin | { onProcessStyle(style: any, rule: any, sheet: any): any; })[]' is not assignable to type 'readonly JSSPlugin[]'.
Type 'Plugin | { onProcessStyle(style: any, rule: any, sheet: any): any; }' is not assignable to type 'JSSPlugin'.
Type 'Plugin' is not assignable to type 'JSSPlugin'.
Index signature is missing in type 'Plugin'

when i try to declare jss const. thanks

[Iamthewaseem]

You saved my life!!!!

[sadeghesfahani]

if you don't want to make the whole project right to left and you want to be able to change the direction dynamically, I have made a component to wrap your elements with it and make them direction sensitive, you can find it here:
https://github.com/sadeghesfahani/direction-sensitive-material-ui