mui · oliviertassinari · Feb 7, 2019 · Feb 5, 2019
diff --git a/.size-limit.js b/.size-limit.js
@@ -16,19 +16,19 @@ module.exports = [
     name: 'The initial cost paid for using one component',
     webpack: true,
     path: 'packages/material-ui/build/Paper/index.js',
-    limit: '18.8 KB',
+    limit: '18.7 KB',
   },
   {
     name: 'The initial cost paid for using one component with ES modules',
     webpack: true,
     path: 'packages/material-ui/build/esm/Paper/index.js',
-    limit: '17.9 KB',
+    limit: '17.8 KB',
   },
   {
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '92.2 KB',
+    limit: '92.3 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',
@@ -53,14 +53,14 @@ module.exports = [
     name: 'The size of the @material-ui/core/Button component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Button/index.js',
-    limit: '24.6 KB',
+    limit: '24.5 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-modal
     name: 'The size of the @material-ui/core/Modal component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Modal/index.js',
-    limit: '24.1 KB',
+    limit: '24.0 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-popper

diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
@@ -27,7 +27,7 @@ const styles = theme => ({
 function AppContent(props) {
   const { className, classes, children } = props;
 
-  return <main className={classNames(classes.root, className)}>{children}</main>;
+  return <main className={clsx(classes.root, className)}>{children}</main>;
 }
 
 AppContent.propTypes = {

diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { _rewriteUrlForNextExport } from 'next/router';
 import { withStyles } from '@material-ui/core/styles';
@@ -130,7 +130,7 @@ function AppDrawer(props) {
       <Hidden lgUp={!disablePermanent} implementation="js">
         <SwipeableDrawer
           classes={{
-            paper: classNames(classes.paper, 'algolia-drawer'),
+            paper: clsx(classes.paper, 'algolia-drawer'),
           }}
           disableBackdropTransition={!iOS}
           variant="temporary"

diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import ListItem from '@material-ui/core/ListItem';
 import Button from '@material-ui/core/Button';
@@ -85,7 +85,7 @@ class AppDrawerNavItem extends React.Component {
             component={props => (
               <Link naked activeClassName={classes.active} href={href} {...props} />
             )}
-            className={classNames(classes.buttonLeaf, `depth-${depth}`)}
+            className={clsx(classes.buttonLeaf, `depth-${depth}`)}
             disableRipple
             onClick={onClick}
             style={style}

diff --git a/docs/src/modules/components/AppTheme.js b/docs/src/modules/components/AppTheme.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
@@ -26,7 +26,7 @@ function AppTheme(props) {
       <Typography
         color="textSecondary"
         align="center"
-        className={classNames(classes.credit, {
+        className={clsx(classes.credit, {
           [classes.hideCredit]: hideCredit,
         })}
       >

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import LZString from 'lz-string';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import copy from 'clipboard-copy';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
@@ -321,7 +321,7 @@ class Demo extends React.Component {
           </div>
         )}
         <div
-          className={classNames(classes.demo, {
+          className={clsx(classes.demo, {
             [classes.demoHiddenHeader]: demoOptions.hideHeader,
           })}
         >

diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import compose from 'recompose/compose';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
@@ -86,7 +86,7 @@ function HomeSteps(props) {
 
   return (
     <Grid container>
-      <Grid item xs={12} md={4} className={classNames(classes.step, classes.leftStep)}>
+      <Grid item xs={12} md={4} className={clsx(classes.step, classes.leftStep)}>
         <div className={classes.stepTitle}>
           <FileDownloadIcon className={classes.stepIcon} />
           <Typography variant="h6">{t('installation')}</Typography>
@@ -169,7 +169,7 @@ function HomeSteps(props) {
           {t('usageButton')}
         </Button>
       </Grid>
-      <Grid item xs={12} md={4} className={classNames(classes.step, classes.rightStep)}>
+      <Grid item xs={12} md={4} className={clsx(classes.step, classes.rightStep)}>
         <div className={classes.stepTitle}>
           <WhatshotIcon className={classes.stepIcon} />
           <Typography variant="h6">{t('themes')}</Typography>

diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js
@@ -4,7 +4,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withRouter } from 'next/router';
 import NextLink from 'next/link';
 import MuiLink from '@material-ui/core/Link';
@@ -16,7 +16,7 @@ function NextWrapper(props) {
     <NextLink href={href} prefetch={prefetch}>
       <a
         onClick={onClick}
-        className={classNames(className, {
+        className={clsx(className, {
           [activeClassName]: router.pathname === href && activeClassName,
         })}
         {...other}

diff --git a/docs/src/modules/components/Tidelift.js b/docs/src/modules/components/Tidelift.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
@@ -43,7 +43,7 @@ function Tidelift(props) {
       data-ga-event-category="sponsors"
       data-ga-event-action="logo"
       data-ga-event-label="tidelift"
-      className={classNames(classes.root, 'mui-fixed')}
+      className={clsx(classes.root, 'mui-fixed')}
       href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage"
       target="_blank"
       rel="noopener"

diff --git a/docs/src/pages/customization/css-in-js/CssInJs.js b/docs/src/pages/customization/css-in-js/CssInJs.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 
@@ -23,7 +23,7 @@ function MyLink(props) {
 
   return (
     <a
-      className={classNames(
+      className={clsx(
         classes.root,
         {
           [classes.primary]: variant === 'primary',

diff --git a/docs/src/pages/customization/css-in-js/StyledComponents.js b/docs/src/pages/customization/css-in-js/StyledComponents.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -10,7 +10,7 @@ function styled(Component) {
   return (style, options) => {
     function StyledComponent(props) {
       const { classes, className, ...other } = props;
-      return <Component className={classNames(classes.root, className)} {...other} />;
+      return <Component className={clsx(classes.root, className)} {...other} />;
     }
     StyledComponent.propTypes = {
       classes: PropTypes.object.isRequired,

diff --git a/docs/src/pages/customization/overrides/ClassNames.js b/docs/src/pages/customization/overrides/ClassNames.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
@@ -21,7 +21,7 @@ function ClassNames(props) {
   const { classes, children, className, ...other } = props;
 
   return (
-    <Button className={classNames(classes.root, className)} {...other}>
+    <Button className={clsx(classes.root, className)} {...other}>
       {children || 'class names'}
     </Button>
   );

diff --git a/docs/src/pages/customization/overrides/DynamicClassName.js b/docs/src/pages/customization/overrides/DynamicClassName.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -47,7 +47,7 @@ class DynamicClassName extends React.Component {
           label="Blue"
         />
         <Button
-          className={classNames(classes.button, {
+          className={clsx(classes.button, {
             [classes.buttonBlue]: this.state.color === 'blue',
           })}
         >

diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types, react/jsx-handler-names */
 
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Select from 'react-select';
 import { makeStyles, useTheme } from '@material-ui/styles';
 import Typography from '@material-ui/core/Typography';
@@ -180,7 +180,7 @@ function MultiValue(props) {
     <Chip
       tabIndex={-1}
       label={props.children}
-      className={classNames(props.selectProps.classes.chip, {
+      className={clsx(props.selectProps.classes.chip, {
         [props.selectProps.classes.chipFocused]: props.isFocused,
       })}
       onDelete={props.removeProps.onClick}

diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Select from 'react-select';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
@@ -181,7 +181,7 @@ function MultiValue(props) {
     <Chip
       tabIndex={-1}
       label={props.children}
-      className={classNames(props.selectProps.classes.chip, {
+      className={clsx(props.selectProps.classes.chip, {
         [props.selectProps.classes.chipFocused]: props.isFocused,
       })}
       onDelete={props.removeProps.onClick}

diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import purple from '@material-ui/core/colors/purple';
@@ -67,11 +67,7 @@ function CustomizedButtons(props) {
 
   return (
     <div>
-      <Button
-        variant="contained"
-        color="primary"
-        className={classNames(classes.margin, classes.cssRoot)}
-      >
+      <Button variant="contained" color="primary" className={clsx(classes.margin, classes.cssRoot)}>
         Custom CSS
       </Button>
       <MuiThemeProvider theme={theme}>
@@ -83,7 +79,7 @@ function CustomizedButtons(props) {
         variant="contained"
         color="primary"
         disableRipple
-        className={classNames(classes.margin, classes.bootstrapRoot)}
+        className={clsx(classes.margin, classes.bootstrapRoot)}
       >
         Bootstrap
       </Button>

diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SwipeableViews from 'react-swipeable-views';
 import { makeStyles, useTheme } from '@material-ui/styles';
 import AppBar from '@material-ui/core/AppBar';
@@ -81,7 +81,7 @@ function FloatingActionButtonZoom() {
     },
     {
       color: 'inherit',
-      className: classNames(classes.fab, classes.fabGreen),
+      className: clsx(classes.fab, classes.fabGreen),
       icon: <UpIcon />,
     },
   ];

diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import SwipeableViews from 'react-swipeable-views';
 import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
@@ -83,7 +83,7 @@ class FloatingActionButtonZoom extends React.Component {
       },
       {
         color: 'inherit',
-        className: classNames(classes.fab, classes.fabGreen),
+        className: clsx(classes.fab, classes.fabGreen),
         icon: <UpIcon />,
       },
     ];

diff --git a/docs/src/pages/demos/buttons/IconLabelButtons.js b/docs/src/pages/demos/buttons/IconLabelButtons.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -46,7 +46,7 @@ function IconLabelButtons(props) {
         Talk
       </Button>
       <Button variant="contained" size="small" className={classes.button}>
-        <SaveIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
+        <SaveIcon className={clsx(classes.leftIcon, classes.iconSmall)} />
         Save
       </Button>
     </div>