💚 [#571] Fix visual regressions

open-formulieren · Oct 23, 2023 · 0750427 · 0750427
1 parent f1175f3
commit 0750427
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 29 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/i18n-zod.stories.js b/src/i18n-zod.stories.js
@@ -101,8 +101,10 @@ const AccessibleErrorsExample = ({onSubmit}) => {
       validationSchema={toFormikValidationSchema(schema, {errorMap})}
     >
       <Form>
-        <TextField name="name" label={labels.name} />
-        <EmailField name="email" label={labels.email} />
+        <div className="openforms-form-field-container">
+          <TextField name="name" label={labels.name} />
+          <EmailField name="email" label={labels.email} />
+        </div>
         <ButtonGroup style={{justifyContent: 'flex-end'}}>
           <Button type="submit" variant="primary">
             Submit