[Typography] Remove deprecated Typography variants and v4 changes (#14562)

* Remove deprecated typography variants and change default colour to
inherit

* rename headlineMapping to variantMapping

* Add Typography display prop

* Run docs:api and prettier

* Revert incorrect changes

* Fix failing tests

* Fix Typography demo

* Removed some missed useNextVariants

* Revert default colour change

* Fix regressions

* good for me

Author: joshwooding

.size-limit.js

@@ -13,34 +13,34 @@ const [main] = fs.readdirSync(dirname).reduce((result, filename) => {
 
 module.exports = [
   {
-    name: 'The initial cost paid for using one component',
+    name: 'The initial cost paid for using one component with ES modules',
     webpack: true,
-    path: 'packages/material-ui/build/Paper/index.js',
-    limit: '18.9 KB',
+    path: 'packages/material-ui/build/esm/Paper/index.js',
+    limit: '17.5 KB',
   },
   {
-    name: 'The initial cost paid for using one component with ES modules',
+    name: 'The initial cost paid for using one component without ES modules',
     webpack: true,
-    path: 'packages/material-ui/build/esm/Paper/index.js',
-    limit: '17.9 KB',
+    path: 'packages/material-ui/build/Paper/index.js',
+    limit: '18.5 KB',
   },
   {
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '91.9 KB',
+    limit: '91.5 KB',
   },
   {
     name: 'The theme object',
     webpack: true,
     path: 'packages/material-ui/build/styles/createMuiTheme.js',
-    limit: '7 KB',
+    limit: '6 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',
     webpack: true,
     path: 'packages/material-ui-styles/build/index.js',
-    limit: '16.3 KB',
+    limit: '15.7 KB',
   },
   {
     name: 'The size of the @material-ui/system modules',
@@ -56,28 +56,28 @@ module.exports = [
   },
   {
     // why we use esm here: https://github.com/mui-org/material-ui/pull/13391#issuecomment-459692816
-    name: 'The size of the @material-ui/core/Button component',
+    name: 'The size of the Button component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Button/index.js',
-    limit: '24.6 KB',
+    limit: '24.2 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-modal
-    name: 'The size of the @material-ui/core/Modal component',
+    name: 'The size of the Modal component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Modal/index.js',
-    limit: '24.3 KB',
+    limit: '24.0 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-popper
-    name: 'The size of the @material-ui/core/Popper component',
+    name: 'The size of the Popper component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Popper/index.js',
     limit: '9.8 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=focus-trap-react
-    name: 'The size of the @material-ui/core/Popper component',
+    name: 'The size of the TrapFocus component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Modal/TrapFocus.js',
     limit: '1.6 KB',
@@ -94,12 +94,12 @@ module.exports = [
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '203 KB',
+    limit: '202 KB',
   },
   {
     name: 'The docs home page',
     webpack: false,
     path: `.next/static/${buildId}/pages/index.js`,
-    limit: '13 KB',
+    limit: '10 KB',
   },
 ];

docs/scripts/buildApi.js

@@ -39,7 +39,7 @@ if (args.length < 4) {
 
 const rootDirectory = path.resolve(__dirname, '../../');
 const docsApiDirectory = path.resolve(rootDirectory, args[3]);
-const theme = createMuiTheme({ typography: { useNextVariants: true } });
+const theme = createMuiTheme();
 
 const inheritedComponentRegexp = /\/\/ @inheritedComponent (.*)/;
 

docs/src/modules/components/AppTableOfContents.js

@@ -231,7 +231,7 @@ class AppTableOfContents extends React.Component {
               {this.itemsServer.map(item2 => (
                 <li key={item2.text}>
                   <Link
-                    block
+                    display="block"
                     color={active === item2.hash ? 'textPrimary' : 'textSecondary'}
                     href={`#${item2.hash}`}
                     underline="none"
@@ -248,7 +248,7 @@ class AppTableOfContents extends React.Component {
                       {item2.children.map(item3 => (
                         <li key={item3.text}>
                           <Link
-                            block
+                            display="block"
                             color={active === item3.hash ? 'textPrimary' : 'textSecondary'}
                             href={`#${item3.hash}`}
                             underline="none"

docs/src/modules/styles/getPageContext.js

@@ -9,7 +9,6 @@ function getTheme(uiTheme) {
     direction: uiTheme.direction,
     nprogress: { color: uiTheme.paletteType === 'light' ? '#000' : '#fff' },
     palette: { ...uiTheme.paletteColors, type: uiTheme.paletteType },
-    typography: { useNextVariants: true },
   });
 
   // Expose the theme as a global variable so people can play with it.

docs/src/modules/utils/getDemoConfig.js

@@ -28,7 +28,7 @@ import Demo from './demo';
 import { createMuiTheme } from "@material-ui/core/styles";
 import { ThemeProvider } from "@material-ui/styles";
 
-const theme = createMuiTheme({ typography: { useNextVariants: true } });
+const theme = createMuiTheme();
 
 ReactDOM.render(
   <ThemeProvider theme={theme}>

docs/src/pages/customization/default-theme/DefaultTheme.js

@@ -50,9 +50,6 @@ class DefaultTheme extends React.Component {
     const { checked, expandPaths } = this.state;
 
     const theme = createMuiTheme({
-      typography: {
-        useNextVariants: true,
-      },
       palette: {
         type: docsTheme.palette.type,
       },

docs/src/pages/customization/overrides/DynamicThemeNesting.js

@@ -5,7 +5,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import blue from '@material-ui/core/colors/blue';
 import Switch from '@material-ui/core/Switch';
 
-const defaultTheme = createMuiTheme({ typography: { useNextVariants: true } });
+const defaultTheme = createMuiTheme();
 
 class DynamicThemeNesting extends React.Component {
   state = {

docs/src/pages/customization/themes/CustomStyles.js

@@ -35,7 +35,6 @@ const theme = createMuiTheme({
     // My business variables
     danger: orange[500],
   },
-  typography: { useNextVariants: true },
 });
 
 function CustomStyles() {

docs/src/pages/customization/themes/DarkTheme.js

@@ -6,7 +6,6 @@ const theme = createMuiTheme({
   palette: {
     type: 'dark', // Switching the dark mode on is a single property value change.
   },
-  typography: { useNextVariants: true },
 });
 
 function DarkTheme() {

docs/src/pages/customization/themes/FontSizeTheme.js

@@ -6,7 +6,6 @@ const theme = createMuiTheme({
   typography: {
     // Tell Material-UI what the font-size on the html element is.
     htmlFontSize: 10,
-    useNextVariants: true,
   },
 });
 

docs/src/pages/customization/themes/OverridesCss.js

@@ -19,7 +19,6 @@ const theme = createMuiTheme({
       },
     },
   },
-  typography: { useNextVariants: true },
 });
 
 function OverridesCss() {

docs/src/pages/customization/themes/OverridesProperties.js

@@ -10,7 +10,6 @@ const theme = createMuiTheme({
       disableRipple: true, // No more ripple, on the whole application 💣!
     },
   },
-  typography: { useNextVariants: true },
 });
 
 function OverridesProperties() {

docs/src/pages/customization/themes/Palette.js

@@ -8,7 +8,6 @@ const theme = createMuiTheme({
     primary: { main: purple[500] }, // Purple and green play nicely together.
     secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
   },
-  typography: { useNextVariants: true },
 });
 
 function Palette() {

docs/src/pages/customization/themes/ThemeNesting.js

@@ -10,7 +10,6 @@ const outerTheme = createMuiTheme({
       main: orange[500],
     },
   },
-  typography: { useNextVariants: true },
 });
 
 const innerTheme = createMuiTheme({
@@ -19,7 +18,6 @@ const innerTheme = createMuiTheme({
       main: green[500],
     },
   },
-  typography: { useNextVariants: true },
 });
 
 function ThemeNesting() {

docs/src/pages/customization/themes/ThemeNestingExtend.js

@@ -10,7 +10,6 @@ const outerTheme = createMuiTheme({
       main: orange[500],
     },
   },
-  typography: { useNextVariants: true },
 });
 
 function ThemeNestingExtend() {

docs/src/pages/customization/themes/TypographyTheme.js

@@ -12,7 +12,6 @@ const styles = {
 
 const theme = createMuiTheme({
   typography: {
-    useNextVariants: true,
     // Use the system font instead of the default Roboto font.
     fontFamily: [
       '-apple-system',

docs/src/pages/demos/buttons/CustomizedButtons.js

@@ -57,9 +57,6 @@ const theme = createMuiTheme({
   palette: {
     primary: green,
   },
-  typography: {
-    useNextVariants: true,
-  },
 });
 
 function CustomizedButtons(props) {

docs/src/pages/demos/dividers/SubheaderDividers.js

@@ -32,7 +32,12 @@ function SubheaderDividers(props) {
       </ListItem>
       <Divider component="li" />
       <li>
-        <Typography className={classes.dividerFullWidth} color="textSecondary" variant="caption">
+        <Typography
+          className={classes.dividerFullWidth}
+          color="textSecondary"
+          display="block"
+          variant="caption"
+        >
           Divider
         </Typography>
       </li>
@@ -41,7 +46,12 @@ function SubheaderDividers(props) {
       </ListItem>
       <Divider component="li" variant="inset" />
       <li>
-        <Typography className={classes.dividerInset} color="textSecondary" variant="caption">
+        <Typography
+          className={classes.dividerInset}
+          color="textSecondary"
+          display="block"
+          variant="caption"
+        >
           Leisure
         </Typography>
       </li>

docs/src/pages/demos/text-fields/CustomizedInputs.js

@@ -76,7 +76,6 @@ const theme = createMuiTheme({
   palette: {
     primary: green,
   },
-  typography: { useNextVariants: true },
 });
 
 function CustomizedInputs(props) {

docs/src/pages/demos/text-fields/CustomizedInputs.tsx

@@ -84,7 +84,6 @@ const theme = createMuiTheme({
   palette: {
     primary: green,
   },
-  typography: { useNextVariants: true },
 });
 
 export interface Props extends WithStyles<typeof styles> {}

docs/src/pages/guides/interoperability/EmotionTheme.js

@@ -5,7 +5,7 @@ import { createMuiTheme } from '@material-ui/core/styles';
 import { darken, fade } from '@material-ui/core/styles/colorManipulator';
 import { ThemeProvider } from 'emotion-theming';
 
-const theme = createMuiTheme({ typography: { useNextVariants: true } });
+const theme = createMuiTheme();
 
 const StyledButton = styled.button`
   padding: 8px 12px;

docs/src/pages/guides/interoperability/StyledComponentsTheme.js

@@ -4,7 +4,7 @@ import NoSsr from '@material-ui/core/NoSsr';
 import { createMuiTheme } from '@material-ui/core/styles';
 import { darken, fade } from '@material-ui/core/styles/colorManipulator';
 
-const theme = createMuiTheme({ typography: { useNextVariants: true } });
+const theme = createMuiTheme();
 
 const StyledButton = styled.button`
   padding: 8px 12px;

docs/src/pages/layout/use-media-query/ThemeHelper.js

@@ -10,7 +10,7 @@ function MyComponent() {
   return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
 }
 
-const theme = createMuiTheme({ typography: { useNextVariants: true } });
+const theme = createMuiTheme();
 
 export default function ThemeHelper() {
   return (

docs/src/pages/layout/use-media-query/UseWidth.js

@@ -15,7 +15,7 @@ function MyComponent() {
   return <span>{`width: ${width}`}</span>;
 }
 
-const theme = createMuiTheme({ typography: { useNextVariants: true } });
+const theme = createMuiTheme();
 
 export default function UseWidth() {
   return (

docs/src/pages/premium-themes/instapaper/theme/instapaper/variables.js

@@ -7,7 +7,6 @@ const primary = {
 
 const theme = createMuiTheme({
   typography: {
-    useNextVariants: true,
     // Use the system font instead of the default Roboto font.
     fontFamily: [
       '-apple-system',

docs/src/pages/premium-themes/onepirate/modules/components/Typography.js

@@ -35,7 +35,7 @@ const styles = theme => ({
   },
 });
 
-const headlineMapping = {
+const variantMapping = {
   h1: 'h1',
   h2: 'h1',
   h3: 'h1',
@@ -49,7 +49,7 @@ function Typography(props) {
   const { children, classes, marked, variant, ...other } = props;
 
   return (
-    <MuiTypography headlineMapping={headlineMapping} variant={variant} {...other}>
+    <MuiTypography variantMapping={variantMapping} variant={variant} {...other}>
       {children}
       {marked ? (
         <span className={classes[`marked${capitalize(variant) + capitalize(marked)}`]} />

docs/src/pages/premium-themes/onepirate/modules/theme.js

@@ -36,7 +36,6 @@ const rawTheme = createMuiTheme({
     fontWeightRegular: 400, // Work Sans
     fontWeightMedium: 700, // Roboto Condensed
     fontFamilySecondary: "'Roboto Condensed', sans-serif",
-    useNextVariants: true,
   },
 });
 

docs/src/pages/premium-themes/paperbase/Paperbase.js

@@ -9,7 +9,6 @@ import Header from './Header';
 
 let theme = createMuiTheme({
   typography: {
-    useNextVariants: true,
     h5: {
       fontWeight: 500,
       fontSize: 26,

docs/src/pages/premium-themes/tweeper/theme/tweeper/variables.js

@@ -10,7 +10,6 @@ const theme = createMuiTheme({
   typography: {
     fontSize: 15,
     fontWeightRegular: 500,
-    useNextVariants: true,
     // Use the system font instead of the default Roboto font.
     fontFamily: [
       '-apple-system',