feat: added rtl direction to all of ant-design components #19380

saeedrahimi · 2019-10-23T12:34:46Z

🤔 This is a ...

🔗 Related issue link

Previous pull request was on feature branch: #18006

💡 Background and solution

As requirement of this issue components of ant-design doesn't support right to left direction, and those components are not useful in some languages like Persian(Farsi) or Arabic.

Solution:
I started to develop Rtl style on ant-design and as @zombieJ mentioned in issue i used ConfigProvider to set direction of component.

direction property added to ConfigProvider.

<ConfigProvider direction="rtl">
      <Cascader  options={options} placeholder="select an item"/>
</ConfigProvider>

in style files added prefixed rtl styles to change direction of displayed items

  .@{inputClass}-suffix {
    right: @input-padding-horizontal-base + 1px;

    .@{inputClass}-rtl & {
      right: auto;
      left: @input-padding-horizontal-base + 1px;
    }
  }

so when RTL'ed components wrapped by ConfigProvider with direction='rtl' property, all child components (also grid-system) will shown in right-to-left direction.

RTL Progress

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

View rendered components/config-provider/demo/direction.md
View rendered components/config-provider/index.en-US.md
View rendered components/config-provider/index.zh-CN.md

tests-checker

Could you please add tests to make sure this change works as expected?

buildsize · 2019-10-23T12:39:03Z

File name	Previous Size	New Size	Change
package-lock.json	981.54 KB	977.33 KB	-4.22 KB (0%)

netlify · 2019-10-23T12:42:55Z

Deploy preview for ant-design ready!

Built with commit 9c56ca7

https://deploy-preview-19380--ant-design.netlify.com

codecov · 2019-10-23T12:52:10Z

Codecov Report

Merging #19380 into 4.0-prepare will increase coverage by 0.04%.
The diff coverage is 100%.

@@               Coverage Diff               @@
##           4.0-prepare   #19380      +/-   ##
===============================================
+ Coverage        97.49%   97.54%   +0.04%     
===============================================
  Files              294      294              
  Lines             6716     6771      +55     
  Branches          1847     1862      +15     
===============================================
+ Hits              6548     6605      +57     
+ Misses             168      166       -2

Impacted Files	Coverage Δ
components/config-provider/index.tsx	`91.66% <ø> (ø)`	⬆️
components/tree-select/index.tsx	`97.43% <ø> (ø)`	⬆️
components/config-provider/context.tsx	`100% <ø> (ø)`	⬆️
components/menu/MenuContext.tsx	`100% <ø> (ø)`	⬆️
components/pagination/Pagination.tsx	`100% <100%> (ø)`	⬆️
components/radio/radio.tsx	`100% <100%> (ø)`	⬆️
components/badge/index.tsx	`100% <100%> (ø)`	⬆️
components/table/Table.tsx	`96.55% <100%> (+0.02%)`	⬆️
components/menu/MenuItem.tsx	`94.73% <100%> (+0.29%)`	⬆️
components/descriptions/index.tsx	`98.92% <100%> (ø)`	⬆️
... and 51 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f88f383...9c56ca7. Read the comment docs.

saeedrahimi · 2019-10-23T13:19:11Z

I have no idea why lint fails, there is no error on my environment.
Windows 10 v17134.1069
@zombieJ

zombieJ · 2019-10-24T08:06:22Z

@typescript-eslint/parser failed with markdown at 2.5.0. It's OK if not other lint failed without markdown file:

ref typescript-eslint/typescript-eslint#1123

mahdi13 · 2019-10-29T10:40:05Z

@saeedrahimi I check this page every day! Kindly ask you to finish it.

zombieJ · 2019-10-30T08:35:22Z

@saeedrahimi,
4.0-prepare synced with master. Some conflict need rebase 4.0-prepare. Thanks.

saeedrahimi · 2019-10-31T11:56:53Z

@afc163 , @zombieJ
Hi there,

I thought that config-provider demo page is not suitable to demonstrate all rtl components and their functionality in rtl direction.
so i added a button to header that changes direction of the whole demo and updated some styles of site/theme to support rtl properly.
I just wanted to know your idea about these changes. is it ok to continue with this?
I wanna do my best.
Thanks.

yoyo837 · 2019-11-01T06:32:36Z

Great works, I hope that the owner can pay enough attention to this and like your contribution.

zombieJ · 2019-11-04T02:03:15Z

@afc163 , @zombieJ
Hi there,

I thought that config-provider demo page is not suitable to demonstrate all rtl components and their functionality in rtl direction.
so i added a button to header that changes direction of the whole demo and updated some styles of site/theme to support rtl properly.
I just wanted to know your idea about these changes. is it ok to continue with this?
I wanna do my best.
Thanks.

Cool. I'm OK with this if all the components support RTL.

yoyo837 · 2019-11-12T10:33:59Z

Note that some components have been refactored to a new major version in 4.0-prepare branch. And there are other components that are also planned to be refactored.

saeedrahimi · 2019-11-12T13:40:20Z

