[core] Batch changes (#18629)

.eslintrc.js

@@ -124,7 +124,7 @@ module.exports = {
       rules: {
         'material-ui/no-hardcoded-labels': [
           'error',
-          { allow: ['Material-UI', 'Twitter', 'GitHub', 'Spectrum', 'StackOverflow'] },
+          { allow: ['Material-UI', 'Twitter', 'GitHub', 'StackOverflow'] },
         ],
       },
     },

CHANGELOG.md

@@ -59,6 +59,15 @@ Here are some highlights ✨:
 - [core] Fix dependabot not ignoring babel-plugin-preval (#18553) @eps1lon
 - [core] Ignore url-loader >= 3 updates (#18639) @eps1lon
 
+## 3.9.4
+###### *Nov 28, 2019*
+
+### `@material-ui/[email protected]`
+
+- [Portal] Fix circular PortalProps Types (#18602)
+
+  Fix TypeScript 3.7 support
+
 ## 4.7.0
 ###### *Nov 22, 2019*
 

README.md

@@ -66,7 +66,6 @@ via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
   <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.crosswordsolver.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/crosswordsolver/avatar.png" alt="crosswordsolver" title="Crossword Puzzle Solver" width="100" loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month and more to Material-UI.

docs/src/modules/components/HomeFooter.js

@@ -95,11 +95,6 @@ function HomeFooter(props) {
                     {t('pages./discover-more/team')}
                   </Link>
                 </li>
-                <li>
-                  <Link color="inherit" variant="body2" href="https://spectrum.chat/material-ui">
-                    Spectrum
-                  </Link>
-                </li>
               </ul>
             </Grid>
             <Grid item xs={6} md={3} className={classes.list}>

docs/src/modules/components/HomeQuickWord.js

@@ -23,11 +23,6 @@ const backers = [
     alt: 'callemall',
     title: 'Call-Em-All - The easy way to message your group',
   },
-  {
-    href: 'https://www.crosswordsolver.com',
-    alt: 'crosswordsolver',
-    title: 'Crossword Puzzle Solver',
-  },
 ];
 
 const styles = theme => ({

docs/src/modules/components/backers.md

@@ -22,7 +22,6 @@ via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
   <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.crosswordsolver.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/crosswordsolver/avatar.png" alt="crosswordsolver" title="Crossword Puzzle Solver" width="100" loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month and more to Material-UI.

docs/src/pages.js

@@ -153,9 +153,9 @@ const pages = [
     children: [
       {
         pathname: '/customization',
-        subheader: '/customization/theming',
+        subheader: '/customization/theme',
         children: [
-          { pathname: '/customization/theming', title: 'Overview' },
+          { pathname: '/customization/theming' },
           { pathname: '/customization/palette' },
           { pathname: '/customization/typography' },
           { pathname: '/customization/spacing' },

docs/src/pages/components/avatars/avatars.md

@@ -3,7 +3,7 @@ title: Avatar React component
 components: Avatar
 ---
 
-# Avatars
+# Avatar
 
 <p class="description">Avatars are found throughout material design with uses in everything from tables to dialog menus.</p>
 

docs/src/pages/components/badges/badges.md

@@ -3,7 +3,7 @@ title: Badge React component
 components: Badge
 ---
 
-# Badges
+# Badge
 
 <p class="description">Badge generates a small badge to the top-right of its child(ren).</p>
 

docs/src/pages/components/buttons/FloatingActionButtonZoom.js

@@ -27,7 +27,7 @@ function TabPanel(props) {
       aria-labelledby={`action-tab-${index}`}
       {...other}
     >
-      <Box p={3}>{children}</Box>
+      {value === index && <Box p={3}>{children}</Box>}
     </Typography>
   );
 }

docs/src/pages/components/buttons/FloatingActionButtonZoom.tsx

@@ -33,7 +33,7 @@ function TabPanel(props: TabPanelProps) {
       aria-labelledby={`action-tab-${index}`}
       {...other}
     >
-      <Box p={3}>{children}</Box>
+      {value === index && <Box p={3}>{children}</Box>}
     </Typography>
   );
 }

docs/src/pages/components/buttons/buttons.md

@@ -3,7 +3,7 @@ title: Button React component
 components: Button, ButtonGroup, Fab, IconButton, ButtonBase, Zoom
 ---
 
-# Buttons
+# Button
 
 <p class="description">Buttons allow users to take actions, and make choices, with a single tap.</p>
 

docs/src/pages/components/cards/cards.md

@@ -3,7 +3,7 @@ title: Card React component
 components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper
 ---
 
-# Cards
+# Card
 
 <p class="description">Cards contain content and actions about a single subject.</p>
 

docs/src/pages/components/checkboxes/checkboxes.md

@@ -3,7 +3,7 @@ title: Checkbox React component
 components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel
 ---
 
-# Checkboxes
+# Checkbox
 
 <p class="description">Checkboxes allow the user to select one or more items from a set.</p>
 

docs/src/pages/components/chips/chips.md

@@ -3,7 +3,7 @@ title: Chip React component
 components: Chip
 ---
 
-# Chips
+# Chip
 
 <p class="description">Chips are compact elements that represent an input, attribute, or action.</p>
 

docs/src/pages/components/dialogs/dialogs.md

@@ -3,7 +3,7 @@ title: Dialog React component
 components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Slide
 ---
 
-# Dialogs
+# Dialog
 
 <p class="description">Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.</p>
 

docs/src/pages/components/dividers/dividers.md

@@ -3,7 +3,7 @@ title: Divider React component
 components: Divider
 ---
 
-# Dividers
+# Divider
 
 <p class="description">A divider is a thin line that groups content in lists and layouts.</p>
 

docs/src/pages/components/expansion-panels/expansion-panels.md

@@ -3,7 +3,7 @@ title: Expansion Panel React component
 components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary
 ---
 
-# Expansion Panels
+# Expansion Panel
 
 <p class="description">Expansion panels contain creation flows and allow lightweight editing of an element.</p>
 

docs/src/pages/components/radio-buttons/radio-buttons.md

@@ -3,7 +3,7 @@ title: Radio buttons React component
 components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel
 ---
 
-# Radio buttons
+# Radio
 
 <p class="description">Radio buttons allow the user to select one option from a set.</p>
 

docs/src/pages/components/selects/selects.md

@@ -3,7 +3,7 @@ title: Select React component
 components: Select, NativeSelect
 ---
 
-# Selects
+# Select
 
 <p class="description">Select components are used for collecting user provided information from a list of options.</p>
 

docs/src/pages/components/snackbars/snackbars.md

@@ -3,7 +3,7 @@ title: Snackbar React component
 components: Snackbar, SnackbarContent
 ---
 
-# Snackbars
+# Snackbar
 
 <p class="description">Snackbars provide brief messages about app processes. The component is also known as a toast.</p>
 

docs/src/pages/components/steppers/steppers.md

@@ -3,7 +3,7 @@ title: Stepper React component
 components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper
 ---
 
-# Steppers
+# Stepper
 
 <p class="description">Steppers convey progress through numbered steps. It provides a wizard-like workflow.</p>
 

docs/src/pages/components/switches/switches.md

@@ -3,7 +3,7 @@ title: Switch React component
 components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel
 ---
 
-# Switches
+# Switch
 
 <p class="description">Switches toggle the state of a single setting on or off.</p>
 

docs/src/pages/components/tables/AcccessibleTable.js

@@ -7,16 +7,15 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles({
   root: {
     width: '100%',
-    marginTop: theme.spacing(3),
     overflowX: 'auto',
   },
   table: {
     minWidth: 650,
   },
-}));
+});
 
 function createData(name, calories, fat, carbs, protein) {
   return { name, calories, fat, carbs, protein };

docs/src/pages/components/tables/AcccessibleTable.tsx

@@ -1,24 +1,21 @@
 import React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      marginTop: theme.spacing(3),
-      overflowX: 'auto',
-    },
-    table: {
-      minWidth: 650,
-    },
-  }),
-);
+const useStyles = makeStyles({
+  root: {
+    width: '100%',
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 650,
+  },
+});
 
 function createData(name: string, calories: number, fat: number, carbs: number, protein: number) {
   return { name, calories, fat, carbs, protein };

docs/src/pages/components/tables/CustomPaginationActionsTable.js

@@ -99,18 +99,17 @@ const rows = [
   createData('Oreo', 437, 18.0),
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1));
 
-const useStyles2 = makeStyles(theme => ({
+const useStyles2 = makeStyles({
   root: {
     width: '100%',
-    marginTop: theme.spacing(3),
   },
   table: {
     minWidth: 500,
   },
   tableWrapper: {
     overflowX: 'auto',
   },
-}));
+});
 
 export default function CustomPaginationActionsTable() {
   const classes = useStyles2();

docs/src/pages/components/tables/CustomPaginationActionsTable.tsx

@@ -100,20 +100,17 @@ const rows = [
   createData('Oreo', 437, 18.0),
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1));
 
-const useStyles2 = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      marginTop: theme.spacing(3),
-    },
-    table: {
-      minWidth: 500,
-    },
-    tableWrapper: {
-      overflowX: 'auto',
-    },
-  }),
-);
+const useStyles2 = makeStyles({
+  root: {
+    width: '100%',
+  },
+  table: {
+    minWidth: 500,
+  },
+  tableWrapper: {
+    overflowX: 'auto',
+  },
+});
 
 export default function CustomPaginationActionsTable() {
   const classes = useStyles2();

docs/src/pages/components/tables/CustomizedTables.js

@@ -37,16 +37,15 @@ const rows = [
   createData('Gingerbread', 356, 16.0, 49, 3.9),
 ];
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles({
   root: {
     width: '100%',
-    marginTop: theme.spacing(3),
     overflowX: 'auto',
   },
   table: {
     minWidth: 700,
   },
-}));
+});
 
 export default function CustomizedTables() {
   const classes = useStyles();

docs/src/pages/components/tables/CustomizedTables.tsx

@@ -41,18 +41,15 @@ const rows = [
   createData('Gingerbread', 356, 16.0, 49, 3.9),
 ];
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      marginTop: theme.spacing(3),
-      overflowX: 'auto',
-    },
-    table: {
-      minWidth: 700,
-    },
-  }),
-);
+const useStyles = makeStyles({
+  root: {
+    width: '100%',
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 700,
+  },
+});
 
 export default function CustomizedTables() {
   const classes = useStyles();

docs/src/pages/components/tables/DenseTable.js

@@ -7,20 +7,18 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles({
   root: {
     width: '100%',
   },
   paper: {
-    marginTop: theme.spacing(3),
     width: '100%',
     overflowX: 'auto',
-    marginBottom: theme.spacing(2),
   },
   table: {
     minWidth: 650,
   },
-}));
+});
 
 function createData(name, calories, fat, carbs, protein) {
   return { name, calories, fat, carbs, protein };