Skip to content

Commit 73c7d8f

Browse files
prakhargupta1Janpot
prakhargupta1
and
Janpot
authored
Add list, datepicker and textfield component guides (#2827)
Signed-off-by: Prakhar Gupta <[email protected]> Co-authored-by: MUI bot <[email protected]>
1 parent c1a5a85 commit 73c7d8f

35 files changed

+362
-93
lines changed

‎docs/data/pages.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,10 @@ const pages: MuiPage[] = [
100100
pathname: '/toolpad/components',
101101
children: [
102102
{ pathname: '/toolpad/components/button' },
103-
{
104-
pathname: '/toolpad/components/datagrid',
105-
title: 'Data Grid',
106-
},
103+
{ pathname: '/toolpad/components/data-grid', title: 'DataGrid' },
104+
{ pathname: '/toolpad/components/list' },
105+
{ pathname: '/toolpad/components/date-picker', title: 'DatePicker' },
106+
{ pathname: '/toolpad/components/text-field', title: 'TextField' },
107107
],
108108
},
109109
{

‎docs/data/toolpad/components/button/ButtonBasic.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import * as React from 'react';
22
import { Button } from '@mui/toolpad-components';
33

4-
const TOOLPAD_PROPS = {
5-
variant: 'contained',
6-
content: 'Hello World',
7-
};
8-
94
export default function BasicButton() {
10-
return <Button {...TOOLPAD_PROPS} />;
5+
return <Button variant="contained" content="Hello World" />;
116
}

‎docs/data/toolpad/components/button/ButtonColor.js

+3-21
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,12 @@ import * as React from 'react';
22
import { Button } from '@mui/toolpad-components';
33
import { Stack } from '@mui/material';
44

5-
const TOOLPAD_PROPS1 = {
6-
color: 'primary',
7-
content: 'Primary',
8-
variant: 'contained',
9-
};
10-
11-
const TOOLPAD_PROPS2 = {
12-
color: 'secondary',
13-
content: 'Secondary',
14-
variant: 'contained',
15-
};
16-
17-
const TOOLPAD_PROPS3 = {
18-
color: 'primary',
19-
content: 'Primary',
20-
variant: 'outlined',
21-
};
22-
235
export default function BasicButton() {
246
return (
257
<Stack spacing={2} direction="row" alignItems="center">
26-
<Button {...TOOLPAD_PROPS1} />
27-
<Button {...TOOLPAD_PROPS2} />
28-
<Button {...TOOLPAD_PROPS3} />
8+
<Button color="primary" content="Primary" variant="contained" />
9+
<Button color="secondary" content="Secondary" variant="contained" />
10+
<Button color="primary" content="Primary" variant="outlined" />
2911
</Stack>
3012
);
3113
}

‎docs/data/toolpad/components/button/ButtonSize.js

+3-21
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,12 @@ import * as React from 'react';
22
import { Button } from '@mui/toolpad-components';
33
import Stack from '@mui/material/Stack';
44

5-
const TOOLPAD_PROPS1 = {
6-
size: 'small',
7-
variant: 'contained',
8-
content: 'Small',
9-
};
10-
11-
const TOOLPAD_PROPS2 = {
12-
size: 'medium',
13-
variant: 'contained',
14-
content: 'Medium',
15-
};
16-
17-
const TOOLPAD_PROPS3 = {
18-
size: 'large',
19-
variant: 'contained',
20-
content: 'Large',
21-
};
22-
235
export default function BasicButton() {
246
return (
257
<Stack spacing={2} direction="row" alignItems="center">
26-
<Button {...TOOLPAD_PROPS1} />
27-
<Button {...TOOLPAD_PROPS2} />
28-
<Button {...TOOLPAD_PROPS3} />
8+
<Button size="small" variant="contained" content="Small" />
9+
<Button size="medium" variant="contained" content="Medium" />
10+
<Button size="large" variant="contained" content="Large" />
2911
</Stack>
3012
);
3113
}

‎docs/data/toolpad/components/button/ButtonState.js

+2-14
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,11 @@ import * as React from 'react';
22
import { Button } from '@mui/toolpad-components';
33
import { Stack } from '@mui/material';
44

5-
const TOOLPAD_PROPS1 = {
6-
content: 'Loading',
7-
variant: 'contained',
8-
loading: true,
9-
};
10-
11-
const TOOLPAD_PROPS2 = {
12-
content: 'Disabled',
13-
variant: 'contained',
14-
disabled: true,
15-
};
16-
175
export default function BasicButton() {
186
return (
197
<Stack spacing={2} direction="row" alignItems="center">
20-
<Button {...TOOLPAD_PROPS1} />
21-
<Button {...TOOLPAD_PROPS2} />
8+
<Button content="Loading" variant="contained" loading />
9+
<Button content="Disabled" variant="contained" disabled />
2210
</Stack>
2311
);
2412
}

‎docs/data/toolpad/components/button/ButtonVariant.js

+3-18
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,12 @@ import * as React from 'react';
22
import { Button } from '@mui/toolpad-components';
33
import { Stack } from '@mui/material';
44

5-
const TOOLPAD_PROPS1 = {
6-
variant: 'contained',
7-
content: 'Contained',
8-
};
9-
10-
const TOOLPAD_PROPS2 = {
11-
variant: 'outlined',
12-
content: 'Outlined',
13-
};
14-
15-
const TOOLPAD_PROPS3 = {
16-
variant: 'text',
17-
content: 'Text',
18-
};
19-
205
export default function BasicButton() {
216
return (
227
<Stack spacing={2} direction="row" alignItems="center">
23-
<Button {...TOOLPAD_PROPS1} />
24-
<Button {...TOOLPAD_PROPS2} />
25-
<Button {...TOOLPAD_PROPS3} />
8+
<Button variant="contained" content="Contained" />
9+
<Button variant="outlined" content="Outlined" />
10+
<Button variant="text" content="Text" />
2611
</Stack>
2712
);
2813
}

‎docs/data/toolpad/components/datagrid/DataGrid.js renamed to ‎docs/data/toolpad/components/data-grid/DataGrid.js

File renamed without changes.

‎docs/data/toolpad/components/datagrid/DataGrid_hidetoolbar.js renamed to ‎docs/data/toolpad/components/data-grid/DataGrid_hidetoolbar.js

File renamed without changes.

‎docs/data/toolpad/components/datagrid/DataGrid_standard.js renamed to ‎docs/data/toolpad/components/data-grid/DataGrid_standard.js

File renamed without changes.

‎docs/data/toolpad/components/datagrid/datagrid.md renamed to ‎docs/data/toolpad/components/data-grid/data-grid.md

File renamed without changes.

‎docs/data/toolpad/components/date-picker/DatePicker.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import * as React from 'react';
2+
import { DatePicker } from '@mui/toolpad-components';
3+
4+
export default function BasicDatepicker() {
5+
return <DatePicker label="Enter date" size="small" />;
6+
}

‎docs/data/toolpad/components/date-picker/DatePickerDisabled.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
import { DatePicker } from '@mui/toolpad-components';
3+
import { Stack } from '@mui/material';
4+
5+
export default function BasicButton() {
6+
return (
7+
<Stack spacing={2} direction="row" alignItems="center">
8+
<DatePicker variant="outlined" size="small" disabled label="Disabled" />
9+
<DatePicker variant="outlined" size="small" label="Active" />
10+
</Stack>
11+
);
12+
}

‎docs/data/toolpad/components/date-picker/DatePickerFormat.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as React from 'react';
2+
import { DatePicker } from '@mui/toolpad-components';
3+
import { Stack } from '@mui/material';
4+
5+
export default function BasicButton() {
6+
return (
7+
<Stack spacing={2} direction="row" alignItems="center">
8+
<DatePicker
9+
size="small"
10+
variant="outlined"
11+
label="MM/DD/YYYY"
12+
format="MM/DD/YYYY"
13+
/>
14+
<DatePicker size="small" variant="outlined" label="MMMM-YY" format="MMMM-YY" />
15+
</Stack>
16+
);
17+
}

‎docs/data/toolpad/components/date-picker/DatePickerSize.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
import { DatePicker } from '@mui/toolpad-components';
3+
import { Stack } from '@mui/material';
4+
5+
export default function BasicButton() {
6+
return (
7+
<Stack spacing={2} direction="row" alignItems="center">
8+
<DatePicker size="small" variant="outlined" label="Small" />
9+
<DatePicker size="medium" variant="outlined" label="Medium" />
10+
</Stack>
11+
);
12+
}

‎docs/data/toolpad/components/date-picker/DatePickerVariant.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react';
2+
import { DatePicker } from '@mui/toolpad-components';
3+
import { Stack } from '@mui/material';
4+
5+
export default function BasicButton() {
6+
return (
7+
<Stack spacing={2} direction="row" alignItems="center">
8+
<DatePicker size="small" variant="outlined" label="Outlined" />
9+
<DatePicker size="small" variant="filled" label="Filled" />
10+
<DatePicker size="small" variant="standard" label="Standard" />
11+
</Stack>
12+
);
13+
}

‎docs/data/toolpad/components/date-picker/date-picker.md

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# DatePicker
2+
3+
<p class="description">Learn about the datepicker component and its usage in Toolpad.</p>
4+
5+
## Demo
6+
7+
DatePicker is an input component. It takes user input and provides the value for further usage on the page.
8+
9+
{{"demo": "DatePicker.js", "hideToolbar": true}}
10+
11+
## Usage
12+
13+
Below props makes it usable:
14+
15+
### format
16+
17+
The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings will always be in the YYYY-MM-DD format. Leave empty to let the end-user locale define the format.
18+
19+
{{"demo": "DatePickerFormat.js", "hideToolbar": true}}
20+
21+
### value
22+
23+
The current selected date. It shows the format in which it is being provided to the page: YYYY-MM-DD.
24+
25+
### defaultValue
26+
27+
Allows setting a default value. Example:
28+
29+
<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
30+
<source src="/static/toolpad/docs/components/datepicker/datepicker-defaultValue.mp4" type="video/mp4">
31+
Your browser does not support the video tag.
32+
</video>
33+
34+
### name
35+
36+
A name is needed when a textfield is part of a form component. It is used to show validation errors.
37+
38+
## Appearance
39+
40+
The DatePicker component supports below mentioned appearance related props in Toolpad:
41+
42+
### label
43+
44+
A label that describes the content of the datepicker e.g. Enter date.
45+
46+
### variant
47+
48+
The variant property supports three different options: outlined (default), filled, and standard. Outlined is for low-emphasis while Filled is a high-emphasis input. Standard is used for less-pronounced actions that ensure user remains focused on the main content.
49+
50+
{{"demo": "DatePickerVariant.js", "hideToolbar": true}}
51+
52+
### size
53+
54+
The size property supports two options: small (default) and medium.
55+
56+
{{"demo": "DatePickerSize.js", "hideToolbar": true}}
57+
58+
### fullWidth
59+
60+
This boolean defines if the component should take the full width of the page.
61+
62+
### disabled
63+
64+
Disabled property shows the state of the component so that end user is aware that can't interact with the component.
65+
66+
{{"demo": "DatePickerDisabled.js", "hideToolbar": true}}
67+
68+
## Validation
69+
70+
### isRequired
71+
72+
isRequired is useful when the action can't be perfomed without a user provided date.
73+
74+
<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
75+
<source src="/static/toolpad/docs/components/datepicker/datepicker-validation.mp4" type="video/mp4">
76+
Your browser does not support the video tag.
77+
</video>
78+
79+
## API
80+
81+
See the documentation below for a complete reference to all props available to the datepicker component in Toolpad.
82+
83+
- [`<datepicker />`](/toolpad/reference/components/date-picker/#properties)

‎docs/data/toolpad/components/list/List.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import * as React from 'react';
2+
import { List } from '@mui/toolpad-components';
3+
4+
export default function BasicList() {
5+
return <List itemCount={2} />;
6+
}

‎docs/data/toolpad/components/list/list.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# List
2+
3+
<p class="description">Learn about the list component and its usage in Toolpad.</p>
4+
5+
## Usage
6+
7+
A List is an essential component in an application. It had one key property that makes it usable:
8+
9+
### itemCount
10+
11+
It is the number of occurences that the list is supposed to render.
12+
13+
<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
14+
<source src="/static/toolpad/docs/components/list/list.mp4" type="video/mp4">
15+
Your browser does not support the video tag.
16+
</video>
17+
18+
## Appearance
19+
20+
The List component acts as a mini canvas for other components. Each component has its own styling. The first occurence decides the appearance for the entire list.
21+
22+
### disablePadding
23+
24+
There is a predefined padding that can be enabled or disabled. It is a boolean.
25+
26+
## API
27+
28+
See the documentation below for a complete reference to all props available to the list component in Toolpad.
29+
30+
- [`<list />`](/toolpad/reference/components/list/#properties)

‎docs/data/toolpad/components/text-field/TextField.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as React from 'react';
2+
import { TextField } from '@mui/toolpad-components';
3+
4+
export default function BasicDatepicker() {
5+
return (
6+
<TextField label="Enter name" size="small" placeholder="This is a placeholder" />
7+
);
8+
}

‎docs/data/toolpad/components/text-field/TextFieldDisabled.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
import { TextField } from '@mui/toolpad-components';
3+
import { Stack } from '@mui/material';
4+
5+
export default function BasicButton() {
6+
return (
7+
<Stack spacing={2} direction="row" alignItems="center">
8+
<TextField variant="outlined" size="small" disabled label="Disabled" />
9+
<TextField variant="outlined" size="small" label="Active" />
10+
</Stack>
11+
);
12+
}

‎docs/data/toolpad/components/text-field/TextFieldSize.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react';
2+
import { TextField } from '@mui/toolpad-components';
3+
import { Stack } from '@mui/material';
4+
5+
export default function BasicButton() {
6+
return (
7+
<Stack spacing={2} direction="row" alignItems="center">
8+
<TextField size="small" variant="outlined" label="Small" />
9+
<TextField size="medium" variant="outlined" label="Medium" />
10+
</Stack>
11+
);
12+
}

‎docs/data/toolpad/components/text-field/TextFieldVariant.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react';
2+
import { TextField } from '@mui/toolpad-components';
3+
import { Stack } from '@mui/material';
4+
5+
export default function BasicButton() {
6+
return (
7+
<Stack spacing={2} direction="row" alignItems="center">
8+
<TextField size="small" variant="outlined" label="Outlined" />
9+
<TextField size="small" variant="filled" label="Filled" />
10+
<TextField size="small" variant="standard" label="Standard" />
11+
</Stack>
12+
);
13+
}

0 commit comments

Comments
 (0)