From 23b58c3f936123a2bee9953dff23ecd37b3705df Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Mon, 10 Apr 2023 12:27:14 +0200
Subject: [PATCH] [BUGFIX] Flatten nesting of formengine-field-item in web
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves: #100540
Releases: main
Change-Id: I4acdefdf455bff6e855ce130c8165a398f271a6f
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/78548
Tested-by: core-ci <typo3@b13.com>
Tested-by: Frank Nägler <frank.naegler@typo3.com>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Frank Nägler <frank.naegler@typo3.com>
---
 Build/Sources/Sass/typo3/_main_form.scss      | 35 ++++++++++---------
 .../Classes/Form/Element/CategoryElement.php  | 20 +++++------
 .../Classes/Form/Element/DatetimeElement.php  |  7 ++--
 .../Classes/Form/Element/LinkElement.php      |  7 ++--
 .../Classes/Form/Element/PasswordElement.php  |  7 ++--
 .../Classes/Form/Element/TextElement.php      |  7 ++--
 .../Form/ImageManipulationElement.html        |  2 +-
 .../backend/Resources/Public/Css/backend.css  |  8 ++---
 8 files changed, 45 insertions(+), 48 deletions(-)

diff --git a/Build/Sources/Sass/typo3/_main_form.scss b/Build/Sources/Sass/typo3/_main_form.scss
index 13f4453acdfe..eb5216ea0548 100644
--- a/Build/Sources/Sass/typo3/_main_form.scss
+++ b/Build/Sources/Sass/typo3/_main_form.scss
@@ -85,27 +85,28 @@ label {
     }
 }
 
