From 333d0afd6d35281b84eaf6866e299331b4b67ff8 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 20 Oct 2023 16:57:03 +0200
Subject: [PATCH] :recycle: [#571] Fix styles broken via form-control removal

---
 src/components/appointments/fields/Product.js            | 2 +-
 src/components/appointments/steps/ContactDetailsStep.js  | 8 +++++---
 src/components/appointments/steps/LocationAndTimeStep.js | 2 +-
 src/scss/components/_deprecated-select.scss              | 3 +--
 src/scss/components/_file-upload.scss                    | 3 +--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/appointments/fields/Product.js b/src/components/appointments/fields/Product.js
index e7c20d7bc..0d662dbcb 100644
--- 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
index 8b9ab8e81..2bad0d2f3 100644
--- 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
index f6acadfdf..54b03877d 100644
--- 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
index bbd6efaf2..447c658a2 100644
--- 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
index 3644bd5ed..d11c1be73 100644
--- 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;