Skip to content

Commit 8e26824

Browse files
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.
1 parent 12a8bba commit 8e26824

File tree

1 file changed

+27
-25
lines changed

1 file changed

+27
-25
lines changed

packages/ui/src/fields/Group/index.tsx

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -71,31 +71,33 @@ export const GroupFieldComponent: GroupFieldClientComponent = (props) => {
7171
>
7272
<GroupProvider>
7373
<div className={`${baseClass}__wrap`}>
74-
<div className={`${baseClass}__header`}>
75-
{Boolean(Label || Description || label) && (
76-
<header>
77-
<RenderCustomComponent
78-
CustomComponent={Label}
79-
Fallback={
80-
<h3 className={`${baseClass}__title`}>
81-
<FieldLabel
82-
as="span"
83-
label={getTranslation(label, i18n)}
84-
localized={false}
85-
path={path}
86-
required={false}
87-
/>
88-
</h3>
89-
}
90-
/>
91-
<RenderCustomComponent
92-
CustomComponent={Description}
93-
Fallback={<FieldDescription description={description} path={path} />}
94-
/>
95-
</header>
96-
)}
97-
{fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
98-
</div>
74+
{Boolean(Label || Description || label || fieldHasErrors) && (
75+
<div className={`${baseClass}__header`}>
76+
{Boolean(Label || Description || label) && (
77+
<header>
78+
<RenderCustomComponent
79+
CustomComponent={Label}
80+
Fallback={
81+
<h3 className={`${baseClass}__title`}>
82+
<FieldLabel
83+
as="span"
84+
label={getTranslation(label, i18n)}
85+
localized={false}
86+
path={path}
87+
required={false}
88+
/>
89+
</h3>
90+
}
91+
/>
92+
<RenderCustomComponent
93+
CustomComponent={Description}
94+
Fallback={<FieldDescription description={description} path={path} />}
95+
/>
96+
</header>
97+
)}
98+
{fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
99+
</div>
100+
)}
99101
{BeforeInput}
100102
<RenderFields
101103
fields={fields}

0 commit comments

Comments
 (0)