Implemented RTL adherence for Action and Selection components

Author: merrime-n

packages/form-js-viewer/src/render/components/form-fields/Button.js

@@ -1,17 +1,25 @@
 import { formFieldClasses } from '../Util';
-import { useSingleLineTemplateEvaluation } from '../../hooks';
+import { useSingleLineTemplateEvaluation, useService } from '../../hooks';
 
 const type = 'button';
 
 export function Button(props) {
   const { disabled, onFocus, onBlur, field } = props;
-
   const { action = 'submit' } = field;
-
   const evaluatedLabel = useSingleLineTemplateEvaluation(field.label || '', { debug: true });
 
+  const form = useService('form');
+  const { schema } = form._getState();
+
+  const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
+
   return (
-    <div class={formFieldClasses(type)}>
+    <div
+      class={formFieldClasses(type)}
+      style={{
+        direction: direction,
+        fontFamily: 'Vazirmatn, sans-serif',
+      }}>
       <button
         class="fjs-button"
         type={action}

packages/form-js-viewer/src/render/components/form-fields/Checkbox.js

@@ -1,6 +1,7 @@
 import { Description } from '../Description';
 import { Errors } from '../Errors';
 import { Label } from '../Label';
+import { useService } from '../../hooks';
 
 import { formFieldClasses } from '../Util';
 
@@ -23,9 +24,17 @@ export function Checkbox(props) {
 
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
+  const form = useService('form');
+  const { schema } = form._getState();
+  const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
 
   return (
-    <div class={classNames(formFieldClasses(type, { errors, disabled, readonly }), { 'fjs-checked': value })}>
+    <div
+      class={classNames(formFieldClasses(type, { errors, disabled, readonly }), { 'fjs-checked': value })}
+      style={{
+        direction: direction,
+        fontFamily: 'Vazirmatn, sans-serif',
+      }}>
       <Label htmlFor={domId} label={label} required={required}>
         <input
           checked={value}
@@ -40,6 +49,11 @@ export function Checkbox(props) {
           required={required}
           aria-invalid={errors.length > 0}
           aria-describedby={[descriptionId, errorMessageId].join(' ')}
+          style={{
+            display: 'flex',
+            justifyContent: direction === 'rtl' ? 'flex-end' : 'flex-start',
+            fontFamily: 'Vazirmatn, sans-serif',
+          }}
         />
       </Label>
       <Description id={descriptionId} description={description} />

packages/form-js-viewer/src/render/components/form-fields/Checklist.js

@@ -3,6 +3,7 @@ import { useOptionsAsync, LOAD_STATES } from '../../hooks/useOptionsAsync';
 import { useCleanupMultiSelectValue } from '../../hooks/useCleanupMultiSelectValue';
 import classNames from 'classnames';
 import isEqual from 'lodash/isEqual';
+import { useService } from '../../hooks';
 
 import { Description } from '../Description';
 import { Errors } from '../Errors';
@@ -64,8 +65,15 @@ export function Checklist(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
 
+  const form = useService('form');
+  const { schema } = form._getState();
+  const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
+
   return (
-    <div class={classNames(formFieldClasses(type, { errors, disabled, readonly }))} ref={outerDivRef}>
+    <div
+      class={classNames(formFieldClasses(type, { errors, disabled, readonly }))}
+      ref={outerDivRef}
+      style={{ direction: direction, fontFamily: 'Vazirmatn, sans-serif' }}>
       <Label label={label} required={required} />
       {loadState == LOAD_STATES.LOADED &&
         options.map((o, index) => {
@@ -93,6 +101,7 @@ export function Checklist(props) {
                 required={required}
                 aria-invalid={errors.length > 0}
                 aria-describedby={[descriptionId, errorMessageId].join(' ')}
+                style={{ textAlign: direction === 'rtl' ? 'right' : 'left', fontFamily: 'Vazirmatn, sans-serif' }}
               />
             </Label>
           );

packages/form-js-viewer/src/render/components/form-fields/Radio.js

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { Description } from '../Description';
 import { Errors } from '../Errors';
 import { Label } from '../Label';
+import { useService } from '../../hooks';
 
 import { sanitizeSingleSelectValue } from '../util/sanitizerUtil';
 
@@ -59,9 +60,15 @@ export function Radio(props) {
 
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
+  const form = useService('form');
+  const { schema } = form._getState();
+  const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
 
   return (
-    <div class={formFieldClasses(type, { errors, disabled, readonly })} ref={outerDivRef}>
+    <div
+      class={formFieldClasses(type, { errors, disabled, readonly })}
+      ref={outerDivRef}
+      style={{ direction: direction, fontFamily: 'Vazirmatn, sans-serif' }}>
       <Label label={label} required={required} />
       {loadState == LOAD_STATES.LOADED &&
         options.map((option, index) => {
@@ -88,6 +95,7 @@ export function Radio(props) {
                 aria-describedby={[descriptionId, errorMessageId].join(' ')}
                 required={required}
                 aria-invalid={errors.length > 0}
+                style={{ textAlign: direction === 'rtl' ? 'right' : 'left', fontFamily: 'Vazirmatn, sans-serif' }}
               />
             </Label>
           );

packages/form-js-viewer/src/render/components/form-fields/Select.js

@@ -3,6 +3,7 @@ import { Errors } from '../Errors';
 import { Label } from '../Label';
 import { SearchableSelect } from './parts/SearchableSelect';
 import { SimpleSelect } from './parts/SimpleSelect';
+import { useService } from '../../hooks';
 
 import { sanitizeSingleSelectValue } from '../util/sanitizerUtil';
 import { createEmptyOptions } from '../util/optionsUtil';
@@ -35,6 +36,10 @@ export function Select(props) {
     'aria-describedby': [descriptionId, errorMessageId].join(' '),
   };
 
+  const form = useService('form');
+  const { schema } = form._getState();
+  const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
+
   return (
     <div
       class={formFieldClasses(type, { errors, disabled, readonly })}
@@ -43,7 +48,8 @@ export function Select(props) {
           event.preventDefault();
           event.stopPropagation();
         }
-      }}>
+      }}
+      style={{ direction: direction, fontFamily: 'Vazirmatn, sans-serif' }}>
       <Label htmlFor={domId} label={label} required={required} />
       {searchable ? <SearchableSelect {...selectProps} /> : <SimpleSelect {...selectProps} />}
       <Description id={descriptionId} description={description} />

packages/form-js-viewer/src/render/components/form-fields/Taglist.js

@@ -162,6 +162,10 @@ export function Taglist(props) {
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
 
+  const form = useService('form');
+  const { schema } = form._getState();
+  const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
+
   return (
     <div
       ref={focusScopeRef}
@@ -171,7 +175,8 @@ export function Taglist(props) {
           event.stopPropagation();
           event.preventDefault();
         }
-      }}>
+      }}
+      style={{ direction: direction, fontFamily: 'Vazirmatn, sans-serif' }}>
       <Label label={label} required={required} htmlFor={domId} />
       {!disabled && !readonly && !!values.length && (
         <SkipLink className="fjs-taglist-skip-link" label="Skip to search" onSkip={onSkipToSearch} />
@@ -219,6 +224,8 @@ export function Taglist(props) {
           aria-describedby={[descriptionId, errorMessageId].join(' ')}
           required={required}
           aria-invalid={errors.length > 0}
+          style={{ textAlign: direction === 'rtl' ? 'right' : 'left', fontFamily: 'Vazirmatn, sans-serif' }}
+          dir={direction === 'rtl' ? 'rtl' : 'ltr'}
         />
       </div>
       <div class="fjs-taglist-anchor">