Add validation errors to form fields for callouts #6722
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
⚡️ Lighthouse report for the changes in this PRLighthouse tested 2 URLs Report for Article
Report for Front
|
|
Size Change: -19.5 kB (-1%) Total Size: 2.4 MB
ℹ️ View Unchanged
|
tkgnm
commented
Dec 8, 2022
tkgnm
commented
Dec 8, 2022
tkgnm
commented
Dec 8, 2022
tkgnm
commented
Dec 8, 2022
tkgnm
commented
Dec 8, 2022
| @@ -1,36 +1,43 @@ | |||
| import { CampaignFieldSelect } from '../../../types/content'; | |||
| import { Select as SourceSelect } from '@guardian/source-react-components'; | |||
| import type { CampaignFieldSelect } from 'src/types/content'; | |||
There was a problem hiding this comment.
We're now using the select box from Source - happy days!
tkgnm
commented
Dec 8, 2022
| children={[ | ||
| { label: 'default', value: 'Please choose an option ...' }, | ||
| ] | ||
| .concat(formField.options) |
There was a problem hiding this comment.
Source behaves in such a way that if a select box is mandatory, and the user has NOT changed the value, it will raise an error with the user. Therefore, we add a default 'Please choose an option' field to the start of any array of options passed down to us
Sorry - this is a mistake! Source does not provide us this behaviour. This logic will need to be added to form.tsx. This will come in a subsequent PR. I've now removed this change.
tkgnm
commented
Dec 8, 2022
| <> | ||
| <SourceTextArea | ||
| data-testid={`form-field-${formField.id}`} | ||
| label={formField.label} | ||
| supporting={formField.description} |
There was a problem hiding this comment.
Previously, the description was not rendered on a text area. I think this is a mistake, so I've added it here.
tkgnm
changed the title
|
Thanks for your helpful annotations in the PR comments! It's generally looking good to me, although I've noted a couple of issues. The |
bryophyta
reviewed
Dec 8, 2022
tkgnm
commented
Dec 8, 2022
| <label | ||
| css={[fieldLabelStyles, hideLabel && visuallyHidden]} | ||
| htmlFor={formField.name} | ||
| hidden={formField.hideLabel} |
There was a problem hiding this comment.
The hideLabel property is now used directly on the label element. If this is true, we implement the visuallyHidden style from Source. I believe that I am now essentially copying the same behaviour as Source (see here: https://github.com/guardian/csnx/blob/main/libs/%40guardian/source-react-components/src/label/Label.tsx)
If I am copying Source, that begs the question:
Q: Why have a custom FieldLabel? Does Source not always provide us a label?
A: Yes - it does, but unfortunately not every single sort of form component we need is available in Source. Hence, we may need to occasionally create a custom form component and give it our bespoke FieldLabel component for the label and description.
| @@ -21,12 +23,14 @@ export const MultiSelect = ({ | |||
| <div data-testid={`form-field-${formField.id}`}> | |||
| {multiple ? ( | |||
| <CheckboxSelect | |||
| validationErrors={validationErrors ?? undefined} | |||
There was a problem hiding this comment.
Implemented @bryophyta suggested refactoring - thanks for the tip!
| formField: CampaignFieldSelect; | ||
| formData: { [key in string]: any }; | ||
| setFormData: React.Dispatch<React.SetStateAction<{ [x: string]: any }>>; | ||
| }; | ||
|
|
||
| export const Select = ({ formField, formData, setFormData }: Props) => ( | ||
| <> | ||
| <FieldLabel formField={formField} /> |
There was a problem hiding this comment.
Now that we're using the Select component from Source, there is no need to use a custom FieldLabel - once again thanks for pointing that out @bryophyta
| setFormData, | ||
| }: Props) => ( | ||
| <SourceSelect | ||
| hideLabel={formField.hideLabel} |
There was a problem hiding this comment.
hideLabel being used here as Source would like us to :)
abeddow91
approved these changes
Dec 8, 2022
sophie-macmillan
approved these changes
Dec 9, 2022
bryophyta
approved these changes
Dec 9, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this change?
Callouts in DCR
This PR is part of a larger body of work to create a new Callout component in DCR. We are separating this PR into chunks so that it is easier to communicate the intent of each PR and to make it easier for DCR to review.
Why?
This PR adds more functionality to our callout form fields. We already have form components in the repo, but currently they do not take a custom validation error message which is necessary to display the custom styling provided by Source.
Previously, passing in custom validation information was not necessary as our legacy callout form did not use any form validation beyond what browsers provide by default. This meant that the only form of validation we could implement was to check if a required field was empty. This prevented us from using the custom Source error message styling as we need to pass a custom string down to the form field. With our
validationErrorsobject, we can now do just this!How have I tested this?
I've tested it on DCR code and it works just as expected - there are no changes to the UI or behaviour of the current (soon to be legacy) form, which is just what we expect. This is going to become more useful in a subsequent PR that will perform custom form validation on a callout component.
Screenshots