♻️ [#571] Refactor away openforms-form-control

This wrapper was applied to the formio component node rendered by the vanilla formio renderer, and copied over (for vertical spacing reasons) to the React implementation of form field components. The UtrechtFormField and UtrechtFormFieldset components already act like a wrapper/container, and we've introduced a separate class name to manage the vertical spacing of components. For interop with formio, we do some CSS/SASS extension gymnastics, which we'll be able to remove once we have our own React-based formio renderer.
open-formulieren · Oct 20, 2023 · 1a0b69b · 1a0b69b
1 parent 8908faa
commit 1a0b69b
Show file tree

Hide file tree

Showing 24 changed files with 358 additions and 368 deletions.
diff --git a/src/components/appointments/fields/DateSelect.js b/src/components/appointments/fields/DateSelect.js
@@ -58,14 +58,12 @@ const DateSelect = ({products, onChange}) => {
   if (!loading && location && availableDates && !availableDates.length) {
     // TODO: add label? make this a polite warning/error/alert?
     return (
-      <div className="openforms-form-control">
-        <Paragraph>
-          <FormattedMessage
-            description="Appoinments: message shown for no available dates at all"
-            defaultMessage="Sorry, there are no available dates for your appointment. Please try again later."
-          />
-        </Paragraph>
-      </div>
+      <Paragraph>
+        <FormattedMessage
+          description="Appoinments: message shown for no available dates at all"
+          defaultMessage="Sorry, there are no available dates for your appointment. Please try again later."
+        />
+      </Paragraph>
     );
   }
 

diff --git a/src/components/forms/Checkbox/Checkbox.js b/src/components/forms/Checkbox/Checkbox.js
@@ -3,7 +3,7 @@ import {Field, useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
 import React, {useId} from 'react';
 
-import {HelpText, ValidationErrors, Wrapper} from 'components/forms';
+import {HelpText, ValidationErrors} from 'components/forms';
 
 import {LabelContent} from '../Label';
 
@@ -24,29 +24,27 @@ const Checkbox = ({
   const invalid = touched && !!error;
 
   return (
-    <Wrapper>
-      <FormField type="checkbox" invalid={invalid} className="utrecht-form-field--openforms">
-        <Field
-          name={name}
-          as={UtrechtCheckbox}
-          type="checkbox"
-          id={id}
-          className="utrecht-form-field__input utrecht-custom-checkbox utrecht-custom-checkbox--html-input utrecht-custom-checkbox--openforms"
-          disabled={disabled}
-          invalid={invalid}
-          required={isRequired}
-          appearance="custom"
-          {...inputProps}
-        />
-        <div className="utrecht-form-field__label utrecht-form-field__label--checkbox">
-          <LabelContent id={id} isRequired={isRequired} disabled={disabled} type="checkbox">
-            {label}
-          </LabelContent>
-        </div>
-        <HelpText>{description}</HelpText>
-        {touched && <ValidationErrors error={error} />}
-      </FormField>
-    </Wrapper>
+    <FormField type="checkbox" invalid={invalid} className="utrecht-form-field--openforms">
+      <Field
+        name={name}
+        as={UtrechtCheckbox}
+        type="checkbox"
+        id={id}
+        className="utrecht-form-field__input utrecht-custom-checkbox utrecht-custom-checkbox--html-input utrecht-custom-checkbox--openforms"
+        disabled={disabled}
+        invalid={invalid}
+        required={isRequired}
+        appearance="custom"
+        {...inputProps}
+      />
+      <div className="utrecht-form-field__label utrecht-form-field__label--checkbox">
+        <LabelContent id={id} isRequired={isRequired} disabled={disabled} type="checkbox">
+          {label}
+        </LabelContent>
+      </div>
+      <HelpText>{description}</HelpText>
+      {touched && <ValidationErrors error={error} />}
+    </FormField>
   );
 };
 

diff --git a/src/components/forms/DateField/DateField.js b/src/components/forms/DateField/DateField.js
@@ -3,7 +3,7 @@ import {Field, useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {HelpText, ValidationErrors, Wrapper} from 'components/forms';
+import {HelpText, ValidationErrors} from 'components/forms';
 
 import DateInputGroup from './DateInputGroup';
 import DatePicker from './DatePicker';
@@ -66,24 +66,22 @@ const DateField = ({
   }
 
   return (
-    <Wrapper>
-      <FormField type="text" invalid={invalid} className="utrecht-form-field--openforms">
-        <Field
-          as={Widget}
-          name={name}
-          label={label}
-          isRequired={isRequired}
-          id={id}
-          disabled={disabled}
-          invalid={invalid}
-          extraOnChange={onChange}
-          {...fieldProps}
-          {...props}
-        />
-        <HelpText>{description}</HelpText>
-        {touched && <ValidationErrors error={error} />}
-      </FormField>
-    </Wrapper>
+    <FormField type="text" invalid={invalid} className="utrecht-form-field--openforms">
+      <Field
+        as={Widget}
+        name={name}
+        label={label}
+        isRequired={isRequired}
+        id={id}
+        disabled={disabled}
+        invalid={invalid}
+        extraOnChange={onChange}
+        {...fieldProps}
+        {...props}
+      />
+      <HelpText>{description}</HelpText>
+      {touched && <ValidationErrors error={error} />}
+    </FormField>
   );
 };
 

diff --git a/src/components/forms/InputGroup/InputGroup.mdx b/src/components/forms/InputGroup/InputGroup.mdx
@@ -23,8 +23,8 @@ example:
 The input group is a low level component, intended to replace a regular `Textbox` or `Select`
 component.
 
-It should be composed with the `Wrapper`, `FormField`, `FormLabel`, `HelpText` and
-`ValidationErrors` components.
+It should be composed with the `FormField`, `FormLabel`, `HelpText` and `ValidationErrors`
+components.
 
 ## Props
 

diff --git a/src/components/forms/InputGroup/InputGroup.stories.js b/src/components/forms/InputGroup/InputGroup.stories.js
@@ -1,7 +1,7 @@
 import {FormField, FormLabel, Textbox} from '@utrecht/component-library-react';
 import {Field} from 'formik';
 
-import {SelectField, TextField, Wrapper} from 'components/forms';
+import {SelectField, TextField} from 'components/forms';
 import {FormikDecorator} from 'story-utils/decorators';
 
 import {InputGroup, InputGroupItem} from './InputGroup';
@@ -42,27 +42,25 @@ export const Basic = {
 
 export const InLargerForm = {
   render: args => (
-    <>
+    <div className="openforms-form-field-container">
       <TextField name="before" label="First field" />
 
-      <Wrapper>
-        <FormField type="text" className="utrecht-form-field--openforms">
-          <InputGroup {...args}>
-            <InputGroupItem>
-              <FormLabel htmlFor="sub1" className="openforms-input-group__label">
-                Sub 1
-              </FormLabel>
-              <Field as={Textbox} name="inputGroup[0]" id="sub1" />
-            </InputGroupItem>
-            <InputGroupItem>
-              <FormLabel htmlFor="sub2" className="openforms-input-group__label">
-                Sub 2
-              </FormLabel>
-              <Field as={Textbox} name="inputGroup[1]" id="sub2" />
-            </InputGroupItem>
-          </InputGroup>
-        </FormField>
-      </Wrapper>
+      <FormField type="text" className="utrecht-form-field--openforms">
+        <InputGroup {...args}>
+          <InputGroupItem>
+            <FormLabel htmlFor="sub1" className="openforms-input-group__label">
+              Sub 1
+            </FormLabel>
+            <Field as={Textbox} name="inputGroup[0]" id="sub1" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <FormLabel htmlFor="sub2" className="openforms-input-group__label">
+              Sub 2
+            </FormLabel>
+            <Field as={Textbox} name="inputGroup[1]" id="sub2" />
+          </InputGroupItem>
+        </InputGroup>
+      </FormField>
 
       <SelectField
         name="after"
@@ -72,7 +70,7 @@ export const InLargerForm = {
         ]}
         label="Last field"
       />
-    </>
+    </div>
   ),
   args: {
     label: 'Group related inputs',

diff --git a/src/components/forms/NumberField/NumberField.js b/src/components/forms/NumberField/NumberField.js
@@ -5,7 +5,7 @@ import React from 'react';
 import {useIntl} from 'react-intl';
 import {NumericFormat} from 'react-number-format';
 
-import {HelpText, Label, ValidationErrors, Wrapper} from 'components/forms';
+import {HelpText, Label, ValidationErrors} from 'components/forms';
 
 const getSeparators = locale => {
   const numberFormat = new Intl.NumberFormat(locale);
@@ -48,32 +48,30 @@ const NumberField = ({
       };
 
   return (
-    <Wrapper>
-      <UtrechtFormField type="text" invalid={invalid} className="utrecht-form-field--openforms">
-        <Label id={id} isRequired={isRequired} disabled={disabled}>
-          {label}
-        </Label>
-        <Paragraph>
-          <NumericFormat
-            // Note: the onChange handler does not handle any input sanitation
-            {...fieldProps}
-            value={value}
-            id={id}
-            className="utrecht-textbox--openforms"
-            disabled={disabled}
-            invalid={invalid}
-            min={min}
-            step={step}
-            type={useNumberType ? 'number' : 'text'}
-            customInput={Textbox}
-            readOnly={readOnly}
-            {...separatorProps}
-          />
-        </Paragraph>
-        <HelpText>{description}</HelpText>
-        {touched && <ValidationErrors error={error} />}
-      </UtrechtFormField>
-    </Wrapper>
+    <UtrechtFormField type="text" invalid={invalid} className="utrecht-form-field--openforms">
+      <Label id={id} isRequired={isRequired} disabled={disabled}>
+        {label}
+      </Label>
+      <Paragraph>
+        <NumericFormat
+          // Note: the onChange handler does not handle any input sanitation
+          {...fieldProps}
+          value={value}
+          id={id}
+          className="utrecht-textbox--openforms"
+          disabled={disabled}
+          invalid={invalid}
+          min={min}
+          step={step}
+          type={useNumberType ? 'number' : 'text'}
+          customInput={Textbox}
+          readOnly={readOnly}
+          {...separatorProps}
+        />
+      </Paragraph>
+      <HelpText>{description}</HelpText>
+      {touched && <ValidationErrors error={error} />}
+    </UtrechtFormField>
   );
 };
 

diff --git a/src/components/forms/RadioField/RadioField.js b/src/components/forms/RadioField/RadioField.js
@@ -10,7 +10,7 @@ import {Field, useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {HelpText, ValidationErrors, Wrapper} from 'components/forms';
+import {HelpText, ValidationErrors} from 'components/forms';
 import {LabelContent} from 'components/forms/Label';
 
 /**
@@ -36,43 +36,41 @@ export const RadioField = ({
   const invalid = touched && !!error;
   const descriptionid = `${id}-description`;
   return (
-    <Wrapper>
-      <Fieldset
-        className="utrecht-form-fieldset--openforms"
-        disabled={disabled}
-        invalid={invalid}
-        role="radiogroup"
-        aria-describedby={description ? descriptionid : undefined}
-      >
-        <FieldsetLegend className="utrecht-form-field__label">
-          <LabelContent disabled={disabled} isRequired={isRequired}>
-            {label}
-          </LabelContent>
-        </FieldsetLegend>
+    <Fieldset
+      className="utrecht-form-fieldset--openforms"
+      disabled={disabled}
+      invalid={invalid}
+      role="radiogroup"
+      aria-describedby={description ? descriptionid : undefined}
+    >
+      <FieldsetLegend className="utrecht-form-field__label">
+        <LabelContent disabled={disabled} isRequired={isRequired}>
+          {label}
+        </LabelContent>
+      </FieldsetLegend>
 
-        {options.map(({value: optionValue, label: optionLabel}, index) => (
-          <FormField key={optionValue} type="radio" className="utrecht-form-field--openforms">
-            <Field
-              as={RadioButton}
-              type="radio"
-              className="utrecht-form-field__input"
-              id={`${id}-opt-${index}`}
-              name={name}
-              value={optionValue}
-              {...inputProps}
-            />
-            <Paragraph className="utrecht-form-field__label utrecht-form-field__label--radio">
-              <FormLabel htmlFor={`${id}-opt-${index}`} disabled={disabled} type="radio">
-                {optionLabel}
-              </FormLabel>
-            </Paragraph>
-          </FormField>
-        ))}
+      {options.map(({value: optionValue, label: optionLabel}, index) => (
+        <FormField key={optionValue} type="radio" className="utrecht-form-field--openforms">
+          <Field
+            as={RadioButton}
+            type="radio"
+            className="utrecht-form-field__input"
+            id={`${id}-opt-${index}`}
+            name={name}
+            value={optionValue}
+            {...inputProps}
+          />
+          <Paragraph className="utrecht-form-field__label utrecht-form-field__label--radio">
+            <FormLabel htmlFor={`${id}-opt-${index}`} disabled={disabled} type="radio">
+              {optionLabel}
+            </FormLabel>
+          </Paragraph>
+        </FormField>
+      ))}
 
-        <HelpText id={descriptionid}>{description}</HelpText>
-        {touched && <ValidationErrors error={error} />}
-      </Fieldset>
-    </Wrapper>
+      <HelpText id={descriptionid}>{description}</HelpText>
+      {touched && <ValidationErrors error={error} />}
+    </Fieldset>
   );
 };