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 5 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
6 changes: 6 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,6 @@
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 />;
}
13 changes: 13 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,13 @@
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"
/>
);
}
15 changes: 15 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,15 @@
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
/>
);
}
14 changes: 11 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,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.
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

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