Setting css direction to rtl will break the switch design

[ccpu]

hi there,

Thank you very much for this component, this is the only one I have found with all the necessary options.

Unfortunately, I have found one problem with this component; setting the css 'direction:rtl' of the switch container will break the switch design:

wondering if you have any suggestion for this problem.

Thanks,

[markusenglund]

Well, that doesn't look so good. Ok, so what you could do is set the style for the toggle switch itself to direction: ltr by giving it a className like this:

<Switch
  onChange={this.handleChange}
  checked={this.state.checked}
  className="react-switch"
/>

.react-switch {
  direction: ltr;
}

Though maybe you want the toggle switch to flip direction entirely? I don't know if that is how it should work in rtl languages. It's not possible right now anyway, but could probably be implemented if it was a feature that people requested.

[ccpu]

Thanks for the suggestion, as you have mentioned I want to flip the direction entirely, i did try rotation and it did work, however, it's a bit awkward. If it's not possible right now that's fine. I thought maybe it's an easy fix. Should I leave the issue open for voting? if not feel free to close the issue.

Thanks,

[markusenglund]

Let's keep it open for now. I'm gonna see if I can fix it later.

[skoch]

Leaving my 2¢: the proposed solution works just fine for me even when using css modules. Ideally, yes, it would "flip" however more important to me is that the overall design isn't breaking for RTL langs.

<Switch
  // ...
  className={style.reactSwitch}
/>

html[dir="rtl"] {
  .reactSwitch {
    direction: ltr;
  }
}

Thanks!

[markusenglund]

In 5.0.0 which was just released the direction:ltr style is included by default so the UI will no longer be broken in rtl-sites. I think that actually making the switch go the other direction would be too complicated to implement and maintain so I'm closing the issue now.