Merge pull request #572 from open-formulieren/refactor/571-form-control

Remove need for custom form-control CSS
open-formulieren · Oct 26, 2023 · cda0cef · cda0cef
2 parents 1dc4fa2 + 678a20a
commit cda0cef
Show file tree

Hide file tree

Showing 35 changed files with 520 additions and 438 deletions.
diff --git a/src/components/appointments/cancel/CancelAppointment.js b/src/components/appointments/cancel/CancelAppointment.js
@@ -92,35 +92,37 @@ const CancelAppointment = () => {
               </ErrorMessage>
             )}
 
-            <Body modifiers={['big']}>
-              <FormattedMessage
-                description="Appointment cancellation body text"
-                defaultMessage={`You're about to cancel your appointment on <b>{date}</b> at <b>{time}</b>. Please fill
-out your email address for verification purposes.`}
-                values={{
-                  date: <FormattedDate value={time} day="numeric" month="long" />,
-                  time: <FormattedDate value={time} hour="numeric" minute="numeric" />,
-                  b: chunks => <strong>{chunks}</strong>,
-                }}
-              />
-            </Body>
-
-            <EmailField
-              name="email"
-              isRequired
-              label={
+            <div className="openforms-form-field-container">
+              <Body modifiers={['big']}>
                 <FormattedMessage
-                  description="Appointment cancellation email field label"
-                  defaultMessage="Your email address"
-                />
-              }
-              description={
-                <FormattedMessage
-                  description="Cancel appointment email field help text"
-                  defaultMessage="The email address where you received the appointment confirmation email."
+                  description="Appointment cancellation body text"
+                  defaultMessage={`You're about to cancel your appointment on <b>{date}</b> at <b>{time}</b>. Please fill
+out your email address for verification purposes.`}
+                  values={{
+                    date: <FormattedDate value={time} day="numeric" month="long" />,
+                    time: <FormattedDate value={time} hour="numeric" minute="numeric" />,
+                    b: chunks => <strong>{chunks}</strong>,
+                  }}
                 />
-              }
-            />
+              </Body>
+
+              <EmailField
+                name="email"
+                isRequired
+                label={
+                  <FormattedMessage
+                    description="Appointment cancellation email field label"
+                    defaultMessage="Your email address"
+                  />
+                }
+                description={
+                  <FormattedMessage
+                    description="Cancel appointment email field help text"
+                    defaultMessage="The email address where you received the appointment confirmation email."
+                  />
+                }
+              />
+            </div>
 
             <Toolbar modifiers={['bottom', 'reverse']}>
               <ToolbarList>

diff --git a/src/components/appointments/cancel/CancelAppointment.stories.js b/src/components/appointments/cancel/CancelAppointment.stories.js
@@ -1,3 +1,5 @@
+import {expect} from '@storybook/jest';
+import {userEvent, within} from '@storybook/testing-library';
 import {withRouter} from 'storybook-addon-react-router-v6';
 
 import Card from 'components/Card';
@@ -64,4 +66,11 @@ export const WithBackendValidationErrors = {
       handlers: [mockAppointmentCancelErrorPost],
     },
   },
+
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByRole('button'));
+    expect(await canvas.findByText('Invalid e-mail for the submission.')).toBeVisible();
+  },
 };
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/appointments/fields/Product.js b/src/components/appointments/fields/Product.js
@@ -17,7 +17,7 @@ const Product = ({namePrefix, index, selectedProducts}) => {
   const intl = useIntl();
   const {supportsMultipleProducts} = useContext(AppointmentConfigContext);
   return (
-    <div>
+    <div className="openforms-form-field-container">
       <ProductSelect
         name={`${namePrefix}[${index}].productId`}
         selectedProducts={selectedProducts}

diff --git a/src/components/appointments/steps/ContactDetailsStep.js b/src/components/appointments/steps/ContactDetailsStep.js
@@ -119,9 +119,11 @@ const ContactDetailsStep = ({navigateTo = null}) => {
           {({isValid, dirty}) => (
             // TODO: don't do inline style
             <Form style={{width: '100%'}}>
-              {components.map(component => (
-                <FormioComponent key={component.key} component={component} />
-              ))}
+              <div className="openforms-form-field-container">
+                {components.map(component => (
+                  <FormioComponent key={component.key} component={component} />
+                ))}
+              </div>
 
               <SubmitRow
                 canSubmit={Boolean(!loading && validationSchema)}

diff --git a/src/components/appointments/steps/LocationAndTimeStep.js b/src/components/appointments/steps/LocationAndTimeStep.js
@@ -70,7 +70,7 @@ const LocationAndTimeStepFields = () => {
   return (
     // TODO: don't do inline style
     <Form style={{width: '100%'}}>
-      <div>
+      <div className="openforms-form-field-container">
         <LocationSelect products={products} onChange={onFieldChange} />
         <DateSelect products={products} onChange={onFieldChange} />
         <TimeSelect products={products} />

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/Label.js b/src/components/forms/Label.js
@@ -13,7 +13,7 @@ export const LabelContent = ({id, disabled = false, isRequired = false, type, ch
       htmlFor={id}
       disabled={disabled}
       className={classNames({
-        'utrecht-form-label--openforms-required': isRequired,
+        'utrecht-form-label--openforms-required': isRequired && requiredFieldsWithAsterisk,
         [`utrecht-form-label--${type}`]: type,
       })}
     >

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>
   );
 };