From 664b30310e099f6791e7714d3532a21b5f3f50ca Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Mon, 12 Aug 2024 13:16:43 +0530 Subject: [PATCH 01/10] first --- .../components/text-field/TextFieldMinlength.js | 15 +++++++++++++++ .../studio/components/text-field/text-field.md | 4 +++- packages/toolpad-studio-components/src/Button.tsx | 2 +- .../toolpad-studio-components/src/DataGrid.tsx | 2 +- .../toolpad-studio-components/src/DatePicker.tsx | 2 +- .../toolpad-studio-components/src/TextField.tsx | 2 +- .../toolpad-studio-components/src/constants.tsx | 2 +- 7 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 docs/data/toolpad/studio/components/text-field/TextFieldMinlength.js 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..0e39a0bf6b6 --- /dev/null +++ b/docs/data/toolpad/studio/components/text-field/TextFieldMinlength.js @@ -0,0 +1,15 @@ +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..6f80517c0fa 100644 --- a/docs/data/toolpad/studio/components/text-field/text-field.md +++ b/docs/data/toolpad/studio/components/text-field/text-field.md @@ -75,7 +75,9 @@ isRequired is useful when the action can't be perfomed without a user provided t ### minLength -A validation check on the minimum length of the input. +A validation check on the minimum length of the input. The below demo showcases password, isRequired and minLength props. These props are available as configurations in the Toolpad Studio editor. + +{{"demo": "TextFieldMinlength.js", "hideToolbar": true}} ### maxLength 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.'; From 6c33140927d17052efee593bb03d818ffba258c6 Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Tue, 13 Aug 2024 13:51:44 +0530 Subject: [PATCH 02/10] kk --- docs/data/toolpad/studio/components/text-field/text-field.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6f80517c0fa..66e7512d117 100644 --- a/docs/data/toolpad/studio/components/text-field/text-field.md +++ b/docs/data/toolpad/studio/components/text-field/text-field.md @@ -75,7 +75,7 @@ isRequired is useful when the action can't be perfomed without a user provided t ### minLength -A validation check on the minimum length of the input. The below demo showcases password, isRequired and minLength props. These props are available as configurations in the Toolpad Studio editor. +A validation check on the minimum length of the input. The below demo showcases usage of password, isRequired and minLength props. These props are available as configurations in the Toolpad Studio editor. {{"demo": "TextFieldMinlength.js", "hideToolbar": true}} From 2f5a218c0bd0ec7777a3a476c93ececdf7f3a56d Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Tue, 13 Aug 2024 14:18:44 +0530 Subject: [PATCH 03/10] docs --- .../components/text-field/text-field.md | 2 +- .../reference/components/autocomplete.md | 26 +++++++------- .../studio/reference/components/button.md | 24 ++++++------- .../studio/reference/components/chart.md | 8 ++--- .../studio/reference/components/checkbox.md | 28 +++++++-------- .../studio/reference/components/container.md | 10 +++--- .../studio/reference/components/data-grid.md | 26 +++++++------- .../reference/components/date-picker.md | 28 +++++++-------- .../reference/components/file-picker.md | 18 +++++----- .../studio/reference/components/form.md | 20 +++++------ .../studio/reference/components/image.md | 2 +- .../studio/reference/components/list.md | 14 ++++---- .../studio/reference/components/paper.md | 2 +- .../studio/reference/components/select.md | 26 +++++++------- .../studio/reference/components/spacer.md | 6 ++-- .../studio/reference/components/stack.md | 18 +++++----- .../studio/reference/components/text-field.md | 34 +++++++++---------- .../studio/reference/components/text.md | 18 +++++----- 18 files changed, 155 insertions(+), 155 deletions(-) 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 66e7512d117..92ec427e736 100644 --- a/docs/data/toolpad/studio/components/text-field/text-field.md +++ b/docs/data/toolpad/studio/components/text-field/text-field.md @@ -75,7 +75,7 @@ isRequired is useful when the action can't be perfomed without a user provided t ### minLength -A validation check on the minimum length of the input. The below demo showcases usage of password, isRequired and minLength props. These props are available as configurations in the Toolpad Studio editor. +A validation check on the minimum length of the input. The below demo showcases usage of password, isRequired and, minLength props. These props are available as configurations in the Toolpad Studio editor. {{"demo": "TextFieldMinlength.js", "hideToolbar": true}} diff --git a/docs/data/toolpad/studio/reference/components/autocomplete.md b/docs/data/toolpad/studio/reference/components/autocomplete.md index 3aa4a4b7df1..1bc70aff8ed 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 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. | 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. | From 6474594e8d8a3aa613647f750e1e1ecafd047ee1 Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Tue, 20 Aug 2024 11:34:11 +0530 Subject: [PATCH 04/10] more demos --- .../components/text-field/TextFieldIsRequired.js | 6 ++++++ .../components/text-field/TextFieldMaxlength.js | 13 +++++++++++++ .../studio/components/text-field/text-field.md | 12 +++++++++--- 3 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js create mode 100644 docs/data/toolpad/studio/components/text-field/TextFieldMaxlength.js 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..dabc4b90fbb --- /dev/null +++ b/docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js @@ -0,0 +1,6 @@ +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..97f3174034b --- /dev/null +++ b/docs/data/toolpad/studio/components/text-field/TextFieldMaxlength.js @@ -0,0 +1,13 @@ +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/text-field.md b/docs/data/toolpad/studio/components/text-field/text-field.md index 92ec427e736..300175109a0 100644 --- a/docs/data/toolpad/studio/components/text-field/text-field.md +++ b/docs/data/toolpad/studio/components/text-field/text-field.md @@ -69,19 +69,25 @@ 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. +isRequired prop is useful when the action can't be perfomed without a user provided text value. It can be used to assign mandatory fields. + +{{"demo": "TextFieldIsRequired.js", "hideToolbar": true}} ### minLength -A validation check on the minimum length of the input. The below demo showcases usage of password, isRequired and, minLength props. These props are available as configurations in the Toolpad Studio editor. +A check on the minimum length of the input. In the below demo the input should be more than six characters long else it throws a validation error. It can be used to ensure passwords are long enough. {{"demo": "TextFieldMinlength.js", "hideToolbar": true}} ### maxLength -A validation check on the maximum length of the input. +A validation check on the maximum length of the input. The below demo shows a validation error when the input breaches the limit of ten characters. In combination with other props, it can be used for zip codes, phone numbers, etc. + +{{"demo": "TextFieldMaxlength.js", "hideToolbar": true}} ## API From 678570833e45852fb26419166210172c3025a082 Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Wed, 21 Aug 2024 16:15:59 +0100 Subject: [PATCH 05/10] Make docs demo inputs fixed length --- .../components/text-field/TextFieldIsRequired.js | 10 +++++++++- .../components/text-field/TextFieldMaxLength.js | 14 ++++++++++++++ .../components/text-field/TextFieldMaxlength.js | 3 ++- .../components/text-field/TextFieldMinLength.js | 16 ++++++++++++++++ .../components/text-field/TextFieldMinlength.js | 3 ++- .../studio/components/text-field/text-field.md | 4 ++-- 6 files changed, 45 insertions(+), 5 deletions(-) create mode 100644 docs/data/toolpad/studio/components/text-field/TextFieldMaxLength.js create mode 100644 docs/data/toolpad/studio/components/text-field/TextFieldMinLength.js diff --git a/docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js b/docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js index dabc4b90fbb..81020443d26 100644 --- a/docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js +++ b/docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js @@ -2,5 +2,13 @@ import * as React from 'react'; import { TextField } from '@toolpad/studio-components'; export default function TextFieldIsRequired() { - return ; + 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/TextFieldMaxlength.js b/docs/data/toolpad/studio/components/text-field/TextFieldMaxlength.js index 97f3174034b..9e42266bb39 100644 --- a/docs/data/toolpad/studio/components/text-field/TextFieldMaxlength.js +++ b/docs/data/toolpad/studio/components/text-field/TextFieldMaxlength.js @@ -1,13 +1,14 @@ import * as React from 'react'; import { TextField } from '@toolpad/studio-components'; -export default function TextFieldMaxlength() { +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/TextFieldMinlength.js b/docs/data/toolpad/studio/components/text-field/TextFieldMinlength.js index 0e39a0bf6b6..cff2e9f2b7a 100644 --- a/docs/data/toolpad/studio/components/text-field/TextFieldMinlength.js +++ b/docs/data/toolpad/studio/components/text-field/TextFieldMinlength.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { TextField } from '@toolpad/studio-components'; -export default function TextFieldMinlength() { +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 300175109a0..eae3513dc3d 100644 --- a/docs/data/toolpad/studio/components/text-field/text-field.md +++ b/docs/data/toolpad/studio/components/text-field/text-field.md @@ -81,13 +81,13 @@ isRequired prop is useful when the action can't be perfomed without a user provi A check on the minimum length of the input. In the below demo the input should be more than six characters long else it throws a validation error. It can be used to ensure passwords are long enough. -{{"demo": "TextFieldMinlength.js", "hideToolbar": true}} +{{"demo": "TextFieldMinLength.js", "hideToolbar": true}} ### maxLength A validation check on the maximum length of the input. The below demo shows a validation error when the input breaches the limit of ten characters. In combination with other props, it can be used for zip codes, phone numbers, etc. -{{"demo": "TextFieldMaxlength.js", "hideToolbar": true}} +{{"demo": "TextFieldMaxLength.js", "hideToolbar": true}} ## API From c5fc7cc73792172604db8a917f57fb4d4df3f504 Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Fri, 23 Aug 2024 10:43:25 +0530 Subject: [PATCH 06/10] Pedro's review Co-authored-by: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Signed-off-by: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> --- .../data/toolpad/studio/components/text-field/text-field.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 eae3513dc3d..f7bd1b8b46e 100644 --- a/docs/data/toolpad/studio/components/text-field/text-field.md +++ b/docs/data/toolpad/studio/components/text-field/text-field.md @@ -73,7 +73,7 @@ The validation props offer the option to create an interactive text field compon ### isRequired -isRequired prop is useful when the action can't be perfomed without a user provided text value. It can be used to assign mandatory fields. +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}} @@ -85,7 +85,9 @@ A check on the minimum length of the input. In the below demo the input should b ### maxLength -A validation check on the maximum length of the input. The below demo shows a validation error when the input breaches the limit of ten characters. In combination with other props, it can be used for zip codes, phone numbers, etc. +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}} From e0af2ce918c207cf8b4fa4dada17399a5e0210b6 Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Fri, 23 Aug 2024 10:48:39 +0530 Subject: [PATCH 07/10] dfdf --- docs/data/toolpad/studio/components/text-field/text-field.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 f7bd1b8b46e..f77fdd9b699 100644 --- a/docs/data/toolpad/studio/components/text-field/text-field.md +++ b/docs/data/toolpad/studio/components/text-field/text-field.md @@ -79,7 +79,9 @@ The `isRequired` prop is useful to display an error message when a value is not ### minLength -A check on the minimum length of the input. In the below demo the input should be more than six characters long else it throws a validation error. It can be used to ensure passwords are long enough. +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}} From 51d50521958038b5db8b4c3c357fd0a844545409 Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Fri, 23 Aug 2024 10:56:46 +0530 Subject: [PATCH 08/10] Delete docs/data/toolpad/studio/components/text-field/TextFieldMinlength.js Signed-off-by: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> --- .../components/text-field/TextFieldMinlength.js | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 docs/data/toolpad/studio/components/text-field/TextFieldMinlength.js diff --git a/docs/data/toolpad/studio/components/text-field/TextFieldMinlength.js b/docs/data/toolpad/studio/components/text-field/TextFieldMinlength.js deleted file mode 100644 index cff2e9f2b7a..00000000000 --- a/docs/data/toolpad/studio/components/text-field/TextFieldMinlength.js +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import { TextField } from '@toolpad/studio-components'; - -export default function TextFieldMinLength() { - return ( - - ); -} From fd61a6b13f2a803f3ac1765643343089b0457a69 Mon Sep 17 00:00:00 2001 From: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Date: Fri, 23 Aug 2024 10:57:02 +0530 Subject: [PATCH 09/10] Delete docs/data/toolpad/studio/components/text-field/TextFieldMaxlength.js Signed-off-by: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> --- .../components/text-field/TextFieldMaxlength.js | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 docs/data/toolpad/studio/components/text-field/TextFieldMaxlength.js diff --git a/docs/data/toolpad/studio/components/text-field/TextFieldMaxlength.js b/docs/data/toolpad/studio/components/text-field/TextFieldMaxlength.js deleted file mode 100644 index 9e42266bb39..00000000000 --- a/docs/data/toolpad/studio/components/text-field/TextFieldMaxlength.js +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import { TextField } from '@toolpad/studio-components'; - -export default function TextFieldMaxLength() { - return ( - - ); -} From 4a0b38dad6dacdb97503af92f2014a16638f649d Mon Sep 17 00:00:00 2001 From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com> Date: Fri, 23 Aug 2024 14:05:19 +0100 Subject: [PATCH 10/10] Fix vale warnings --- .../toolpad/studio/reference/components/autocomplete.md | 6 +++--- packages/toolpad-studio-components/src/Autocomplete.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/data/toolpad/studio/reference/components/autocomplete.md b/docs/data/toolpad/studio/reference/components/autocomplete.md index 1bc70aff8ed..5f0a17ffa2a 100644 --- a/docs/data/toolpad/studio/reference/components/autocomplete.md +++ b/docs/data/toolpad/studio/reference/components/autocomplete.md @@ -14,10 +14,10 @@ A text input with autocomplete suggestions. Uses the Material UI [Autocomplete] | 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. | +| 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 will display a loading indicator. | -| disabled | boolean | | If true, the autocomplete will be disabled. | +| 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/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,