♻️ [#571] Fix styles broken via form-control removal

open-formulieren · Oct 20, 2023 · 333d0af · 333d0af
1 parent 1a0b69b
commit 333d0af
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
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/scss/components/_deprecated-select.scss b/src/scss/components/_deprecated-select.scss
@@ -11,8 +11,7 @@ $select-background-color: var(--of-select-background-color, $color-white);
 
 // Styling for the choicejs widget for the select component
 // Overwriting styles found here: https://github.com/Choices-js/Choices/blob/master/src/styles/choices.scss
-// FIXME: check impact of form-control removal
-.#{prefix(form-control--select)} {
+[ref='component'] > .utrecht-form-field.utrecht-form-field--select {
   $control-height: $grid-row-height;
   $list-hpadding: $grid-margin-2;
   $list-vpadding: $grid-margin-1;

diff --git a/src/scss/components/_file-upload.scss b/src/scss/components/_file-upload.scss
@@ -11,8 +11,7 @@ we don't have strict BEM naming here.
 @import '../mixins/prefix';
 @import '../mixins/bootstrap';
 
-// FIXME: these class names are gone -> find different selector
-.#{prefix(form-control--file)} {
+.utrecht-form-field.utrecht-form-field--file {
   @include body;
   @include anchor.extend-utrecht-link;