[styles] Change the withTheme API (#14565)

Author: oliviertassinari

CHANGELOG.md

@@ -159,7 +159,7 @@ Remove the deprecated button flat, raised and fab variants:
 #### Changes
 
 - [core] Increase React peer dependency to v16.8.0 (#14432) @oliviertassinari
-- [Slider] Fix a11y issues with the handle (#14461) @eps1lon 
+- [Slider] Fix a11y issues with the handle (#14461) @eps1lon
 
 ### Docs
 

docs/src/pages/css-in-js/advanced/WithTheme.js

@@ -11,7 +11,7 @@ DeepChildRaw.propTypes = {
   theme: PropTypes.object.isRequired,
 };
 
-const DeepChild = withTheme()(DeepChildRaw);
+const DeepChild = withTheme(DeepChildRaw);
 
 function WithTheme() {
   return (

docs/src/pages/css-in-js/api/api.md

@@ -285,7 +285,7 @@ class MyComponent extends React.Component {
 export default MyComponent
 ```
 
-## `withTheme()(Component) => Component`
+## `withTheme(Component) => Component`
 
 Provide the `theme` object as a property of the input component so it can be used
 in the render method.
@@ -308,5 +308,5 @@ function MyComponent(props) {
   return <div>{props.theme.direction}</div>;
 }
 
-export default withTheme()(MyComponent);
+export default withTheme(MyComponent);
 ```

docs/src/pages/css-in-js/basics/basics.md

@@ -2,11 +2,6 @@
 
 <p class="description">You can leverage our styling solution, even if you are not using our components.</p>
 
-> ⚠️ `@material-ui/styles` is unstable (alpha version).
-Hopefully, we will make it the default style implementation for the core components in Material-UI v4.
-[Follow this path](/customization/css-in-js/) to read the documentation
-of the default style implementation.
-
 Material-UI aims to provide strong foundations for building dynamic UIs.
 For the sake of simplicity, **we expose our styling solution to users**.
 You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions.

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

@@ -33,4 +33,4 @@ WithTheme.propTypes = {
   theme: PropTypes.object.isRequired,
 };
 
-export default withTheme()(WithTheme); // Let's get the theme as a property
+export default withTheme(WithTheme); // Let's get the theme as a property

docs/src/pages/customization/themes/themes.md

@@ -396,7 +396,7 @@ const theme = createMuiTheme({
 ## Accessing the theme in a component
 
 You might need to access the theme variables inside your React components.
-Let's say you want to display the value of the primary color, you can use the `withTheme()` higher-order component to do so. Here is an example:
+Let's say you want to display the value of the primary color, you can use the `withTheme` higher-order component to do so. Here is an example:
 
 {{"demo": "pages/customization/themes/WithTheme.js"}}
 
@@ -479,7 +479,7 @@ const theme = createMuiTheme({
 });
 ```
 
-### `withTheme()(Component) => Component`
+### `withTheme(Component) => Component`
 
 Provide the `theme` object as a property of the input component so it can be used
 in the render method.
@@ -501,5 +501,5 @@ function MyComponent(props) {
   return <div>{props.theme.direction}</div>;
 }
 
-export default withTheme()(MyComponent);
+export default withTheme(MyComponent);
 ```

docs/src/pages/getting-started/example-projects/example-projects.md

@@ -4,10 +4,10 @@
 
 We host some example projects which you can find in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/next/examples) folder:
 
-- [Create React App](https://github.com/mui-org/material-ui/tree/next/examples/create-react-app)
-- [Next.js](https://github.com/mui-org/material-ui/tree/next/examples/nextjs)
-- [Gatsby](https://github.com/mui-org/material-ui/tree/next/examples/gatsby)
-- [CDN](https://github.com/mui-org/material-ui/tree/next/examples/cdn)
+- [Create React App](https://github.com/mui-org/material-ui/tree/next/examples/create-react-app-next)
+- [Gatsby](https://github.com/mui-org/material-ui/tree/next/examples/gatsby-next)
+- [Next.js](https://github.com/mui-org/material-ui/tree/next/examples/nextjs-next)
+- [CDN](https://github.com/mui-org/material-ui/tree/next/examples/cdn-next)
 - And more
 
 Create React App is an awesome project for learning React.

docs/src/pages/getting-started/faq/faq.md

@@ -98,7 +98,7 @@ A lot of our interactive components use it internally:
 `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc.
 You can use the same solution with them.
 
-## How do I combine the `withStyles()` and `withTheme()` HOCs?
+## How do I combine the `withStyles()` and `withTheme` HOCs?
 
 There are a number of different options:
 
@@ -114,15 +114,15 @@ export default withStyles(styles, { withTheme: true })(Modal);
 import { compose } from 'recompose';
 
 export default compose(
-  withTheme(),
+  withTheme,
   withStyles(styles)
 )(Modal);
 ```
 
 **raw function chaining:**
 
 ```js
-export default withTheme()(withStyles(styles)(Modal));
+export default withTheme(withStyles(styles)(Modal));
 ```
 
 ## How can I access the DOM element?

docs/src/pages/guides/server-rendering/server-rendering.md

@@ -194,8 +194,8 @@ ReactDOM.hydrate(
 We host different reference implementations which you can find in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/next/examples) folder:
 
 - [The reference implementation of this tutorial](https://github.com/mui-org/material-ui/tree/next/examples/ssr)
-- [Next.js](https://github.com/mui-org/material-ui/tree/next/examples/nextjs)
-- [Gatsby](https://github.com/mui-org/material-ui/tree/next/examples/gatsby)
+- [Gatsby](https://github.com/mui-org/material-ui/tree/next/examples/gatsby-next)
+- [Next.js](https://github.com/mui-org/material-ui/tree/next/examples/nextjs-next)
 
 ## Troubleshooting
 

package.json

@@ -46,7 +46,7 @@
     "start": "yarn docs:dev",
     "test": "yarn lint && yarn typescript && yarn test:coverage",
     "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha 'packages/**/*.test.js' 'docs/**/*.test.js' --exclude '**/node_modules/**' && nyc report -r lcovonly",
-    "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha 'packages/material-ui/**/*.test.js' 'packages/material-ui-utils/**/*.test.js' 'packages/material-ui-styles/**/*.test.js' --exclude '**/node_modules/**' && nyc report --reporter=html",
+    "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha 'packages/**/**/*.test.js' --exclude '**/node_modules/**' && nyc report --reporter=html",
     "test:karma": "cross-env NODE_ENV=test karma start test/karma.conf.js --single-run",
     "test:regressions": "webpack --config test/regressions/webpack.config.js && rimraf test/regressions/screenshots/chrome/* && vrtest run --config test/vrtest.config.js --record",
     "test:umd": "yarn babel-node packages/material-ui/test/umd/run.js",
@@ -201,8 +201,7 @@
   "nyc": {
     "include": [
       "packages/material-ui/src/**/*.js",
-      "packages/material-ui/utils/**/*.js",
-      "packages/material-ui/styles/**/*.js"
+      "packages/material-ui-utils/src/**/*.js"
     ],
     "exclude": [
       "**/*.test.js"

packages/material-ui-styles/src/withStyles.js

@@ -262,7 +262,7 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
       const more = getThemeProps({ theme, name, props: other });
 
       // Provide the theme to the wrapped component.
-      // So we don't have to use the `withTheme()` Higher-order Component.
+      // So we don't have to use the `withTheme` Higher-order Component.
       if (withTheme) {
         more.theme = theme;
       }

packages/material-ui-styles/src/withTheme.js

@@ -5,7 +5,17 @@ import hoistStatics from './hoistInternalStatics';
 import ThemeContext from './ThemeContext';
 
 // Provide the theme object as a property to the input component.
-const withTheme = () => Component => {
+const withTheme = Component => {
+  /* istanbul ignore if */
+  if (process.env.NODE_ENV !== 'production' && Component === undefined) {
+    throw new Error(
+      [
+        'You are calling withTheme(Component) with an undefined component.',
+        'You may have forgotten to import it.',
+      ].join('\n'),
+    );
+  }
+
   const WithTheme = props => (
     <ThemeContext.Consumer>
       {theme => {

packages/material-ui-styles/src/withTheme.test.js

@@ -27,7 +27,7 @@ describe('withTheme', () => {
       theme: PropTypes.object,
     };
 
-    const TestWithTheme = withTheme()(Test);
+    const TestWithTheme = withTheme(Test);
 
     const wrapper = mount(
       <ThemeProvider theme={{ foo: 'foo' }}>
@@ -40,14 +40,14 @@ describe('withTheme', () => {
   it('does not hoist statics', () => {
     const Test = () => null;
     Test.someStatic = 'will not get hoisted';
-    const TestWithTheme = withTheme()(Test);
+    const TestWithTheme = withTheme(Test);
     assert.strictEqual(TestWithTheme.someStatic, undefined);
   });
 
   it('hoists mui internals', () => {
     assert.strictEqual(isMuiElement(<Input />, ['Input']), true);
 
-    const ThemedInput = withTheme()(Input);
+    const ThemedInput = withTheme(Input);
 
     assert.strictEqual(isMuiElement(<ThemedInput />, ['Input']), true);
   });

packages/material-ui/src/Fade/Fade.js

@@ -113,4 +113,4 @@ Fade.defaultProps = {
   },
 };
 
-export default withTheme()(Fade);
+export default withTheme(Fade);

packages/material-ui/src/Grow/Grow.js

@@ -177,4 +177,4 @@ Grow.defaultProps = {
 
 Grow.muiSupportAuto = true;
 
-export default withTheme()(Grow);
+export default withTheme(Grow);

packages/material-ui/src/Slide/Slide.js

@@ -282,4 +282,4 @@ Slide.defaultProps = {
   },
 };
 
-export default withTheme()(Slide);
+export default withTheme(Slide);

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js

@@ -494,4 +494,4 @@ SwipeableDrawer.defaultProps = {
   variant: 'temporary', // Mobile first.
 };
 
-export default withTheme()(SwipeableDrawer);
+export default withTheme(SwipeableDrawer);

packages/material-ui/src/TablePagination/TablePaginationActions.js

@@ -86,4 +86,4 @@ TablePaginationActions.propTypes = {
   theme: PropTypes.object.isRequired,
 };
 
-export default withTheme()(TablePaginationActions);
+export default withTheme(TablePaginationActions);

packages/material-ui/src/Zoom/Zoom.js

@@ -114,4 +114,4 @@ Zoom.defaultProps = {
   },
 };
 
-export default withTheme()(Zoom);
+export default withTheme(Zoom);

packages/material-ui/src/styles/MuiThemeProvider.test.js

@@ -25,7 +25,7 @@ function getThemeSpy() {
   };
 
   return {
-    ThemeSpy: withTheme()(ThemeSpy),
+    ThemeSpy: withTheme(ThemeSpy),
     themeSpy,
   };
 }

packages/material-ui/src/styles/withStyles.js

@@ -273,7 +273,7 @@ const withStylesOld = (stylesOrCreator, options = {}) => Component => {
       const more = getThemeProps({ theme: this.theme, name, props: other });
 
       // Provide the theme to the wrapped component.
-      // So we don't have to use the `withTheme()` Higher-order Component.
+      // So we don't have to use the `withTheme` Higher-order Component.
       if (withTheme && !more.theme) {
         more.theme = this.theme;
       }

packages/material-ui/src/styles/withTheme.d.ts

@@ -9,4 +9,6 @@ export interface ThemedComponentProps extends Partial<WithTheme> {
   innerRef?: React.Ref<any> | React.RefObject<any>;
 }
 
-export default function withTheme(): PropInjector<WithTheme, ThemedComponentProps>;
+declare const withTheme: PropInjector<WithTheme, ThemedComponentProps>;
+
+export default withTheme;

packages/material-ui/src/styles/withTheme.js

@@ -19,7 +19,17 @@ function getDefaultTheme() {
 }
 
 // Provide the theme object as a property to the input component.
-const withThemeOld = () => Component => {
+const withThemeOld = Component => {
+  /* istanbul ignore if */
+  if (process.env.NODE_ENV !== 'production' && Component === undefined) {
+    throw new Error(
+      [
+        'You are calling withTheme(Component) with an undefined component.',
+        'You may have forgotten to import it.',
+      ].join('\n'),
+    );
+  }
+
   class WithTheme extends React.Component {
     constructor(props, context) {
       super();

packages/material-ui/src/styles/withTheme.test.js

@@ -34,7 +34,7 @@ describe('withTheme', () => {
   it('should use the theme provided by the context', () => {
     const theme = { themeProperty: 'foo' };
     broadcast.setState(theme);
-    const ThemedComponent = withTheme()(Empty);
+    const ThemedComponent = withTheme(Empty);
     const wrapper = shallow(<ThemedComponent />, { context });
 
     assert.strictEqual(wrapper.props().theme, theme);
@@ -43,7 +43,7 @@ describe('withTheme', () => {
   it('should rerender when the theme is updated', () => {
     const theme = { themeProperty: 'foo' };
     broadcast.setState(theme);
-    const ThemedComponent = withTheme()(Empty);
+    const ThemedComponent = withTheme(Empty);
     const wrapper = mount(<ThemedComponent />, { context });
 
     assert.strictEqual(wrapper.instance().state.theme, theme);
@@ -54,7 +54,7 @@ describe('withTheme', () => {
 
   describe('prop: innerRef', () => {
     it('should provide a ref on the inner component', () => {
-      const ThemedComponent = withTheme()(EmptyClass);
+      const ThemedComponent = withTheme(EmptyClass);
       const handleRef = spy();
       mount(<ThemedComponent innerRef={handleRef} />);
       assert.strictEqual(handleRef.callCount, 1);

packages/material-ui/src/withWidth/withWidth.js

@@ -155,7 +155,7 @@ const withWidth = (options = {}) => Component => {
 
   hoistNonReactStatics(WithWidth, Component);
 
-  return withTheme()(WithWidth);
+  return withTheme(WithWidth);
 };
 
 export default withWidth;

packages/material-ui/test/typescript/styles.spec.tsx

@@ -169,7 +169,7 @@ function OverridesTheme() {
 }
 
 // withTheme
-const ComponentWithTheme = withTheme()(({ theme }: WithTheme) => <div>{theme.spacing(1)}</div>);
+const ComponentWithTheme = withTheme(({ theme }: WithTheme) => <div>{theme.spacing(1)}</div>);
 
 <ComponentWithTheme />;
 
@@ -183,12 +183,12 @@ const StyledComponent = withStyles(styles)(({ theme, classes }: AllTheProps) =>
 // missing prop theme
 <StyledComponent />; // $ExpectError
 
-const AllTheComposition = withTheme()(StyledComponent);
+const AllTheComposition = withTheme(StyledComponent);
 
 <AllTheComposition />;
 
 {
-  const Foo = withTheme()(
+  const Foo = withTheme(
     class extends React.Component<WithTheme> {
       render() {
         return null;