Note that some components have been refactored to a new major version in 4.0-prepare branch. And there are other components that are also planned to be refactored.

thanks for note, i will double check them to ensure components working correctly.

saeedrahimi · 2020-01-02T10:43:27Z

Hi,
There is an issue in the menu component style. the border of the menu must be at the left side.
please check this one

border is in the left side in ltr direction. so it should be in right side in rtl direction.
border should not be outside of sidebar

saeedrahimi · 2020-01-02T10:45:38Z

Thank you @zombieJ for fixing my mistakes 👍

yoyo837 · 2020-01-02T17:28:13Z

Amazing works！

vahidalvandi · 2020-01-02T19:01:43Z

thank you how i can use this in nuxt and vue?

afc163 · 2020-01-03T02:28:05Z

Is this header misordered?

saeedrahimi · 2020-01-03T10:52:34Z

Is this header misordered?

I think @zombieJ fixed it in this commit cause i see header in correct order in next.ant.design

afc163 · 2020-01-03T10:54:59Z

Could you help to fix it to correct order?

saeedrahimi · 2020-01-03T11:01:22Z

Could you help to fix it to correct order?

Is there any misordered item? 🤔

ZombieJ fixed that.

zombieJ · 2020-01-03T12:16:12Z

That's fine. I've resolved.

PejmanNik · 2020-01-28T19:35:28Z

Amazing work @vahidalvandi ❤
I just find a bug, the ant-col-rtl broken all :not([class^='ant-col-']):not([class*=' ant-col-']) selectors

yoyo837 · 2020-01-29T06:46:05Z

@PejmanNik Feel free to open a new issue about that.

adirrapidapi · 2020-04-29T20:59:10Z

how to make Sider in right side (rtl)?

xrkffgg · 2020-04-30T01:09:53Z

how to make Sider in right side (rtl)?

@adirrapidapi
You can use https://ant.design/components/config-provider-cn/#components-config-provider-demo-direction to set rtl, so the base Slider can be in right side.
or https://ant.design/components/slider-cn/#components-slider-demo-reverse in ltr

adirrapidapi · 2020-04-30T07:02:32Z

@xrkffgg I added with configProvider the rtl direction but the sider it's still in left side, as you can see in this example https://stackblitz.com/edit/react-ouxpra-trwwbf?embed=1&file=index.js

adirrapidapi · 2020-05-05T13:09:10Z

@xrkffgg any solution?

xrkffgg · 2020-05-07T00:58:33Z

@xrkffgg any solution?

sorry, I just saw. I'll fix it.

mehdiraized · 2020-07-18T06:56:14Z

@saeedrahimi i have issue on nextjs

Warning: Prop `className` did not match. Server: "ant-badge ant-badge-rtl" Client: "ant-badge"

xrkffgg · 2020-07-18T07:05:00Z

@mehdiraized Please create new issue https://github.com/ant-design/ant-design/issues/new/choose

auto-add-label bot added the enhancement label Oct 23, 2019

pr-triage bot added the PR: unreviewed label Oct 23, 2019

tests-checker bot suggested changes Oct 23, 2019

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Oct 23, 2019

saeedrahimi mentioned this pull request Oct 23, 2019

feat: added rtl direction to ConfigProvider and some components #18006

Closed

14 tasks

afc163 added the 4.x In Ant Design 4.0 label Oct 23, 2019

afc163 assigned zombieJ Oct 23, 2019

pr-triage bot added the PR: unreviewed label Oct 23, 2019

afc163 mentioned this pull request Oct 29, 2019

feat(module:style): added rtl support to input #19194

Closed

14 tasks

saeedrahimi force-pushed the ant-rtl branch from db6d286 to e1cd07c Compare October 30, 2019 09:36

saeedrahimi requested a review from zombieJ as a code owner October 30, 2019 09:36

saeedrahimi mentioned this pull request Nov 2, 2019

Implemented rtl layout support react-component/menu#296

Merged

weekly-digest bot mentioned this pull request Nov 3, 2019

Weekly Digest (27 October, 2019 - 3 November, 2019) #19538

Closed

saeedrahimi changed the title ~~feat: added rtl direction to ConfigProvider and some components~~ [WIP] feat: added rtl direction to ConfigProvider and some components Nov 5, 2019

saeedrahimi changed the base branch from 4.0-prepare to feature November 11, 2019 20:11

saeedrahimi changed the base branch from feature to 4.0-prepare November 11, 2019 20:12

yoyo837 mentioned this pull request Nov 12, 2019

Adding both RTL and LTR support #19685

Closed

14 tasks

zombieJ added 2 commits January 2, 2020 18:07

chore: Adjust menu use rtl logic

0376624

docs: Update demo line color

9c56ca7

zombieJ merged commit 676de29 into ant-design:4.0-prepare Jan 2, 2020

pr-triage bot added the PR: merged label Jan 2, 2020

afc163 mentioned this pull request Jan 3, 2020

Fix rtl docs: aside and bottom nav #20652

Merged

14 tasks

wzhudev mentioned this pull request Jan 3, 2020

