Skip to content

Commit 6fe1242

Browse files
siriwatknpsiriwatknp
authored
[docs] Migrate system props to sx prop (#42475)
1 parent 460d6f7 commit 6fe1242

File tree

810 files changed

+3208
-4422
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

810 files changed

+3208
-4422
lines changed

‎docs/data/base/components/badge/BadgeVisibility.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -174,17 +174,20 @@ export default function BadgeVisibility() {
174174
};
175175

176176
return (
177-
<Stack direction="column" justifyContent="center" spacing={1} useFlexGap>
177+
<Stack
178+
direction="column"
179+
spacing={1}
180+
useFlexGap
181+
sx={{ justifyContent: 'center' }}
182+
>
178183
<Badge badgeContent={count} invisible={invisible}>
179184
<MailIcon />
180185
</Badge>
181186
<Divider sx={{ my: 2 }} />
182187
<Stack
183188
direction="row"
184-
justifyContent="center"
185-
alignItems="center"
186-
gap={1}
187189
useFlexGap
190+
sx={{ justifyContent: 'center', alignItems: 'center', gap: 1 }}
188191
>
189192
<StyledButton
190193
aria-label="decrease"

‎docs/data/base/components/badge/BadgeVisibility.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -174,17 +174,20 @@ export default function BadgeVisibility() {
174174
};
175175

176176
return (
177-
<Stack direction="column" justifyContent="center" spacing={1} useFlexGap>
177+
<Stack
178+
direction="column"
179+
spacing={1}
180+
useFlexGap
181+
sx={{ justifyContent: 'center' }}
182+
>
178183
<Badge badgeContent={count} invisible={invisible}>
179184
<MailIcon />
180185
</Badge>
181186
<Divider sx={{ my: 2 }} />
182187
<Stack
183188
direction="row"
184-
justifyContent="center"
185-
alignItems="center"
186-
gap={1}
187189
useFlexGap
190+
sx={{ justifyContent: 'center', alignItems: 'center', gap: 1 }}
188191
>
189192
<StyledButton
190193
aria-label="decrease"

‎docs/data/base/components/focus-trap/ContainedToggleTrappedFocus.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function ContainedToggleTrappedFocus() {
77

88
return (
99
<FocusTrap open={open} disableRestoreFocus disableAutoFocus>
10-
<Stack alignItems="center" spacing={2}>
10+
<Stack spacing={2} sx={{ alignItems: 'center' }}>
1111
<button type="button" onClick={() => setOpen(!open)}>
1212
{open ? 'Close' : 'Open'}
1313
</button>

‎docs/data/base/components/focus-trap/ContainedToggleTrappedFocus.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function ContainedToggleTrappedFocus() {
77

88
return (
99
<FocusTrap open={open} disableRestoreFocus disableAutoFocus>
10-
<Stack alignItems="center" spacing={2}>
10+
<Stack spacing={2} sx={{ alignItems: 'center' }}>
1111
<button type="button" onClick={() => setOpen(!open)}>
1212
{open ? 'Close' : 'Open'}
1313
</button>

‎docs/data/base/components/focus-trap/ContainedToggleTrappedFocus.tsx.preview

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<FocusTrap open={open} disableRestoreFocus disableAutoFocus>
2-
<Stack alignItems="center" spacing={2}>
2+
<Stack spacing={2} sx={{ alignItems: 'center' }}>
33
<button type="button" onClick={() => setOpen(!open)}>
44
{open ? 'Close' : 'Open'}
55
</button>

‎docs/data/base/components/input/InputAdornments.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,7 @@ export default function InputAdornments() {
6060

6161
return (
6262
<Box
63-
sx={{
64-
display: 'flex',
65-
flexDirection: { xs: 'column', sm: 'row' },
66-
gap: 2,
67-
}}
63+
sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}
6864
>
6965
<Input
7066
id="outlined-start-adornment"

‎docs/data/base/components/input/InputAdornments.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,7 @@ export default function InputAdornments() {
5858

5959
return (
6060
<Box
61-
sx={{
62-
display: 'flex',
63-
flexDirection: { xs: 'column', sm: 'row' },
64-
gap: 2,
65-
}}
61+
sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}
6662
>
6763
<Input
6864
id="outlined-start-adornment"

‎docs/data/base/components/input/OTPInput.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -162,13 +162,7 @@ export default function OTPInput() {
162162
const [otp, setOtp] = React.useState('');
163163

164164
return (
165-
<Box
166-
sx={{
167-
display: 'flex',
168-
flexDirection: 'column',
169-
gap: 2,
170-
}}
171-
>
165+
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
172166
<OTP separator={<span>-</span>} value={otp} onChange={setOtp} length={5} />
173167
<span>Entered value: {otp}</span>
174168
</Box>

‎docs/data/base/components/input/OTPInput.tsx

+1-7
Original file line numberDiff line numberDiff line change
@@ -176,13 +176,7 @@ export default function OTPInput() {
176176
const [otp, setOtp] = React.useState('');
177177

178178
return (
179-
<Box
180-
sx={{
181-
display: 'flex',
182-
flexDirection: 'column',
183-
gap: 2,
184-
}}
185-
>
179+
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
186180
<OTP separator={<span>-</span>} value={otp} onChange={setOtp} length={5} />
187181
<span>Entered value: {otp}</span>
188182
</Box>

‎docs/data/base/components/number-input/NumberInputAdornments.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,7 @@ const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
3131
export default function NumberInputAdornments() {
3232
return (
3333
<Box
34-
sx={{
35-
display: 'flex',
36-
flexDirection: { xs: 'column', sm: 'row' },
37-
gap: 2,
38-
}}
34+
sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}
3935
>
4036
<NumberInput
4137
startAdornment={

‎docs/data/base/components/number-input/NumberInputAdornments.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,7 @@ const NumberInput = React.forwardRef(function CustomNumberInput(
3535
export default function NumberInputAdornments() {
3636
return (
3737
<Box
38-
sx={{
39-
display: 'flex',
40-
flexDirection: { xs: 'column', sm: 'row' },
41-
gap: 2,
42-
}}
38+
sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}
4339
>
4440
<NumberInput
4541
startAdornment={

‎docs/data/joy/components/accordion/AccordionTransition.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { BrandingProvider } from '@mui/docs/branding';
1414
export default function AccordionTransition() {
1515
const [transition, setTransition] = React.useState('0.2s ease');
1616
return (
17-
<Stack alignItems="center" spacing={2} sx={{ flex: 1 }}>
17+
<Stack spacing={2} sx={{ alignItems: 'center', flex: 1 }}>
1818
<RadioGroup
1919
orientation="horizontal"
2020
value={transition}

‎docs/data/joy/components/alert/AlertColors.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,9 @@ export default function AlertColors() {
3939
<Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
4040
<Typography
4141
level="body-sm"
42-
fontWeight="xl"
4342
id="variant-label"
4443
textColor="text.primary"
45-
mb={1}
44+
sx={{ fontWeight: 'xl', mb: 1 }}
4645
>
4746
Variant:
4847
</Typography>

‎docs/data/joy/components/alert/AlertColors.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,9 @@ export default function AlertColors() {
3939
<Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
4040
<Typography
4141
level="body-sm"
42-
fontWeight="xl"
4342
id="variant-label"
4443
textColor="text.primary"
45-
mb={1}
44+
sx={{ fontWeight: 'xl', mb: 1 }}
4645
>
4746
Variant:
4847
</Typography>

‎docs/data/joy/components/aspect-ratio/CustomRatio.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ export default function CustomRatio() {
77
<AspectRatio
88
variant="outlined"
99
ratio="4/3"
10-
sx={{
11-
width: 300,
12-
bgcolor: 'background.level2',
13-
borderRadius: 'md',
14-
}}
10+
sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
1511
>
1612
<Typography level="h2" component="div">
1713
4/3

‎docs/data/joy/components/aspect-ratio/CustomRatio.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ export default function CustomRatio() {
77
<AspectRatio
88
variant="outlined"
99
ratio="4/3"
10-
sx={{
11-
width: 300,
12-
bgcolor: 'background.level2',
13-
borderRadius: 'md',
14-
}}
10+
sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
1511
>
1612
<Typography level="h2" component="div">
1713
4/3

‎docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
<AspectRatio
22
variant="outlined"
33
ratio="4/3"
4-
sx={{
5-
width: 300,
6-
bgcolor: 'background.level2',
7-
borderRadius: 'md',
8-
}}
4+
sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
95
>
106
<Typography level="h2" component="div">
117
4/3

‎docs/data/joy/components/aspect-ratio/FlexAspectRatio.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Switch from '@mui/joy/Switch';
1313
export default function FlexAspectRatio() {
1414
const [flex, setFlex] = React.useState(false);
1515
return (
16-
<Stack spacing={2} alignItems="center">
16+
<Stack spacing={2} sx={{ alignItems: 'center' }}>
1717
<FormControl orientation="horizontal">
1818
<FormLabel>Flex</FormLabel>
1919
<Switch checked={flex} onChange={(event) => setFlex(event.target.checked)} />

‎docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Switch from '@mui/joy/Switch';
1313
export default function FlexAspectRatio() {
1414
const [flex, setFlex] = React.useState(false);
1515
return (
16-
<Stack spacing={2} alignItems="center">
16+
<Stack spacing={2} sx={{ alignItems: 'center' }}>
1717
<FormControl orientation="horizontal">
1818
<FormLabel>Flex</FormLabel>
1919
<Switch checked={flex} onChange={(event) => setFlex(event.target.checked)} />

‎docs/data/joy/components/aspect-ratio/ListStackRatio.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default function ListStackRatio() {
4242
/>
4343
</AspectRatio>
4444
<ListItemContent>
45-
<Typography fontWeight="md">{item.title}</Typography>
45+
<Typography sx={{ fontWeight: 'md' }}>{item.title}</Typography>
4646
<Typography level="body-sm">{item.description}</Typography>
4747
</ListItemContent>
4848
</ListItemButton>

‎docs/data/joy/components/aspect-ratio/ListStackRatio.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default function ListStackRatio() {
4242
/>
4343
</AspectRatio>
4444
<ListItemContent>
45-
<Typography fontWeight="md">{item.title}</Typography>
45+
<Typography sx={{ fontWeight: 'md' }}>{item.title}</Typography>
4646
<Typography level="body-sm">{item.description}</Typography>
4747
</ListItemContent>
4848
</ListItemButton>

‎docs/data/joy/components/aspect-ratio/VariantsRatio.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,28 @@ export default function VariantsRatio() {
88
<Grid container spacing={2} sx={{ width: '100%' }}>
99
<Grid xs={6} md>
1010
<AspectRatio variant="solid">
11-
<Typography level="inherit" fontWeight="lg">
11+
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
1212
Solid
1313
</Typography>
1414
</AspectRatio>
1515
</Grid>
1616
<Grid xs={6} md>
1717
<AspectRatio variant="soft">
18-
<Typography level="inherit" fontWeight="lg">
18+
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
1919
Soft
2020
</Typography>
2121
</AspectRatio>
2222
</Grid>
2323
<Grid xs={6} md>
2424
<AspectRatio variant="outlined">
25-
<Typography level="inherit" fontWeight="lg">
25+
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
2626
Outlined
2727
</Typography>
2828
</AspectRatio>
2929
</Grid>
3030
<Grid xs={6} md>
3131
<AspectRatio variant="plain">
32-
<Typography level="inherit" fontWeight="lg">
32+
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
3333
Plain
3434
</Typography>
3535
</AspectRatio>

‎docs/data/joy/components/aspect-ratio/VariantsRatio.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,28 @@ export default function VariantsRatio() {
88
<Grid container spacing={2} sx={{ width: '100%' }}>
99
<Grid xs={6} md>
1010
<AspectRatio variant="solid">
11-
<Typography level="inherit" fontWeight="lg">
11+
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
1212
Solid
1313
</Typography>
1414
</AspectRatio>
1515
</Grid>
1616
<Grid xs={6} md>
1717
<AspectRatio variant="soft">
18-
<Typography level="inherit" fontWeight="lg">
18+
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
1919
Soft
2020
</Typography>
2121
</AspectRatio>
2222
</Grid>
2323
<Grid xs={6} md>
2424
<AspectRatio variant="outlined">
25-
<Typography level="inherit" fontWeight="lg">
25+
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
2626
Outlined
2727
</Typography>
2828
</AspectRatio>
2929
</Grid>
3030
<Grid xs={6} md>
3131
<AspectRatio variant="plain">
32-
<Typography level="inherit" fontWeight="lg">
32+
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
3333
Plain
3434
</Typography>
3535
</AspectRatio>

‎docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -106,16 +106,14 @@ export default function FreeSoloCreateOptionDialog() {
106106
id="basic-modal-dialog-title"
107107
component="h2"
108108
level="inherit"
109-
fontSize="1.25em"
110-
mb="0.25em"
109+
sx={{ fontSize: '1.25em', mb: '0.25em' }}
111110
>
112111
Add a new film
113112
</Typography>
114113
<Typography
115114
id="basic-modal-dialog-description"
116-
mt={0.5}
117-
mb={2}
118115
textColor="text.tertiary"
116+
sx={{ mt: 0.5, mb: 2 }}
119117
>
120118
Did you miss any film in our list? Please, add it!
121119
</Typography>
@@ -147,7 +145,7 @@ export default function FreeSoloCreateOptionDialog() {
147145
}
148146
/>
149147
</FormControl>
150-
<Stack direction="row" justifyContent="flex-end" spacing={2}>
148+
<Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-end' }}>
151149
<Button variant="plain" color="neutral" onClick={handleClose}>
152150
Cancel
153151
</Button>

‎docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -106,16 +106,14 @@ export default function FreeSoloCreateOptionDialog() {
106106
id="basic-modal-dialog-title"
107107
component="h2"
108108
level="inherit"
109-
fontSize="1.25em"
110-
mb="0.25em"
109+
sx={{ fontSize: '1.25em', mb: '0.25em' }}
111110
>
112111
Add a new film
113112
</Typography>
114113
<Typography
115114
id="basic-modal-dialog-description"
116-
mt={0.5}
117-
mb={2}
118115
textColor="text.tertiary"
116+
sx={{ mt: 0.5, mb: 2 }}
119117
>
120118
Did you miss any film in our list? Please, add it!
121119
</Typography>
@@ -147,7 +145,7 @@ export default function FreeSoloCreateOptionDialog() {
147145
}
148146
/>
149147
</FormControl>
150-
<Stack direction="row" justifyContent="flex-end" spacing={2}>
148+
<Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-end' }}>
151149
<Button variant="plain" color="neutral" onClick={handleClose}>
152150
Cancel
153151
</Button>

0 commit comments

Comments
 (0)