Skip to content

Commit 6699844

Browse files
authored
chore(ui): removes margin when row is empty and passes style from props (#11504)
Two small separate issues here (1) and (2): ### What? 1. Excess margin is displayed when a row is hidden due to `admin.condition` 2. The `admin.style` props is never passed to the `row` field ### Why? 1. Unlike other fields, the `row` field still gets rendered when `admin.condition` returns false - this is because the logic gets passed down to the fields within the row 2. `style` was never being threaded to the `row` field wrapper ### How? 1. Hides the row using css to `display: none` when no children are present 2. Passes `admin.styles` to the `row` wrapper Fixes #11477
1 parent 657ad20 commit 6699844

File tree

2 files changed

+12
-2
lines changed

2 files changed

+12
-2
lines changed

packages/ui/src/fields/Row/index.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
@layer payload-default {
44
.field-type.row {
5+
margin-bottom: 0;
6+
57
.row__fields {
68
display: flex;
79
flex-wrap: wrap;
@@ -14,6 +16,11 @@
1416
justify-content: flex-start;
1517
}
1618

19+
// add margin if the row has children
20+
&:has(> *:nth-child(1)) {
21+
margin-bottom: var(--base);
22+
}
23+
1724
// If there is more than one child, add inline-margins to space them out.
1825
&:has(> *:nth-child(2)) {
1926
margin-inline: calc(var(--base) / -4); // add negative margin to counteract the gap.

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const baseClass = 'row'
1313

1414
const RowFieldComponent: RowFieldClientComponent = (props) => {
1515
const {
16-
field: { admin: { className } = {}, fields },
16+
field: { admin: { className, style } = {}, fields },
1717
forceRender = false,
1818
indexPath = '',
1919
parentPath = '',
@@ -24,7 +24,10 @@ const RowFieldComponent: RowFieldClientComponent = (props) => {
2424

2525
return (
2626
<RowProvider>
27-
<div className={[fieldBaseClass, baseClass, className].filter(Boolean).join(' ')}>
27+
<div
28+
className={[fieldBaseClass, baseClass, className].filter(Boolean).join(' ')}
29+
style={style || undefined}
30+
>
2831
<RenderFields
2932
className={`${baseClass}__fields`}
3033
fields={fields}

0 commit comments

Comments
 (0)