Merge pull request #5097 from open-formulieren/feature/5093-literal-v…

…alue-input-for-array-data

Wrapping array data fields in variable table

src/openforms/js/components/admin/form_design/logic/LiteralValueInput.js

@@ -67,6 +67,7 @@ const WrapperArrayInput = ({name, value, onChange}) => {
         checked={useRawJSON}
         onChange={() => setUseRawJSON(!useRawJSON)}
         disabled={anyItemNotString}
+        fullWidth
       />
       {actualInput}
     </>

src/openforms/js/components/admin/form_design/variables/VariablesTable.js

@@ -200,7 +200,11 @@ const EditableVariableRow = ({index, variable, onDelete, onChange, onFieldChange
         </Field>
       </td>
       <td>
-        <Field name="initialValue" errors={variable.errors?.initialValue}>
+        <Field
+          name="initialValue"
+          errors={variable.errors?.initialValue}
+          extraModifiers={['flex-wrap']}
+        >
           <LiteralValueInput
             key={`initialValue-${index}`}
             name="initialValue"

src/openforms/js/components/admin/forms/Field.js

@@ -59,6 +59,7 @@ const Field = ({
   errorClassPrefix = '',
   errorClassModifier = '',
   noManageChildProps = false,
+  extraModifiers = [],
 }) => {
   const intl = useIntl();
   const originalName = name;
@@ -78,10 +79,14 @@ const Field = ({
   }
   const [hasErrors, formattedErrors] = normalizeErrors(errors, intl);
 
-  const fieldClassName = classNames('flex-container', {
-    fieldBox: fieldBox,
-    errors: hasErrors,
-  });
+  const fieldClassName = classNames(
+    'flex-container',
+    {
+      fieldBox: fieldBox,
+      errors: hasErrors,
+    },
+    ...extraModifiers
+  );
   const wrapperClassName = classNames({'field--disabled': disabled});
 
   const fieldInputMarkup = (
@@ -146,6 +151,7 @@ Field.propTypes = {
   ]),
   fieldBox: PropTypes.bool,
   disabled: PropTypes.bool,
+  extraModifiers: PropTypes.arrayOf(PropTypes.oneOf(['flex-wrap'])),
 };
 
 export default Field;

src/openforms/js/components/admin/forms/Inputs.js

@@ -96,13 +96,20 @@ DateTimeInput.propTypes = {
   onChange: PropTypes.func,
 };
 
-const Checkbox = ({name, label, helpText, noVCheckbox = false, ...extraProps}) => {
+const Checkbox = ({
+  name,
+  label,
+  helpText,
+  noVCheckbox = false,
+  fullWidth = false,
+  ...extraProps
+}) => {
   const {disabled = false} = extraProps;
   const prefix = useContext(PrefixContext);
   name = prefix ? `${prefix}-${name}` : name;
   const idFor = disabled ? undefined : `id_${name}`;
   return (
-    <div className={classNames({'field--disabled': disabled})}>
+    <div className={classNames({'field--disabled': disabled, 'w-100': fullWidth})}>
       <div className="flex-container checkbox-row">
         <input type="checkbox" name={name} id={idFor} {...extraProps} />{' '}
         <label className={classNames('inline', {vCheckboxLabel: !noVCheckbox})} htmlFor={idFor}>
@@ -123,6 +130,7 @@ Checkbox.propTypes = {
   label: PropTypes.node.isRequired,
   helpText: PropTypes.node,
   noVCheckbox: PropTypes.bool,
+  fullWidth: PropTypes.bool,
 };
 
 const Radio = ({name, idFor, label, helpText, ...extraProps}) => {