RTL direction support via properties panel (revised)

bpmn-io / form-js

View and visually edit JSON-based forms.

https://bpmn.io/toolkit/form-js/

Other

419 stars 109 forks source link

RTL direction support via properties panel (revised) #1213

Open okaeiz opened 5 months ago

okaeiz commented 5 months ago

Has worked on https://github.com/bpmn-io/form-js/issues/1205

This PR (within the the first commit) adds a new form-js entry named DirectionEntry to the properties panel AppearanceGroup that is activated for the form component (default type).

It is also intended to modify form components to adhere to the direction setting that is selected from the DirectionEntry.

okaeiz commented 5 months ago

Here's the demo for Action and Selection components:

https://github.com/bpmn-io/form-js/assets/100111649/6a4fe182-546e-4e7b-925c-4a83f84ce331

okaeiz commented 5 months ago

Here's the demo for Input, Presentation and Containers components:

https://github.com/bpmn-io/form-js/assets/100111649/d6f69f39-83c0-40d5-828e-5ec3ab8e0bf6

okaeiz commented 5 months ago

This looks completed to me. Here's a recap:

I created a new PR with 3 commits and less diff:
- Properties panel and DirectionEntry
- Input, Presentation, and Containers components
- Action and Selection components

I did NOT change the HTML View because its direction can already be changed via CSS attributes.
I did NOT change iframe, separator, and spacer.
I did NOT change expression because it's always LTR. I did NOT include any merge commits as you requested.

@Skaiir I'd appreciate it if you take a look at this.

Skaiir commented 5 months ago

Currently working on a review of this @okaeiz. Amazing work already, although there will need to be a few things changed before we can approve :D. But I'm confident together we'll get this into the library rather soon ;)

okaeiz commented 5 months ago

I made a new commit. Here's a recap:

Implemented
- I covered HTML View to adhere to direction.
- I covered iFrame to adhere to direction.
Issues fixed
- Icon overlapping for DynamicList is fixed both in Editor and Viewer
- Separator for the number field is now on the right side
- Removed unnecessary comments
- Removed the font attribute (temporarily) ---> will be discussed

I did NOT change the Expression field because whenever we have an LTR field in the RTL direction (such as expressions, emails, URLs, etc.) the placeholder should also be LTR; otherwise it will be confusing for the users. The code is now formatted with Prettier and eslint. I tried my best to adhere to the formatting guidelines.

@Skaiir I'd appreciate it if you take a look at this.

okaeiz commented 5 months ago

Any updates?

Skaiir commented 3 months ago

Hey @okaeiz, sorry we haven't been able to be around, unfortunately things got pretty busy pretty fast. I do have some amount of time now so I'll catch up with this today.

Skaiir commented 3 months ago

Apologies for the delays it looks like this won't get taken a look at for another week at least. Unfortunately some other priorities came up.

okaeiz commented 3 months ago

Take your time. I'll be available for further modifications.

okaeiz commented 1 month ago

What is the status of this PR? Should I give up already?