diff --git a/docs/data/toolpad/studio/reference/components/autocomplete.md b/docs/data/toolpad/studio/reference/components/autocomplete.md index 1bc70aff8ed..3aa4a4b7df1 100644 --- a/docs/data/toolpad/studio/reference/components/autocomplete.md +++ b/docs/data/toolpad/studio/reference/components/autocomplete.md @@ -8,16 +8,16 @@ A text input with autocomplete suggestions. Uses the Material UI [Autocomplete] ## Properties -| Name | Type | Default | Description | -| :------------------------------------------ | :------------------------------------- | :------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| options | array | [] | The options available to search from. | -| value | string | "" | The value of the autocomplete. | -| defaultValue | string | "" | A default value. | -| label | string | "Search…" | The label to display for the autocomplete. | -| fullWidth | boolean | | If true, the autocomplete will take up the full width of its container. | -| size | string | "small" | The size of the autocomplete. One of `small`, `medium`, or `large`. | -| loading | boolean | | If true, the autocomplete will display a loading indicator. | -| disabled | boolean | | If true, the autocomplete will be disabled. | -| name | string | | Name of this input. Used as a reference in form data. | -| isRequired | boolean | false | Whether the input is required to have a value. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :------------------------------------------ | :------------------------------------- | :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| options | array | [] | The options available to search from. | +| value | string | "" | The value of the autocomplete. | +| defaultValue | string | "" | A default value. | +| label | string | "Search…" | The label to display for the autocomplete. | +| fullWidth | boolean | | If true, the autocomplete will take up the full width of its container. | +| size | string | "small" | The size of the autocomplete. One of `small`, `medium`, or `large`. | +| loading | boolean | | If true, the autocomplete will display a loading indicator. | +| disabled | boolean | | If true, the autocomplete will be disabled. | +| name | string | | Name of this input. Used as a reference in form data. | +| isRequired | boolean | false | Whether the input is required to have a value. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/button.md b/docs/data/toolpad/studio/reference/components/button.md index 2292006173a..494d5d28bf2 100644 --- a/docs/data/toolpad/studio/reference/components/button.md +++ b/docs/data/toolpad/studio/reference/components/button.md @@ -4,20 +4,20 @@

API docs for the Toolpad Studio Button component.

