mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.15k stars 32.08k forks source link

[Pagination] on table pagination row info is not in correct order on RTL #35169

Open yaredtsy opened 1 year ago

yaredtsy commented 1 year ago

Duplicates

Latest version

Steps to reproduce 🕹

Link to live example: https://mui.com/material-ui/react-pagination/#table-pagination

Steps:

  1. change the direction of the page to RTL
  2. it should have been 100 of 30-21 image

Current behavior 😯

image

Expected behavior 🤔

100 of 30-21

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```
JonasTeixeira42 commented 1 year ago

Hello guys! Can I try and solve this issue? @ZeeshanTamboli

JonasTeixeira42 commented 1 year ago

I think this is happening because the page is set to "RTL", but the English text is "LTR" by default. That's why is displaying the label incorrectly since there are no "RTL" characters in the sentence to change the direction of the surrounding text.

ZeeshanTamboli commented 1 year ago

@JonasTeixeira42 Please go ahead.

mnajdova commented 1 year ago

Before doing a fix, did you tested if the issue is happening with a language that is a right to left language? You can use some of the localizations. I expect that it would work as intended.

JonasTeixeira42 commented 1 year ago

@mnajdova Yesterday, I tested every language that MUI supports. The majority works as expected when the direction of the screen is the same as the language (e.g when the text is in English and the direction is LTR). I've found some cases that I don't know whether it's a bug or not, but I put the results of the tests below so that you guys can decide it.

JonasTeixeira42 commented 1 year ago

RTL Languages

:white_check_mark: arEG - displays correctly when direction RTL :white_check_mark: arSA - displays correctly when direction RTL :white_check_mark: arSD - displays correctly when direction RTL :white_check_mark: bnBD - displays correctly when direction RTL :white_check_mark: heIL - displays correctly when direction RTL :x: faIR - displays incorrectly when direction RTL, since of and of more than text is displayed in English (of 1 1-21 | of more than 30 30-21) and the direction is RTL :white_check_mark: urPK - displays correctly when direction RTL

JonasTeixeira42 commented 1 year ago

LTR Languages (Part-1)

:x: hyAM - displays correctly when direction LTR, but of and of more text is displayed in English (of 1 1-21 | of more than 30 30-21) :x: azAZ - displays correctly when direction LTR, but of and of more text is displayed in English (of 1 1-21 | of more than 30 30-21) :x: caES - displays correctly when direction LTR, but of and of more text is displayed in English (of 1 1-21 | of more than 30 30-21) :x: bgBG - displays correctly when direction LTR, but of and of more text is displayed in English (of 1 1-21 | of more than 30 30-21) :white_check_mark: zhHK - displays correctly when direction LTR - 第 21 項至第 10 項,共 10 項 | 第 21 項至第 30 項,超過 30 項 :white_check_mark: zhCN - displays correctly when direction LTR - 第 21 条到第 10 条,共 10 条 | 第 21 条到第 30 条,至少 30 条 :white_check_mark: zhTW - displays correctly when direction LTR - 21 ~ 10 / 10 | 21 ~ 30 / 30 以上 :white_check_mark: hrHR - displays correctly when direction LTR - 21–1 od 1 | 21–30 od više nego 30 :white_check_mark: csCZ - displays correctly when direction LTR - 21–1 z 1 | 21–30 z více než 30 :white_check_mark: daDK - displays correctly when direction LTR - 21-1 af 1 | 21-30 af mere end 30 :white_check_mark: nlNL - displays correctly when direction LTR - 21–1 van 1 | 21–30 van meer dan 30 :white_check_mark: enUS - displays correctly when direction LTR - 21–30 of 30 | 21–30 of more than 30 :white_check_mark: etEE - displays correctly when direction LTR - 21–1 / 1 | 21–30 / rohkem kui 30 :white_check_mark: fiFI - displays correctly when direction LTR - 21–1 / 1 | 21–30 / enemmän kuin 30 :white_check_mark: frFR - displays correctly when direction LTR - 21–1 sur 1 | 21–30 sur plus que 30 :white_check_mark: deDE - displays correctly when direction LTR - 21–1 von 1 | 21–30 von mehr als 30 :white_check_mark: elGR - displays correctly when direction LTR - 21–1 από 1 | 21–30 από πάνω από 30 :white_check_mark: hiIN - displays correctly when direction LTR - 21-1 कुल 1 में | 21-30 कुल -1 में :x: huHU - displays correctly when direction LTR - but of and of more text is displayed in English (of 1 1-21 | of more than 30 30-21) :x: isIS - displays correctly when direction LTR - but of and of more text is displayed in English (of 1 1-21 | of more than 30 30-21) :x: idID - displays correctly when direction LTR - but of and of more text is displayed in English (of 1 1-21 | of more than 30 30-21) :white_check_mark: itIT - displays correctly when direction LTR - 21–1 di 1 | 21–30 di più di 30

JonasTeixeira42 commented 1 year ago

LTR Languages (Part-2)

:white_check_mark: jaJP - displays correctly when direction LTR - 21~1 / 1 | 21~30 / 30以上 :white_check_mark: khKH - displays correctly when direction LTR - 21 - 1 នៃ 1 | 21 - 30 នៃ ច្រើនជាង 30 :white_check_mark: kkKZ - displays correctly when direction LTR - 1 қатардың ішінен 21–1 | +30 қатардың ішінен 21–30 :white_check_mark: koKR - displays correctly when direction LTR - 21–1 / 1 | 21–30 / 30개 이상 :white_check_mark: mkMK - displays correctly when direction LTR - 21–1 од 1 | 21–30 од повеќе од 30 :white_check_mark: nbNO - displays correctly when direction LTR - 21–1 av 1 | 21–30 av mer enn 30 :white_check_mark: plPL - displays correctly when direction LTR - 21–1 z 1 | 21–30 z ponad 30 :white_check_mark: ptPT - displays correctly when direction LTR - 21–1 de 1 | 21–30 de mais de 30 :white_check_mark: ptBR - displays correctly when direction LTR - 21–1 de 1 | 21–30 de mais de 30 :x: roRO - displays correctly when direction LTR, but of and of more text is displayed in English (of 1 1-21 | of more than 30 30-21) :white_check_mark: ruRU - displays correctly when direction LTR - 21–1 из 1 | 21–30 из более чем 30 :white_check_mark: srRS - displays correctly when direction LTR - 21–1 od 1 | 21–30 od više nego 30 :white_check_mark: siLK - displays correctly when direction LTR - 21–1 දක්වා 1 | 21–30 දක්වා 30 ට වැඩි ප්‍රමාණයකින් :white_check_mark: skSK - displays correctly when direction LTR - 21–1 z 1 | 21–30 z viac ako 30 :white_check_mark: esES - displays correctly when direction LTR - 21–1 de 1 | 21–30 de más de 30 :white_check_mark: svSE - displays correctly when direction LTR - 21–1 av 1 | 21–30 av fler än 30 :white_check_mark: thTH - displays correctly when direction LTR - 21–1 จาก 1 | 21–30 จาก มากกว่า 30 :x: trTR - displays correctly when direction LTR, but of and of more text is displayed in english (of 1 1-21 | of more than 30 30-21) :white_check_mark: ukUA - displays correctly when direction LTR - 21–1 з 1 | 21–30 з понад 30 :white_check_mark: viVN - displays correctly when direction LTR - 21–1 trong 1 | 21–30 trong nhiều hơn 30

JonasTeixeira42 commented 1 year ago

I was not able to put the result of the labels in RTL languages because I use an LTR text editor, so the characters went crazy. If you guys don't understand something please tell me and I'll do my best to answer.

mnajdova commented 1 year ago

So looks like this string is not translated in all locales. I guess we can start there :)

JonasTeixeira42 commented 1 year ago

@mnajdova, a quick question. This issue is related to the English language and it displays correctly when LTR. Do you think it's better to close the issue since it's working fine in English and open another one about the wrong translations or we keep it open and work on it?