tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): only render header dom node if needed (#9742)

Browse Source 
### 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.
This commit is contained in:
Jarrod Flesch
2024-12-04 13:29:45 -05:00
committed by GitHub
parent 12a8bba852
commit 8e26824bf8
1 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/ui/src/fields/Group/index.tsx
View File

@@ -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}