Skip to content

Commit 7dda433

Browse files
vicasasvicasas
authored
[docs] Fix TextField demo layout (#26710)
1 parent 2d4d066 commit 7dda433

File tree

5 files changed

+86
-227
lines changed

5 files changed

+86
-227
lines changed

‎docs/src/pages/components/text-fields/FullWidthTextField.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as React from 'react';
2+
import Box from '@material-ui/core/Box';
3+
import TextField from '@material-ui/core/TextField';
4+
5+
export default function FullWidthTextField() {
6+
return (
7+
<Box
8+
sx={{
9+
width: 500,
10+
maxWidth: '100%',
11+
}}
12+
>
13+
<TextField fullWidth label={'fullWidth'} id="fullWidth" />
14+
</Box>
15+
);
16+
}

‎docs/src/pages/components/text-fields/FullWidthTextField.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as React from 'react';
2+
import Box from '@material-ui/core/Box';
3+
import TextField from '@material-ui/core/TextField';
4+
5+
export default function FullWidthTextField() {
6+
return (
7+
<Box
8+
sx={{
9+
width: 500,
10+
maxWidth: '100%',
11+
}}
12+
>
13+
<TextField fullWidth label={'fullWidth'} id="fullWidth" />
14+
</Box>
15+
);
16+
}

‎docs/src/pages/components/text-fields/LayoutTextFields.js

Lines changed: 23 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -2,124 +2,36 @@ import * as React from 'react';
22
import Box from '@material-ui/core/Box';
33
import TextField from '@material-ui/core/TextField';
44

5+
function RedBar() {
6+
return (
7+
<Box
8+
sx={{
9+
height: 20,
10+
backgroundColor: (theme) =>
11+
theme.palette.mode === 'light'
12+
? 'rgba(255, 0, 0, 0.1)'
13+
: 'rgb(255 132 132 / 25%)',
14+
}}
15+
/>
16+
);
17+
}
18+
519
export default function LayoutTextFields() {
620
return (
721
<Box
822
sx={{
923
display: 'flex',
10-
flexWrap: 'wrap',
11-
'& > :not(style)': { mb: 2 },
12-
'& .MuiTextField-root': { m: 1 },
13-
'& .MuiTextField-root:not(:first-of-type)': { width: '25ch' },
24+
flexDirection: 'column',
25+
'& .MuiTextField-root': { width: '25ch' },
1426
}}
1527
>
16-
<div>
17-
<TextField
18-
id="outlined-full-width"
19-
label="Label"
20-
placeholder="Placeholder"
21-
helperText="Full width!"
22-
fullWidth
23-
margin="normal"
24-
InputLabelProps={{
25-
shrink: true,
26-
}}
27-
/>
28-
<TextField
29-
label="None"
30-
id="outlined-margin-none"
31-
defaultValue="Default Value"
32-
helperText="Some important text"
33-
/>
34-
<TextField
35-
label="Dense"
36-
id="outlined-margin-dense"
37-
defaultValue="Default Value"
38-
helperText="Some important text"
39-
margin="dense"
40-
/>
41-
<TextField
42-
label="Normal"
43-
id="outlined-margin-normal"
44-
defaultValue="Default Value"
45-
helperText="Some important text"
46-
margin="normal"
47-
/>
48-
</div>
49-
<div>
50-
<TextField
51-
id="filled-full-width"
52-
label="Label"
53-
placeholder="Placeholder"
54-
helperText="Full width!"
55-
fullWidth
56-
margin="normal"
57-
InputLabelProps={{
58-
shrink: true,
59-
}}
60-
variant="filled"
61-
/>
62-
<TextField
63-
label="None"
64-
id="filled-margin-none"
65-
defaultValue="Default Value"
66-
helperText="Some important text"
67-
variant="filled"
68-
/>
69-
<TextField
70-
label="Dense"
71-
id="filled-margin-dense"
72-
defaultValue="Default Value"
73-
helperText="Some important text"
74-
margin="dense"
75-
variant="filled"
76-
/>
77-
<TextField
78-
label="Normal"
79-
id="filled-margin-normal"
80-
defaultValue="Default Value"
81-
helperText="Some important text"
82-
margin="normal"
83-
variant="filled"
84-
/>
85-
</div>
86-
<div>
87-
<TextField
88-
id="standard-full-width"
89-
label="Label"
90-
placeholder="Placeholder"
91-
helperText="Full width!"
92-
fullWidth
93-
margin="normal"
94-
InputLabelProps={{
95-
shrink: true,
96-
}}
97-
variant="standard"
98-
/>
99-
<TextField
100-
label="None"
101-
id="margin-none"
102-
defaultValue="Default Value"
103-
helperText="Some important text"
104-
variant="standard"
105-
/>
106-
<TextField
107-
label="Dense"
108-
id="margin-dense"
109-
defaultValue="Default Value"
110-
helperText="Some important text"
111-
margin="dense"
112-
variant="standard"
113-
/>
114-
<TextField
115-
label="Normal"
116-
id="margin-normal"
117-
defaultValue="Default Value"
118-
helperText="Some important text"
119-
margin="normal"
120-
variant="standard"
121-
/>
122-
</div>
28+
<RedBar />
29+
<TextField label={'margin="none"'} id="margin-none" />
30+
<RedBar />
31+
<TextField label={'margin="dense"'} id="margin-dense" margin="dense" />
32+
<RedBar />
33+
<TextField label={'margin="normal"'} id="margin-normal" margin="normal" />
34+
<RedBar />
12335
</Box>
12436
);
12537
}

‎docs/src/pages/components/text-fields/LayoutTextFields.tsx

Lines changed: 23 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -2,124 +2,36 @@ import * as React from 'react';
22
import Box from '@material-ui/core/Box';
33
import TextField from '@material-ui/core/TextField';
44

5+
function RedBar() {
6+
return (
7+
<Box
8+
sx={{
9+
height: 20,
10+
backgroundColor: (theme) =>
11+
theme.palette.mode === 'light'
12+
? 'rgba(255, 0, 0, 0.1)'
13+
: 'rgb(255 132 132 / 25%)',
14+
}}
15+
/>
16+
);
17+
}
18+
519
export default function LayoutTextFields() {
620
return (
721
<Box
822
sx={{
923
display: 'flex',
10-
flexWrap: 'wrap',
11-
'& > :not(style)': { mb: 2 },
12-
'& .MuiTextField-root': { m: 1 },
13-
'& .MuiTextField-root:not(:first-of-type)': { width: '25ch' },
24+
flexDirection: 'column',
25+
'& .MuiTextField-root': { width: '25ch' },
1426
}}
1527
>
16-
<div>
17-
<TextField
18-
id="outlined-full-width"
19-
label="Label"
20-
placeholder="Placeholder"
21-
helperText="Full width!"
22-
fullWidth
23-
margin="normal"
24-
InputLabelProps={{
25-
shrink: true,
26-
}}
27-
/>
28-
<TextField
29-
label="None"
30-
id="outlined-margin-none"
31-
defaultValue="Default Value"
32-
helperText="Some important text"
33-
/>
34-
<TextField
35-
label="Dense"
36-
id="outlined-margin-dense"
37-
defaultValue="Default Value"
38-
helperText="Some important text"
39-
margin="dense"
40-
/>
41-
<TextField
42-
label="Normal"
43-
id="outlined-margin-normal"
44-
defaultValue="Default Value"
45-
helperText="Some important text"
46-
margin="normal"
47-
/>
48-
</div>
49-
<div>
50-
<TextField
51-
id="filled-full-width"
52-
label="Label"
53-
placeholder="Placeholder"
54-
helperText="Full width!"
55-
fullWidth
56-
margin="normal"
57-
InputLabelProps={{
58-
shrink: true,
59-
}}
60-
variant="filled"
61-
/>
62-
<TextField
63-
label="None"
64-
id="filled-margin-none"
65-
defaultValue="Default Value"
66-
helperText="Some important text"
67-
variant="filled"
68-
/>
69-
<TextField
70-
label="Dense"
71-
id="filled-margin-dense"
72-
defaultValue="Default Value"
73-
helperText="Some important text"
74-
margin="dense"
75-
variant="filled"
76-
/>
77-
<TextField
78-
label="Normal"
79-
id="filled-margin-normal"
80-
defaultValue="Default Value"
81-
helperText="Some important text"
82-
margin="normal"
83-
variant="filled"
84-
/>
85-
</div>
86-
<div>
87-
<TextField
88-
id="standard-full-width"
89-
label="Label"
90-
placeholder="Placeholder"
91-
helperText="Full width!"
92-
fullWidth
93-
margin="normal"
94-
InputLabelProps={{
95-
shrink: true,
96-
}}
97-
variant="standard"
98-
/>
99-
<TextField
100-
label="None"
101-
id="margin-none"
102-
defaultValue="Default Value"
103-
helperText="Some important text"
104-
variant="standard"
105-
/>
106-
<TextField
107-
label="Dense"
108-
id="margin-dense"
109-
defaultValue="Default Value"
110-
helperText="Some important text"
111-
margin="dense"
112-
variant="standard"
113-
/>
114-
<TextField
115-
label="Normal"
116-
id="margin-normal"
117-
defaultValue="Default Value"
118-
helperText="Some important text"
119-
margin="normal"
120-
variant="standard"
121-
/>
122-
</div>
28+
<RedBar />
29+
<TextField label={'margin="none"'} id="margin-none" />
30+
<RedBar />
31+
<TextField label={'margin="dense"'} id="margin-dense" margin="dense" />
32+
<RedBar />
33+
<TextField label={'margin="normal"'} id="margin-normal" margin="normal" />
34+
<RedBar />
12335
</Box>
12436
);
12537
}

‎docs/src/pages/components/text-fields/text-fields.md

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,18 @@ The `filled` variant input height can be further reduced by rendering the label
7575

7676
{{"demo": "pages/components/text-fields/TextFieldHiddenLabel.js"}}
7777

78-
## Layout
78+
## Margin
7979

80-
`margin` prop can be used to alter the vertical spacing of inputs.
81-
Using `none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will.
82-
`dense` and `normal` alter other styles to meet the specification.
80+
The `margin` prop can be used to alter the vertical spacing of the text field.
81+
Using `none` (default) doesn't apply margins to the `FormControl` whereas `dense` and `normal` do.
82+
83+
{{"demo": "pages/components/text-fields/LayoutTextFields.js"}}
84+
85+
## Full width
8386

8487
`fullWidth` can be used to make the input take up the full width of its container.
8588

86-
{{"demo": "pages/components/text-fields/LayoutTextFields.js"}}
89+
{{"demo": "pages/components/text-fields/FullWidthTextField.js"}}
8790

8891
## Uncontrolled vs. Controlled
8992

0 commit comments

Comments
 (0)