Skip to content
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

[Joy] Remove TextField component and replace its usage in docs with FormControl/FormLabel/Input #35462

Merged
merged 24 commits into from
Jan 15, 2023
Merged

[Joy] Remove TextField component and replace its usage in docs with FormControl/FormLabel/Input #35462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
005329d
[Joy] Remove TextField component and its demos
hbjORbj Dec 13, 2022
fd89738
Remove path to joy text field demo
hbjORbj Dec 13, 2022
59cbbfd
[docs][AspectRatio] Replace TextField with FormControl, FormLabel and…
hbjORbj Dec 13, 2022
b96027e
[docs][Autocomplete] Replace TextField with FormControl, FormLabel an…
hbjORbj Dec 13, 2022
c9b3d8a
[docs][Card] Replace TextField with FormControl, FormLabel and Input
hbjORbj Dec 13, 2022
031db62
[docs][tutorial] Replace TextField with FormControl, FormLabel and Input
hbjORbj Dec 13, 2022
cd4096c
[docs][Modal] Replace TextField with FormControl, FormLabel and Input
hbjORbj Dec 13, 2022
ffc535c
[docs][tutorial][LoginFinal] Replace TextField with FormControl, Form…
hbjORbj Dec 13, 2022
e2ee4b4
Replace TextField with FormControl, FormLabel and Input in more demos
hbjORbj Dec 13, 2022
ee9ae2d
prettier
hbjORbj Dec 13, 2022
ac42203
Fix Dependencies.test.js
hbjORbj Dec 13, 2022
8061ef0
Remove broken links
hbjORbj Dec 13, 2022
28f75f3
add codemod
hbjORbj Jan 4, 2023
184fa6b
improve codemod
hbjORbj Jan 5, 2023
8ca049b
improve codemod tests
hbjORbj Jan 5, 2023
edb03ac
improve codemod to turn TextField into FormControl / FormLabel / Form…
hbjORbj Jan 6, 2023
e1eb3c6
improve codemod tests
hbjORbj Jan 6, 2023
e69c014
improve codemod further
hbjORbj Jan 7, 2023
2270de5
improve codemod tests further
hbjORbj Jan 7, 2023
0d0def5
fix
hbjORbj Jan 7, 2023
58ecff1
improve further
hbjORbj Jan 7, 2023
22a1773
fix test failure
hbjORbj Jan 7, 2023
3d92c20
add codemod to README
siriwatknp Jan 10, 2023
67cd5cf
add migration to text-field
siriwatknp Jan 10, 2023
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
25 changes: 14 additions & 11 deletions docs/data/joy/components/aspect-ratio/FlexRowRatio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import * as React from 'react';
import AspectRatio from '@mui/joy/AspectRatio';
import Box from '@mui/joy/Box';
import TextField from '@mui/joy/TextField';
import Typography from '@mui/joy/Typography';
import Sheet from '@mui/joy/Sheet';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Input from '@mui/joy/Input';

export default function FlexRowRatio() {
const [flexBasis, setFlexBasis] = React.useState(200);
Expand Down Expand Up @@ -38,16 +40,17 @@ export default function FlexRowRatio() {
</Box>
</Sheet>
<br />
<TextField
variant="outlined"
label="flexBasis"
placeholder="number"
endDecorator="px"
type="number"
value={flexBasis}
onChange={(event) => setFlexBasis(event.target.valueAsNumber)}
sx={{ mx: 'auto', width: '100%' }}
/>
<FormControl sx={{ mx: 'auto', width: '100%' }}>
<FormLabel>flexBasis</FormLabel>
<Input
variant="outlined"
type="number"
placeholder="number"
value={flexBasis}
endDecorator="px"
onChange={(event) => setFlexBasis(event.target.valueAsNumber)}
/>
</FormControl>
</Box>
);
}
25 changes: 14 additions & 11 deletions docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import * as React from 'react';
import AspectRatio from '@mui/joy/AspectRatio';
import Box from '@mui/joy/Box';
import TextField from '@mui/joy/TextField';
import Typography from '@mui/joy/Typography';
import Sheet from '@mui/joy/Sheet';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Input from '@mui/joy/Input';

