diff --git a/packages/payload/src/admin/components/forms/field-types/Row/index.scss b/packages/payload/src/admin/components/forms/field-types/Row/index.scss index 338002827e..fc0d42f274 100644 --- a/packages/payload/src/admin/components/forms/field-types/Row/index.scss +++ b/packages/payload/src/admin/components/forms/field-types/Row/index.scss @@ -1,30 +1,34 @@ @import '../../../../scss/styles.scss'; .field-type.row { - display: flex; - flex-wrap: wrap; - width: calc(100% + var(--base)); - margin-left: calc(var(--base) * -0.5); - margin-right: calc(var(--base) * -0.5); + .row__fields { + display: flex; + flex-wrap: wrap; + width: calc(100% + var(--base)); + margin-left: calc(var(--base) * -0.5); + margin-right: calc(var(--base) * -0.5); - > * { - flex-grow: 1; - padding-left: calc(var(--base) * 0.5); - padding-right: calc(var(--base) * 0.5); + > * { + flex-grow: 1; + padding-left: calc(var(--base) * 0.5); + padding-right: calc(var(--base) * 0.5); + } } @include mid-break { - display: block; - margin-left: 0; - margin-right: 0; - width: 100%; - - > * { + .row__fields { + display: block; margin-left: 0; margin-right: 0; - width: 100% !important; - padding-left: 0; - padding-right: 0; + width: 100%; + + > * { + margin-left: 0; + margin-right: 0; + width: 100% !important; + padding-left: 0; + padding-right: 0; + } } } } diff --git a/packages/payload/src/admin/components/forms/field-types/Row/index.tsx b/packages/payload/src/admin/components/forms/field-types/Row/index.tsx index 41c8335395..69ec9fdfed 100644 --- a/packages/payload/src/admin/components/forms/field-types/Row/index.tsx +++ b/packages/payload/src/admin/components/forms/field-types/Row/index.tsx @@ -9,6 +9,8 @@ import { fieldBaseClass } from '../shared' import './index.scss' import { RowProvider } from './provider' +const baseClass = 'row' + const Row: React.FC = (props) => { const { admin: { className, readOnly }, @@ -22,18 +24,21 @@ const Row: React.FC = (props) => { return ( - ({ - ...field, - path: createNestedFieldPath(path, field), - }))} - fieldTypes={fieldTypes} - forceRender={forceRender} - indexPath={indexPath} - permissions={permissions} - readOnly={readOnly} - /> +
+ ({ + ...field, + path: createNestedFieldPath(path, field), + }))} + fieldTypes={fieldTypes} + forceRender={forceRender} + indexPath={indexPath} + margins={false} + permissions={permissions} + readOnly={readOnly} + /> +
) } diff --git a/test/fields/collections/Row/index.ts b/test/fields/collections/Row/index.ts index 206ebd536a..f0cdb3460f 100644 --- a/test/fields/collections/Row/index.ts +++ b/test/fields/collections/Row/index.ts @@ -47,6 +47,33 @@ const RowFields: CollectionConfig = { }, ], }, + { + type: 'row', + fields: [ + { + label: 'Collapsible within a row', + type: 'collapsible', + fields: [ + { + name: 'field_within_collapsible_a', + label: 'Field within collapsible', + type: 'text', + }, + ], + }, + { + label: 'Collapsible within a row', + type: 'collapsible', + fields: [ + { + name: 'field_within_collapsible_b', + label: 'Field within collapsible', + type: 'text', + }, + ], + }, + ], + }, ], } diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts index 0e35a9e0de..c0532326a3 100644 --- a/test/fields/e2e.spec.ts +++ b/test/fields/e2e.spec.ts @@ -1445,7 +1445,7 @@ describe('fields', () => { await expect(idHeadings).toHaveCount(1) }) - test('should render row fields inline', async () => { + test('should render row fields inline and with explicit widths', async () => { await page.goto(url.create) const fieldA = page.locator('input#field-field_with_width_a') await expect(fieldA).toBeVisible() @@ -1453,9 +1453,38 @@ describe('fields', () => { await expect(fieldB).toBeVisible() const fieldABox = await fieldA.boundingBox() const fieldBBox = await fieldB.boundingBox() - // give it some wiggle room of like 2px to account for differences in rendering + + // Check that the top value of the fields are the same + // Give it some wiggle room of like 2px to account for differences in rendering + const tolerance = 2 + expect(fieldABox.y).toBeLessThanOrEqual(fieldBBox.y + tolerance) + + // Check that the widths of the fields are the same const difference = Math.abs(fieldABox.width - fieldBBox.width) - expect(difference).toBeLessThanOrEqual(2) + expect(difference).toBeLessThanOrEqual(tolerance) + }) + + test('should render nested row fields in the correct position ', async () => { + await page.goto(url.create) + + // These fields are not given explicit `width` values + await page.goto(url.create) + const fieldA = page.locator('input#field-field_within_collapsible_a') + await expect(fieldA).toBeVisible() + const fieldB = page.locator('input#field-field_within_collapsible_b') + await expect(fieldB).toBeVisible() + const fieldABox = await fieldA.boundingBox() + const fieldBBox = await fieldB.boundingBox() + + // Check that the top value of the fields are the same + // Give it some wiggle room of like 2px to account for differences in rendering + const tolerance = 2 + expect(fieldABox.y).toBeLessThanOrEqual(fieldBBox.y + tolerance) + + // Check that the widths of the fields are the same + const collapsibleDifference = Math.abs(fieldABox.width - fieldBBox.width) + + expect(collapsibleDifference).toBeLessThanOrEqual(tolerance) }) })