Ng-zorro-antd: RTL Support

[saeedrahimi]

What problem does this feature solve?

Currently Ant-Design in v4 supports rtl in all components and demos, in this issue i want to add progress of making all components of ng-zorro-antd support rtl.

What does the proposed API look like?

dir: Direction = 'ltr';
constructor(
  private cdr: ChangeDetectorRef,
  @Optional() private directionality: Directionality
) {}

ngOnInit(): void {
  this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
    this.dir = direction;
    this.cdr.detectChanges();
  });

  this.dir = this.directionality.value;
}

  <div
    #tableMainElement
    class="ant-table"
    [class.ant-table-rtl]="dir === 'rtl'"
  >
</div>

RTL Progress #4703

• [x] Button
• [x] Icon
• [x] Typography
• [x] Grid
• [x] Layout
• [x] Affix
• [x] Breadcrumb
• [x] Dropdown
• [x] Menu
• [x] Pagination
• [x] PageHeader
• [x] Steps
• [x] AutoComplete
• [x] CheckBox
• [x] Cascader
• [x] DatePicker
• [x] Form: hdm91
• [x] InputNumber: hdm91
• [x] Input: hdm91
• [x] Mention
• [x] Rate
• [x] Radio
• [x] Switch
• [x] Slider: hdm91
• [x] Select
• [x] TreeSelect
• [x] Transfer: hdm91
• [x] TimePicker
• [x] Upload: hdm91
• [x] Avatar
• [x] Badge
• [x] Comment
• [x] Collapse: hdm91
• [x] Carousel
• [x] Card
• [ ] Calendar
• [x] Description List
• [x] Empty
• [x] List: hdm91
• [x] Popover
• [x] Statistic
• [x] Tree: hdm91
• [x] Tooltip
• [x] Timeline
• [x] Tag
• [x] Tabs: hdm91
• [x] Table
• [x] Alert: hdm91
• [x] Drawer
• [x] Modal: hdm91
• [x] Message
• [ ] Notification
• [x] Progress
• [x] Popconfirm
• [x] Result
• [x] Spin: hdm91
• [x] Skeleton
• [x] Anchor (No need to RTL)
• [x] BackTop
• [ ] ConfigProvider
• [x] Divider (No need to RTL)
• [ ] Front page

[zorro-bot[bot]]

Hello @saeedrahimi. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please fill the Pull Request Template here, provide documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @saeedrahimi, 我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请务必填写 Pull Request 内的预设模板，提供改动所需相应的测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

[wendellhu95]

Looking forward to it! Thank you very much.

[saeedrahimi]

@wendellhu95
Should i open pull-request for every component or do them all in one pull-request?

[wendellhu95]

@saeedrahimi You can do them all in a single pull-request. I guess that would save you some trouble?

[vthinkxie]

Hi @saeedrahimi

thanks for your pr a lot

we are refactoring some components these days, you may need to rebase on these components after that.

[saeedrahimi]

Hi @saeedrahimi

thanks for your pr a lot

we are refactoring some components these days, you may need to rebase on these components after that.

Thanks @vthinkxie
Is there any reference or issue that i can track refactored components and add rtl to them?
If i apply rtl before refactoring because of files renamed in refactoring and other changes, the process of rebase would be hard.

[vthinkxie]

Hi @saeedrahimi
there is a list here
https://github.com/NG-ZORRO/ng-zorro-antd/issues/4634

[mkzaker]

@saeedrahimi
آقا دمت گرم
چطوری می تونم بهت کمک کنم؟

[saeedrahimi]

@mkzaker
ممنونم.
فعلا که منتظرم کامپوننت ها توسط تیم توسعه دهنده بازنویسی بشن و کار کمی آهسته پیش میره

[hdm91]

Hi @saeedrahimi thanks for your participation in ng zorro RTL support , i will be happy to help you.

[behroozbc]

@saeedrahimi
اقا تو این تعطیلات چطور میتونیم کمکت کنیم بهمون بگو !!

[mkzaker]

@saeedrahimi
منم پایه ام و البته منتظر این نسخه

[saeedrahimi]

