Adding Direction Property to Properties Panel - RTL support

[guy-ng]

Adding Direction Property to Properties Panel

This feature proposal outlines adding a "direction" property to the properties panel for elements and the main form. Here's the breakdown:

Property: direction

Values: ltr: Left-to-Right text direction (default) rtl: Right-to-Left text direction inherit: Inherits direction from parent element

Implementation: Element Properties Panel:

• Add a new section or dropdown within the properties panel specifically for "direction."
• The dropdown should offer three options: ltr, rtl, and inherit.
• By default, the selected option should be inherit.
• Selecting a specific direction (ltr or rtl) will override any inherited direction for that element.

Main Form Properties Panel:

• Similar to element properties, add a "direction" section or dropdown.
• However, only offer ltr and rtl options, as inheriting direction doesn't make sense at the form level.
• The default selection should be inherit, which will use the system's default direction.
• Choosing ltr or rtl will set the overall direction for the entire form.

Benefits:

• Enables creation of Arabic and Hebrew forms with proper text direction.
• Improves user experience by allowing control over text layout.
• Provides a clear and consistent way to manage directionality.

Additional Considerations:

• Consider visual cues in the properties panel to indicate the currently selected direction (e.g., icons or text labels).
• Ensure proper cascading of direction properties when elements are nested within each other.
• Update any relevant documentation or tutorials to reflect the new feature.
• Overall, this feature addition will enhance the platform's capabilities for creating multilingual forms by supporting Right-to-Left languages.

[okaeiz]

This looks exactly like what we need. Using Direction, if it's set to RTL, it should render the placeholder and the label of the element on right. Also, if the the user enters some value, it should be rendered on right. This can be applied on a variety of elements such as text field, number, text area, select, date-time, etc.