mui · siriwatknp · Aug 18, 2021 · Aug 9, 2021 · Aug 9, 2021 · Aug 9, 2021
diff --git a/docs/pages/branding/home.tsx b/docs/pages/branding/home.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Head from 'docs/src/modules/components/Head';
 import ThemeProvider from 'docs/src/modules/ThemeContext';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Divider from '@material-ui/core/Divider';
@@ -17,6 +18,12 @@ export default function Home() {
  return (
  <ThemeProvider>
  <CssBaseline />
+ <Head
+ title="Home - Material-UI"
+ description="The ultimate solution for your UI. MUI provides a robust, customizible and accessible library of foundational and
+ advanced components, enabling you to build your own design system and develop React
+ applications faster."
+ />
  <AppHeader />
  <Hero />
  <ReferencesCore />

diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -14,6 +14,9 @@ const Anchor = styled('a')<{ component?: React.ElementType }>(({ theme }) => ({
  ...theme.typography.body2,
  fontWeight: 700,
  textDecoration: 'none',
+ border: 'none',
+ width: '100%',
+ backgroundColor: 'transparent',
  color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.text.secondary,
  cursor: 'pointer',
  display: 'flex',
@@ -119,7 +122,7 @@ export default function HeaderNavDropdown() {
  <UList>
  <li>
  <Anchor
- component="button"
+ as="button"
  onClick={() => setProductsOpen((bool) => !bool)}
  sx={{ justifyContent: 'space-between' }}
  >

diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx
@@ -1,94 +1,25 @@
 import * as React from 'react';
-import { styled, alpha } from '@material-ui/core/styles';
-import SwitchUnstyled, {
- switchUnstyledClasses,
- SwitchUnstyledProps,
-} from '@material-ui/unstyled/SwitchUnstyled';
+import IconButton from '@material-ui/core/IconButton';
 import DarkModeOutlined from '@material-ui/icons/DarkModeOutlined';
 import LightModeOutlined from '@material-ui/icons/LightModeOutlined';
 
-const Root = styled('span')(({ theme }) => ({
- fontSize: 0,
- color: '#fff',
- position: 'relative',
- display: 'inline-block',
- width: 40,
- height: 17,
- backgroundColor: theme.palette.grey[100],
- borderRadius: 10,
- margin: 10,
- cursor: 'pointer',
- transition: theme.transitions.create('background-color'),
- [`& .${switchUnstyledClasses.thumb}`]: {
- display: 'inline-flex',
- alignItems: 'center',
- justifyContent: 'center',
- position: 'absolute',
- padding: 2,
- width: 24,
- height: 24,
- top: -3,
- left: 0,
- borderRadius: 24,
- backgroundColor: theme.palette.primary.main,
- transform: 'rotate(-90deg)',
- transition: theme.transitions.create(['transform', 'left']),
- '& > svg': {
- width: 18,
- height: 18,
- },
- '&:before': {
- content: '""',
- display: 'block',
- position: 'absolute',
- borderRadius: '50%',
- zIndex: -1,
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- transform: 'scale(0)',
- transition: theme.transitions.create('transform'),
- backgroundColor: alpha(theme.palette.primary.main, 0.4),
- },
- },
- [`&.${switchUnstyledClasses.checked} .${switchUnstyledClasses.thumb}`]: {
- left: 16,
- transform: 'rotate(0deg)',
- },
- [`&.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb}`]: {
- '&:before': {
- transform: 'scale(1.3)',
- },
- },
- [`& .${switchUnstyledClasses.input}`]: {
- cursor: 'inherit',
- position: 'absolute',
- width: '100%',
- height: '100%',
- top: 0,
- left: 0,
- opacity: 0,
- zIndex: 1,
- margin: 0,
- },
- [`&.${switchUnstyledClasses.checked}`]: {
- background: theme.palette.primary[200],
- },
-}));
-
-const ThemeModeToggle = (props: SwitchUnstyledProps) => {
+const ThemeModeToggle = (props: { checked: boolean; onChange: (checked: boolean) => void }) => {
  return (
- <SwitchUnstyled
- {...props}
- components={{ Root }}
- componentsProps={{
- thumb: {
- children: props.checked ? <LightModeOutlined /> : <DarkModeOutlined />,
- },
- input: { 'aria-label': 'Theme mode toggle' },
+ <IconButton
+ disableTouchRipple
+ aria-label={`Switch to ${props.checked ? 'light' : 'dark'} mode`}
+ onClick={() => props.onChange(!props.checked)}
+ sx={{
+ color: (theme) => (theme.palette.mode === 'dark' ? '#fff' : 'primary.main'),
+ borderRadius: 1,
+ p: 0.5,
+ border: '1px solid',
+ bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'transparent'),
+ borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200'),
  }}
- />
+ >
+ {props.checked ? <LightModeOutlined /> : <DarkModeOutlined />}
+ </IconButton>
  );
 };
 

diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react';
+import { styled } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 
+const Img = styled('img')({
+ maxWidth: '100%',
+ height: 'auto',
+});
+
 export const CORE_COMPANIES = [
  {
  src: '/static/branding/companies/coursera.svg',
@@ -47,15 +53,16 @@ export default function CompaniesGrid({ data }: { data: Array<JSX.IntrinsicEleme
  <Grid
  key={imgProps.src}
  item
- xs={4}
+ xs={6}
+ sm={4}
  md={2}
  sx={{
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  }}
  >
- <img alt={imgProps.alt} loading="lazy" {...imgProps} />
+ <Img alt={imgProps.alt} loading="lazy" {...imgProps} />
  </Grid>
  ))}
  </Grid>

diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
@@ -8,9 +8,14 @@ import ReplayRounded from '@material-ui/icons/ReplayRounded';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
 import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
-import MaterialDesignDemo, { demoCode as materialDemoCode } from './MaterialDesignDemo';
-import ShowcaseContainer from './ShowcaseContainer';
-import { getMaterialThemeFrames, produceThemeOptions } from './showcaseUtils';
+import MaterialDesignDemo, {
+ demoCode as materialDemoCode,
+} from 'docs/src/components/home/MaterialDesignDemo';
+import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
+import {
+ getMaterialThemeFrames,
+ produceThemeOptions,
+} from 'docs/src/components/home/showcaseUtils';
 
 const defaultTheme = createTheme();
 const darkDesignTokens = getDesignTokens('dark');

diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
@@ -69,11 +69,7 @@ const grid = [
  height: 119,
  },
  {
- ui: (
- <Box sx={{ transform: { xs: 'scale(1.11)', lg: 'scale(1)' } }}>
- <ThemeTabs />
- </Box>
- ),
+ ui: <ThemeTabs />,
  width: 310,
  height: 50,
  },
@@ -171,9 +167,6 @@ export default function Hero() {
  'sans-serif',
  ].join(','),
  },
- transform: { xs: 'scale(0.9)', xl: 'scale(1)' },
- transformOrigin: 'top left',
- transition: 'transform 0.3s',
  }}
  >
  {grid.map((config, index) => (

diff --git a/docs/src/components/home/MaterialDesignDemo.tsx b/docs/src/components/home/MaterialDesignDemo.tsx
@@ -112,7 +112,7 @@ export default function MaterialDesignDemo() {
  Michael Scott
  </Typography>
  </Box>
- <IconButton size="small" sx={{ alignSelf: 'flex-start' }}>
+ <IconButton aria-label="Edit" size="small" sx={{ alignSelf: 'flex-start' }}>
  <Edit fontSize="small" />
  </IconButton>
  </Box>
@@ -135,6 +135,7 @@ export default function MaterialDesignDemo() {
  {active ? 'Active' : 'Inactive'} account
  </Typography>
  <Switch
+ aria-label={active ? 'disable account' : 'activate account'}
  checked={active}
  onChange={(event) => setActive(event.target.checked)}
  sx={{ ml: 'auto' }}

diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import NoSsr from '@material-ui/core/NoSsr';
 import Paper from '@material-ui/core/Paper';
 
 export default function ShowcaseContainer({
@@ -58,7 +59,7 @@ export default function ShowcaseContainer({
  borderBottomRightRadius: 10,
  }}
  >
- {code}
+ <NoSsr>{code}</NoSsr>
  </Box>
  </Box>
  );

diff --git a/docs/src/components/home/Sponsors.tsx b/docs/src/components/home/Sponsors.tsx
@@ -119,7 +119,7 @@ const Sponsors = () => {
  noLinkStyle
  href={item.href}
  target="_blank"
- rel="sponsored"
+ rel="sponsored noopener"
  variant="outlined"
  sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
  >
@@ -157,6 +157,7 @@ const Sponsors = () => {
  }}
  >
  <IconButton
+ aria-label="Become MUI sponsor"
  component="a"
  href="mailto:diamond@material-ui.com"
  target="_blank"
@@ -192,7 +193,7 @@ const Sponsors = () => {
  noLinkStyle
  href={item.href}
  target="_blank"
- rel="sponsored"
+ rel="sponsored noopener"
  variant="outlined"
  sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
  >

diff --git a/docs/src/components/home/Testimonials.tsx b/docs/src/components/home/Testimonials.tsx
@@ -31,7 +31,7 @@ const UserFeedback = ({
 }) => {
  return (
  <div>
- <Typography variant="subtitle1" color="#fff" sx={{ mb: 2 }}>
+ <Typography component="p" variant="subtitle1" color="#fff" sx={{ mb: 2 }}>
  {quote}
  </Typography>
  <Box sx={{ display: 'flex' }}>

diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx
@@ -35,9 +35,9 @@ export default function AppHeader() {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const preferredMode = prefersDarkMode ? 'dark' : 'light';
 
- const handleChangeThemeMode = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const handleChangeThemeMode = (checked: boolean) => {
  let paletteMode = 'system';
- paletteMode = event.target.checked ? 'dark' : 'light';
+ paletteMode = checked ? 'dark' : 'light';
  if (paletteMode === null) {
  return;
  }