Merge branch 'next' into remove-use-is-focus-visible

mui · Jun 19, 2024 · 1dce511 · 1dce511
2 parents 28a9989 + da4546d
commit 1dce511
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 106 deletions.
diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
@@ -74,7 +74,7 @@ export default function OurValues() {
             <Paper
               variant="outlined"
               sx={(theme) => ({
-                p: 4,
+                p: 2.5,
                 height: '100%',
                 display: 'flex',
                 flexDirection: 'column',
@@ -110,14 +110,12 @@ export default function OurValues() {
                   variant="body2"
                   sx={[
                     {
-                      fontWeight: 'bold',
+                      fontWeight: 'semiBold',
                     },
                     (theme) => ({
                       mb: 0.5,
                       color: (theme.vars || theme).palette.text.primary,
                       '&::first-letter': {
-                        mr: 0.1,
-                        fontSize: theme.typography.pxToRem(16),
                         color: (theme.vars || theme).palette.primary.main,
                       },
                       ...theme.applyDarkStyles({

diff --git a/docs/src/components/careers/PerksBenefits.tsx b/docs/src/components/careers/PerksBenefits.tsx
@@ -19,30 +19,53 @@ const companyInfo = [
   },
   {
     title: 'Handbook',
-    description: 'Learn everything about how MUI as a company is run.',
+    description: 'Learn everything about how MUI as a company.',
     routeUrl: ROUTES.handbook,
   },
   {
     title: 'Blog',
-    description: 'Check behind-the-scenes and news about the company.',
+    description: 'Learn about our products and team.',
     routeUrl: ROUTES.blog,
   },
 ];
 
+interface CardContentBlockProps {
+  description: string;
+  title: string;
+}
+
+function CardContentBlock({ title, description }: CardContentBlockProps) {
+  return (
+    <React.Fragment>
+      <Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
+        {title}
+      </Typography>
+      <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
+        {description}
+      </Typography>
+      <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold', mt: 'auto' }}>
+        Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
+      </Typography>
+    </React.Fragment>
+  );
+}
+
 function RemoteAwardCard() {
   return (
     <Paper
       component={Link}
       href="/blog/remote-award-win-2024/"
       noLinkStyle
       variant="outlined"
-      sx={{ p: 2 }}
+      sx={{ p: 2, display: 'flex', flexDirection: 'column ' }}
     >
       <Box
         sx={{
           mb: 2,
           maxWidth: { xs: 315, sm: 325 },
           maxHeight: 315,
+          display: 'flex',
+          aspectRatio: '1 / 1',
           border: '1px solid',
           borderColor: 'divider',
           borderRadius: '6px',
@@ -68,17 +91,12 @@ function RemoteAwardCard() {
           ]}
         />
       </Box>
-      <div>
-        <Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
-          Remote Excellence Awards
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
-          Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉
-        </Typography>
-        <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold' }}>
-          Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-        </Typography>
-      </div>
+      <Box sx={{ mt: 'auto' }}>
+        <CardContentBlock
+          title="Remote Excellence Awards"
+          description={`Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉`}
+        />
+      </Box>
     </Paper>
   );
 }
@@ -151,16 +169,7 @@ export default function PerksBenefits() {
                 variant="outlined"
                 sx={{ p: 2, width: '100%', flexGrow: 1, display: 'flex', flexDirection: 'column' }}
               >
-                <Typography variant="body2" sx={{ fontWeight: 'bold', mb: 0.5 }}>
-                  {title}
-                </Typography>
-                <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
-                  {description}
-                </Typography>
-                <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold', mt: 'auto' }}>
-                  Learn more{' '}
-                  <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-                </Typography>
+                <CardContentBlock title={title} description={description} />
               </Paper>
             ))}
           </Stack>

diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx
@@ -87,12 +87,12 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
       </FormLabel>
       <Box
         sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', sm: 'row' },
           mt: 1,
-          gap: 1,
           width: { xs: '100%', sm: 'auto' },
           maxWidth: { xs: '100%', sm: 320 },
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          gap: 1,
         }}
       >
         <InputBase
@@ -110,23 +110,22 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
               minWidth: 220,
               borderRadius: '8px',
               border: '1px solid',
-              borderColor: 'grey.200',
+              borderColor: 'grey.300',
               bgcolor: '#FFF',
               boxShadow: `inset 0 1px 2px ${
                 (theme.vars || theme).palette.grey[50]
               }, 0 2px .5px ${alpha(theme.palette.grey[100], 0.5)}`,
               '&:hover': {
-                borderColor: 'grey.300',
+                borderColor: 'grey.400',
                 boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.grey[100]}`,
               },
               [`&.${inputBaseClasses.focused}`]: {
-                boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[200]}`,
+                boxShadow: `0 0 0 3px ${alpha(theme.palette.primary[500], 0.5)}`,
                 borderColor: 'primary.500',
               },
               [`& .${inputBaseClasses.input}`]: {
                 borderRadius: theme.shape.borderRadius,
-                py: 1,
-                px: 1.5,
+                px: 1,
               },
             }),
             (theme) =>
@@ -141,13 +140,12 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
                   boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.common.black}`,
                 },
                 [`&.${inputBaseClasses.focused}`]: {
-                  boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[800]}`,
                   borderColor: 'primary.400',
                 },
               }),
           ]}
         />
