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> <GroupProvider>
<div className={`${baseClass}__wrap`}> <div className={`${baseClass}__wrap`}>
<div className={`${baseClass}__header`}> {Boolean(Label || Description || label || fieldHasErrors) && (
{Boolean(Label || Description || label) && ( <div className={`${baseClass}__header`}>
<header> {Boolean(Label || Description || label) && (
<RenderCustomComponent <header>
CustomComponent={Label} <RenderCustomComponent
Fallback={ CustomComponent={Label}
<h3 className={`${baseClass}__title`}> Fallback={
<FieldLabel <h3 className={`${baseClass}__title`}>
as="span" <FieldLabel
label={getTranslation(label, i18n)} as="span"
localized={false} label={getTranslation(label, i18n)}
path={path} localized={false}
required={false} path={path}
/> required={false}
</h3> />
} </h3>
/> }
<RenderCustomComponent />
CustomComponent={Description} <RenderCustomComponent
Fallback={<FieldDescription description={description} path={path} />} CustomComponent={Description}
/> Fallback={<FieldDescription description={description} path={path} />}
</header> />
)} </header>
{fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />} )}
</div> {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
</div>
)}
{BeforeInput} {BeforeInput}
<RenderFields <RenderFields
fields={fields} fields={fields}