Remove need for custom form-control CSS #572
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
* Validation error styling for a utrecht-form-field and utrecht-form-fieldset * Content component customClass styling
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## main #572 +/- ##
==========================================
+ Coverage 71.04% 71.38% +0.33%
==========================================
Files 209 208 -1
Lines 4321 4316 -5
Branches 1173 1174 +1
==========================================
+ Hits 3070 3081 +11
+ Misses 1217 1201 -16
Partials 34 34
☔ View full report in Codecov by Sentry. |
* Added some pristine state stories & tests for hidden components * Updated zod story to use semantically correct component in favour of form-control div/styles to be deleted.
The class name is now set directly on the WYSIWYG container and the custom classes are applied as modifiers instead of standalone/ utility classes, allowing us to clean up our CSS. Additionally, design tokens (with backwards compatible fallbacks) are introduced for the theming of each content variant.
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.
sergei-maertens
force-pushed
the
refactor/571-form-control
branch
from
dee6ae9 to
333d0af
Compare
|
Marked ready for review to get visual regression testing, this is by no means complete 😅 AKA "Chromatic take the wheel" |
sergei-maertens
force-pushed
the
refactor/571-form-control
branch
from
0750427 to
7ac058d
Compare
sergei-maertens
force-pushed
the
refactor/571-form-control
branch
from
f4da9f6 to
678a20a
Compare
CharString
requested changes
Oct 23, 2023
| @@ -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, | |||
There was a problem hiding this comment.
I expected this fix to trigger a diff in chromatic.
There was a problem hiding this comment.
we didn't really have any stories with validate.required or the explicit config to not use asterisks for required fields, so it makes sense there's no diff.
Or do you mean markup diffs?
CharString
approved these changes
Oct 26, 2023
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.
Closes #571
Goal: getting rid of custom CSS for the form-control wrapper, which is arguably already performed by the
utrecht-form-fieldcomponent.There are some challenges, in particular because formio requires the
ref="component"to be present and still applying the relevant styles & design tokens.