export default function FlexRowRatio() {
const [flexBasis, setFlexBasis] = React.useState(200);
Expand Down Expand Up @@ -38,16 +40,17 @@ export default function FlexRowRatio() {
</Box>
</Sheet>
<br />
<TextField
variant="outlined"
label="flexBasis"
placeholder="number"
endDecorator="px"
type="number"
value={flexBasis}
onChange={(event) => setFlexBasis(event.target.valueAsNumber)}
sx={{ mx: 'auto', width: '100%' }}
/>
<FormControl sx={{ mx: 'auto', width: '100%' }}>
<FormLabel>flexBasis</FormLabel>
<Input
variant="outlined"
type="number"
placeholder="number"
value={flexBasis}
endDecorator="px"
onChange={(event) => setFlexBasis(event.target.valueAsNumber)}
/>
</FormControl>
</Box>
);
}
54 changes: 28 additions & 26 deletions docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import FormLabel from '@mui/joy/FormLabel';
import Modal from '@mui/joy/Modal';
import ModalDialog from '@mui/joy/ModalDialog';
import Button from '@mui/joy/Button';
import TextField from '@mui/joy/TextField';
import Input from '@mui/joy/Input';
import Typography from '@mui/joy/Typography';
import Stack from '@mui/joy/Stack';