-.form-group {
-    .t3js-formengine-field-item {
-        position: relative;
-
-        > .t3js-charcounter-wrapper {
-            left: 0;
-            position: absolute;
-            top: 100%;
-            display: flex;
-            margin: 0 -2px;
-
-            .t3js-charcounter {
-                margin: 0 2px;
-            }
+.formengine-field-item {
+    display: block;
+    position: relative;
 
-            .t3js-charcounter-min {
-                margin: 0 2px;
-            }
+    > .t3js-charcounter-wrapper {
+        left: 0;
+        position: absolute;
+        top: 100%;
+        display: flex;
+        margin: 0 -2px;
+
+        .t3js-charcounter {
+            margin: 0 2px;
+        }
+
+        .t3js-charcounter-min {
+            margin: 0 2px;
         }
     }
+}
 
+.form-group {
     > label,
     > .form-label {
         font-weight: 600;
diff --git a/typo3/sysext/backend/Classes/Form/Element/CategoryElement.php b/typo3/sysext/backend/Classes/Form/Element/CategoryElement.php
index f5fbbe6fa367..7ce91e2f4fec 100644
--- a/typo3/sysext/backend/Classes/Form/Element/CategoryElement.php
+++ b/typo3/sysext/backend/Classes/Form/Element/CategoryElement.php
@@ -143,19 +143,17 @@ public function render(): array
         ];
 
         $resultArray['html'] =
-            '<typo3-formengine-element-category ' . GeneralUtility::implodeAttributes(['recordFieldId' => $fieldId, 'treeWrapperId' => $treeWrapperId], true) . '>
-                <div class="formengine-field-item t3js-formengine-field-item">
-                    ' . $fieldInformationHtml . '
-                    <div class="form-control-wrap">
-                        <div class="form-wizards-wrap">
-                            <div class="form-wizards-element">
-                                <div class="typo3-tceforms-tree">
-                                    <input ' . GeneralUtility::implodeAttributes(array_map('strval', $recordElementAttributes), true, true) . '/>
-                                </div>
-                                <div id="' . htmlspecialchars($treeWrapperId) . '" class="svg-tree-element" style="height: ' . $heightInPx . 'px;"></div>
+            '<typo3-formengine-element-category ' . GeneralUtility::implodeAttributes(['class' => 'formengine-field-item t3js-formengine-field-item', 'recordFieldId' => $fieldId, 'treeWrapperId' => $treeWrapperId], true) . '>
+                ' . $fieldInformationHtml . '
+                <div class="form-control-wrap">
+                    <div class="form-wizards-wrap">
+                        <div class="form-wizards-element">
+                            <div class="typo3-tceforms-tree">
+                                <input ' . GeneralUtility::implodeAttributes(array_map('strval', $recordElementAttributes), true, true) . '/>
                             </div>
-                            ' . $fieldWizardHtml . '
+                            <div id="' . htmlspecialchars($treeWrapperId) . '" class="svg-tree-element" style="height: ' . $heightInPx . 'px;"></div>
                         </div>
+                        ' . $fieldWizardHtml . '
                     </div>
                 </div>
             </typo3-formengine-element-category>';
diff --git a/typo3/sysext/backend/Classes/Form/Element/DatetimeElement.php b/typo3/sysext/backend/Classes/Form/Element/DatetimeElement.php
index c2577e67de23..df58837a3c04 100644
--- a/typo3/sysext/backend/Classes/Form/Element/DatetimeElement.php
+++ b/typo3/sysext/backend/Classes/Form/Element/DatetimeElement.php
@@ -274,10 +274,9 @@ public function render(): array
         }
 
         $resultArray['html'] = '
-            <typo3-formengine-element-datetime recordFieldId="' . htmlspecialchars($fieldId) . '">
-                <div class="formengine-field-item t3js-formengine-field-item">
-                    ' . $fieldInformationHtml . $fullElement . '
-                </div>
+            <typo3-formengine-element-datetime class="formengine-field-item t3js-formengine-field-item" recordFieldId="' . htmlspecialchars($fieldId) . '">
+                ' . $fieldInformationHtml . '
+                ' . $fullElement . '
             </typo3-formengine-element-datetime>';
 
         $resultArray['javaScriptModules'][] = JavaScriptModuleInstruction::create('@typo3/backend/form-engine/element/datetime-element.js');
diff --git a/typo3/sysext/backend/Classes/Form/Element/LinkElement.php b/typo3/sysext/backend/Classes/Form/Element/LinkElement.php
index 2110721b1572..9d7aa0b03c70 100644
--- a/typo3/sysext/backend/Classes/Form/Element/LinkElement.php
+++ b/typo3/sysext/backend/Classes/Form/Element/LinkElement.php
@@ -283,10 +283,9 @@ public function render(): array
         }
 
         $resultArray['html'] = '
-            <typo3-formengine-element-link recordFieldId="' . htmlspecialchars($fieldId) . '">
-                <div class="formengine-field-item t3js-formengine-field-item">
-                    ' . $fieldInformationHtml . $fullElement . '
-                </div>
+            <typo3-formengine-element-link class="formengine-field-item t3js-formengine-field-item" recordFieldId="' . htmlspecialchars($fieldId) . '">
+                ' . $fieldInformationHtml . '
+                ' . $fullElement . '
             </typo3-formengine-element-link>';
 
         $resultArray['javaScriptModules'][] = JavaScriptModuleInstruction::create('@typo3/backend/form-engine/element/link-element.js');
diff --git a/typo3/sysext/backend/Classes/Form/Element/PasswordElement.php b/typo3/sysext/backend/Classes/Form/Element/PasswordElement.php
index 1cb86e3adc4f..360e7e850c47 100644
--- a/typo3/sysext/backend/Classes/Form/Element/PasswordElement.php
+++ b/typo3/sysext/backend/Classes/Form/Element/PasswordElement.php
@@ -215,14 +215,15 @@ public function render()
             $passwordPolicyInfo = $this->renderPasswordPolicyRequirements($passwordPolicyValidator, $fieldId);
         }
 
+        $passwordElementAttributes['class'] = 'formengine-field-item t3js-formengine-field-item';
         $passwordElementAttributes['recordFieldId'] = $fieldId;
         $passwordElementAttributes['passwordPolicy'] = $passwordPolicy;
 
         $resultArray['html'] = '
             <typo3-formengine-element-password ' . GeneralUtility::implodeAttributes($passwordElementAttributes, true) . '>
-                <div class="formengine-field-item t3js-formengine-field-item">
-                    ' . $fieldInformationHtml . $fullElement . $passwordPolicyInfo . '
-                </div>
+                ' . $fieldInformationHtml . '
+                ' . $fullElement . '
+                ' . $passwordPolicyInfo . '
             </typo3-formengine-element-password>';
 
         $resultArray['javaScriptModules'][] = JavaScriptModuleInstruction::create(
diff --git a/typo3/sysext/backend/Classes/Form/Element/TextElement.php b/typo3/sysext/backend/Classes/Form/Element/TextElement.php
index 3fee4ecc674b..69e7d9d7633c 100644
--- a/typo3/sysext/backend/Classes/Form/Element/TextElement.php
+++ b/typo3/sysext/backend/Classes/Form/Element/TextElement.php
@@ -311,10 +311,9 @@ public function render(): array
         }
 
         $resultArray['html'] = '
-             <typo3-formengine-element-text recordFieldId="' . htmlspecialchars($fieldId) . '">
-                <div class="formengine-field-item t3js-formengine-field-item">
-                    ' . $fieldInformationHtml . $fullElement . '
-                </div>
+             <typo3-formengine-element-text class="formengine-field-item t3js-formengine-field-item" recordFieldId="' . htmlspecialchars($fieldId) . '">
+                ' . $fieldInformationHtml . '
+                ' . $fullElement . '
             </typo3-formengine-element-text>';
 
         $resultArray['javaScriptModules'][] = JavaScriptModuleInstruction::create('@typo3/backend/form-engine/element/text-element.js');
diff --git a/typo3/sysext/backend/Resources/Private/Templates/Form/ImageManipulationElement.html b/typo3/sysext/backend/Resources/Private/Templates/Form/ImageManipulationElement.html
index bae5e3755bdd..e660ac7f8c66 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/Form/ImageManipulationElement.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/Form/ImageManipulationElement.html
@@ -4,7 +4,7 @@
     data-namespace-typo3-fluid="true"
 >
 
-<div class="t3js-formengine-field-item">
+<div class="formengine-field-item t3js-formengine-field-item">
 
     {fieldInformation -> f:format.raw()}
 
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index d0a3bf8d3c82..57e7b2c1d2b5 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -3933,10 +3933,10 @@ label .icon img{pointer-events:none}
 .form-control-holder{position:relative}
 ::-ms-reveal{display:none}
 .row>.form-group>.form-control-wrap{margin-bottom:0}
-.form-group .t3js-formengine-field-item{position:relative}
-.form-group .t3js-formengine-field-item>.t3js-charcounter-wrapper{left:0;position:absolute;top:100%;display:flex;margin:0 -2px}
-.form-group .t3js-formengine-field-item>.t3js-charcounter-wrapper .t3js-charcounter{margin:0 2px}
-.form-group .t3js-formengine-field-item>.t3js-charcounter-wrapper .t3js-charcounter-min{margin:0 2px}
+.formengine-field-item{display:block;position:relative}
+.formengine-field-item>.t3js-charcounter-wrapper{left:0;position:absolute;top:100%;display:flex;margin:0 -2px}
+.formengine-field-item>.t3js-charcounter-wrapper .t3js-charcounter{margin:0 2px}
+.formengine-field-item>.t3js-charcounter-wrapper .t3js-charcounter-min{margin:0 2px}
 .form-group>.form-label,.form-group>label{font-weight:600;margin:0 0 .25rem;word-break:break-all}
 .form-group .panel,.form-group .panel-group{overflow:visible}
 .form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{color:#737373}