LinearProgress and Switch should not be flipped in right-to-left themes

[Faraz1995]

RTL does not work correctly in progress bar and switch btns with styleProvider

hi
i use styleProvider for making rtl based on docs and everything works correct but linear progress bar and switch component are completely wrong and they are fliped
here is sandBox:
https://codesandbox.io/s/material-demo-forked-08r6g?file=/index.js

i would like switch button off state goes to left and progress bar start from left side

[mnajdova]

Does the issue still persist in v5? If so, please create a reproduction that we can look into.

[Faraz1995]

Does the issue still persist in v5? If so, please create a reproduction that we can look into.

unfortunately,yes
here is my update link:
https://codesandbox.io/s/material-demo-forked-08r6g?file=/package.json

[eps1lon]

i use styleProvider for making rtl based on docs and everything works correct but linear progress bar and switch component are completely wrong and they are fliped

So these components shouldn't be flipped in a right-to-left theme?

[Faraz1995]

yes, exactly
all of our design and ui is like that and lots of rtl web site is like that and should not flipped

[eps1lon]

I'm getting some mixed signals here. Reading the Material Design guidelines, the LinearProgress should be mirrored:

Progress bars fill in the same direction as content is read

-- https://material.io/design/usability/bidirectionality.html#mirroring-layout

unless LinearProgress is used for media progress:

Do not mirror media playback buttons and the media progress indicator as they refer to the direction of tape being played, not the direction of time.

-- https://material.io/design/usability/bidirectionality.html#mirroring-elements

I couldn't find anything about the Switch.

It seems like there's some more in-depth research required that goes beyond "our design is that way".

[oliviertassinari]

• On YouTube in an RTL language (Arabic in my screenshot), the linear progress is LTR, so is the Switch:

It seems that the right direction depends on the context, and so that it should be configurable with a prop.

• In Arrow Icons are not flipped in RTL #22726, there is a prior-art for adding a flipForRtl prop.

[eps1lon]

flipForRtl is a really bad prop name that's not in the spirit of React programming i.e. not declarative. As library authors, we should summarize when to not flip and name the prop to what it's rendering. Not how it should render it.

[jaikamat]

Hey folks, has this issue been claimed? Would love to work on it

[Faraz1995]

• On YouTube in an RTL language (Arabic in my screenshot), the linear progress is LTR, so is the Switch:

It seems that the right direction depends on the context, and so that it should be configurable with a prop.

• In Arrow Icons are not flipped in RTL #22726, there is a prior-art for adding a flipForRtl prop.

yes this is what we want in material rtl,
it would be perfect if we can change default behavior of rtl direction in material component

[hparra]

It would be nice to specify this at component level.
Wrapping LinearProgress in ThemeProvider works, but doesn't feel efficient.

I also naively tried the following:

<LinearProgress variant="determinate" value={67} sx={{
  direction: "rtl", 
}}/>

Since this is a custom component the otherwise valid CSS has no meaning to component's children. If you're okay with a hack, LinearProgress could read direction from sx and use that value to overwrite direction read from useTheme.