[BUGFIX] Flatten nesting of formengine-field-item in web components

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>
TYPO3 · Apr 11, 2023 · 23b58c3 · 23b58c3
1 parent b5ba956
commit 23b58c3
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 48 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}