Merge pull request #1824 from marmelab/mui-rc1

[RFR] Upgrade material-ui to 1.0.0-rc.0

README.md

@@ -82,7 +82,7 @@ The `<Resource>` component is a configuration component that allows to define su
 // in posts.js
 import React from 'react';
 import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, DisabledInput, TextInput, LongTextInput, DateInput } from 'react-admin';
-import BookIcon from 'material-ui/svg-icons/action/book';
+import BookIcon from '@material-ui/core/svg-icons/action/book';
 export const PostIcon = BookIcon;
 
 export const PostList = (props) => (

UPGRADE.md

@@ -256,8 +256,8 @@ If you used CSS to customize the look and feel of these components, please updat
 Adding the `addField` prop to a component used to automatically add a redux-form `<Field>` component around an input component that you wanted to bind to the edit or create form. This feature was moved to a Higher-order component (HOC):
 
 ```diff
-import SelectField from 'material-ui/SelectField';
-import MenuItem from 'material-ui/MenuItem';
+import SelectField from '@material-ui/core/SelectField';
+import MenuItem from '@material-ui/core/MenuItem';
 + import { addField } from 'react-admin';
 const SexInput = ({ input, meta: { touched, error } }) => (
     <SelectField
@@ -297,10 +297,10 @@ export default SexInput;
 The Refresh button now uses Redux to force a refetch of the data. As a consequence, the List view no longer passes the `refresh` prop to the `<Actions>` component. If you relied on that prop to refresh the list, you must now use the new `<RefreshButton>` component.
 
 ```diff
-import { CardActions } from 'material-ui/Card';
-- import FlatButton from 'material-ui/FlatButton';
+import CardActions from '@material-ui/core/CardActions';
+- import FlatButton from '@material-ui/core/FlatButton';
 - import { CreateButton } from 'admin-on-rest';
-- import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
+- import NavigationRefresh from '@material-ui/core/svg-icons/navigation/refresh';
 + import { CreateButton, RefreshButton } from 'react-admin';
 
 - const PostListActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refresh }) => (
@@ -336,7 +336,7 @@ All react-admin components now accept a `className` prop instead of the `elStyle
 //    <a style="text-decoration:none" href="mailto:foo@example.com">foo@example.com</a>
 //</td>
 + import { EmailField, List, Datagrid } from 'react-admin';
-+ import { withStyles } from 'material-ui/styles';
++ import { withStyles } from '@material-ui/core/styles';
 + const styles = {
 +     field: {
 +         textDecoration: 'none',
@@ -358,7 +358,7 @@ In addition to `elStyle`, Field and Input components used to support a `style` p
 ```diff
 - import { EmailField, List, Datagrid } from 'admin-on-rest';
 + import { EmailField, List, Datagrid } from 'react-admin';
-+ import { withStyles } from 'material-ui/styles';
++ import { withStyles } from '@material-ui/core/styles';
 
 + const styles = {
 +     cell: {
@@ -395,7 +395,7 @@ Furthermore, some React-admin components such as the `List`, `Filter`, and `Data
 
 ```jsx
 import { EmailField, List, Datagrid } from 'react-admin';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
     header: { fontWeight: 'bold' },
@@ -668,7 +668,8 @@ Finally, you won't need the now deprecated `<WithPermission>` or `<SwitchPermiss
 ```jsx
 // in src/MyPage.js
 import React from 'react';
-import Card, { CardContent } from 'material-ui/Card';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
 import { ViewTitle, WithPermissions } from 'react-admin';
 import { withRouter } from 'react-router-dom';
 
@@ -717,9 +718,9 @@ The default layout has been simplified, and this results in a simplified custom
 import React, { createElement, Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-- import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-+ import { MuiThemeProvider, withStyles } from 'material-ui/styles';
-- import CircularProgress from 'material-ui/CircularProgress';
+- import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
++ import { MuiThemeProvider, withStyles } from '@material-ui/core/styles';
+- import CircularProgress from '@material-ui/core/CircularProgress';
 import {
 -   AdminRoutes,
     AppBar,

docs/Actions.md

@@ -18,7 +18,7 @@ Here is an implementation of the "Approve" button that works perfectly:
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import FlatButton from 'material-ui/FlatButton';
+import FlatButton from '@material-ui/core/FlatButton';
 import { showNotification as showNotificationAction } from 'react-admin';
 import { push as pushAction } from 'react-router-redux';
 
@@ -81,7 +81,7 @@ Or, in the `<Edit>` page, as a [custom action](./CreateEdit.md#actions):
 ```jsx
 // in src/comments/CommentEditActions.js
 import React from 'react';
-import { CardActions } from 'material-ui/Card';
+import CardActions from '@material-ui/core/CardActions';
 import { ListButton, DeleteButton } from 'react-admin';
 import ApproveButton from './ApproveButton';
 
@@ -188,7 +188,7 @@ To use the new action creator in the component, `connect` it:
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import Button from 'material-ui/Button';
+import Button from '@material-ui/core/Button';
 import { commentApprove as commentApproveAction } from './commentActions';
 
 class ApproveButton extends Component {
@@ -374,7 +374,7 @@ To make an action with a `fetch` meta optimistic, decorate it with the `startUnd
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import Button from 'material-ui/Button';
+import Button from '@material-ui/core/Button';
 + import { startUndoable as startUndoableAction } from 'ra-core';
 - import { commentApprove as commentApproveAction } from './commentActions';
 + import { commentApprove } from './commentActions';

docs/Admin.md

@@ -86,7 +86,8 @@ By default, the homepage of an an admin app is the `list` of the first child `<R
 ```jsx
 // in src/Dashboard.js
 import React from 'react';
-import Card, { CardContent } from 'material-ui/Card';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
 import { ViewTitle } from 'react-admin';
 export default () => (
     <Card>
@@ -122,7 +123,8 @@ You can customize this page to use the component of your choice by passing it as
 ```jsx
 // in src/NotFound.js
 import React from 'react';
-import Card, { CardContent } from 'material-ui/Card';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
 import { ViewTitle } from 'react-admin';
 
 export default () => (
@@ -213,7 +215,7 @@ If the default active style does not suit your tastes, you can override it by pa
 import React from 'react';
 import { connect } from 'react-redux';
 import { MenuItemLink, getResources } from 'react-admin';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import { withRouter } from 'react-router-dom';
 
 const styles = {
@@ -247,7 +249,7 @@ export default withRouter(connect(mapStateToProps)(withStyles(styles)(Menu)));
 Material UI supports [theming](http://www.material-ui.com/#/customization/themes). This lets you customize the look and feel of an admin by overriding fonts, colors, and spacing. You can provide a custom material ui theme by using the `theme` prop:
 
 ```jsx
-import { createMuiTheme } from 'material-ui/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
 
 const theme = createMuiTheme({
   palette: {
@@ -424,7 +426,8 @@ to design the screen the way you want.
 ```jsx
 // in src/Foo.js
 import React from 'react';
-import Card, { CardContent } from 'material-ui/Card';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
 import { ViewTitle } from 'react-admin';
 
 const Foo = () => (

docs/Authentication.md

@@ -275,8 +275,8 @@ export default connect(undefined, { userLogin })(MyLoginPage);
 import React from 'react';
 import { connect } from 'react-redux';
 import { Responsive, userLogout } from 'react-admin';
-import { MenuItem } from 'material-ui/Menu';
-import Button from 'material-ui/Button';
+import MenuItem from '@material-ui/core/MenuItem';
+import Button from '@material-ui/core/Button';
 import ExitIcon from '@material-ui/icons/PowerSettingsNew';
 
 const MyLogoutButton = ({ userLogout, ...rest }) => (

docs/Authorization.md

@@ -208,7 +208,8 @@ The component provided as a [`dashboard`]('./Admin.md#dashboard) will receive th
 ```jsx
 // in src/Dashboard.js
 import React from 'react';
-import Card, { CardContent } from 'material-ui/Card';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
 import { ViewTitle } from 'react-admin';
 
 export default ({ permissions }) => (
@@ -232,7 +233,8 @@ You might want to check user permissions inside a [custom pages](./Admin.md#cust
 ```jsx
 // in src/MyPage.js
 import React from 'react';
-import Card, { CardContent } from 'material-ui/Card';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
 import { ViewTitle, WithPermissions } from 'react-admin';
 import { withRouter } from 'react-router-dom';
 

docs/CreateEdit.md

@@ -116,7 +116,7 @@ export const PostEdit = (props) => (
 You can replace the list of default actions by your own element using the `actions` prop:
 
 ```jsx
-import Button from 'material-ui/Button';
+import Button from '@material-ui/core/Button';
 import {
     CardActions,
     ListButton,

docs/CustomApp.md

@@ -28,10 +28,10 @@ import { Switch, Route } from 'react-router-dom';
 import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
 import { reducer as formReducer } from 'redux-form';
 import createSagaMiddleware from 'redux-saga';
-import { MuiThemeProvider } from 'material-ui/styles';
-import AppBar from 'material-ui/AppBar';
-import Toolbar from 'material-ui/Toolbar';
-import Typography from 'material-ui/Typography';
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
 
 // prebuilt react-admin features
 import {

docs/Fields.md

@@ -743,7 +743,7 @@ All field components accept a `className` prop, allowing you to customize their
 
 {% raw %}
 ```jsx
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
     price: { color: 'purple' },
@@ -772,7 +772,7 @@ You may want to customize the cell style inside a `DataGrid`. You can use the `c
 
 {% raw %}
 ```jsx
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
     priceCell: { fontWeight: 'bold' },
@@ -799,7 +799,7 @@ You may want to override the field header (the `<th>` element in the datagrid).
 
 {% raw %}
 ```jsx
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
     priceHeader: { fontWeight: 'bold' },

docs/Inputs.md

@@ -138,7 +138,7 @@ You can customize the `filter` function used to filter the results. By default,
 
 ```jsx
 import { AutocompleteInput } from 'react-admin';
-import AutoComplete from 'material-ui/AutoComplete';
+import AutoComplete from '@material-ui/core/AutoComplete';
 
 <AutocompleteInput source="category" filter={AutoComplete.caseInsensitiveFilter} choices={choices} />
 ```
@@ -1126,7 +1126,7 @@ Instead of HTML `input` elements, you can use a material-ui component. To compos
 
 ```jsx
 // in LatLongInput.js
-import TextField from 'material-ui/TextField';
+import TextField from '@material-ui/core/TextField';
 import { Field } from 'redux-form';
 const renderTextField = ({ input, label, meta: { touched, error }, ...custom }) => (
     <TextField
@@ -1152,8 +1152,8 @@ Material-ui's `<TextField>` component already includes a label, so you don't nee
 
 ```jsx
 // in SexInput.js
-import SelectField from 'material-ui/SelectField';
-import MenuItem from 'material-ui/MenuItem';
+import SelectField from '@material-ui/core/SelectField';
+import MenuItem from '@material-ui/core/MenuItem';
 import { addField } from 'react-admin';
 
 const SexInput = ({ input, meta: { touched, error } }) => (
@@ -1169,8 +1169,8 @@ const SexInput = ({ input, meta: { touched, error } }) => (
 export default addField(SexInput); // decorate with redux-form's <Field>
 
 // equivalent of
-import SelectField from 'material-ui/SelectField';
-import MenuItem from 'material-ui/MenuItem';
+import SelectField from '@material-ui/core/SelectField';
+import MenuItem from '@material-ui/core/MenuItem';
 import { Field } from 'redux-form';
 
 const renderSexInput = ({ input, meta: { touched, error } }) => (

docs/List.md

@@ -84,7 +84,7 @@ The title can be either a string, or an element of your own.
 You can replace the list of default actions by your own element using the `actions` prop:
 
 ```jsx
-import Button from 'material-ui/Button';
+import Button from '@material-ui/core/Button';
 import { CardActions, CreateButton, RefreshButton } from 'react-admin';
 
 const PostActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter }) => (
@@ -115,7 +115,7 @@ export const PostList = (props) => (
 Bulk actions are actions that affect several records at once, like mass deletion for instance. In the `<Datagrid>` component, bulk actions are triggered by ticking the checkboxes in the first column of the table, then choosing an action from the bulk action menu. By default, all list views have a single bulk action, the bulk delete action. You can add other bulk actions by passing a custom element as the `bulkActions` prop of the `<List>` component:
 
 ```jsx
-import Button from 'material-ui/Button';
+import Button from '@material-ui/core/Button';
 import { BulkActions, BulkDeleteAction } from 'react-admin';
 import ResetViewsAction from './ResetViewsAction';
 
@@ -388,10 +388,10 @@ You can replace the default pagination element by your own, using the `paginatio
 So if you want to replace the default pagination by a "<previous - next>" pagination, create a pagination component like the following:
 
 ```jsx
-import Button from 'material-ui/Button';
+import Button from '@material-ui/core/Button';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
-import Toolbar from 'material-ui/Toolbar';
+import Toolbar from '@material-ui/core/Toolbar';
 
 const PostPagination = ({ page, perPage, total, setPage }) => {
     const nbPages = Math.ceil(total / perPage) || 1;
@@ -489,7 +489,7 @@ export const PostList = (props) => (
 **Tip**: If you want to override the `header` and `cell` styles independently for each column, use the `headerClassName` and `cellClassName` props in `<Field>` components. For instance, to hide a certain column on small screens:
 
 ```jsx
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
     hiddenOnSmallScreens: {
@@ -667,7 +667,10 @@ You'll need to create your own iterator component as follows:
 {% raw %}
 ```jsx
 // in src/comments.js
-import Card, { CardHeader, CardContent, CardActions } from 'material-ui/Card';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardHeader from '@material-ui/core/CardHeader';
 
 const cardStyle = {
     width: 300,

docs/Show.md

@@ -90,9 +90,8 @@ export const PostShow = (props) => (
 You can replace the list of default actions by your own element using the `actions` prop:
 
 ```jsx
-import { CardActions } from 'material-ui/Card';
-
-import Button from 'material-ui/Button';
+import CardActions from '@material-ui/core/CardActions';
+import Button from '@material-ui/core/Button';
 import { ListButton, EditButton, DeleteButton, RefreshButton } from 'react-admin';
 
 const cardActionStyle = {
@@ -213,8 +212,8 @@ Here's an example inside a `Show` view with a `SimpleShowLayout` and a custom `a
 
 {% raw %}
 ```jsx
-import { CardActions } from 'material-ui/Card';
-import Button from 'material-ui/Button';
+import CardActions from '@material-ui/core/CardActions';
+import Button from '@material-ui/core/Button';
 import { ListButton, EditButton, DeleteButton } from 'react-admin';
 
 const cardActionStyle = {