💄 Do not inline fields on the steps tab

Stacked fields for proper label/input alignment is preferred.
open-formulieren · Jan 2, 2025 · 0219f1c · 0219f1c
1 parent 9658adb
commit 0219f1c
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/src/openforms/js/components/admin/form_design/FormStepDefinition.js b/src/openforms/js/components/admin/form_design/FormStepDefinition.js
@@ -5,6 +5,7 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import MessageList from 'components/admin/MessageList';
 import Field, {normalizeErrors} from 'components/admin/forms/Field';
+import Fieldset from 'components/admin/forms/Fieldset';
 import FormRow from 'components/admin/forms/FormRow';
 import {Checkbox, TextInput} from 'components/admin/forms/Inputs';
 import FormIOBuilder from 'components/formio_builder/builder';
@@ -67,7 +68,7 @@ const FormStepDefinition = ({
     });
   };
 
-  const {translationEnabled, formSteps, registrationBackends} = useContext(FormContext);
+  const {formSteps, registrationBackends} = useContext(FormContext);
 
   // A 'total configuration': merging all the configurations from the different steps, so that we can figure out if
   // a key is unique across steps
@@ -174,7 +175,7 @@ const FormStepDefinition = ({
       <AuthenticationWarning loginRequired={loginRequired} configuration={configuration} />
       <LogicWarning warnings={warnings} />
 
-      <fieldset className="module aligned">
+      <Fieldset>
         <h2>
           <FormattedMessage
             description="Form definition module title"
@@ -209,6 +210,8 @@ const FormStepDefinition = ({
                     onBlur={() => setSlug(langCode)}
                   />
                 </Field>
+              </FormRow>
+              <FormRow>
                 <Field
                   name="internalName"
                   label={
@@ -228,6 +231,8 @@ const FormStepDefinition = ({
                 >
                   <TextInput value={internalName} onChange={onFieldChange} />
                 </Field>
+              </FormRow>
+              <FormRow>
                 <Field
                   name="slug"
                   label={
@@ -272,6 +277,8 @@ const FormStepDefinition = ({
                     maxLength="50"
                   />
                 </Field>
+              </FormRow>
+              <FormRow>
                 <Field
                   name={`translations.${langCode}.saveText`}
                   label={
@@ -294,6 +301,8 @@ const FormStepDefinition = ({
                     maxLength="50"
                   />
                 </Field>
+              </FormRow>
+              <FormRow>
                 <Field
                   name={`translations.${langCode}.nextText`}
                   label={
@@ -386,9 +395,14 @@ const FormStepDefinition = ({
             </>
           )}
         </LanguageTabs>
-      </fieldset>
+      </Fieldset>
 
-      <h2>Velden</h2>
+      <h2>
+        <FormattedMessage
+          description="Form definition formio configuration"
+          defaultMessage="Fields"
+        />
+      </h2>
 
       <div className="formio-builder-wrapper">
         <ConfigurationErrors errors={errors} />