Support for RTL

[eelior]

Hey guys, the built it support for translating the UI is perfect! How can I also change the UI direction to RTL? (Right-to-Left, for langueges such as Hebrew and Arabic)

[eelior]

I had unsuccessful quick try to add RTL support. I tried both ways mentioned in the Chakra-UI docs: https://chakra-ui.com/docs/styled-system/rtl-support#using-rtl-stylis-plugin

The farthest I have come was with the first method in the docs and it only helped me changing the direction of the two first buttons from the demo:

But it didnt work for the component itself that stayed the same.

Check it out here: https://github.com/eelior/react-spreadsheet-import/tree/master-rtl-support

[masiulis]

Hey @eelior, I did a quick check, you can add this to theme

  customTheme={{
      Modal: {
      baseStyle: {
        dialog: {
          direction: "rtl",
        },
      },
    },
}}

With the table we are using (https://github.com/adazzle/react-data-grid) it's a bit more complicated - we need to pass a prop direction="rtl", so we would have to expose this in our props.

The end result would look like this:

Is this something close to what you are trying to achieve?

[eelior]

@masiulis This looks perfect!! I over complicated this, I'm happy to see its so easy with the customTheme prop. Ill try to make you a PR for the table later this evening.

[masiulis]

rtl prop is available. Closing this as there should solve the discussed problem.