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.
payloadcms · Dec 4, 2024 · 8e26824 · 8e26824
1 parent 12a8bba
commit 8e26824
Showing 1 changed file with 27 additions and 25 deletions.
diff --git 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}