-The Material UI [Button](https://mui.com/material-ui/react-button/) component. +The Material UI [Button](https://mui.com/toolpad/studio/components/button/) component. Buttons allow users to take actions, and make choices, with a single tap. ## Properties -| Name | Type | Default | Description | -| :--------------------------------------- | :------------------------------------- | :---------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| onClick | event | | Add logic to be executed when the user clicks the button. | -| content | string | "Button Text" | Will appear as the text content of the button. | -| variant | string | "contained" | One of the available Material UI Button [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `contained`, `outlined` or `text` | -| size | string | "small" | The size of the component. One of `small`, `medium`, or `large`. | -| color | string | "primary" | The theme color of the component. | -| fullWidth | boolean | | Whether the button should occupy all available horizontal space. | -| loading | boolean | | Displays a loading animation indicating the button isn't interactive yet | -| disabled | boolean | | Whether the button is disabled. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :--------------------------------------- | :------------------------------------- | :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| onClick | event | | Add logic to be executed when the user clicks the button. | +| content | string | "Button Text" | Will appear as the text content of the button. | +| variant | string | "contained" | One of the available Material UI Button [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `contained`, `outlined` or `text` | +| size | string | "small" | The size of the component. One of `small`, `medium`, or `large`. | +| color | string | "primary" | The theme color of the component. | +| fullWidth | boolean | | Whether the button should occupy all available horizontal space. | +| loading | boolean | | Displays a loading animation indicating the button isn't interactive yet | +| disabled | boolean | | Whether the button is disabled. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/chart.md b/docs/data/toolpad/studio/reference/components/chart.md index a0826b26eb2..17572917476 100644 --- a/docs/data/toolpad/studio/reference/components/chart.md +++ b/docs/data/toolpad/studio/reference/components/chart.md @@ -8,7 +8,7 @@ A chart component. ## Properties -| Name | Type | Default | Description | -| :---------------------------------- | :------------------------------------ | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| data | array | | The data to be displayed. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :---------------------------------- | :------------------------------------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| data | array | | The data to be displayed. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/checkbox.md b/docs/data/toolpad/studio/reference/components/checkbox.md index a1d747fcf4c..6709e30e958 100644 --- a/docs/data/toolpad/studio/reference/components/checkbox.md +++ b/docs/data/toolpad/studio/reference/components/checkbox.md @@ -6,17 +6,17 @@ ## Properties -| Name | Type | Default | Description | -| :--------------------------------------------- | :------------------------------------- | :------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| mode | string | "checkBox" | Defines how the content is rendered. Either as plain CheckBox, Switch | -| label | string | "Label" | A text or an element to be used in an enclosing label element. | -| checked | boolean | | If true, the component is checked. | -| color | string | "primary" | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. | -| disabled | boolean | false | If true, the component is disabled. | -| size | string | "medium" | The size of the component. small is equivalent to the dense checkbox, switch styling. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | -| fullWidth | boolean | | Whether the select should occupy all available horizontal space. | -| componentsProps | object | | The props used for each slot inside. | -| labelPlacement | string | "end" | The position of the label. | -| name | string | | Name of this input. Used as a reference in form data. | -| isRequired | boolean | false | Whether the input is required to have a value. | +| Name | Type | Default | Description | +| :--------------------------------------------- | :------------------------------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| mode | string | "checkBox" | Defines how the content is rendered. Either as plain CheckBox, Switch | +| label | string | "Label" | A text or an element to be used in an enclosing label element. | +| checked | boolean | | If true, the component is checked. | +| color | string | "primary" | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. | +| disabled | boolean | false | If true, the component is disabled. | +| size | string | "medium" | The size of the component. small is equivalent to the dense checkbox, switch styling. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| fullWidth | boolean | | Whether the select should occupy all available horizontal space. | +| componentsProps | object | | The props used for each slot inside. | +| labelPlacement | string | "end" | The position of the label. | +| name | string | | Name of this input. Used as a reference in form data. | +| isRequired | boolean | false | Whether the input is required to have a value. | diff --git a/docs/data/toolpad/studio/reference/components/container.md b/docs/data/toolpad/studio/reference/components/container.md index ec5b47fee42..d7a6d769374 100644 --- a/docs/data/toolpad/studio/reference/components/container.md +++ b/docs/data/toolpad/studio/reference/components/container.md @@ -8,8 +8,8 @@ The Material UI [Container](https://mui.com/material-ui/react-container/). ## Properties -| Name | Type | Default | Description | -| :-------------------------------------- | :------------------------------------- | :------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| children | element | | The content of the component. | -| visible | boolean | true | Control whether container element is visible. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :-------------------------------------- | :------------------------------------- | :------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| children | element | | The content of the component. | +| visible | boolean | true | Control whether container element is visible. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/data-grid.md b/docs/data/toolpad/studio/reference/components/data-grid.md index ac6a7889847..f4646aea29c 100644 --- a/docs/data/toolpad/studio/reference/components/data-grid.md +++ b/docs/data/toolpad/studio/reference/components/data-grid.md @@ -4,21 +4,21 @@

API docs for the Toolpad Studio DataGrid component.

-The [MUI X Data Grid](https://mui.com/x/react-data-grid/) component. +The [MUI X Data Grid](https://mui.com/toolpad/studio/components/data-grid/) component. The datagrid lets users display tabular data in a flexible grid. ## Properties -| Name | Type | Default | Description | -| :-------------------------------------------- | :------------------------------------- | :------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| rowsSource | string | "prop" | Defines how rows are provided to the grid. | -| rows | array | | The data to be displayed as rows. Must be an array of objects. | -| dataProviderId | string | | The backend data provider that will supply the rows to this grid | -| columns | array | | The columns to be displayed. | -| rowIdField | string | | Defines which column contains the [id](https://mui.com/x/react-data-grid/row-definition/#row-identifier) that uniquely identifies each row. | -| selection | object | null | The currently selected row. Or `null` in case no row has been selected. | -| density | string | "compact" | The [density](https://mui.com/x/react-data-grid/accessibility/#density-prop) of the rows. Possible values are `compact`, `standard`, or `comfortable`. | -| loading | boolean | | Displays a loading animation indicating the data grid isn't ready to present data yet. | -| hideToolbar | boolean | | Hide the toolbar area that contains the data grid user controls. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :-------------------------------------------- | :------------------------------------- | :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| rowsSource | string | "prop" | Defines how rows are provided to the grid. | +| rows | array | | The data to be displayed as rows. Must be an array of objects. | +| dataProviderId | string | | The backend data provider that will supply the rows to this grid | +| columns | array | | The columns to be displayed. | +| rowIdField | string | | Defines which column contains the [id](https://mui.com/x/react-data-grid/row-definition/#row-identifier) that uniquely identifies each row. | +| selection | object | null | The currently selected row. Or `null` in case no row has been selected. | +| density | string | "compact" | The [density](https://mui.com/x/react-data-grid/accessibility/#density-prop) of the rows. Possible values are `compact`, `standard`, or `comfortable`. | +| loading | boolean | | Displays a loading animation indicating the data grid isn't ready to present data yet. | +| hideToolbar | boolean | | Hide the toolbar area that contains the data grid user controls. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/date-picker.md b/docs/data/toolpad/studio/reference/components/date-picker.md index 6cda4262a1f..4559b40ade6 100644 --- a/docs/data/toolpad/studio/reference/components/date-picker.md +++ b/docs/data/toolpad/studio/reference/components/date-picker.md @@ -4,22 +4,22 @@

API docs for the Toolpad Studio DatePicker component.

-The [MUI X Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component. +The [MUI X Date Picker](https://mui.com/toolpad/studio/components/date-picker/) component. The date picker lets the user select a date. ## Properties -| Name | Type | Default | Description | -| :------------------------------------------ | :------------------------------------- | :------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| value | string | "" | The currently selected date. | -| format | string | "" | The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings is always be in the `YYYY-MM-DD` format. Leave empty to let the end-user locale define the format. | -| defaultValue | string | "" | A default value for the date picker. | -| label | string | | A label that describes the content of the date picker, for example "Arrival date". | -| name | string | | Name of this input. Used as a reference in form data. | -| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` | -| size | string | "small" | The size of the component. One of `small`, or `medium`. | -| fullWidth | boolean | | Whether the button should occupy all available horizontal space. | -| disabled | boolean | | The date picker is disabled. | -| isRequired | boolean | false | Whether the input is required to have a value. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :------------------------------------------ | :------------------------------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| value | string | "" | The currently selected date. | +| format | string | "" | The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings is always be in the `YYYY-MM-DD` format. Leave empty to let the end-user locale define the format. | +| defaultValue | string | "" | A default value for the date picker. | +| label | string | | A label that describes the content of the date picker, for example "Arrival date". | +| name | string | | Name of this input. Used as a reference in form data. | +| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` | +| size | string | "small" | The size of the component. One of `small`, or `medium`. | +| fullWidth | boolean | | Whether the button should occupy all available horizontal space. | +| disabled | boolean | | The date picker is disabled. | +| isRequired | boolean | false | Whether the input is required to have a value. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/file-picker.md b/docs/data/toolpad/studio/reference/components/file-picker.md index a20c86ff659..987d611ee4d 100644 --- a/docs/data/toolpad/studio/reference/components/file-picker.md +++ b/docs/data/toolpad/studio/reference/components/file-picker.md @@ -9,12 +9,12 @@ It allows users to take select and read files. ## Properties -| Name | Type | Default | Description | -| :---------------------------------------- | :------------------------------------- | :-------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| value | object | | The value that is controlled by this FilePicker. | -| label | string | | A label that describes the content of the FilePicker, for example "Profile Image". | -| multiple | boolean | true | Whether the FilePicker should accept multiple files. | -| disabled | boolean | | Whether the FilePicker is disabled. | -| name | string | | Name of this input. Used as a reference in form data. | -| isRequired | boolean | false | Whether the input is required to have a value. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :---------------------------------------- | :------------------------------------- | :-------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| value | object | | The value that is controlled by this FilePicker. | +| label | string | | A label that describes the content of the FilePicker, for example "Profile Image". | +| multiple | boolean | true | Whether the FilePicker should accept multiple files. | +| disabled | boolean | | Whether the FilePicker is disabled. | +| name | string | | Name of this input. Used as a reference in form data. | +| isRequired | boolean | false | Whether the input is required to have a value. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/form.md b/docs/data/toolpad/studio/reference/components/form.md index 8b1319ad067..d923ae48dce 100644 --- a/docs/data/toolpad/studio/reference/components/form.md +++ b/docs/data/toolpad/studio/reference/components/form.md @@ -8,13 +8,13 @@ A form component. ## Properties -| Name | Type | Default | Description | -| :--------------------------------------------------- | :------------------------------------- | :----------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| children | element | | The form content. | -| value | object | {} | The value that is controlled by this form. | -| onSubmit | event | | Add logic to be executed when the user submits the form. | -| formControlsAlign | string | "end" | Form controls alignment. | -| formControlsFullWidth | boolean | false | Whether the form controls should occupy all available horizontal space. | -| submitButtonText | string | "Submit" | Submit button text. | -| hasResetButton | boolean | false | Show button to reset form values. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :--------------------------------------------------- | :------------------------------------- | :----------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| children | element | | The form content. | +| value | object | {} | The value that is controlled by this form. | +| onSubmit | event | | Add logic to be executed when the user submits the form. | +| formControlsAlign | string | "end" | Form controls alignment. | +| formControlsFullWidth | boolean | false | Whether the form controls should occupy all available horizontal space. | +| submitButtonText | string | "Submit" | Submit button text. | +| hasResetButton | boolean | false | Show button to reset form values. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/image.md b/docs/data/toolpad/studio/reference/components/image.md index 152c2c7f842..bcc076e2a86 100644 --- a/docs/data/toolpad/studio/reference/components/image.md +++ b/docs/data/toolpad/studio/reference/components/image.md @@ -16,4 +16,4 @@ The Image component lets you display images. | width | number | 400 | The image width in pixels | | height | number | 300 | The image height in pixels | | loading | boolean | false | Displays a loading animation indicating the image is still loading | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/list.md b/docs/data/toolpad/studio/reference/components/list.md index e19372869df..6c2e8c00429 100644 --- a/docs/data/toolpad/studio/reference/components/list.md +++ b/docs/data/toolpad/studio/reference/components/list.md @@ -4,14 +4,14 @@

API docs for the Toolpad Studio List component.

-A list component. +A [List](https://mui.com/toolpad/studio/components/list/) component. ## Properties -| Name | Type | Default | Description | -| :-------------------------------------------- | :-------------------------------------- | :-------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| itemCount | number | 3 | Number of items to render. | -| renderItem | template | | List item template to render. | -| disablePadding | boolean | | If true, vertical padding is removed from the list. | -| loading | boolean | false | Displays a loading animation indicating the list is still loading | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :-------------------------------------------- | :-------------------------------------- | :-------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| itemCount | number | 3 | Number of items to render. | +| renderItem | template | | List item template to render. | +| disablePadding | boolean | | If true, vertical padding is removed from the list. | +| loading | boolean | false | Displays a loading animation indicating the list is still loading | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/paper.md b/docs/data/toolpad/studio/reference/components/paper.md index 7f0434a3443..62b9a0d3c23 100644 --- a/docs/data/toolpad/studio/reference/components/paper.md +++ b/docs/data/toolpad/studio/reference/components/paper.md @@ -12,4 +12,4 @@ The Material UI [Paper](https://mui.com/material-ui/react-paper/) component. | :--------------------------------------- | :------------------------------------- | :---------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | elevation | number | 1 | The [elevation](https://mui.com/material-ui/react-paper/#elevation) can be used to establish a hierarchy between other content. In practical terms, the elevation controls the size of the shadow applied to the surface. In dark mode, raising the elevation also makes the surface lighter. | | children | element | | The content of the component. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/select.md b/docs/data/toolpad/studio/reference/components/select.md index 5430b4edf8c..1ed63a02427 100644 --- a/docs/data/toolpad/studio/reference/components/select.md +++ b/docs/data/toolpad/studio/reference/components/select.md @@ -8,16 +8,16 @@ The Material UI [Select](https://mui.com/material-ui/react-select/) component l ## Properties -| Name | Type | Default | Description | -| :------------------------------------------ | :------------------------------------- | :------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| options | array | [] | The available options to select from. | -| value | string | "" | The currently selected value. | -| defaultValue | string | "" | A default value. | -| label | string | "" | A label that describes the option that can be selected, for example "Country". | -| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` | -| size | string | "small" | The size of the select. One of `small`, or `medium`. | -| fullWidth | boolean | | Whether the select should occupy all available horizontal space. | -| disabled | boolean | | Whether the select is disabled. | -| name | string | | Name of this input. Used as a reference in form data. | -| isRequired | boolean | false | Whether the input is required to have a value. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :------------------------------------------ | :------------------------------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| options | array | [] | The available options to select from. | +| value | string | "" | The currently selected value. | +| defaultValue | string | "" | A default value. | +| label | string | "" | A label that describes the option that can be selected, for example "Country". | +| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` | +| size | string | "small" | The size of the select. One of `small`, or `medium`. | +| fullWidth | boolean | | Whether the select should occupy all available horizontal space. | +| disabled | boolean | | Whether the select is disabled. | +| name | string | | Name of this input. Used as a reference in form data. | +| isRequired | boolean | false | Whether the input is required to have a value. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/spacer.md b/docs/data/toolpad/studio/reference/components/spacer.md index e31797984ba..c6da697eaf4 100644 --- a/docs/data/toolpad/studio/reference/components/spacer.md +++ b/docs/data/toolpad/studio/reference/components/spacer.md @@ -9,6 +9,6 @@ It allows for creating space between elements. ## Properties -| Name | Type | Default | Description | -| :-------------------------------- | :------------------------------------ | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :-------------------------------- | :------------------------------------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/stack.md b/docs/data/toolpad/studio/reference/components/stack.md index d99330d635a..37b7bcfa8c1 100644 --- a/docs/data/toolpad/studio/reference/components/stack.md +++ b/docs/data/toolpad/studio/reference/components/stack.md @@ -8,12 +8,12 @@ The Material UI [Stack](https://mui.com/material-ui/react-stack/) component. ## Properties -| Name | Type | Default | Description | -| :-------------------------------------------- | :------------------------------------- | :---------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| direction | string | "row" | The flex layout direction. | -| alignItems | string | "start" | The flex layout align items. | -| justifyContent | string | "start" | The flex layout justify content. | -| gap | number | 2 | The gap between children. | -| margin | number | | The margin around the component. | -| children | element | | The content of the component. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :-------------------------------------------- | :------------------------------------- | :---------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| direction | string | "row" | The flex layout direction. | +| alignItems | string | "start" | The flex layout align items. | +| justifyContent | string | "start" | The flex layout justify content. | +| gap | number | 2 | The gap between children. | +| margin | number | | The margin around the component. | +| children | element | | The content of the component. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/text-field.md b/docs/data/toolpad/studio/reference/components/text-field.md index 27357472d8f..67ec6365ebd 100644 --- a/docs/data/toolpad/studio/reference/components/text-field.md +++ b/docs/data/toolpad/studio/reference/components/text-field.md @@ -4,23 +4,23 @@

API docs for the Toolpad Studio TextField component.

-The Material UI [TextField](https://mui.com/material-ui/react-text-field/) component lets you input a text value. +The Material UI [TextField](https://mui.com/toolpad/studio/components/text-field/) component lets you input a text value. ## Properties -| Name | Type | Default | Description | -| :------------------------------------------ | :------------------------------------- | :------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| value | string | "" | The value that is controlled by this text input. | -| defaultValue | string | "" | A default value for when the input is still empty. | -| label | string | | A label that describes the content of the text field, for example "First name". | -| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` | -| size | string | "small" | The size of the input. One of `small`, or `medium`. | -| fullWidth | boolean | | Whether the input should occupy all available horizontal space. | -| password | boolean | | Masks the input to hide what's being typed. | -| placeholder | string | | The short hint displayed in the `input` before the user enters a value. | -| disabled | boolean | | Whether the input is disabled. | -| name | string | | Name of this input. Used as a reference in form data. | -| isRequired | boolean | false | Whether the input is required to have a value. | -| minLength | number | 0 | Minimum value length. | -| maxLength | number | 0 | Maximum value length. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :------------------------------------------ | :------------------------------------- | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| value | string | "" | The value that is controlled by this text input. | +| defaultValue | string | "" | A default value for when the input is still empty. | +| label | string | | A label that describes the content of the text field, for example "First name". | +| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` | +| size | string | "small" | The size of the input. One of `small`, or `medium`. | +| fullWidth | boolean | | Whether the input should occupy all available horizontal space. | +| password | boolean | | Masks the input to hide what's being typed. | +| placeholder | string | | The short hint displayed in the `input` before the user enters a value. | +| disabled | boolean | | Whether the input is disabled. | +| name | string | | Name of this input. Used as a reference in form data. | +| isRequired | boolean | false | Whether the input is required to have a value. | +| minLength | number | 0 | Minimum value length. | +| maxLength | number | 0 | Maximum value length. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/docs/data/toolpad/studio/reference/components/text.md b/docs/data/toolpad/studio/reference/components/text.md index 1fe57b0c40a..2d7c820d935 100644 --- a/docs/data/toolpad/studio/reference/components/text.md +++ b/docs/data/toolpad/studio/reference/components/text.md @@ -8,12 +8,12 @@ The Text component lets you display text. Text can be rendered in multiple forms ## Properties -| Name | Type | Default | Description | -| :------------------------------------------ | :------------------------------------- | :---------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| mode | string | "text" | Defines how the content is rendered. Either as plain text, markdown, or as a link. | -| value | string | "text" | The text content. | -| href | string | "about:blank" | The url that is being linked. | -| openInNewTab | boolean | false | Clicking the link should open a new tab. | -| variant | string | "body1" | The Material UI typography [variant](https://mui.com/material-ui/customization/typography/#variants) that is used to display the text. | -| loading | boolean | false | Displays a loading animation instead of the text. Can be used when the content is not available yet. | -| sx | object | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | +| Name | Type | Default | Description | +| :------------------------------------------ | :------------------------------------- | :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| mode | string | "text" | Defines how the content is rendered. Either as plain text, markdown, or as a link. | +| value | string | "text" | The text content. | +| href | string | "about:blank" | The url that is being linked. | +| openInNewTab | boolean | false | Clicking the link should open a new tab. | +| variant | string | "body1" | The Material UI typography [variant](https://mui.com/material-ui/customization/typography/#variants) that is used to display the text. | +| loading | boolean | false | Displays a loading animation instead of the text. Can be used when the content is not available yet. | +| sx | object | | The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | diff --git a/packages/toolpad-studio-components/src/Button.tsx b/packages/toolpad-studio-components/src/Button.tsx index a6511c45a26..8e934e58bb5 100644 --- a/packages/toolpad-studio-components/src/Button.tsx +++ b/packages/toolpad-studio-components/src/Button.tsx @@ -13,7 +13,7 @@ function Button({ content, ...rest }: ButtonProps) { export default createBuiltin(Button, { helperText: - 'The Material UI [Button](https://mui.com/material-ui/react-button/) component.\n\nButtons allow users to take actions, and make choices, with a single tap.', + 'The Material UI [Button](https://mui.com/toolpad/studio/components/button/) component.\n\nButtons allow users to take actions, and make choices, with a single tap.', layoutDirection: 'both', argTypes: { onClick: { diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index 43f21d84ce9..20eedb8c788 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -1330,7 +1330,7 @@ const DataGridComponent = React.forwardRef(function DataGridComponent( export default createBuiltin(DataGridComponent, { helperText: - 'The [MUI X Data Grid](https://mui.com/x/react-data-grid/) component.\n\nThe datagrid lets users display tabular data in a flexible grid.', + 'The [MUI X Data Grid](https://mui.com/toolpad/studio/components/data-grid/) component.\n\nThe datagrid lets users display tabular data in a flexible grid.', errorProp: 'error', loadingPropSource: ['rows', 'columns'], loadingProp: 'loading', diff --git a/packages/toolpad-studio-components/src/DatePicker.tsx b/packages/toolpad-studio-components/src/DatePicker.tsx index a9da8d58301..023d4d6ef5b 100644 --- a/packages/toolpad-studio-components/src/DatePicker.tsx +++ b/packages/toolpad-studio-components/src/DatePicker.tsx @@ -159,7 +159,7 @@ const FormWrappedDatePicker = withComponentForm(DatePicker); export default createBuiltin(FormWrappedDatePicker, { helperText: - 'The [MUI X Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component.\n\nThe date picker lets the user select a date.', + 'The [MUI X Date Picker](https://mui.com/toolpad/studio/components/date-picker/) component.\n\nThe date picker lets the user select a date.', argTypes: { value: { helperText: 'The currently selected date.', diff --git a/packages/toolpad-studio-components/src/List.tsx b/packages/toolpad-studio-components/src/List.tsx index 5a634bdca7f..697137f54f1 100644 --- a/packages/toolpad-studio-components/src/List.tsx +++ b/packages/toolpad-studio-components/src/List.tsx @@ -37,7 +37,7 @@ function List({ itemCount, renderItem, disablePadding = false, sx, loading }: Li export default createBuiltin(List, { loadingPropSource: ['itemCount'], loadingProp: 'loading', - helperText: 'A list component.', + helperText: 'A [List](https://mui.com/toolpad/studio/components/list/) component.', argTypes: { itemCount: { helperText: 'Number of items to render.', diff --git a/packages/toolpad-studio-components/src/TextField.tsx b/packages/toolpad-studio-components/src/TextField.tsx index 2d770c79664..8e93503ce19 100644 --- a/packages/toolpad-studio-components/src/TextField.tsx +++ b/packages/toolpad-studio-components/src/TextField.tsx @@ -70,7 +70,7 @@ const FormWrappedTextField = withComponentForm(TextField); export default createBuiltin(FormWrappedTextField, { helperText: - 'The Material UI [TextField](https://mui.com/material-ui/react-text-field/) component lets you input a text value.', + 'The Material UI [TextField](https://mui.com/toolpad/studio/components/text-field/) component lets you input a text value.', layoutDirection: 'both', argTypes: { value: { diff --git a/packages/toolpad-studio-components/src/constants.tsx b/packages/toolpad-studio-components/src/constants.tsx index 4dadfd506e3..4f9ba4a1aaa 100644 --- a/packages/toolpad-studio-components/src/constants.tsx +++ b/packages/toolpad-studio-components/src/constants.tsx @@ -1,2 +1,2 @@ export const SX_PROP_HELPER_TEXT = - 'The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need.'; + 'The [`sx` prop](https://mui.com/toolpad/studio/concepts/theming/#overrides) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need.'; diff --git a/packages/toolpad-studio/src/components/HelpTooltipIcon.tsx b/packages/toolpad-studio/src/components/HelpTooltipIcon.tsx index 7cf475d39dd..565ec86c91c 100644 --- a/packages/toolpad-studio/src/components/HelpTooltipIcon.tsx +++ b/packages/toolpad-studio/src/components/HelpTooltipIcon.tsx @@ -1,16 +1,15 @@ import * as React from 'react'; -import { Tooltip, TooltipProps } from '@mui/material'; +import { SvgIconProps, Tooltip } from '@mui/material'; import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; -export interface HelpTooltipIconProps extends Omit { +export interface HelpTooltipIconProps extends SvgIconProps { helpText: React.ReactNode; - iconSx?: React.CSSProperties; } -export default function HelpTooltipIcon({ helpText, iconSx, ...props }: HelpTooltipIconProps) { +export default function HelpTooltipIcon({ helpText, sx, ...props }: HelpTooltipIconProps) { return ( - - + + ); } diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/BindingEditor.tsx index 033ed5697df..ae30fb9d64a 100644 --- a/packages/toolpad-studio/src/toolpad/AppEditor/BindingEditor.tsx +++ b/packages/toolpad-studio/src/toolpad/AppEditor/BindingEditor.tsx @@ -18,6 +18,7 @@ import { TextField, MenuItem, Autocomplete, + Link, } from '@mui/material'; import LinkIcon from '@mui/icons-material/Link'; import AddLinkIcon from '@mui/icons-material/AddLink'; @@ -267,7 +268,17 @@ export function ValueBindingEditor({ value, onChange, error }: ValueBindingEdito - Bind to a JavaScript expression. + + Bind to a JavaScript expression. Read more about binding in the{' '} + + docs + + . + {jsExpressionBindingEditor} @@ -290,7 +301,17 @@ function JsExpressionActionEditor({ value, onChange }: JsExpressionActionEditorP return ( - Run code when this event fires + + Run code when this event fires. Read more in the{' '} + + docs + + . + - {createMode === 'query' - ? 'Make backend data available as state on the page' - : 'Run an action on the page'} + {createMode === 'query' ? ( + + Make backend data available as state on the page. Read more in the{' '} + + docs. + + + ) : ( + + Run an action on the page. Read more in the{' '} + + docs. + + + )} {Object.keys(dataSources).map((dataSourceId) => { diff --git a/packages/toolpad-studio/src/toolpadDataSources/local/client.tsx b/packages/toolpad-studio/src/toolpadDataSources/local/client.tsx index 9f729ba946e..a39c76c8265 100644 --- a/packages/toolpad-studio/src/toolpadDataSources/local/client.tsx +++ b/packages/toolpad-studio/src/toolpadDataSources/local/client.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import LoadingButton from '@mui/lab/LoadingButton'; import { BindableAttrEntries } from '@toolpad/studio-runtime'; -import { Alert, Box, Divider, Stack, Tab } from '@mui/material'; +import { Alert, Box, Divider, Stack, Tab, Link, Typography } from '@mui/material'; import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import { TabContext, TabList } from '@mui/lab'; import { useBrowserJsRuntime } from '@toolpad/studio-runtime/jsBrowserRuntime'; @@ -26,6 +26,7 @@ import BindableEditor from '../../toolpad/AppEditor/PageEditor/BindableEditor'; import { getDefaultControl, usePropControlsContext } from '../../toolpad/propertyControls'; import { parseLegacyFunctionId, serializeFunctionId, transformLegacyFunctionId } from './shared'; import FunctionSelector from './FunctionSelector'; +import HelpTooltipIcon from '../../components/HelpTooltipIcon'; const EMPTY_PARAMS: BindableAttrEntries = []; @@ -232,7 +233,15 @@ function QueryEditor({ > - + handleTabTypeChange(value)} @@ -241,6 +250,21 @@ function QueryEditor({ + + To configure a custom function, check out the{' '} + + docs + + . + + } + /> diff --git a/packages/toolpad-studio/src/toolpadDataSources/rest/client.tsx b/packages/toolpad-studio/src/toolpadDataSources/rest/client.tsx index dd05a300faa..44cff36f105 100644 --- a/packages/toolpad-studio/src/toolpadDataSources/rest/client.tsx +++ b/packages/toolpad-studio/src/toolpadDataSources/rest/client.tsx @@ -14,6 +14,7 @@ import { Tab, TextField, Toolbar, + Link, Typography, Alert, styled, @@ -62,6 +63,7 @@ import { createHarLog, mergeHar } from '../../utils/har'; import useFetchPrivate from '../useFetchPrivate'; import QueryPreview from '../QueryPreview'; import { usePrivateQuery } from '../context'; +import HelpTooltipIcon from '../../components/HelpTooltipIcon'; const HTTP_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS']; @@ -489,7 +491,15 @@ function QueryEditor({ - + + + To configure a HTTP request, check out the{' '} + + docs + + . + + } + />