[core] Batch small changes

docs/pages/api/autocomplete.md

@@ -61,7 +61,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">noOptionsText</span> | <span class="prop-type">node</span> | <span class="prop-default">'No options'</span> | Text to display when there are no options.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: T) => void`<br>*event:* The event source of the callback.<br>*value:* null |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the popup requests to be closed. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
-| <span class="prop-name">onInputChange</span> | <span class="prop-type">func</span> |  | Callback fired when the input value changes.<br><br>**Signature:**<br>`function(event: object, value: string, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* The new value of the text input.<br>*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. |
+| <span class="prop-name">onInputChange</span> | <span class="prop-type">func</span> |  | Callback fired when the input value changes.<br><br>**Signature:**<br>`function(event: object, value: string, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* The new value of the text input.<br>*reason:* Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`. |
 | <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> |  | Callback fired when the popup requests to be opened. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> |  | Control the popup` open state. |
 | <span class="prop-name">openText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Open'</span> | Override the default text for the *open popup* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |

docs/pages/index.js

@@ -174,7 +174,7 @@ export default function HomePage() {
   "@type": "Organization",
   "name": "Material-UI",
   "url": "https://material-ui.com/",
-  "logo": "https://material-ui.com/static/brand.png",
+  "logo": "https://material-ui.com/static/logo.png",
   "sameAs": [
     "https://twitter.com/materialUI",
     "https://github.com/mui-org/material-ui",

docs/src/modules/components/Ad.js

@@ -53,7 +53,15 @@ const inHouseAds = [
     name: 'scaffoldhub',
     link: 'https://scaffoldhub.io/?partner=1',
     img: '/static/in-house/scaffoldhub.png',
-    description: '<b>ScaffoldHub</b> - Automate building your full-stack Material-UI web-app.',
+    description: '<b>Scaffold</b><br />Automate building your full-stack Material-UI web-app.',
+  },
+  {
+    name: 'themes',
+    link:
+      'https://themes.material-ui.com/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house-2',
+    img: '/static/in-house/themes-2.jpg',
+    description:
+      '<b>Premium Templates</b><br />Sart your project with the best themes, e.g admin & dashboard.',
   },
   {
     name: 'themes',
@@ -69,20 +77,22 @@ const inHouseAds = [
       'https://tidelift.com/subscription/managed-open-source-survey?utm_source=material_ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
     img: '/static/in-house/tidelift.png',
     description:
-      '<b>Material-UI for enterprise</b><br />Available in the Tidelift Subscription. Reduce risk, and improve code health.',
-  },
-  {
-    name: 'monday',
-    link: 'https://monday.com/partners/status-video?&utm_source=Partner&utm_campaign=MaterialUI',
-    img: '/static/in-house/monday.jpg',
-    description: 'Why use multiple tools to manage your projects? Meet monday.com',
+      '<b>Material-UI for enterprise</b><br />Save time and reduce risk. Managed open source — backed by maintainers.',
   },
   {
     name: 'bonsaiilabs',
     link: 'https://bonsaiilabs.com/courseDetail/material-ui-with-react',
     img: '/static/in-house/bonsaiilabs.png',
     description:
-      'A course to learn Material‑UI while developing a mobile flight search and booking app.',
+      '<b>Learn Material‑UI</b><br />A course to learn Material-UI while developing a flight search/booking app.',
+  },
+  {
+    name: 'sketch',
+    link:
+      'https://themes.material-ui.com/themes/sketch-react/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house-sketch',
+    img: '/static/in-house/sketch.png',
+    description:
+      "<b>Sketch</b><br />A large UI kit with over 1,500 handcrafted Material-UI's symbols 💎.",
   },
 ];
 
@@ -214,7 +224,7 @@ function Ad(props) {
         eventLabel: type,
       });
 
-      if (type === 'in-house') {
+      if (type.indexOf('in-house') === 0) {
         window.ga('send', {
           hitType: 'event',
           eventCategory: 'in-house-ad',

docs/src/modules/components/AppFooter.js

@@ -34,7 +34,7 @@ const styles = theme => ({
     },
     '& ul': {
       margin: 0,
-      paddingLeft: 0,
+      padding: 0,
       listStyle: 'none',
     },
     '& li': {

docs/src/modules/components/AppTableOfContents.js

@@ -36,7 +36,7 @@ const useStyles = makeStyles(theme => ({
   ul: {
     padding: 0,
     margin: 0,
-    listStyleType: 'none',
+    listStyle: 'none',
   },
   item: {
     fontSize: 13,

docs/src/modules/components/Head.js

@@ -21,7 +21,7 @@ export default function Head(props) {
       <meta name="twitter:site" content="@MaterialUI" />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content="https://material-ui.com/static/brand.png" />
+      <meta name="twitter:image" content="https://material-ui.com/static/logo.png" />
       {/* Facebook */}
       <meta property="og:type" content="website" />
       <meta property="og:title" content={title} />
@@ -30,7 +30,7 @@ export default function Head(props) {
         content={`https://material-ui.com${Router._rewriteUrlForNextExport(router.asPath)}`}
       />
       <meta property="og:description" content={description} />
-      <meta property="og:image" content="https://material-ui.com/static/brand.png" />
+      <meta property="og:image" content="https://material-ui.com/static/logo.png" />
       <meta property="og:ttl" content="604800" />
       {/* Algolia */}
       <meta name="docsearch:language" content={userLanguage} />

docs/src/modules/components/MarkdownDocs.js

@@ -21,6 +21,9 @@ import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({
+  root: {
+    width: '100%',
+  },
   container: {
     position: 'relative',
   },
@@ -132,7 +135,7 @@ function MarkdownDocs(props) {
         </Portal>
       )}
       <div
-        className={clsx({
+        className={clsx(classes.root, {
           [classes.ad]: !disableAd,
           [classes.toc]: !disableToc,
         })}

docs/src/modules/components/MarkdownElement.js

@@ -116,8 +116,7 @@ const markedOptions = {
 
 const styles = theme => ({
   root: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 16,
+    ...theme.typography.body1,
     color: theme.palette.text.primary,
     wordBreak: 'break-word',
     '& .anchor-link': {
@@ -147,6 +146,8 @@ const styles = theme => ({
     '& code[class*="language-"]': {
       backgroundColor: '#272c34',
       color: '#fff',
+      // Avoid layout jump after hydration (style injected by prism)
+      lineHeight: 1.5,
     },
     '& p code, & ul code, & pre code': {
       fontSize: 14,

docs/src/pages/components/autocomplete/CustomizedHook.js

@@ -31,12 +31,14 @@ const InputWrapper = styled('div')`
 
   & input {
     font-size: 14px;
-    line-height: 26px;
-    padding: 2px 6px;
+    height: 30px;
+    box-sizing: border-box;
+    padding: 4px 6px;
     width: 0;
     min-width: 30px;
     flex-grow: 1;
     border: 0;
+    margin: 0;
     outline: 0;
   }
 `;

docs/src/pages/components/autocomplete/CustomizedHook.tsx

@@ -31,12 +31,14 @@ const InputWrapper = styled('div')`
 
   & input {
     font-size: 14px;
-    line-height: 26px;
-    padding: 2px 6px;
+    height: 30px;
+    box-sizing: border-box;
+    padding: 4px 6px;
     width: 0;
     min-width: 30px;
     flex-grow: 1;
     border: 0;
+    margin: 0;
     outline: 0;
   }
 `;

docs/src/pages/components/cards/ImgMediaCard.js

@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
 });
@@ -18,7 +18,7 @@ export default function ImgMediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           component="img"

docs/src/pages/components/cards/ImgMediaCard.tsx

@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
 });
@@ -18,7 +18,7 @@ export default function ImgMediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           component="img"

docs/src/pages/components/cards/MediaCard.js

@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
   media: {
@@ -21,7 +21,7 @@ export default function MediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           className={classes.media}

docs/src/pages/components/cards/MediaCard.tsx

@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
   media: {
@@ -21,7 +21,7 @@ export default function MediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           className={classes.media}

docs/src/pages/components/cards/MediaControlCard.js

@@ -10,7 +10,7 @@ import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 
 const useStyles = makeStyles(theme => ({
-  card: {
+  root: {
     display: 'flex',
   },
   details: {
@@ -40,7 +40,7 @@ export default function MediaControlCard() {
   const theme = useTheme();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <div className={classes.details}>
         <CardContent className={classes.content}>
           <Typography component="h5" variant="h5">

docs/src/pages/components/cards/MediaControlCard.tsx

@@ -11,7 +11,7 @@ import SkipNextIcon from '@material-ui/icons/SkipNext';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    card: {
+    root: {
       display: 'flex',
     },
     details: {
@@ -42,7 +42,7 @@ export default function MediaControlCard() {
   const theme = useTheme();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <div className={classes.details}>
         <CardContent className={classes.content}>
           <Typography component="h5" variant="h5">

docs/src/pages/components/cards/OutlinedCard.js

@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function OutlinedCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card} variant="outlined">
+    <Card className={classes.root} variant="outlined">
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day

docs/src/pages/components/cards/OutlinedCard.tsx

@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function OutlinedCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card} variant="outlined">
+    <Card className={classes.root} variant="outlined">
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day

docs/src/pages/components/cards/RecipeReviewCard.js

@@ -17,7 +17,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 const useStyles = makeStyles(theme => ({
-  card: {
+  root: {
     maxWidth: 345,
   },
   media: {
@@ -48,7 +48,7 @@ export default function RecipeReviewCard() {
   };
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardHeader
         avatar={
           <Avatar aria-label="recipe" className={classes.avatar}>

docs/src/pages/components/cards/RecipeReviewCard.tsx

@@ -18,7 +18,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    card: {
+    root: {
       maxWidth: 345,
     },
     media: {
@@ -50,7 +50,7 @@ export default function RecipeReviewCard() {
   };
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardHeader
         avatar={
           <Avatar aria-label="recipe" className={classes.avatar}>

docs/src/pages/components/cards/SimpleCard.js

@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function SimpleCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day

docs/src/pages/components/cards/SimpleCard.tsx

@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function SimpleCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day