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

371 stars 96 forks source link

RTL direction support via properties panel (revised) #1213

Open okaeiz opened 1 week ago

okaeiz commented 1 week 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 1 week 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 1 week 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 1 week 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 1 week 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 days 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.