Expand Down Expand Up @@ -120,31 +120,33 @@ export default function FreeSoloCreateOptionDialog() {
Did you miss any film in our list? Please, add it!
</Typography>
<Stack spacing={2}>
<TextField
autoFocus
id="name"
value={dialogValue.title}
onChange={(event) =>
setDialogValue({
...dialogValue,
title: event.target.value,
})
}
label="Title"
type="text"
/>
<TextField
id="year"
value={dialogValue.year}
onChange={(event) =>
setDialogValue({
...dialogValue,
year: event.target.value,
})
}
label="year"
type="number"
/>
<FormControl id="name">
<FormLabel>Title</FormLabel>
<Input
autoFocus
type="text"
value={dialogValue.title}
onChange={(event) =>
setDialogValue({
...dialogValue,
title: event.target.value,
})
}
/>
</FormControl>
<FormControl id="year">
<FormLabel>year</FormLabel>
<Input
type="number"
value={dialogValue.year}
onChange={(event) =>
setDialogValue({
...dialogValue,
year: event.target.value,
})
}
/>
</FormControl>
<Stack direction="row" justifyContent="flex-end" spacing={2}>
<Button variant="plain" color="neutral" onClick={handleClose}>
Cancel
Expand Down
54 changes: 28 additions & 26 deletions docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import FormLabel from '@mui/joy/FormLabel';
import Modal from '@mui/joy/Modal';
import ModalDialog from '@mui/joy/ModalDialog';
import Button from '@mui/joy/Button';
import TextField from '@mui/joy/TextField';
import Input from '@mui/joy/Input';
import Typography from '@mui/joy/Typography';
import Stack from '@mui/joy/Stack';

Expand Down Expand Up @@ -120,31 +120,33 @@ export default function FreeSoloCreateOptionDialog() {
Did you miss any film in our list? Please, add it!
</Typography>
<Stack spacing={2}>
<TextField
autoFocus
id="name"
value={dialogValue.title}
onChange={(event) =>
setDialogValue({
...dialogValue,
title: event.target.value,
})
}
label="Title"
type="text"
/>
<TextField
id="year"
value={dialogValue.year}
onChange={(event) =>
setDialogValue({
...dialogValue,
year: event.target.value,
})
}
label="year"
type="number"
/>
<FormControl id="name">
<FormLabel>Title</FormLabel>
<Input
autoFocus
type="text"
value={dialogValue.title}
onChange={(event) =>
setDialogValue({
...dialogValue,
title: event.target.value,
})
}
/>
</FormControl>
<FormControl id="year">
<FormLabel>year</FormLabel>
<Input
type="number"
value={dialogValue.year}
onChange={(event) =>
setDialogValue({
...dialogValue,
year: event.target.value,
})
}
/>
</FormControl>
<Stack direction="row" justifyContent="flex-end" spacing={2}>
<Button variant="plain" color="neutral" onClick={handleClose}>
Cancel
Expand Down
74 changes: 42 additions & 32 deletions docs/data/joy/components/card/CardVariables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import CardCover from '@mui/joy/CardCover';
import CardContent from '@mui/joy/CardContent';
import CardOverflow from '@mui/joy/CardOverflow';
import Link from '@mui/joy/Link';
import TextField from '@mui/joy/TextField';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import FormHelperText from '@mui/joy/FormHelperText';
import Input from '@mui/joy/Input';
import Typography from '@mui/joy/Typography';
import BrandingProvider from 'docs/src/BrandingProvider';
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
Expand Down Expand Up @@ -142,37 +145,44 @@ export default function CardVariables() {
CSS variables
</Typography>
{vars.map((data) => (
<TextField
key={data.var}
label={data.var}
size="sm"
variant="outlined"
defaultValue={Number(data.defaultValue.replace('px', '')) || undefined}
endDecorator={<Typography level="body3">px</Typography>}
type={data.type}
helperText={
data.defaultValue ? `Default as ${data.defaultValue}` : undefined
}
onChange={(event) => {
const { value } = event.target;
setSx((prevSx) => {
if (!value) {
const newSx = { ...prevSx };
// @ts-ignore
delete newSx[data.var];
return newSx;
}
return {
...prevSx,
[data.var]: `${value}px`,
};
});
}}
sx={{
maxWidth: 160,
'& .JoyInput-root': { '--Input-paddingInline': '0.5rem' },
}}
/>
<FormControl key={data.var}>
<FormLabel sx={{ '--FormLabel-fontSize': 'var(--joy-fontSize-xs)' }}>
{data.var}
</FormLabel>
<Input
size="sm"
variant="outlined"
defaultValue={
Number(data.defaultValue.replace('px', '')) || undefined
}
endDecorator={<Typography level="body3">px</Typography>}
type={data.type}
sx={{
maxWidth: 160,
'& .JoyInput-root': { '--Input-paddingInline': '0.5rem' },
}}
onChange={(event) => {
const { value } = event.target;
setSx((prevSx) => {
if (!value) {
const newSx = { ...prevSx };
// @ts-ignore
delete newSx[data.var];
return newSx;
}
return {
...prevSx,
[data.var]: `${value}px`,
};
});
}}
/>
{data.defaultValue ? (
<FormHelperText
sx={{ '--FormHelperText-fontSize': 'var(--joy-fontSize-xs)' }}
>{`Default as ${data.defaultValue}`}</FormHelperText>
) : null}
</FormControl>
))}
</Box>
</Sheet>
Expand Down
14 changes: 11 additions & 3 deletions docs/data/joy/components/modal/BasicModalDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import * as React from 'react';
import Button from '@mui/joy/Button';
import TextField from '@mui/joy/TextField';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Input from '@mui/joy/Input';
import Modal from '@mui/joy/Modal';
import ModalDialog from '@mui/joy/ModalDialog';
import Stack from '@mui/joy/Stack';
Expand Down Expand Up @@ -54,8 +56,14 @@ export default function BasicModalDialog() {
}}
>
<Stack spacing={2}>
<TextField label="Name" autoFocus required />
<TextField label="Description" required />
<FormControl>
<FormLabel>Name</FormLabel>
<Input autoFocus required />
</FormControl>
<FormControl>
<FormLabel>Description</FormLabel>
<Input required />
</FormControl>
<Button type="submit">Submit</Button>
</Stack>
</form>
Expand Down
42 changes: 0 additions & 42 deletions docs/data/joy/components/text-field/TextFieldColors.js
View file
Open in desktop

This file was deleted.

Loading