-        <Button variant="outlined" disabled={form.status === 'loading'} type="submit">
+        <Button variant="outlined" size="small" disabled={form.status === 'loading'} type="submit">
           Subscribe
         </Button>
       </Box>

diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx
@@ -18,8 +18,7 @@ const DIAMONDs = [
   {
     src: '/static/sponsors/doit-square.svg',
     name: 'Doit International',
-    description:
-      'Delivers technology and cloud expertise to buy, optimize and manage public cloud.',
+    description: 'Technology and cloud expertise to buy, optimize and manage public cloud.',
     href: 'https://www.doit.com/?utm_source=MUI&utm_medium=referral&utm_content=homepage',
   },
   {
@@ -45,7 +44,7 @@ export default function DiamondSponsors() {
         variant="h6"
         sx={[
           {
-            fontWeight: 'bold',
+            fontWeight: 'semiBold',
           },
           (theme) => ({
             mt: 4,
@@ -97,7 +96,7 @@ export default function DiamondSponsors() {
                 <AddRounded />
               </IconButton>
               <div>
-                <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'bold' }}>
+                <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'semiBold' }}>
                   Become our sponsor!
                 </Typography>
                 <Typography variant="body2" sx={{ color: 'text.secondary' }}>

diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx
@@ -78,7 +78,7 @@ export default function GoldSponsors() {
         variant="h6"
         sx={[
           {
-            fontWeight: 'bold',
+            fontWeight: 'semiBold',
           },
           (theme) => ({
             mt: 4,
@@ -129,7 +129,7 @@ export default function GoldSponsors() {
               <AddRounded />
             </IconButton>
             <div>
-              <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'bold' }}>
+              <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'semiBold' }}>
                 Become a sponsor
               </Typography>
               <Typography variant="body2" sx={{ color: 'text.secondary' }}>

diff --git a/docs/src/components/home/SponsorCard.tsx b/docs/src/components/home/SponsorCard.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
-import LaunchRounded from '@mui/icons-material/LaunchRounded';
 import { Link } from '@mui/docs/Link';
 
 export default function SponsorCard(props: {
@@ -39,31 +37,23 @@ export default function SponsorCard(props: {
       sx={{
         p: 2,
         display: 'flex',
+        gap: 2,
         height: '100%',
-        '& svg': {
-          transition: '0.2s',
-        },
-        '&:hover': {
-          '& svg': {
-            transform: 'translateY(-2px)',
-          },
-        },
       }}
     >
       <Avatar
         {...(inView && { src: item.src, srcSet: item.srcSet, alt: `${item.name} logo` })}
         sx={{ borderRadius: '4px', width: logoSize, height: logoSize }}
         slotProps={{ img: { loading: 'lazy' } }}
       />
-      <Box sx={{ ml: 2 }}>
-        <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
-          {item.name}{' '}
-          <LaunchRounded color="primary" sx={{ fontSize: 14, verticalAlign: 'middle', ml: 0.5 }} />
+      <div>
+        <Typography variant="body2" sx={{ fontWeight: 'semiBold', mb: '2px' }}>
+          {item.name}
         </Typography>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
           {item.description}
         </Typography>
-      </Box>
+      </div>
     </Paper>
   );
 }
diff --git a/docs/src/modules/components/DemoToolbarRoot.ts b/docs/src/modules/components/DemoToolbarRoot.ts
@@ -32,14 +32,18 @@ const DemoToolbarRoot = styled('div', {
       {
         props: ({ demoOptions }) => demoOptions.bg === 'inline',
         style: {
-          marginTop: theme.spacing(1),
-          borderTopWidth: 1,
+          [theme.breakpoints.up('sm')]: {
+            marginTop: theme.spacing(1),
+            borderTopWidth: 1,
+          },
         },
       },
       {
         props: ({ openDemoSource }) => openDemoSource,
         style: {
-          borderRadius: 0,
+          [theme.breakpoints.up('sm')]: {
+            borderRadius: 0,
+          },
         },
       },
     ],