Skip to content

[studio-docs] Improve textfield docs and re-establish links to Material UI components #3929

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

[studio-docs] Improve textfield docs and re-establish links to Material UI components #3929

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
664b303
first
prakhargupta1 Aug 12, 2024
6c33140
kk
prakhargupta1 Aug 13, 2024
2f5a218
docs
prakhargupta1 Aug 13, 2024
6474594
more demos
prakhargupta1 Aug 20, 2024
ba39aad
Merge branch 'master' into improve-studio-docs
prakhargupta1 Aug 20, 2024
6785708
Make docs demo inputs fixed length
apedroferreira Aug 21, 2024
c5fc7cc
Pedro's review
prakhargupta1 Aug 23, 2024
e0af2ce
dfdf
prakhargupta1 Aug 23, 2024
a8b6b07
Merge branch 'master' into improve-studio-docs
prakhargupta1 Aug 23, 2024
51d5052
Delete docs/data/toolpad/studio/components/text-field/TextFieldMinlen…
prakhargupta1 Aug 23, 2024
fd61a6b
Delete docs/data/toolpad/studio/components/text-field/TextFieldMaxlen…
prakhargupta1 Aug 23, 2024
4a0b38d
Fix vale warnings
apedroferreira Aug 23, 2024
a5163f5
Merge branch 'master' into improve-studio-docs
prakhargupta1 Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from 'react';
import { TextField } from '@toolpad/studio-components';

export default function TextFieldIsRequired() {
return (
<TextField
label="Name"
size="small"
placeholder="Enter name"
isRequired
sx={{ width: 280 }}
/>
);
}
14 changes: 14 additions & 0 deletions docs/data/toolpad/studio/components/text-field/TextFieldMaxLength.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from 'react';
import { TextField } from '@toolpad/studio-components';

export default function TextFieldMaxLength() {
return (
<TextField
label="Zip code"
size="small"
maxLength="6"
placeholder="Enter zip code"
sx={{ width: 280 }}
/>
);
}
16 changes: 16 additions & 0 deletions docs/data/toolpad/studio/components/text-field/TextFieldMinLength.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react';
import { TextField } from '@toolpad/studio-components';

export default function TextFieldMinLength() {
return (
<TextField
label="Password"
size="small"
minLength="6"
placeholder="Enter password"
password
isRequired
sx={{ width: 280 }}
/>
);
}
18 changes: 15 additions & 3 deletions docs/data/toolpad/studio/components/text-field/text-field.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
26 changes: 13 additions & 13 deletions docs/data/toolpad/studio/reference/components/autocomplete.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,16 @@ A text input with autocomplete suggestions. Uses the Material UI [Autocomplete]

## Properties

| Name | Type | Default | Description |
| :------------------------------------------ | :------------------------------------- | :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span class="prop-name">options</span> | <span class="prop-type">array</span> | <span class="prop-default">[]</span> | The options available to search from. |
| <span class="prop-name">value</span> | <span class="prop-type">string</span> | <span class="prop-default">""</span> | The value of the autocomplete. |
| <span class="prop-name">defaultValue</span> | <span class="prop-type">string</span> | <span class="prop-default">""</span> | A default value. |
| <span class="prop-name">label</span> | <span class="prop-type">string</span> | <span class="prop-default">"Search…"</span> | The label to display for the autocomplete. |
| <span class="prop-name">fullWidth</span> | <span class="prop-type">boolean</span> | | If true, the autocomplete will take up the full width of its container. |
| <span class="prop-name">size</span> | <span class="prop-type">string</span> | <span class="prop-default">"small"</span> | The size of the autocomplete. One of `small`, `medium`, or `large`. |
| <span class="prop-name">loading</span> | <span class="prop-type">boolean</span> | | If true, the autocomplete will display a loading indicator. |
| <span class="prop-name">disabled</span> | <span class="prop-type">boolean</span> | | If true, the autocomplete will be disabled. |
| <span class="prop-name">name</span> | <span class="prop-type">string</span> | | Name of this input. Used as a reference in form data. |
| <span class="prop-name">isRequired</span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | Whether the input is required to have a value. |
| <span class="prop-name">sx</span> | <span class="prop-type">object</span> | | 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 |
| :------------------------------------------ | :------------------------------------- | :------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span class="prop-name">options</span> | <span class="prop-type">array</span> | <span class="prop-default">[]</span> | The options available to search from. |
| <span class="prop-name">value</span> | <span class="prop-type">string</span> | <span class="prop-default">""</span> | The value of the autocomplete. |
| <span class="prop-name">defaultValue</span> | <span class="prop-type">string</span> | <span class="prop-default">""</span> | A default value. |
| <span class="prop-name">label</span> | <span class="prop-type">string</span> | <span class="prop-default">"Search…"</span> | The label to display for the autocomplete. |
| <span class="prop-name">fullWidth</span> | <span class="prop-type">boolean</span> | | If true, the autocomplete will take up the full width of its container. |
| <span class="prop-name">size</span> | <span class="prop-type">string</span> | <span class="prop-default">"small"</span> | The size of the autocomplete. One of `small`, `medium`, or `large`. |
| <span class="prop-name">loading</span> | <span class="prop-type">boolean</span> | | If true, the autocomplete will display a loading indicator. |
| <span class="prop-name">disabled</span> | <span class="prop-type">boolean</span> | | If true, the autocomplete will be disabled. |
| <span class="prop-name">name</span> | <span class="prop-type">string</span> | | Name of this input. Used as a reference in form data. |
| <span class="prop-name">isRequired</span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | Whether the input is required to have a value. |
| <span class="prop-name">sx</span> | <span class="prop-type">object</span> | | 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. |
Loading