,
@@ -1244,54 +1243,48 @@ const DataGridComponent = React.forwardRef(function DataGridComponent(
return (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
setActionResult(null)}
apiRef={apiRef}
/>
-
);
});
@@ -1302,7 +1295,8 @@ export default createBuiltin(DataGridComponent, {
errorProp: 'error',
loadingPropSource: ['rows', 'columns'],
loadingProp: 'loading',
- resizableHeightProp: 'height',
+ defaultLayoutHeight: 360,
+ minimumLayoutHeight: 100,
argTypes: {
rowsSource: {
helperText: 'Defines how rows are provided to the grid.',
@@ -1383,12 +1377,6 @@ export default createBuiltin(DataGridComponent, {
enum: ['compact', 'standard', 'comfortable'],
default: 'compact',
},
- height: {
- helperText: 'The height of the data grid.',
- type: 'number',
- default: 350,
- minimum: 100,
- },
loading: {
helperText:
"Displays a loading animation indicating the data grid isn't ready to present data yet.",
diff --git a/packages/toolpad-components/src/Spacer.tsx b/packages/toolpad-components/src/Spacer.tsx
new file mode 100644
index 00000000000..92f48675f94
--- /dev/null
+++ b/packages/toolpad-components/src/Spacer.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Box, BoxProps } from '@mui/material';
+import createBuiltin from './createBuiltin';
+import { SX_PROP_HELPER_TEXT } from './constants';
+
+const SPACER_MINIMUM_HEIGHT = 60; // pixels
+
+function Spacer(props: BoxProps) {
+ return
;
+}
+
+export default createBuiltin(Spacer, {
+ helperText: 'Spacer component.\nIt allows for creating space between elements.',
+ minimumLayoutHeight: SPACER_MINIMUM_HEIGHT,
+ argTypes: {
+ sx: {
+ helperText: SX_PROP_HELPER_TEXT,
+ type: 'object',
+ },
+ },
+});
diff --git a/packages/toolpad-components/src/index.tsx b/packages/toolpad-components/src/index.tsx
index d0f112ad58c..0ed2e3c78b1 100644
--- a/packages/toolpad-components/src/index.tsx
+++ b/packages/toolpad-components/src/index.tsx
@@ -36,6 +36,8 @@ export { default as Checkbox } from './Checkbox';
export { default as Form } from './Form';
+export { default as Spacer } from './Spacer';
+
export { default as Metric } from './Metric';
export type { ColorScale, ColorScaleStop } from './Metric';
diff --git a/packages/toolpad-core/src/appDom.ts b/packages/toolpad-core/src/appDom.ts
index 741fccb8d10..e14bef164b2 100644
--- a/packages/toolpad-core/src/appDom.ts
+++ b/packages/toolpad-core/src/appDom.ts
@@ -125,6 +125,7 @@ export interface ElementNode
extends AppDomNodeBase {
readonly horizontalAlign?: BoxProps['justifyContent'];
readonly verticalAlign?: BoxProps['alignItems'];
readonly columnSize?: number;
+ readonly height?: number;
};
}
@@ -822,6 +823,22 @@ export function moveNode(
return setNodeParent(dom, node, parent.id, parentProp, parentIndex);
}
+export function spreadNode(dom: AppDom, node: Child) {
+ const parent = getParent(dom, node);
+ const parentProp = node.parentProp;
+
+ let draft = dom;
+ if (parent && parentProp && isElement(node)) {
+ for (const child of getChildNodes(draft, node).children) {
+ const parentIndex = getNewParentIndexBeforeNode(draft, node, parentProp);
+ draft = setNodeParent(draft, child, parent.id, parentProp, parentIndex);
+ }
+ draft = removeNode(draft, node.id);
+ }
+
+ return draft;
+}
+
export function nodeExists(dom: AppDom, nodeId: NodeId): boolean {
return !!getMaybeNode(dom, nodeId);
}
@@ -1025,8 +1042,18 @@ export function duplicateNode(
throw new Error(`Node "${node.id}" can't be duplicated, it must have a parent`);
}
- const fragment = cloneFragment(dom, node.id);
- return addFragment(dom, fragment, parent.id, parentProp);
+ if (isElement(node)) {
+ const fragment = cloneFragment(dom, node.id);
+ return addFragment(
+ dom,
+ fragment,
+ parent.id,
+ parentProp,
+ getNewParentIndexAfterNode(dom, node, parentProp),
+ );
+ }
+
+ return dom;
}
const RENDERTREE_NODES = ['app', 'page', 'element', 'query', 'mutation', 'theme'] as const;
diff --git a/packages/toolpad-core/src/types.ts b/packages/toolpad-core/src/types.ts
index 05bb5f88a0a..3b1e4991c28 100644
--- a/packages/toolpad-core/src/types.ts
+++ b/packages/toolpad-core/src/types.ts
@@ -397,7 +397,7 @@ export type RuntimeEvent = {
[K in keyof RuntimeEvents]: { type: K } & RuntimeEvents[K];
}[keyof RuntimeEvents];
-export interface ComponentConfig {
+export interface ComponentConfig
> {
/**
* A short explanatory text that'll be shown in the editor UI when this component is referenced.
* May contain Markdown.
@@ -426,10 +426,13 @@ export interface ComponentConfig
{
*/
layoutDirection?: 'vertical' | 'horizontal' | 'both';
/**
- * Designates a property as "the resizable height property". If Toolpad detects any
- * vertical resizing of the component it will forward it to this property.
+ * Initial height of the component container box.
*/
- resizableHeightProp?: keyof P & string;
+ defaultLayoutHeight?: number;
+ /**
+ * Minimum height that the component container box can be resized to.
+ */
+ minimumLayoutHeight?: number;
/**
* Describes the individual properties for this component.
*/
diff --git a/test/models/ToolpadEditor.ts b/test/models/ToolpadEditor.ts
index c7ee8b99c92..bce9c05aad6 100644
--- a/test/models/ToolpadEditor.ts
+++ b/test/models/ToolpadEditor.ts
@@ -1,6 +1,7 @@
import { setTimeout } from 'timers/promises';
import { expect, FrameLocator, Locator, Page } from '@playwright/test';
import { gotoIfNotCurrent } from './shared';
+import { waitForBoundingBox } from '../utils/locators';
class CreateComponentDialog {
readonly page: Page;
@@ -119,7 +120,7 @@ export class ToolpadEditor {
await this.page.mouse.move(
sourceBoundingBox!.x + sourceBoundingBox!.width / 2,
sourceBoundingBox!.y + sourceBoundingBox!.height / 2,
- { steps: 10 },
+ { steps },
);
await this.page.mouse.down();
@@ -146,22 +147,20 @@ export class ToolpadEditor {
await this.componentCatalog.hover();
- let pageRootBoundingBox;
- await expect(async () => {
- pageRootBoundingBox = await this.pageRoot.boundingBox();
- expect(pageRootBoundingBox).toBeTruthy();
- }).toPass();
+ const pageRootBoundingBox = await waitForBoundingBox(this.pageRoot);
if (!moveTargetX) {
moveTargetX = pageRootBoundingBox!.x + pageRootBoundingBox!.width / 2;
}
if (!moveTargetY) {
- moveTargetY = pageRootBoundingBox!.y + pageRootBoundingBox!.height / 2;
+ moveTargetY = pageRootBoundingBox!.y + pageRootBoundingBox!.height + 12;
}
const sourceLocator = this.getComponentCatalogItem(componentName);
await expect(sourceLocator).toBeVisible();
+ await sourceLocator.hover();
+
await this.dragTo(sourceLocator, moveTargetX!, moveTargetY!, hasDrop, steps);
await style.evaluate((elm) => elm.parentNode?.removeChild(elm));
diff --git a/test/utils/locators.ts b/test/utils/locators.ts
index 56ac14c82da..a3dc2cf9fbe 100644
--- a/test/utils/locators.ts
+++ b/test/utils/locators.ts
@@ -2,15 +2,23 @@ import { Page, Locator, expect } from '../playwright/test';
type BoundingBox = NonNullable>>;
-export async function getCenter(locator: Locator) {
- let targetBoundingBox: BoundingBox | null = null;
+export async function waitForBoundingBox(
+ locator: Locator,
+): Promise> {
+ let boundingBox: BoundingBox | null = null;
await expect(async () => {
- targetBoundingBox = await locator.boundingBox();
- expect(targetBoundingBox).toBeTruthy();
- expect(targetBoundingBox!.width).toBeGreaterThan(0);
- expect(targetBoundingBox!.height).toBeGreaterThan(0);
+ boundingBox = await locator.boundingBox();
+ expect(boundingBox).toBeTruthy();
+ expect(boundingBox!.width).toBeGreaterThan(0);
+ expect(boundingBox!.height).toBeGreaterThan(0);
}).toPass();
+ return boundingBox!;
+}
+
+export async function getCenter(locator: Locator) {
+ const targetBoundingBox = await waitForBoundingBox(locator);
+
return {
x: targetBoundingBox!.x + targetBoundingBox!.width / 2,
y: targetBoundingBox!.y + targetBoundingBox!.height / 2,
diff --git a/test/visual/components/fixture/toolpad/application.yml b/test/visual/components/fixture/toolpad/application.yml
new file mode 100644
index 00000000000..6b008228134
--- /dev/null
+++ b/test/visual/components/fixture/toolpad/application.yml
@@ -0,0 +1,3 @@
+apiVersion: v1
+kind: application
+spec: {}
diff --git a/test/visual/components/fixture/toolpad/pages/blank/page.yml b/test/visual/components/fixture/toolpad/pages/blank/page.yml
index dc75ccf1a19..a4a31d642ce 100644
--- a/test/visual/components/fixture/toolpad/pages/blank/page.yml
+++ b/test/visual/components/fixture/toolpad/pages/blank/page.yml
@@ -1,6 +1,9 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.50/docs/schemas/v1/definitions.json#properties/Page
+
apiVersion: v1
kind: page
spec:
- id: QYjq2fJ
title: blank
display: shell
+ alias:
+ - QYjq2fJ
diff --git a/test/visual/components/fixture/toolpad/pages/components/page.yml b/test/visual/components/fixture/toolpad/pages/components/page.yml
index a194a9adf87..c0d087af411 100644
--- a/test/visual/components/fixture/toolpad/pages/components/page.yml
+++ b/test/visual/components/fixture/toolpad/pages/components/page.yml
@@ -1,7 +1,8 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.50/docs/schemas/v1/definitions.json#properties/Page
+
apiVersion: v1
kind: page
spec:
- id: f703ps3
title: components
content:
- component: Button
@@ -116,3 +117,5 @@ spec:
props:
mode: switch
label: Switch
+ alias:
+ - f703ps3
diff --git a/test/visual/components/fixture/toolpad/pages/dragdrop/page.yml b/test/visual/components/fixture/toolpad/pages/dragdrop/page.yml
index f68ca1d9d0d..a1fc3c229f8 100644
--- a/test/visual/components/fixture/toolpad/pages/dragdrop/page.yml
+++ b/test/visual/components/fixture/toolpad/pages/dragdrop/page.yml
@@ -1,7 +1,8 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.50/docs/schemas/v1/definitions.json#properties/Page
+
apiVersion: v1
kind: page
spec:
- id: 8ixPqyI
title: dragdrop
display: shell
content:
@@ -19,3 +20,5 @@ spec:
content: contained
- component: Paper
name: paper1
+ alias:
+ - 8ixPqyI
diff --git a/test/visual/components/fixture/toolpad/pages/grids/page.yml b/test/visual/components/fixture/toolpad/pages/grids/page.yml
new file mode 100644
index 00000000000..83b532d77bf
--- /dev/null
+++ b/test/visual/components/fixture/toolpad/pages/grids/page.yml
@@ -0,0 +1,49 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.50/docs/schemas/v1/definitions.json#properties/Page
+
+apiVersion: v1
+kind: page
+spec:
+ title: grids
+ display: shell
+ content:
+ - component: PageRow
+ name: pageRow
+ props:
+ justifyContent: start
+ children:
+ - component: PageColumn
+ name: pageColumn
+ layout:
+ columnSize: 1
+ children:
+ - component: DataGrid
+ name: dataGrid
+ layout:
+ columnSize: 1
+ height: 120
+ props:
+ rows:
+ - id: one
+ columns:
+ - field: id
+ type: string
+ - component: DataGrid
+ name: dataGrid2
+ props:
+ rows:
+ - id: two
+ columns:
+ - field: id
+ type: string
+ layout:
+ height: 120
+ - component: DataGrid
+ name: dataGrid1
+ props:
+ rows:
+ - id: three
+ columns:
+ - field: id
+ type: string
+ alias:
+ - Dh9u36B
diff --git a/test/visual/components/fixture/toolpad/pages/rows/page.yml b/test/visual/components/fixture/toolpad/pages/rows/page.yml
index fa6cb1e2196..6aaaf9868b6 100644
--- a/test/visual/components/fixture/toolpad/pages/rows/page.yml
+++ b/test/visual/components/fixture/toolpad/pages/rows/page.yml
@@ -1,7 +1,8 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.50/docs/schemas/v1/definitions.json#properties/Page
+
apiVersion: v1
kind: page
spec:
- id: 5YDOftB
title: rows
display: shell
content:
@@ -14,3 +15,5 @@ spec:
]
props:
justifyContent: start
+ alias:
+ - 5YDOftB
diff --git a/test/visual/components/fixture/toolpad/pages/text/page.yml b/test/visual/components/fixture/toolpad/pages/text/page.yml
index 37e2ce79792..77701e105c8 100644
--- a/test/visual/components/fixture/toolpad/pages/text/page.yml
+++ b/test/visual/components/fixture/toolpad/pages/text/page.yml
@@ -1,7 +1,8 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.50/docs/schemas/v1/definitions.json#properties/Page
+
apiVersion: v1
kind: page
spec:
- id: QYjq2fJ
title: text
display: shell
content:
@@ -59,3 +60,5 @@ spec:
props:
mode: link
value: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+ alias:
+ - QYjq2fJ
diff --git a/test/visual/components/index.spec.ts b/test/visual/components/index.spec.ts
index 5e4f217cde8..44fe4dd1a97 100644
--- a/test/visual/components/index.spec.ts
+++ b/test/visual/components/index.spec.ts
@@ -3,7 +3,7 @@ import * as url from 'url';
import { ToolpadEditor } from '../../models/ToolpadEditor';
import { ToolpadRuntime } from '../../models/ToolpadRuntime';
import { expect, test } from '../../playwright/localTest';
-import { clickCenter } from '../../utils/locators';
+import { clickCenter, waitForBoundingBox } from '../../utils/locators';
const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
@@ -114,6 +114,67 @@ test('showing grid while resizing elements', async ({ page, argosScreenshot }) =
await argosScreenshot('resize-grid');
});
+test('resizing element heights', async ({ page, argosScreenshot }) => {
+ const editorModel = new ToolpadEditor(page);
+ await editorModel.goToPage('grids');
+
+ await editorModel.waitForOverlay();
+
+ const appCanvasBoundingBox = await editorModel.appCanvas.locator('body').boundingBox();
+
+ const screenshotConfig = {
+ clip: appCanvasBoundingBox || undefined,
+ };
+
+ const firstGrid = editorModel.appCanvas.getByRole('grid').nth(0);
+
+ await clickCenter(page, firstGrid);
+ await argosScreenshot('vertical-resize-before', screenshotConfig);
+
+ const firstGridBoundingBox = await waitForBoundingBox(firstGrid);
+
+ await page.mouse.move(
+ firstGridBoundingBox!.x + firstGridBoundingBox!.width / 2,
+ firstGridBoundingBox!.y + firstGridBoundingBox!.height - 4,
+ { steps: 10 },
+ );
+
+ await page.mouse.down();
+
+ await page.mouse.move(
+ firstGridBoundingBox!.x + firstGridBoundingBox!.width / 2,
+ firstGridBoundingBox!.y + firstGridBoundingBox!.height + 100,
+ { steps: 10 },
+ );
+
+ await page.mouse.up();
+
+ const thirdGrid = editorModel.appCanvas.getByRole('grid').nth(2);
+
+ await clickCenter(page, thirdGrid);
+
+ const thirdGridBoundingBox = await waitForBoundingBox(thirdGrid);
+
+ await page.mouse.move(
+ thirdGridBoundingBox!.x + thirdGridBoundingBox!.width / 2,
+ thirdGridBoundingBox!.y + thirdGridBoundingBox!.height - 4,
+ { steps: 10 },
+ );
+
+ await page.mouse.down();
+
+ await page.mouse.move(
+ thirdGridBoundingBox!.x + thirdGridBoundingBox!.width / 2,
+ thirdGridBoundingBox!.y + thirdGridBoundingBox!.height + 100,
+ { steps: 10 },
+ );
+
+ await page.mouse.up();
+
+ await clickCenter(page, firstGrid);
+ await argosScreenshot('vertical-resize-after', screenshotConfig);
+});
+
test('showing drag-and-drop previews', async ({ page, argosScreenshot }) => {
const editorModel = new ToolpadEditor(page);
await editorModel.goToPage('dragdrop');