@saeedrahimi
اقا تو این تعطیلات چطور میتونیم کمکت کنیم بهمون بگو !!

@saeedrahimi
منم پایه ام و البته منتظر این نسخه

ممنون از لطف شما
اگر مایلید توی نوشتن تست‌ها کمک کنید
چون برخی کدها اضافه شده و
code coverage
پایین اومده

-
می‌دونم کسی که کد میزنه خودش باید تست هم بنویسه، اما فعلا بخاطر کانفیگ سیستمم در اجرای تست با مشکل مواجه هستم و تمام این تایمی که برای
ng-zorro
دارم رو سعی میکنم فقط
rtl
انجام بدم.

[HDaghash]

Thank you @saeedrahimi for supporting this any clue when this will be completed & released ?

Thanks again.

[Sina7312]

This is awesome, we really need it in our company. Is there any ETA on when this going to finish?
I'm also able to help if you need any help 👍

[renilbabu03]

@vthinkxie : Any idea when RTL will be available. It would be really helpful.

[abdelrahmannasr]

Any update about support RTL

[saeedrahimi]

I just need help on updating tests.

[HDaghash]

I just need help on updating tests.

could you please point me to the modules that have a missing test so I can contribute with you?

[HDaghash]

@vthinkxie thank you guys for all the effort of releasing version 10 , but I believe this is was a part of the milestone of version 10 to support RTL, is it postponed now or something?

[saeedrahimi]

Hi there,
Sorry for my long absence, i have been really busy.
.
recent changes:
rebased to last changes from master branch.

@hdm91 thanks for your efforts on adding RTL to some of remaining components, actually i cherry-picked your changes from your fork to mine in #4703.

[saeedrahimi]

I just need help on updating tests.

could you please point me to the modules that have a missing test so I can contribute with you?

Actually i'm struggling with tests and couldn't find any way to change direction (LTR | RTL) in test cases.

I've tried these methods and they didn't worked.

document.body.setAttribue("dir","rtl")
// OR
TestBed.overrideProvider(Directionality, {value:'rtl'})

I want is to increase coverage to pass codecov pipeline.

• Merging #4703 into master will decrease coverage by 1.00%.
  https://codecov.io/gh/NG-ZORRO/ng-zorro-antd/pull/4703?src=pr&el=tree

[saeedrahimi]

I just need help on updating tests.

could you please point me to the modules that have a missing test so I can contribute with you?

Actually i'm struggling with tests and couldn't find any way to change direction (LTR | RTL) in test cases.

I've tried these methods and they didn't worked.

document.body.setAttribue("dir","rtl")
// OR
TestBed.overrideProvider(Directionality, {value:'rtl'})

I want is to increase coverage to pass codecov pipeline.

* Merging #4703 into master will decrease coverage by 1.00%.
  https://codecov.io/gh/NG-ZORRO/ng-zorro-antd/pull/4703?src=pr&el=tree

Just found a way for changing direction ;-) https://github.com/NG-ZORRO/ng-zorro-antd/pull/4703/commits/478725d29dd6f82be3484c5dad97170eb0fedd17#

[vthinkxie]

Hi @saeedrahimi
good job
thanks a lot to your efforts!
we will start reviewing it once you finish the job

[HDaghash]

Hi @saeedrahimi
I'll try to contribute with the little remaining part :

• (message) depend on nzDirection global config.
• (back-to-top) same as the rest
• (card) handle RTL skeleton.
  https://github.com/HDaghash/ng-zorro-antd/pull/1/files

[hsuanxyz]

👋 Hi all,

I think it is too difficult to do this in one PR. So I suggest that we submit a PR for each completed components, and add a label to the components/**/doc/index.*.md file.

---
category: Components
type: General
title: Button
cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
+ rtl: true
---

This allows us to better track progress and prevent other PRs to make breaking changes.

@saeedrahimi @HDaghash what do you think about it?

[hsuanxyz]

By the way, we can merge these PRs in any version without having to wait for all components to finish.

[HDaghash]

By the way, we can merge these PRs in any version without having to wait for all components to finish.

I agree with that , specially @saeedrahimi almost done with most of the components so much better to merge the done part instead of keep waiting for the little remaining components.