diff --git a/docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js b/docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js new file mode 100644 index 00000000000..81020443d26 --- /dev/null +++ b/docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { TextField } from '@toolpad/studio-components'; + +export default function TextFieldIsRequired() { + return ( + + ); +} diff --git a/docs/data/toolpad/studio/components/text-field/TextFieldMaxLength.js b/docs/data/toolpad/studio/components/text-field/TextFieldMaxLength.js new file mode 100644 index 00000000000..9e42266bb39 --- /dev/null +++ b/docs/data/toolpad/studio/components/text-field/TextFieldMaxLength.js @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { TextField } from '@toolpad/studio-components'; + +export default function TextFieldMaxLength() { + return ( + + ); +} diff --git a/docs/data/toolpad/studio/components/text-field/TextFieldMinLength.js b/docs/data/toolpad/studio/components/text-field/TextFieldMinLength.js new file mode 100644 index 00000000000..cff2e9f2b7a --- /dev/null +++ b/docs/data/toolpad/studio/components/text-field/TextFieldMinLength.js @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { TextField } from '@toolpad/studio-components'; + +export default function TextFieldMinLength() { + return ( + + ); +} diff --git a/docs/data/toolpad/studio/components/text-field/text-field.md b/docs/data/toolpad/studio/components/text-field/text-field.md index 91bbb8b3312..f77fdd9b699 100644 --- a/docs/data/toolpad/studio/components/text-field/text-field.md +++ b/docs/data/toolpad/studio/components/text-field/text-field.md @@ -69,17 +69,29 @@ Disabled property shows the state of the component so that end user is aware tha ## Validation +The validation props offer the option to create an interactive text field component for various scenarios. These are available as a checkbox configurations in the Toolpad Studio editor. + ### isRequired -isRequired is useful when the action can't be perfomed without a user provided text value. +The `isRequired` prop is useful to display an error message when a value is not provided. It can be used for mandatory fields. + +{{"demo": "TextFieldIsRequired.js", "hideToolbar": true}} ### minLength -A validation check on the minimum length of the input. +Shows an error message according to the minimum required length for the provided text value. It can be used to ensure that a provided password is long enough, for example. + +In the demo below, the input must be more than 6 characters long, otherwise a validation error is shown. + +{{"demo": "TextFieldMinLength.js", "hideToolbar": true}} ### maxLength -A validation check on the maximum length of the input. +Shows an error message according to the maximum required length for the provided text value. In combination with other props, it can be used to enforce the length of zip codes or phone numbers, for example. + +In the demo below, the input must be no more than 6 characters long, otherwise a validation error is shown. + +{{"demo": "TextFieldMaxLength.js", "hideToolbar": true}} ## API diff --git a/docs/data/toolpad/studio/reference/components/autocomplete.md b/docs/data/toolpad/studio/reference/components/autocomplete.md index 3aa4a4b7df1..5f0a17ffa2a 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/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. | +| 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 takes 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 displays a loading indicator. | +| disabled | boolean | | If true, the autocomplete 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. | diff --git a/docs/data/toolpad/studio/reference/components/button.md b/docs/data/toolpad/studio/reference/components/button.md index 494d5d28bf2..2292006173a 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/toolpad/studio/components/button/) component. +The Material UI [Button](https://mui.com/material-ui/react-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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/chart.md b/docs/data/toolpad/studio/reference/components/chart.md index 17572917476..a0826b26eb2 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/checkbox.md b/docs/data/toolpad/studio/reference/components/checkbox.md index 6709e30e958..a1d747fcf4c 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/container.md b/docs/data/toolpad/studio/reference/components/container.md index d7a6d769374..ec5b47fee42 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/data-grid.md b/docs/data/toolpad/studio/reference/components/data-grid.md index f4646aea29c..ac6a7889847 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/toolpad/studio/components/data-grid/) component. +The [MUI X Data Grid](https://mui.com/x/react-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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/date-picker.md b/docs/data/toolpad/studio/reference/components/date-picker.md index 4559b40ade6..6cda4262a1f 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/toolpad/studio/components/date-picker/) component. +The [MUI X Date Picker](https://mui.com/x/react-date-pickers/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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/file-picker.md b/docs/data/toolpad/studio/reference/components/file-picker.md index 987d611ee4d..a20c86ff659 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/form.md b/docs/data/toolpad/studio/reference/components/form.md index d923ae48dce..8b1319ad067 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/image.md b/docs/data/toolpad/studio/reference/components/image.md index bcc076e2a86..152c2c7f842 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/list.md b/docs/data/toolpad/studio/reference/components/list.md index 6c2e8c00429..2a20bb7655e 100644 --- a/docs/data/toolpad/studio/reference/components/list.md +++ b/docs/data/toolpad/studio/reference/components/list.md @@ -8,10 +8,10 @@ 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/paper.md b/docs/data/toolpad/studio/reference/components/paper.md index 62b9a0d3c23..7f0434a3443 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/select.md b/docs/data/toolpad/studio/reference/components/select.md index 1ed63a02427..5430b4edf8c 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/spacer.md b/docs/data/toolpad/studio/reference/components/spacer.md index c6da697eaf4..e31797984ba 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/stack.md b/docs/data/toolpad/studio/reference/components/stack.md index 37b7bcfa8c1..d99330d635a 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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/text-field.md b/docs/data/toolpad/studio/reference/components/text-field.md index 67ec6365ebd..27357472d8f 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/toolpad/studio/components/text-field/) component lets you input a text value. +The Material UI [TextField](https://mui.com/material-ui/react-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/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. | +| 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. | diff --git a/docs/data/toolpad/studio/reference/components/text.md b/docs/data/toolpad/studio/reference/components/text.md index 2d7c820d935..1fe57b0c40a 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/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. | +| 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. | diff --git a/packages/toolpad-studio-components/src/Autocomplete.tsx b/packages/toolpad-studio-components/src/Autocomplete.tsx index 065626eb7d0..b121211d588 100644 --- a/packages/toolpad-studio-components/src/Autocomplete.tsx +++ b/packages/toolpad-studio-components/src/Autocomplete.tsx @@ -155,7 +155,7 @@ export default createBuiltin(FormWrappedAutocomplete, { default: 'Search…', }, fullWidth: { - helperText: 'If true, the autocomplete will take up the full width of its container.', + helperText: 'If true, the autocomplete takes up the full width of its container.', type: 'boolean', }, size: { @@ -165,11 +165,11 @@ export default createBuiltin(FormWrappedAutocomplete, { default: 'small', }, loading: { - helperText: 'If true, the autocomplete will display a loading indicator.', + helperText: 'If true, the autocomplete displays a loading indicator.', type: 'boolean', }, disabled: { - helperText: 'If true, the autocomplete will be disabled.', + helperText: 'If true, the autocomplete is disabled.', type: 'boolean', }, ...FORM_INPUT_ARG_TYPES, diff --git a/packages/toolpad-studio-components/src/Button.tsx b/packages/toolpad-studio-components/src/Button.tsx index 8e934e58bb5..a6511c45a26 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/toolpad/studio/components/button/) component.\n\nButtons allow users to take actions, and make choices, with a single tap.', + '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.', layoutDirection: 'both', argTypes: { onClick: { diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx index dd09caf0c59..9ea5a3176e1 100644 --- a/packages/toolpad-studio-components/src/DataGrid.tsx +++ b/packages/toolpad-studio-components/src/DataGrid.tsx @@ -1370,7 +1370,7 @@ const DataGridComponent = React.forwardRef(function DataGridComponent( export default createBuiltin(DataGridComponent, { helperText: - '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.', + '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.', 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 023d4d6ef5b..a9da8d58301 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/toolpad/studio/components/date-picker/) component.\n\nThe date picker lets the user select a date.', + '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.', argTypes: { value: { helperText: 'The currently selected date.', diff --git a/packages/toolpad-studio-components/src/TextField.tsx b/packages/toolpad-studio-components/src/TextField.tsx index 8e93503ce19..2d770c79664 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/toolpad/studio/components/text-field/) component lets you input a text value.', + 'The Material UI [TextField](https://mui.com/material-ui/react-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 4f9ba4a1aaa..4dadfd506e3 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/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.'; + '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.';