Adding support for RTL NG-ZORRO/ng-zorro-antd#1762

Closed

afc163 mentioned this pull request Feb 18, 2020

Select and Cascader allow set arrow position #18950

Closed

1 task

yoyo837 mentioned this pull request Mar 16, 2020

Add rtl.less for all components #22239

Closed

43 tasks

xrkffgg mentioned this pull request May 7, 2020

style: optimize layout rtl #23921

Merged

14 tasks

mehdiraized mentioned this pull request Jul 18, 2020

Prop className did not match. Server in Nextjs #25688

Closed

1 task

gtb104 mentioned this pull request Jul 15, 2021

Remove unnecessary line-height setting for Radio #31421

Merged

19 tasks

petercat-assistant bot mentioned this pull request Jan 12, 2025

Collapse/Sider expand icon has wrong direction in RTL #52371

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: added rtl direction to all of ant-design components #19380

feat: added rtl direction to all of ant-design components #19380

saeedrahimi commented Oct 23, 2019 •

edited

Loading

tests-checker bot left a comment

buildsize bot commented Oct 23, 2019 •

edited

Loading

netlify bot commented Oct 23, 2019 •

edited

Loading

codecov bot commented Oct 23, 2019 •

edited

Loading

saeedrahimi commented Oct 23, 2019 •

edited

Loading

zombieJ commented Oct 24, 2019

mahdi13 commented Oct 29, 2019

zombieJ commented Oct 30, 2019

saeedrahimi commented Oct 31, 2019 •

edited

Loading

yoyo837 commented Nov 1, 2019 •

edited

Loading

zombieJ commented Nov 4, 2019

yoyo837 commented Nov 12, 2019

saeedrahimi commented Nov 12, 2019

saeedrahimi commented Jan 2, 2020

saeedrahimi commented Jan 2, 2020

yoyo837 commented Jan 2, 2020

vahidalvandi commented Jan 2, 2020 •

edited

Loading

afc163 commented Jan 3, 2020

saeedrahimi commented Jan 3, 2020

afc163 commented Jan 3, 2020

saeedrahimi commented Jan 3, 2020

zombieJ commented Jan 3, 2020

PejmanNik commented Jan 28, 2020

yoyo837 commented Jan 29, 2020

adirrapidapi commented Apr 29, 2020

xrkffgg commented Apr 30, 2020 •

edited

Loading

adirrapidapi commented Apr 30, 2020

adirrapidapi commented May 5, 2020

xrkffgg commented May 7, 2020

mehdiraized commented Jul 18, 2020

xrkffgg commented Jul 18, 2020

feat: added rtl direction to all of ant-design components #19380

feat: added rtl direction to all of ant-design components #19380

Conversation

saeedrahimi commented Oct 23, 2019 • edited Loading

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

RTL Progress

📝 Changelog

☑️ Self Check before Merge

tests-checker bot left a comment

Choose a reason for hiding this comment

buildsize bot commented Oct 23, 2019 • edited Loading

netlify bot commented Oct 23, 2019 • edited Loading

codecov bot commented Oct 23, 2019 • edited Loading

Codecov Report

saeedrahimi commented Oct 23, 2019 • edited Loading

zombieJ commented Oct 24, 2019

mahdi13 commented Oct 29, 2019

zombieJ commented Oct 30, 2019

saeedrahimi commented Oct 31, 2019 • edited Loading

yoyo837 commented Nov 1, 2019 • edited Loading

zombieJ commented Nov 4, 2019

yoyo837 commented Nov 12, 2019

saeedrahimi commented Nov 12, 2019

saeedrahimi commented Jan 2, 2020

saeedrahimi commented Jan 2, 2020

yoyo837 commented Jan 2, 2020

vahidalvandi commented Jan 2, 2020 • edited Loading

afc163 commented Jan 3, 2020

saeedrahimi commented Jan 3, 2020

afc163 commented Jan 3, 2020

saeedrahimi commented Jan 3, 2020

zombieJ commented Jan 3, 2020

PejmanNik commented Jan 28, 2020

yoyo837 commented Jan 29, 2020

adirrapidapi commented Apr 29, 2020

xrkffgg commented Apr 30, 2020 • edited Loading

adirrapidapi commented Apr 30, 2020

adirrapidapi commented May 5, 2020

xrkffgg commented May 7, 2020

mehdiraized commented Jul 18, 2020

xrkffgg commented Jul 18, 2020

saeedrahimi commented Oct 23, 2019 •

edited

Loading

buildsize bot commented Oct 23, 2019 •

edited

Loading

netlify bot commented Oct 23, 2019 •

edited

Loading

codecov bot commented Oct 23, 2019 •

edited

Loading

saeedrahimi commented Oct 23, 2019 •

edited

Loading

saeedrahimi commented Oct 31, 2019 •

edited

Loading

yoyo837 commented Nov 1, 2019 •

edited

Loading

vahidalvandi commented Jan 2, 2020 •

edited

Loading

xrkffgg commented Apr 30, 2020 •

edited

Loading