From 8e26824bf8ea687ca594072dd47dbe7e0160e091 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:29:45 -0500
Subject: [PATCH] fix(ui): only render header dom node if needed (#9742)

### What?
The `<header>` dom node was rendering even if empty for group fields.
Causing extra margin to be added even if no label/description were
provided.

### Why?
If the field had no label, description or errors it would still render.

### How?
Wraps the header node in an additional condition that checks for label,
description or errors before rendering the node.
---
 packages/ui/src/fields/Group/index.tsx | 52 +++++++++++++-------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/packages/ui/src/fields/Group/index.tsx b/packages/ui/src/fields/Group/index.tsx
index f2e3b205e1b..b93661ba3ca 100644
--- a/packages/ui/src/fields/Group/index.tsx
+++ b/packages/ui/src/fields/Group/index.tsx
@@ -71,31 +71,33 @@ export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
     >
       <GroupProvider>
         <div className={`${baseClass}__wrap`}>
-          <div className={`${baseClass}__header`}>
-            {Boolean(Label || Description || label) && (
-              <header>
-                <RenderCustomComponent
-                  CustomComponent={Label}
-                  Fallback={
-                    <h3 className={`${baseClass}__title`}>
-                      <FieldLabel
-                        as="span"
-                        label={getTranslation(label, i18n)}
-                        localized={false}
-                        path={path}
-                        required={false}
-                      />
-                    </h3>
-                  }
-                />
-                <RenderCustomComponent
-                  CustomComponent={Description}
-                  Fallback={<FieldDescription description={description} path={path} />}
-                />
-              </header>
-            )}
-            {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
-          </div>
+          {Boolean(Label || Description || label || fieldHasErrors) && (
+            <div className={`${baseClass}__header`}>
+              {Boolean(Label || Description || label) && (
+                <header>
+                  <RenderCustomComponent
+                    CustomComponent={Label}
+                    Fallback={
+                      <h3 className={`${baseClass}__title`}>
+                        <FieldLabel
+                          as="span"
+                          label={getTranslation(label, i18n)}
+                          localized={false}
+                          path={path}
+                          required={false}
+                        />
+                      </h3>
+                    }
+                  />
+                  <RenderCustomComponent
+                    CustomComponent={Description}
+                    Fallback={<FieldDescription description={description} path={path} />}
+                  />
+                </header>
+              )}
+              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
+            </div>
+          )}
           {BeforeInput}
           <RenderFields
             fields={fields}