[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-2',
+ 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 for admins, dashboards and more.',
  },
  {
  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 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