-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[codemod] Support more cases for sx-prop transformation (#42527)
- Loading branch information
1 parent
f414d42
commit 44934b2
Showing
6 changed files
with
404 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-line-break.actual.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import * as React from 'react'; | ||
| import AppBar from '@mui/material/AppBar'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import Toolbar from '@mui/material/Toolbar'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import IconButton from '@mui/material/IconButton'; | ||
| import MenuIcon from '@mui/icons-material/Menu'; | ||
| import { ThemeProvider, createTheme } from '@mui/material/styles'; | ||
|
|
||
| function appBarLabel(label) { | ||
| return ( | ||
| <Toolbar> | ||
| <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}> | ||
| <MenuIcon /> | ||
| </IconButton> | ||
| <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}> | ||
| {label} | ||
| </Typography> | ||
| </Toolbar> | ||
| ); | ||
| } | ||
|
|
||
| const darkTheme = createTheme({ | ||
| palette: { | ||
| mode: 'dark', | ||
| primary: { | ||
| main: '#1976d2', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export default function EnableColorOnDarkAppBar() { | ||
| return ( | ||
| <Stack spacing={2} sx={{ flexGrow: 1 }}> | ||
| <ThemeProvider theme={darkTheme}> | ||
| <AppBar position="static" color="primary" enableColorOnDark> | ||
| {appBarLabel('enableColorOnDark')} | ||
| </AppBar> | ||
| <AppBar position="static" color="primary"> | ||
| {appBarLabel('default')} | ||
| </AppBar> | ||
| </ThemeProvider> | ||
| </Stack> | ||
| ); | ||
| } |
45 changes: 45 additions & 0 deletions
45
packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-line-break.expected.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import * as React from 'react'; | ||
| import AppBar from '@mui/material/AppBar'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import Toolbar from '@mui/material/Toolbar'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import IconButton from '@mui/material/IconButton'; | ||
| import MenuIcon from '@mui/icons-material/Menu'; | ||
| import { ThemeProvider, createTheme } from '@mui/material/styles'; | ||
|
|
||
| function appBarLabel(label) { | ||
| return ( | ||
| <Toolbar> | ||
| <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}> | ||
| <MenuIcon /> | ||
| </IconButton> | ||
| <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}> | ||
| {label} | ||
| </Typography> | ||
| </Toolbar> | ||
| ); | ||
| } | ||
|
|
||
| const darkTheme = createTheme({ | ||
| palette: { | ||
| mode: 'dark', | ||
| primary: { | ||
| main: '#1976d2', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export default function EnableColorOnDarkAppBar() { | ||
| return ( | ||
| <Stack spacing={2} sx={{ flexGrow: 1 }}> | ||
| <ThemeProvider theme={darkTheme}> | ||
| <AppBar position="static" color="primary" enableColorOnDark> | ||
| {appBarLabel('enableColorOnDark')} | ||
| </AppBar> | ||
| <AppBar position="static" color="primary"> | ||
| {appBarLabel('default')} | ||
| </AppBar> | ||
| </ThemeProvider> | ||
| </Stack> | ||
| ); | ||
| } |
97 changes: 97 additions & 0 deletions
97
packages/mui-codemod/src/v6.0.0/sx-prop/test-cases/sx-value-callback.actual.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| function FacebookCircularProgress(props) { | ||
| return ( | ||
| <Box sx={{ position: 'relative' }}> | ||
| <CircularProgress | ||
| variant="determinate" | ||
| sx={{ | ||
| color: (theme) => theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800], | ||
| }} | ||
| size={40} | ||
| thickness={4} | ||
| {...props} | ||
| value={100} | ||
| /> | ||
| <CircularProgress | ||
| variant="indeterminate" | ||
| disableShrink | ||
| sx={{ | ||
| color: (theme) => (theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8'), | ||
| animationDuration: '550ms', | ||
| position: 'absolute', | ||
| left: 0, | ||
| [`& .${circularProgressClasses.circle}`]: { | ||
| strokeLinecap: 'round', | ||
| }, | ||
| }} | ||
| size={40} | ||
| thickness={4} | ||
| {...props} | ||
| /> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| <Paper | ||
| elevation={0} | ||
| sx={{ | ||
| display: 'flex', | ||
| border: (theme) => `1px solid ${theme.palette.divider}`, | ||
| flexWrap: 'wrap', | ||
| }} | ||
| ></Paper>; | ||
|
|
||
| <Divider | ||
| sx={{ border: (theme) => `1px solid ${theme.palette.mode === 'dark' ? '#fff' : '#000'}` }} | ||
| />; | ||
|
|
||
| <Typography | ||
| component="span" | ||
| variant="subtitle1" | ||
| color="inherit" | ||
| sx={{ | ||
| position: 'relative', | ||
| p: 4, | ||
| pt: 2, | ||
| pb: (theme) => `calc(${theme.spacing(1)} + 6px)`, | ||
| }} | ||
| > | ||
| {image.title} | ||
| <ImageMarked className="MuiImageMarked-root" /> | ||
| </Typography>; | ||
|
|
||
| <Autocomplete | ||
| sx={{ | ||
| display: 'inline-block', | ||
| '& input': { | ||
| width: 200, | ||
| bgcolor: 'background.paper', | ||
| color: (theme) => theme.palette.getContrastText(theme.palette.background.paper), | ||
| }, | ||
| }} | ||
| id="custom-input-demo" | ||
| options={options} | ||
| renderInput={(params) => ( | ||
| <div ref={params.InputProps.ref}> | ||
| <input type="text" {...params.inputProps} /> | ||
| </div> | ||
| )} | ||
| />; | ||
|
|
||
| <Box | ||
| sx={{ | ||
| position: 'relative', | ||
| width: 400, | ||
| bgcolor: 'background.paper', | ||
| border: '2px solid #000', | ||
| boxShadow: (theme) => theme.shadows[5], | ||
| p: 4, | ||
| }} | ||
| ></Box>; | ||
|
|
||
| <Backdrop | ||
| sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} | ||
| open={open} | ||
| onClick={handleClose} | ||
| > | ||
| <CircularProgress color="inherit" /> | ||
| </Backdrop>; |
Oops, something went wrong.