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

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

[zorro-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，提前感谢和期待您的贡献！

[wzhudev]

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?

[wzhudev]

@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
#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 feat(module:all): Add RTL support to all ng-zorro-antd #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 ;-) 478725d

[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.