[docs] Migrate system props to sx prop (#42475)

mui · Jun 5, 2024 · 6fe1242 · 6fe1242
1 parent 460d6f7
commit 6fe1242
Show file tree

Hide file tree

Showing 810 changed files with 3,208 additions and 4,422 deletions.
diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
@@ -174,17 +174,20 @@ export default function BadgeVisibility() {
   };
 
   return (
-    <Stack direction="column" justifyContent="center" spacing={1} useFlexGap>
+    <Stack
+      direction="column"
+      spacing={1}
+      useFlexGap
+      sx={{ justifyContent: 'center' }}
+    >
       <Badge badgeContent={count} invisible={invisible}>
         <MailIcon />
       </Badge>
       <Divider sx={{ my: 2 }} />
       <Stack
         direction="row"
-        justifyContent="center"
-        alignItems="center"
-        gap={1}
         useFlexGap
+        sx={{ justifyContent: 'center', alignItems: 'center', gap: 1 }}
       >
         <StyledButton
           aria-label="decrease"

diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -174,17 +174,20 @@ export default function BadgeVisibility() {
   };
 
   return (
-    <Stack direction="column" justifyContent="center" spacing={1} useFlexGap>
+    <Stack
+      direction="column"
+      spacing={1}
+      useFlexGap
+      sx={{ justifyContent: 'center' }}
+    >
       <Badge badgeContent={count} invisible={invisible}>
         <MailIcon />
       </Badge>
       <Divider sx={{ my: 2 }} />
       <Stack
         direction="row"
-        justifyContent="center"
-        alignItems="center"
-        gap={1}
         useFlexGap
+        sx={{ justifyContent: 'center', alignItems: 'center', gap: 1 }}
       >
         <StyledButton
           aria-label="decrease"

diff --git a/docs/data/base/components/focus-trap/ContainedToggleTrappedFocus.js b/docs/data/base/components/focus-trap/ContainedToggleTrappedFocus.js
@@ -7,7 +7,7 @@ export default function ContainedToggleTrappedFocus() {
 
   return (
     <FocusTrap open={open} disableRestoreFocus disableAutoFocus>
-      <Stack alignItems="center" spacing={2}>
+      <Stack spacing={2} sx={{ alignItems: 'center' }}>
         <button type="button" onClick={() => setOpen(!open)}>
           {open ? 'Close' : 'Open'}
         </button>

diff --git a/docs/data/base/components/focus-trap/ContainedToggleTrappedFocus.tsx b/docs/data/base/components/focus-trap/ContainedToggleTrappedFocus.tsx
@@ -7,7 +7,7 @@ export default function ContainedToggleTrappedFocus() {
 
   return (
     <FocusTrap open={open} disableRestoreFocus disableAutoFocus>
-      <Stack alignItems="center" spacing={2}>
+      <Stack spacing={2} sx={{ alignItems: 'center' }}>
         <button type="button" onClick={() => setOpen(!open)}>
           {open ? 'Close' : 'Open'}
         </button>

diff --git a/docs/data/base/components/focus-trap/ContainedToggleTrappedFocus.tsx.preview b/docs/data/base/components/focus-trap/ContainedToggleTrappedFocus.tsx.preview
@@ -1,5 +1,5 @@
 <FocusTrap open={open} disableRestoreFocus disableAutoFocus>
-  <Stack alignItems="center" spacing={2}>
+  <Stack spacing={2} sx={{ alignItems: 'center' }}>
     <button type="button" onClick={() => setOpen(!open)}>
       {open ? 'Close' : 'Open'}
     </button>

diff --git a/docs/data/base/components/input/InputAdornments.js b/docs/data/base/components/input/InputAdornments.js
@@ -60,11 +60,7 @@ export default function InputAdornments() {
 
   return (
     <Box
-      sx={{
-        display: 'flex',
-        flexDirection: { xs: 'column', sm: 'row' },
-        gap: 2,
-      }}
+      sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}
     >
       <Input
         id="outlined-start-adornment"

diff --git a/docs/data/base/components/input/InputAdornments.tsx b/docs/data/base/components/input/InputAdornments.tsx
@@ -58,11 +58,7 @@ export default function InputAdornments() {
 
   return (
     <Box
-      sx={{
-        display: 'flex',
-        flexDirection: { xs: 'column', sm: 'row' },
-        gap: 2,
-      }}
+      sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}
     >
       <Input
         id="outlined-start-adornment"

diff --git a/docs/data/base/components/input/OTPInput.js b/docs/data/base/components/input/OTPInput.js
@@ -162,13 +162,7 @@ export default function OTPInput() {
   const [otp, setOtp] = React.useState('');
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 2,
-      }}
-    >
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
       <OTP separator={<span>-</span>} value={otp} onChange={setOtp} length={5} />
       <span>Entered value: {otp}</span>
     </Box>

diff --git a/docs/data/base/components/input/OTPInput.tsx b/docs/data/base/components/input/OTPInput.tsx
@@ -176,13 +176,7 @@ export default function OTPInput() {
   const [otp, setOtp] = React.useState('');
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 2,
-      }}
-    >
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
       <OTP separator={<span>-</span>} value={otp} onChange={setOtp} length={5} />
       <span>Entered value: {otp}</span>
     </Box>

diff --git a/docs/data/base/components/number-input/NumberInputAdornments.js b/docs/data/base/components/number-input/NumberInputAdornments.js
@@ -31,11 +31,7 @@ const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
 export default function NumberInputAdornments() {
   return (
     <Box
-      sx={{
-        display: 'flex',
-        flexDirection: { xs: 'column', sm: 'row' },
-        gap: 2,
-      }}
+      sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}
     >
       <NumberInput
         startAdornment={

diff --git a/docs/data/base/components/number-input/NumberInputAdornments.tsx b/docs/data/base/components/number-input/NumberInputAdornments.tsx
@@ -35,11 +35,7 @@ const NumberInput = React.forwardRef(function CustomNumberInput(
 export default function NumberInputAdornments() {
   return (
     <Box
-      sx={{
-        display: 'flex',
-        flexDirection: { xs: 'column', sm: 'row' },
-        gap: 2,
-      }}
+      sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}
     >
       <NumberInput
         startAdornment={

diff --git a/docs/data/joy/components/accordion/AccordionTransition.js b/docs/data/joy/components/accordion/AccordionTransition.js
@@ -14,7 +14,7 @@ import { BrandingProvider } from '@mui/docs/branding';
 export default function AccordionTransition() {
   const [transition, setTransition] = React.useState('0.2s ease');
   return (
-    <Stack alignItems="center" spacing={2} sx={{ flex: 1 }}>
+    <Stack spacing={2} sx={{ alignItems: 'center', flex: 1 }}>
       <RadioGroup
         orientation="horizontal"
         value={transition}

diff --git a/docs/data/joy/components/alert/AlertColors.js b/docs/data/joy/components/alert/AlertColors.js
@@ -39,10 +39,9 @@ export default function AlertColors() {
       <Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
         <Typography
           level="body-sm"
-          fontWeight="xl"
           id="variant-label"
           textColor="text.primary"
-          mb={1}
+          sx={{ fontWeight: 'xl', mb: 1 }}
         >
           Variant:
         </Typography>

diff --git a/docs/data/joy/components/alert/AlertColors.tsx b/docs/data/joy/components/alert/AlertColors.tsx
@@ -39,10 +39,9 @@ export default function AlertColors() {
       <Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
         <Typography
           level="body-sm"
-          fontWeight="xl"
           id="variant-label"
           textColor="text.primary"
-          mb={1}
+          sx={{ fontWeight: 'xl', mb: 1 }}
         >
           Variant:
         </Typography>

diff --git a/docs/data/joy/components/aspect-ratio/CustomRatio.js b/docs/data/joy/components/aspect-ratio/CustomRatio.js
@@ -7,11 +7,7 @@ export default function CustomRatio() {
     <AspectRatio
       variant="outlined"
       ratio="4/3"
-      sx={{
-        width: 300,
-        bgcolor: 'background.level2',
-        borderRadius: 'md',
-      }}
+      sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
     >
       <Typography level="h2" component="div">
         4/3

diff --git a/docs/data/joy/components/aspect-ratio/CustomRatio.tsx b/docs/data/joy/components/aspect-ratio/CustomRatio.tsx
@@ -7,11 +7,7 @@ export default function CustomRatio() {
     <AspectRatio
       variant="outlined"
       ratio="4/3"
-      sx={{
-        width: 300,
-        bgcolor: 'background.level2',
-        borderRadius: 'md',
-      }}
+      sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
     >
       <Typography level="h2" component="div">
         4/3

diff --git a/docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview
@@ -1,11 +1,7 @@
 <AspectRatio
   variant="outlined"
   ratio="4/3"
-  sx={{
-    width: 300,
-    bgcolor: 'background.level2',
-    borderRadius: 'md',
-  }}
+  sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
 >
   <Typography level="h2" component="div">
     4/3

diff --git a/docs/data/joy/components/aspect-ratio/FlexAspectRatio.js b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.js
@@ -13,7 +13,7 @@ import Switch from '@mui/joy/Switch';
 export default function FlexAspectRatio() {
   const [flex, setFlex] = React.useState(false);
   return (
-    <Stack spacing={2} alignItems="center">
+    <Stack spacing={2} sx={{ alignItems: 'center' }}>
       <FormControl orientation="horizontal">
         <FormLabel>Flex</FormLabel>
         <Switch checked={flex} onChange={(event) => setFlex(event.target.checked)} />

diff --git a/docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx
@@ -13,7 +13,7 @@ import Switch from '@mui/joy/Switch';
 export default function FlexAspectRatio() {
   const [flex, setFlex] = React.useState(false);
   return (
-    <Stack spacing={2} alignItems="center">
+    <Stack spacing={2} sx={{ alignItems: 'center' }}>
       <FormControl orientation="horizontal">
         <FormLabel>Flex</FormLabel>
         <Switch checked={flex} onChange={(event) => setFlex(event.target.checked)} />

diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.js b/docs/data/joy/components/aspect-ratio/ListStackRatio.js
@@ -42,7 +42,7 @@ export default function ListStackRatio() {
                   />
                 </AspectRatio>
                 <ListItemContent>
-                  <Typography fontWeight="md">{item.title}</Typography>
+                  <Typography sx={{ fontWeight: 'md' }}>{item.title}</Typography>
                   <Typography level="body-sm">{item.description}</Typography>
                 </ListItemContent>
               </ListItemButton>

diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx b/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx
@@ -42,7 +42,7 @@ export default function ListStackRatio() {
                   />
                 </AspectRatio>
                 <ListItemContent>
-                  <Typography fontWeight="md">{item.title}</Typography>
+                  <Typography sx={{ fontWeight: 'md' }}>{item.title}</Typography>
                   <Typography level="body-sm">{item.description}</Typography>
                 </ListItemContent>
               </ListItemButton>

diff --git a/docs/data/joy/components/aspect-ratio/VariantsRatio.js b/docs/data/joy/components/aspect-ratio/VariantsRatio.js
@@ -8,28 +8,28 @@ export default function VariantsRatio() {
     <Grid container spacing={2} sx={{ width: '100%' }}>
       <Grid xs={6} md>
         <AspectRatio variant="solid">
-          <Typography level="inherit" fontWeight="lg">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
             Solid
           </Typography>
         </AspectRatio>
       </Grid>
       <Grid xs={6} md>
         <AspectRatio variant="soft">
-          <Typography level="inherit" fontWeight="lg">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
             Soft
           </Typography>
         </AspectRatio>
       </Grid>
       <Grid xs={6} md>
         <AspectRatio variant="outlined">
-          <Typography level="inherit" fontWeight="lg">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
             Outlined
           </Typography>
         </AspectRatio>
       </Grid>
       <Grid xs={6} md>
         <AspectRatio variant="plain">
-          <Typography level="inherit" fontWeight="lg">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
             Plain
           </Typography>
         </AspectRatio>

diff --git a/docs/data/joy/components/aspect-ratio/VariantsRatio.tsx b/docs/data/joy/components/aspect-ratio/VariantsRatio.tsx
@@ -8,28 +8,28 @@ export default function VariantsRatio() {
     <Grid container spacing={2} sx={{ width: '100%' }}>
       <Grid xs={6} md>
         <AspectRatio variant="solid">
-          <Typography level="inherit" fontWeight="lg">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
             Solid
           </Typography>
         </AspectRatio>
       </Grid>
       <Grid xs={6} md>
         <AspectRatio variant="soft">
-          <Typography level="inherit" fontWeight="lg">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
             Soft
           </Typography>
         </AspectRatio>
       </Grid>
       <Grid xs={6} md>
         <AspectRatio variant="outlined">
-          <Typography level="inherit" fontWeight="lg">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
             Outlined
           </Typography>
         </AspectRatio>
       </Grid>
       <Grid xs={6} md>
         <AspectRatio variant="plain">
-          <Typography level="inherit" fontWeight="lg">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
             Plain
           </Typography>
         </AspectRatio>

diff --git a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.js
@@ -106,16 +106,14 @@ export default function FreeSoloCreateOptionDialog() {
               id="basic-modal-dialog-title"
               component="h2"
               level="inherit"
-              fontSize="1.25em"
-              mb="0.25em"
+              sx={{ fontSize: '1.25em', mb: '0.25em' }}
             >
               Add a new film
             </Typography>
             <Typography
               id="basic-modal-dialog-description"
-              mt={0.5}
-              mb={2}
               textColor="text.tertiary"
+              sx={{ mt: 0.5, mb: 2 }}
             >
               Did you miss any film in our list? Please, add it!
             </Typography>
@@ -147,7 +145,7 @@ export default function FreeSoloCreateOptionDialog() {
                   }
                 />
               </FormControl>
-              <Stack direction="row" justifyContent="flex-end" spacing={2}>
+              <Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-end' }}>
                 <Button variant="plain" color="neutral" onClick={handleClose}>
                   Cancel
                 </Button>

diff --git a/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/joy/components/autocomplete/FreeSoloCreateOptionDialog.tsx
@@ -106,16 +106,14 @@ export default function FreeSoloCreateOptionDialog() {
               id="basic-modal-dialog-title"
               component="h2"
               level="inherit"
-              fontSize="1.25em"
-              mb="0.25em"
+              sx={{ fontSize: '1.25em', mb: '0.25em' }}
             >
               Add a new film
             </Typography>
             <Typography
               id="basic-modal-dialog-description"
-              mt={0.5}
-              mb={2}
               textColor="text.tertiary"
+              sx={{ mt: 0.5, mb: 2 }}
             >
               Did you miss any film in our list? Please, add it!
             </Typography>
@@ -147,7 +145,7 @@ export default function FreeSoloCreateOptionDialog() {
                   }
                 />
               </FormControl>
-              <Stack direction="row" justifyContent="flex-end" spacing={2}>
+              <Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-end' }}>
                 <Button variant="plain" color="neutral" onClick={handleClose}>
                   Cancel
                 </Button>