Merge branch 'refs/heads/next' into snackbar-v6-component-deprecation

# Conflicts: # packages/mui-codemod/README.md
mui · May 24, 2024 · bced9f6 · bced9f6
2 parents ea241ae + f0db205
commit bced9f6
Show file tree

Hide file tree

Showing 48 changed files with 652 additions and 318 deletions.
diff --git a/docs/data/material/components/steppers/VerticalLinearStepper.js b/docs/data/material/components/steppers/VerticalLinearStepper.js
@@ -51,7 +51,7 @@ export default function VerticalLinearStepper() {
           <Step key={step.label}>
             <StepLabel
               optional={
-                index === 2 ? (
+                index === steps.length - 1 ? (
                   <Typography variant="caption">Last step</Typography>
                 ) : null
               }
@@ -61,22 +61,20 @@ export default function VerticalLinearStepper() {
             <StepContent>
               <Typography>{step.description}</Typography>
               <Box sx={{ mb: 2 }}>
-                <div>
-                  <Button
-                    variant="contained"
-                    onClick={handleNext}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    {index === steps.length - 1 ? 'Finish' : 'Continue'}
-                  </Button>
-                  <Button
-                    disabled={index === 0}
-                    onClick={handleBack}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    Back
-                  </Button>
-                </div>
+                <Button
+                  variant="contained"
+                  onClick={handleNext}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  {index === steps.length - 1 ? 'Finish' : 'Continue'}
+                </Button>
+                <Button
+                  disabled={index === 0}
+                  onClick={handleBack}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  Back
+                </Button>
               </Box>
             </StepContent>
           </Step>

diff --git a/docs/data/material/components/steppers/VerticalLinearStepper.tsx b/docs/data/material/components/steppers/VerticalLinearStepper.tsx
@@ -51,7 +51,7 @@ export default function VerticalLinearStepper() {
           <Step key={step.label}>
             <StepLabel
               optional={
-                index === 2 ? (
+                index === steps.length - 1 ? (
                   <Typography variant="caption">Last step</Typography>
                 ) : null
               }
@@ -61,22 +61,20 @@ export default function VerticalLinearStepper() {
             <StepContent>
               <Typography>{step.description}</Typography>
               <Box sx={{ mb: 2 }}>
-                <div>
-                  <Button
-                    variant="contained"
-                    onClick={handleNext}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    {index === steps.length - 1 ? 'Finish' : 'Continue'}
-                  </Button>
-                  <Button
-                    disabled={index === 0}
-                    onClick={handleBack}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    Back
-                  </Button>
-                </div>
+                <Button
+                  variant="contained"
+                  onClick={handleNext}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  {index === steps.length - 1 ? 'Finish' : 'Continue'}
+                </Button>
+                <Button
+                  disabled={index === 0}
+                  onClick={handleBack}
+                  sx={{ mt: 1, mr: 1 }}
+                >
+                  Back
+                </Button>
               </Box>
             </StepContent>
           </Step>

diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import GlobalStyles from '@mui/material/GlobalStyles';
+
+export default function GlobalCssOverrideTheme() {
+  return (
+    <React.Fragment>
+      <GlobalStyles
+        styles={(theme) => ({
+          h1: { color: theme.palette.primary.main },
+        })}
+      />
+      <h1>Grey h1 element</h1>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import GlobalStyles from '@mui/material/GlobalStyles';
+
+export default function GlobalCssOverrideTheme() {
+  return (
+    <React.Fragment>
+      <GlobalStyles
+        styles={(theme) => ({
+          h1: { color: theme.palette.primary.main },
+        })}
+      />
+      <h1>Grey h1 element</h1>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview
@@ -0,0 +1,8 @@
+<React.Fragment>
+  <GlobalStyles
+    styles={(theme) => ({
+      h1: { color: theme.palette.primary.main },
+    })}
+  />
+  <h1>Grey h1 element</h1>
+</React.Fragment>
diff --git a/docs/data/material/customization/how-to-customize/how-to-customize.md b/docs/data/material/customization/how-to-customize/how-to-customize.md
@@ -187,6 +187,10 @@ Here is an example of how you can override styles for the `h1` elements:
 
 {{"demo": "GlobalCssOverride.js", "iframe": true, "height": 100}}
 
+The `styles` prop in the `GlobalStyles` component supports a callback in case you need to access the theme.
+
+{{"demo": "GlobalCssOverrideTheme.js", "iframe": true, "height": 100}}
+
 If you are already using the [CssBaseline](/material-ui/react-css-baseline/) component for setting baseline styles, you can also add these global styles as overrides for this component. Here is how you can achieve the same by using this approach.
 
 {{"demo": "OverrideCssBaseline.js", "iframe": true, "height": 100}}

diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -991,6 +991,68 @@ The FormControlLabel's `componentsProps` prop was deprecated in favor of `slotPr
  />
 ```
 
+## ListItem
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#list-item-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/list-item-props <path>
+```
+
+### components
+
+The ListItem's `components` prop was deprecated in favor of `slots`:
+
+```diff
+ <ListItem
+-  components={{ Root: CustomRoot }}
++  slots={{ root: CustomRoot }}
+ />
+```
+
+### componentsProps
+
+The ListItem's `componentsProps` prop was deprecated in favor of `slotProps`:
+
+```diff
+ <ListItem
+-  componentsProps={{ root: { testid: 'test-id' } }}
++  slotProps={{ root: { testid: 'test-id' } }}
+ />
+```
+
+### ContainerComponent
+
+The ListItem's `ContainerComponent` prop was deprecated in favor of `slots.root` or `component` instead.
+
+### ContainerProps
+
+The ListItem's `ContainerProps` prop was deprecated in favor of `slotProps.root` instead.
+
+## ListItemSecondaryAction
+
+### Deprecated component
+
+The ListItemSecondaryAction component was deprecated in favor of the `secondaryAction` prop in the ListItem component.
+
+```diff
+ <ListItem
++  secondaryAction={
++    <IconButton aria-label="Leave a comment">
++      <CommentIcon />
++    </IconButton>
++  }
+   disablePadding
+ >
+   <ListItemText primary="John Doe" />
+-  <ListItemSecondaryAction>
+-    <IconButton aria-label="Leave a comment">
+-      <CommentIcon />
+-    </IconButton>
+-  </ListItemSecondaryAction>
+ </ListItem>
+```
+
 ## PaginationItem
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#pagination-item-classes) below to migrate the code as described in the following sections:

diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts
@@ -43,7 +43,6 @@ const ALLOWED_TAGS = [
   'Pigment CSS',
   'Joy UI',
   'MUI X',
-  'MUI System',
   'Toolpad',
 ];
 

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -163,7 +163,7 @@ function AppWrapper(props) {
 
     if (productId === 'material-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Material UI',
         versions: [
           { text: `v${materialPkgJson.version}`, current: true },
@@ -182,15 +182,15 @@ function AppWrapper(props) {
 
     if (productId === 'joy-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Joy UI',
         versions: [{ text: `v${joyPkgJson.version}`, current: true }],
       };
     }
 
     if (productId === 'system') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'MUI System',
         versions: [
           { text: `v${systemPkgJson.version}`, current: true },
@@ -206,7 +206,7 @@ function AppWrapper(props) {
 
     if (productId === 'base-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Base UI',
         versions: [{ text: `v${basePkgJson.version}`, current: true }],
       };

diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
@@ -82,28 +82,28 @@ function PostPreview(props: BlogPost) {
       </Typography>
       {props.authors && (
         <AvatarGroup
-          sx={[
-            (theme) => ({
-              mt: 2,
-              mb: 1,
-              alignSelf: 'flex-start',
+          sx={(theme) => ({
+            mt: 2,
+            mb: 1,
+            alignSelf: 'flex-start',
+            '& .MuiAvatar-circular': {
+              width: 28,
+              height: 28,
+              fontSize: theme.typography.pxToRem(13),
+              fontWeight: theme.typography.fontWeightSemiBold,
+              color: (theme.vars || theme).palette.text.primary,
+              border: `1px solid ${(theme.vars || theme).palette.divider}`,
+              outline: '3px solid',
+              outlineColor: '#FFF',
+              backgroundColor: (theme.vars || theme).palette.grey[100],
+            },
+            ...theme.applyDarkStyles({
               '& .MuiAvatar-circular': {
-                width: 28,
-                height: 28,
-                border: `1px solid ${(theme.vars || theme).palette.divider}`,
-                outline: '3px solid',
-                outlineColor: '#FFF',
-                backgroundColor: (theme.vars || theme).palette.grey[100],
+                outlineColor: (theme.vars || theme).palette.primaryDark[900],
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
               },
             }),
-            (theme) =>
-              theme.applyDarkStyles({
-                '& .MuiAvatar-circular': {
-                  outlineColor: (theme.vars || theme).palette.primaryDark[900],
-                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                },
-              }),
-          ]}
+          })}
         >
           {(props.authors as Array<keyof typeof AUTHORS>).map((author) => (
             <Avatar
@@ -347,6 +347,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
             >
               <Paper variant="outlined">
                 <Typography
+                  component="h3"
                   color="text.primary"
                   fontWeight="semiBold"
                   variant="subtitle2"
@@ -387,16 +388,14 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                               },
                             })}
                         size="small"
-                        sx={{
-                          py: 1.2,
-                        }}
                       />
                     );
                   })}
                 </Box>
               </Paper>
               <Paper variant="outlined">
                 <Typography
+                  component="h3"
                   color="text.primary"
                   fontWeight="semiBold"
                   variant="subtitle2"
@@ -437,7 +436,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                 <Box
                   component="li"
                   key={post.slug}
-                  sx={() => ({
+                  sx={{
                     py: 2.5,
                     display: 'flex',
                     flexDirection: 'column',
@@ -446,7 +445,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                       borderBottom: '1px solid',
                       borderColor: 'divider',
                     },
-                  })}
+                  }}
                 >
                   <PostPreview {...post} />
                 </Box>
@@ -461,7 +460,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                 setPage(value - 1);
                 postListRef.current?.scrollIntoView();
               }}
-              sx={{ mt: 1, mb: 8 }}
+              sx={{ mt: 1, mb: 4 }}
             />
           </div>
         </Container>

diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md
@@ -11,7 +11,7 @@ authors:
     'danilo-leal',
     'oliviertassinari',
   ]
-tags: ['Pigment CSS']
+tags: ['Pigment CSS', 'Product']
 manualCard: true
 ---
 

diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -43,7 +43,7 @@ export default function BrandingThemeTest() {
             <Button variant="outlined" size="small" color="secondary">
               Outlined secondary
             </Button>
-            <Button variant="text" size="small" color="info">
+            <Button variant="text" size="small">
               This button
             </Button>
             <IconButton color="primary">