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

fix: row field width (#3550)

Browse Source
This commit is contained in:
Jacob Fletcher
2023-10-10 14:09:47 -04:00
committed by GitHub
parent b1e449e005
commit 9ff014bbfe
3 changed files with 70 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/payload/src/admin/components/forms/field-types/Row/index.scss
View File

@@ -3,18 +3,28 @@
.field-type.row {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: var(--base);
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);
}
@include mid-break {
flex-direction: column;
display: block;
margin-left: 0;
margin-right: 0;
width: 100%;
> * {
margin-left: 0;
margin-right: 0;
width: 100% !important;
padding-left: 0;
padding-right: 0;
}
}
}

21
test/fields/collections/Row/index.ts
View File

@@ -26,6 +26,27 @@ const RowFields: CollectionConfig = {
},
],
},
{
type: 'row',
fields: [
{
name: 'field_with_width_a',
label: 'Field with 50% width',
type: 'text',
admin: {
width: '50%',
},
},
{
name: 'field_with_width_b',
label: 'Field with 50% width',
type: 'text',
admin: {
width: '50%',
},
},
],
},
],
}

58
test/fields/e2e.spec.ts
View File

@@ -79,42 +79,43 @@ describe('fields', () => {
await expect(textCell).toHaveText(String(numberDoc.number))
})
test('should filter Number fields in the collection view - greaterThanOrEqual', async () => {
await page.goto(url.list);
await page.goto(url.list)
// should have 3 entries
await expect(page.locator('table >> tbody >> tr')).toHaveCount(3);
await expect(page.locator('table >> tbody >> tr')).toHaveCount(3)
// open the filter options
await page.locator('.list-controls__toggle-where').click();
await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible();
await page.locator('.where-builder__add-first-filter').click();
await page.locator('.list-controls__toggle-where').click()
await expect(page.locator('.list-controls__where.rah-static--height-auto')).toBeVisible()
await page.locator('.where-builder__add-first-filter').click()
const initialField = page.locator('.condition__field');
const operatorField = page.locator('.condition__operator');
const valueField = page.locator('.condition__value >> input');
const initialField = page.locator('.condition__field')
const operatorField = page.locator('.condition__operator')
const valueField = page.locator('.condition__value >> input')
// select Number field to filter on
await initialField.click();
const initialFieldOptions = initialField.locator('.rs__option');
await initialFieldOptions.locator('text=number').first().click();
expect(initialField.locator('.rs__single-value')).toContainText('Number');
await initialField.click()
const initialFieldOptions = initialField.locator('.rs__option')
await initialFieldOptions.locator('text=number').first().click()
await expect(initialField.locator('.rs__single-value')).toContainText('Number')
// select >= operator
await operatorField.click();
const operatorOptions = operatorField.locator('.rs__option');
await operatorOptions.last().click();
expect(operatorField.locator('.rs__single-value')).toContainText('is greater than or equal to');
await operatorField.click()
const operatorOptions = operatorField.locator('.rs__option')
await operatorOptions.last().click()
await expect(operatorField.locator('.rs__single-value')).toContainText(
'is greater than or equal to',
)
// enter value of 3
await valueField.fill('3');
await expect(valueField).toHaveValue('3');
await wait(300);
await valueField.fill('3')
await expect(valueField).toHaveValue('3')
await wait(300)
// should have 2 entries after filtering
await expect(page.locator('table >> tbody >> tr')).toHaveCount(2);
});
await expect(page.locator('table >> tbody >> tr')).toHaveCount(2)
})
test('should create', async () => {
const input = 5
@@ -1430,6 +1431,19 @@ describe('fields', () => {
await expect(idHeadings).toBeVisible()
await expect(idHeadings).toHaveCount(1)
})
test('should render row fields inline', async () => {
await page.goto(url.create)
const fieldA = page.locator('input#field-field_with_width_a')
await expect(fieldA).toBeVisible()
const fieldB = page.locator('input#field-field_with_width_b')
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
const difference = Math.abs(fieldABox.width - fieldBBox.width)
expect(difference).toBeLessThanOrEqual(2)
})
})
describe('conditional logic', () => {