open-formulieren / open-forms-sdk

A Javascript SDK for Open Forms
https://open-forms.readthedocs.io/en/stable/developers/sdk/index.html
Other
2 stars 6 forks source link

Remove need for custom form-control CSS #572

Closed sergei-maertens closed 1 year ago

sergei-maertens commented 1 year ago

Closes #571

Goal: getting rid of custom CSS for the form-control wrapper, which is arguably already performed by the utrecht-form-field component.

There are some challenges, in particular because formio requires the ref="component" to be present and still applying the relevant styles & design tokens.

codecov[bot] commented 1 year ago

Codecov Report

Attention: 4 lines in your changes are missing coverage. Please review.

Comparison is base (156ebad) 71.04% compared to head (678a20a) 71.38%.

Additional details and impacted files ```diff @@ 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 ``` | [Files](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren) | Coverage Δ | | |---|---|---| | [...omponents/appointments/cancel/CancelAppointment.js](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren#diff-c3JjL2NvbXBvbmVudHMvYXBwb2ludG1lbnRzL2NhbmNlbC9DYW5jZWxBcHBvaW50bWVudC5qcw==) | `86.66% <100.00%> (+26.66%)` | :arrow_up: | | [src/components/appointments/fields/DateSelect.js](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren#diff-c3JjL2NvbXBvbmVudHMvYXBwb2ludG1lbnRzL2ZpZWxkcy9EYXRlU2VsZWN0Lmpz) | `96.42% <ø> (ø)` | | | [src/components/appointments/fields/Product.js](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren#diff-c3JjL2NvbXBvbmVudHMvYXBwb2ludG1lbnRzL2ZpZWxkcy9Qcm9kdWN0Lmpz) | `100.00% <ø> (ø)` | | | [...mponents/appointments/steps/LocationAndTimeStep.js](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren#diff-c3JjL2NvbXBvbmVudHMvYXBwb2ludG1lbnRzL3N0ZXBzL0xvY2F0aW9uQW5kVGltZVN0ZXAuanM=) | `92.00% <ø> (ø)` | | | [src/components/forms/Checkbox/Checkbox.js](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren#diff-c3JjL2NvbXBvbmVudHMvZm9ybXMvQ2hlY2tib3gvQ2hlY2tib3guanM=) | `85.71% <100.00%> (ø)` | | | [src/components/forms/DateField/DateField.js](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren#diff-c3JjL2NvbXBvbmVudHMvZm9ybXMvRGF0ZUZpZWxkL0RhdGVGaWVsZC5qcw==) | `93.75% <100.00%> (ø)` | | | [src/components/forms/Label.js](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren#diff-c3JjL2NvbXBvbmVudHMvZm9ybXMvTGFiZWwuanM=) | `100.00% <100.00%> (ø)` | | | [src/components/forms/NumberField/NumberField.js](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren#diff-c3JjL2NvbXBvbmVudHMvZm9ybXMvTnVtYmVyRmllbGQvTnVtYmVyRmllbGQuanM=) | `93.33% <100.00%> (ø)` | | | [src/components/forms/TextField/TextField.js](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren#diff-c3JjL2NvbXBvbmVudHMvZm9ybXMvVGV4dEZpZWxkL1RleHRGaWVsZC5qcw==) | `93.33% <100.00%> (ø)` | | | [src/formio/components/Component.js](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren#diff-c3JjL2Zvcm1pby9jb21wb25lbnRzL0NvbXBvbmVudC5qcw==) | `77.77% <ø> (ø)` | | | ... and [4 more](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren) | | ... and [3 files with indirect coverage changes](https://app.codecov.io/gh/open-formulieren/open-forms-sdk/pull/572/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=open-formulieren)

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

sergei-maertens commented 1 year ago

Marked ready for review to get visual regression testing, this is by no means complete :sweat_smile:

AKA "Chromatic take the wheel"