Props panel sections

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx

@@ -1,4 +1,4 @@
-import { Stack, styled, Typography } from '@mui/material';
+import { Stack, styled, Typography, Divider } from '@mui/material';
 import * as React from 'react';
 import { ArgTypeDefinition, ArgTypeDefinitions, ComponentConfig } from '@mui/toolpad-core';
 import { ExactEntriesOf } from '../../../utils/types';
@@ -20,11 +20,15 @@ import {
 
 const classes = {
   control: 'Toolpad_Control',
+  sectionHeading: 'Toolpad_ControlsSectionHeading',
 };
 
-const ComponentPropsEditorRoot = styled('div')(({ theme }) => ({
+const ComponentEditorRoot = styled('div')(({ theme }) => ({
   [`& .${classes.control}`]: {
-    margin: theme.spacing(1, 0),
+    margin: theme.spacing(0, 0),
+  },
+  [`& .${classes.sectionHeading}`]: {
+    margin: theme.spacing(0, 0, -0.5, 0),
   },
 }));
 
@@ -50,10 +54,10 @@ function ComponentPropsEditor<P>({ componentConfig, node }: ComponentPropsEditor
   const hasLayoutControls = hasLayoutHorizontalControls || hasLayoutVerticalControls;
 
   return (
-    <ComponentPropsEditorRoot>
+    <React.Fragment>
       {hasLayoutControls ? (
         <React.Fragment>
-          <Typography variant="subtitle2" sx={{ mt: 1 }}>
+          <Typography variant="overline" className={classes.sectionHeading}>
             Layout:
           </Typography>
           {hasLayoutHorizontalControls ? (
@@ -76,9 +80,10 @@ function ComponentPropsEditor<P>({ componentConfig, node }: ComponentPropsEditor
               />
             </div>
           ) : null}
+          <Divider sx={{ mt: 1 }} />
         </React.Fragment>
       ) : null}
-      <Typography variant="subtitle2" sx={{ mt: hasLayoutControls ? 2 : 1 }}>
+      <Typography variant="overline" className={classes.sectionHeading}>
         Properties:
       </Typography>
       {(Object.entries(componentConfig.argTypes) as ExactEntriesOf<ArgTypeDefinitions<P>>).map(
@@ -94,7 +99,7 @@ function ComponentPropsEditor<P>({ componentConfig, node }: ComponentPropsEditor
             </div>
           ) : null,
       )}
-    </ComponentPropsEditorRoot>
+    </React.Fragment>
   );
 }
 
@@ -115,11 +120,12 @@ function SelectedNodeEditor({ node }: SelectedNodeEditorProps) {
       <Typography variant="subtitle1">
         Component: {component?.displayName || '<unknown>'}
       </Typography>
-      <Typography variant="subtitle2" sx={{ mb: 2 }}>
+      <Typography variant="subtitle2" sx={{ mb: 1 }}>
         ID: {node.id}
       </Typography>
       <NodeNameEditor node={node} />
       {nodeError ? <ErrorAlert error={nodeError} /> : null}
+      <Divider sx={{ mt: 1 }} />
       {node ? (
         <React.Fragment>
           <ComponentPropsEditor componentConfig={componentConfig} node={node} />
@@ -142,13 +148,13 @@ export default function ComponentEditor({ className }: ComponentEditorProps) {
   const selectedNode = selection ? appDom.getNode(dom, selection) : null;
 
   return (
-    <div className={className}>
+    <ComponentEditorRoot className={className}>
       {selectedNode && appDom.isElement(selectedNode) ? (
         // Add key to make sure it mounts every time selected node changes
         <SelectedNodeEditor key={selectedNode.id} node={selectedNode} />
       ) : (
         <PageOptionsPanel />
       )}
-    </div>
+    </ComponentEditorRoot>
   );
 }

packages/toolpad-app/src/toolpad/propertyControls/HorizontalAlign.tsx

@@ -22,7 +22,7 @@ function HorizontalAlignPropEditor({
 
   return (
     <Box>
-      <Typography>{label}:</Typography>
+      <Typography variant="body2">{label}:</Typography>
       <ToggleButtonGroup
         exclusive
         disabled={disabled}

packages/toolpad-app/src/toolpad/propertyControls/VerticalAlign.tsx

@@ -19,7 +19,7 @@ function VerticalAlignPropEditor({
 
   return (
     <Box>
-      <Typography>{label}:</Typography>
+      <Typography variant="body2">{label}:</Typography>
       <ToggleButtonGroup
         exclusive
         disabled={disabled}

packages/toolpad-components/src/Button.tsx

@@ -13,30 +13,30 @@ function Button({ content, ...rest }: ButtonProps) {
 export default createComponent(Button, {
   layoutDirection: 'both',
   argTypes: {
+    onClick: {
+      typeDef: { type: 'event' },
+    },
     content: {
       typeDef: { type: 'string' },
       defaultValue: 'Button Text',
     },
-    onClick: {
-      typeDef: { type: 'event' },
-    },
     variant: {
       typeDef: { type: 'string', enum: ['contained', 'outlined', 'text'] },
       defaultValue: 'contained',
     },
-    disabled: {
-      typeDef: { type: 'boolean' },
-    },
-    fullWidth: {
-      typeDef: { type: 'boolean' },
-    },
     color: {
       typeDef: { type: 'string', enum: ['primary', 'secondary'] },
       defaultValue: 'primary',
     },
+    fullWidth: {
+      typeDef: { type: 'boolean' },
+    },
     loading: {
       typeDef: { type: 'boolean' },
     },
+    disabled: {
+      typeDef: { type: 'boolean' },
+    },
     sx: {
       typeDef: { type: 'object' },
     },

packages/toolpad-components/src/DataGrid.tsx

@@ -338,6 +338,16 @@ export default createComponent(DataGridComponent, {
       typeDef: { type: 'array', schema: '/schemas/DataGridColumns.json' },
       control: { type: 'GridColumns' },
     },
+    rowIdField: {
+      typeDef: { type: 'string' },
+      control: { type: 'RowIdFieldSelect' },
+      label: 'Id field',
+    },
+    selection: {
+      typeDef: { type: 'object' },
+      onChangeProp: 'onSelectionChange',
+      defaultValue: null,
+    },
     density: {
       typeDef: { type: 'string', enum: ['compact', 'standard', 'comfortable'] },
       defaultValue: 'compact',
@@ -346,21 +356,11 @@ export default createComponent(DataGridComponent, {
       typeDef: { type: 'number' },
       defaultValue: 350,
     },
-    sx: {
-      typeDef: { type: 'object' },
-    },
-    selection: {
-      typeDef: { type: 'object' },
-      onChangeProp: 'onSelectionChange',
-      defaultValue: null,
-    },
     loading: {
       typeDef: { type: 'boolean' },
     },
-    rowIdField: {
-      typeDef: { type: 'string' },
-      control: { type: 'RowIdFieldSelect' },
-      label: 'Id field',
+    sx: {
+      typeDef: { type: 'object' },
     },
   },
 });

packages/toolpad-components/src/Select.tsx

@@ -31,34 +31,34 @@ export default createComponent(Select, {
   loadingPropSource: ['value', 'options'],
   loadingProp: 'disabled',
   argTypes: {
-    label: {
+    options: {
+      typeDef: { type: 'array', schema: '/schemas/SelectOptions.json' },
+      control: { type: 'SelectOptions' },
+      defaultValue: [],
+    },
+    value: {
       typeDef: { type: 'string' },
+      onChangeProp: 'onChange',
+      onChangeHandler: (event: React.ChangeEvent<HTMLSelectElement>) => event.target.value,
       defaultValue: '',
     },
-    disabled: {
-      typeDef: { type: 'boolean' },
+    label: {
+      typeDef: { type: 'string' },
+      defaultValue: '',
     },
     variant: {
       typeDef: { type: 'string', enum: ['outlined', 'filled', 'standard'] },
       defaultValue: 'outlined',
     },
-    fullWidth: {
-      typeDef: { type: 'boolean' },
-    },
     size: {
       typeDef: { type: 'string', enum: ['small', 'medium'] },
       defaultValue: 'small',
     },
-    value: {
-      typeDef: { type: 'string' },
-      onChangeProp: 'onChange',
-      onChangeHandler: (event: React.ChangeEvent<HTMLSelectElement>) => event.target.value,
-      defaultValue: '',
+    fullWidth: {
+      typeDef: { type: 'boolean' },
     },
-    options: {
-      typeDef: { type: 'array', schema: '/schemas/SelectOptions.json' },
-      control: { type: 'SelectOptions' },
-      defaultValue: [],
+    disabled: {
+      typeDef: { type: 'boolean' },
     },
     sx: {
       typeDef: { type: 'object' },

packages/toolpad-components/src/Stack.tsx

@@ -3,13 +3,6 @@ import { createComponent } from '@mui/toolpad-core';
 
 export default createComponent(Stack, {
   argTypes: {
-    gap: {
-      typeDef: { type: 'number' },
-      defaultValue: 2,
-    },
-    margin: {
-      typeDef: { type: 'number' },
-    },
     direction: {
       typeDef: {
         type: 'string',
@@ -31,6 +24,13 @@ export default createComponent(Stack, {
       },
       defaultValue: 'start',
     },
+    gap: {
+      typeDef: { type: 'number' },
+      defaultValue: 2,
+    },
+    margin: {
+      typeDef: { type: 'number' },
+    },
     children: {
       typeDef: { type: 'element' },
       control: { type: 'slots' },

packages/toolpad-components/src/TextField.tsx

@@ -18,28 +18,28 @@ function TextField(props: TextFieldProps) {
 export default createComponent(TextField, {
   layoutDirection: 'both',
   argTypes: {
+    value: {
+      typeDef: { type: 'string' },
+      onChangeProp: 'onChange',
+      onChangeHandler: (event: React.ChangeEvent<HTMLInputElement>) => event.target.value,
+      defaultValue: '',
+    },
     label: {
       typeDef: { type: 'string' },
     },
     variant: {
       typeDef: { type: 'string', enum: ['outlined', 'filled', 'standard'] },
       defaultValue: 'outlined',
     },
-    disabled: {
-      typeDef: { type: 'boolean' },
-    },
-    fullWidth: {
-      typeDef: { type: 'boolean' },
-    },
     size: {
       typeDef: { type: 'string', enum: ['small', 'normal'] },
       defaultValue: 'small',
     },
-    value: {
-      typeDef: { type: 'string' },
-      onChangeProp: 'onChange',
-      onChangeHandler: (event: React.ChangeEvent<HTMLInputElement>) => event.target.value,
-      defaultValue: '',
+    fullWidth: {
+      typeDef: { type: 'boolean' },
+    },
+    disabled: {
+      typeDef: { type: 'boolean' },
     },
     sx: {
       typeDef: { type: 'object' },