Merge branch 'master' into alert-v6-deprecations

mui · Feb 16, 2024 · 4abe7e5 · 4abe7e5
2 parents cbcf359 + e0e722d
commit 4abe7e5
Show file tree

Hide file tree

Showing 17 changed files with 221 additions and 229 deletions.
diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
@@ -8,7 +8,6 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
 import AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -51,10 +50,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>
-          <SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
-          Material Design
-        </ToggleButton>
+        <ToggleButton value={false}>Material Design 2</ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );

diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
@@ -7,7 +7,6 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
 import AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -58,10 +57,7 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>
-          <SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
-          Material Design
-        </ToggleButton>
+        <ToggleButton value={false}>Material Design 2</ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
@@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import Masonry from '@mui/lab/Masonry';
-import { useMediaQuery } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/system';
 
 const userTestimonials = [
@@ -23,7 +22,7 @@ const userTestimonials = [
     name: 'Travis Howard',
     occupation: 'Lead Product Designer',
     testimonial:
-      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product, providing the kind of support that enhances the overall user experience and instills confidence in the brand.",
+      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
   },
   {
     avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
@@ -80,8 +79,6 @@ const logoStyle = {
 
 export default function Testimonials() {
   const theme = useTheme();
-  const isSmallScreen = useMediaQuery('(max-width:600px)');
-  const columns = isSmallScreen ? 1 : 3;
   const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
 
   return (
@@ -112,32 +109,46 @@ export default function Testimonials() {
           and reliable support.
         </Typography>
       </Box>
-      <Masonry columns={columns} spacing={2}>
+      <Grid container spacing={2}>
         {userTestimonials.map((testimonial, index) => (
-          <Card key={index} sx={{ p: 1 }}>
-            <CardContent>
-              <Typography variant="body2" color="text.secondary">
-                {testimonial.testimonial}
-              </Typography>
-            </CardContent>
-            <Box
+          <Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
+            <Card
               sx={{
                 display: 'flex',
-                flexDirection: 'row',
+                flexDirection: 'column',
                 justifyContent: 'space-between',
-                pr: 2,
+                flexGrow: 1,
+                p: 1,
               }}
             >
-              <CardHeader
-                avatar={testimonial.avatar}
-                title={testimonial.name}
-                subheader={testimonial.occupation}
-              />
-              <img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
-            </Box>
-          </Card>
+              <CardContent>
+                <Typography variant="body2" color="text.secondary">
+                  {testimonial.testimonial}
+                </Typography>
+              </CardContent>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  pr: 2,
+                }}
+              >
+                <CardHeader
+                  avatar={testimonial.avatar}
+                  title={testimonial.name}
+                  subheader={testimonial.occupation}
+                />
+                <img
+                  src={logos[index]}
+                  alt={`Logo ${index + 1}`}
+                  style={logoStyle}
+                />
+              </Box>
+            </Card>
+          </Grid>
         ))}
-      </Masonry>
+      </Grid>
     </Container>
   );
 }
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
@@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import Masonry from '@mui/lab/Masonry';
-import { useMediaQuery } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/system';
 
 const userTestimonials = [
@@ -23,7 +22,7 @@ const userTestimonials = [
     name: 'Travis Howard',
     occupation: 'Lead Product Designer',
     testimonial:
-      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product, providing the kind of support that enhances the overall user experience and instills confidence in the brand.",
+      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
   },
   {
     avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
@@ -80,8 +79,6 @@ const logoStyle = {
 
 export default function Testimonials() {
   const theme = useTheme();
-  const isSmallScreen = useMediaQuery('(max-width:600px)');
-  const columns = isSmallScreen ? 1 : 3;
   const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
 
   return (
@@ -112,32 +109,46 @@ export default function Testimonials() {
           and reliable support.
         </Typography>
       </Box>
-      <Masonry columns={columns} spacing={2}>
+      <Grid container spacing={2}>
         {userTestimonials.map((testimonial, index) => (
-          <Card key={index} sx={{ p: 1 }}>
-            <CardContent>
-              <Typography variant="body2" color="text.secondary">
-                {testimonial.testimonial}
-              </Typography>
-            </CardContent>
-            <Box
+          <Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
+            <Card
               sx={{
                 display: 'flex',
-                flexDirection: 'row',
+                flexDirection: 'column',
                 justifyContent: 'space-between',
-                pr: 2,
+                flexGrow: 1,
+                p: 1,
               }}
             >
-              <CardHeader
-                avatar={testimonial.avatar}
-                title={testimonial.name}
-                subheader={testimonial.occupation}
-              />
-              <img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
-            </Box>
-          </Card>
+              <CardContent>
+                <Typography variant="body2" color="text.secondary">
+                  {testimonial.testimonial}
+                </Typography>
+              </CardContent>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  pr: 2,
+                }}
+              >
+                <CardHeader
+                  avatar={testimonial.avatar}
+                  title={testimonial.name}
+                  subheader={testimonial.occupation}
+                />
+                <img
+                  src={logos[index]}
+                  alt={`Logo ${index + 1}`}
+                  style={logoStyle}
+                />
+              </Box>
+            </Card>
+          </Grid>
         ))}
-      </Masonry>
+      </Grid>
     </Container>
   );
 }
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -30,6 +30,10 @@ const pkgContent = fs.readFileSync(path.resolve(workspaceRoot, 'package.json'),
 const pkg = JSON.parse(pkgContent);
 
 export default withDocsInfra({
+  experimental: {
+    workerThreads: true,
+    cpus: 3,
+  },
   webpack: (config, options) => {
     const plugins = config.plugins.slice();
 

diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
@@ -45,7 +45,6 @@ export default function Highlighter({
           transitionProperty: 'all',
           transitionDuration: '100ms',
           color: 'primary.300',
-          overflow: 'auto',
           ...((!disableBorder || selected) && {
             borderColor: 'grey.100',
           }),
@@ -59,27 +58,33 @@ export default function Highlighter({
             color: 'primary.500',
           }),
           ...(!selected && {
-            '&:hover, &:focus': {
+            '&:hover': {
               bgcolor: 'primary.50',
               borderColor: 'primary.100',
               '@media (hover: none)': {
                 bgcolor: 'transparent',
               },
             },
+            '&:focus': {
+              bgcolor: 'transparent',
+            },
           }),
           ...theme.applyDarkStyles({
             color: 'primary.800',
             ...((!disableBorder || selected) && {
               borderColor: alpha(theme.palette.primaryDark[600], 0.3),
             }),
             ...(!selected && {
-              '&:hover, &:focus': {
+              '&:hover': {
                 bgcolor: alpha(theme.palette.primary[900], 0.1),
                 borderColor: alpha(theme.palette.primary[800], 0.4),
                 '@media (hover: none)': {
                   bgcolor: 'transparent',
                 },
               },
+              '&:focus': {
+                bgcolor: 'transparent',
+              },
             }),
             ...(selected && {
               bgcolor: alpha(theme.palette.primary[800], 0.2),

diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx
@@ -72,27 +72,30 @@ export function Group({
 }
 
 export default function Item({
+  description,
   icon,
   title,
-  description,
+  smallerIconDistance = false,
   ...props
 }: {
+  description?: string;
   icon: React.ReactNode;
   title: string;
-  description?: string;
+  smallerIconDistance?: boolean;
 } & BoxProps) {
   return (
     <Box
       {...props}
       component="span"
       sx={{
         p: 2,
+        pr: smallerIconDistance ? 3 : 2,
         display: 'flex',
         alignItems: 'center',
         ...props.sx,
       }}
     >
-      <Box component="span" sx={{ mr: 2, lineHeight: 0 }}>
+      <Box component="span" sx={{ mr: smallerIconDistance ? 1 : 2, lineHeight: 0 }}>
         {icon}
       </Box>
       <Box sx={{ flexWrap: 'wrap' }}>

diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
@@ -37,8 +37,7 @@ export default function StylingInfo({
         transition: '0.3s',
         left: 0,
         right: 0,
-        px: 2,
-        pt: 1,
+        p: 2,
         background: ({ palette }) => alpha(palette.common.black, 0.5),
         backdropFilter: 'blur(8px)',
         zIndex: 1,

diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
@@ -190,7 +190,7 @@ export default function CoreShowcase() {
                 code={componentCode}
                 language="jsx"
               />
-              <StylingInfo appeared={customized} sx={{ mb: 0, mx: -2 }} />
+              <StylingInfo appeared={customized} sx={{ mx: -2 }} />
             </Box>
           </Box>
         </div>

diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -453,19 +453,19 @@ export function buildTheme(): ThemeOptions {
       MuiTableHead: {
         styleOverrides: {
           root: ({ theme }) => ({
-            padding: 10,
+            padding: 8,
             backgroundColor: alpha(theme.palette.grey[50], 0.5),
             borderColor: (theme.vars || theme).palette.divider,
             ...theme.applyDarkStyles({
-              backgroundColor: alpha(theme.palette.primaryDark[600], 0.5),
+              backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
             }),
           }),
         },
       },
       MuiTableCell: {
         styleOverrides: {
           root: ({ theme }) => ({
-            padding: 10,
+            padding: 8,
             borderColor: (theme.vars || theme).palette.divider,
           }),
         },