Skip to content

[styles] Remove the old styles modules #14560

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 6, 2019
Merged

[styles] Remove the old styles modules #14560

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
08ac17f
[styles] Remove the old styles modules
oliviertassinari Feb 22, 2019
cea8cb8
reviews
oliviertassinari Mar 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/scripts/buildApi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import generateMarkdown from '../src/modules/utils/generateMarkdown';
import { findPagesMarkdown, findComponents } from '../src/modules/utils/find';
import { getHeaders } from '../src/modules/utils/parseMarkdown';
import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme';
import getStylesCreator from '../../packages/material-ui/src/styles/getStylesCreator';
import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator';

function ensureExists(pat, mask, cb) {
mkdir(pat, mask, err => {
Expand Down
5 changes: 2 additions & 3 deletions docs/src/modules/components/AppWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import url from 'url';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { StylesProvider } from '@material-ui/styles';
import { StylesProvider, ThemeProvider } from '@material-ui/styles';
import acceptLanguage from 'accept-language';
import { lightTheme, darkTheme, setPrismTheme } from '@material-ui/docs/MarkdownElement/prism';
import { updatePageContext } from 'docs/src/modules/styles/getPageContext';
Expand Down Expand Up @@ -186,7 +185,7 @@ class AppWrapper extends React.Component {
sheetsManager={pageContext.sheetsManager}
sheetsRegistry={pageContext.sheetsRegistry}
>
<MuiThemeProvider theme={pageContext.theme}>{children}</MuiThemeProvider>
<ThemeProvider theme={pageContext.theme}>{children}</ThemeProvider>
<SideEffects />
</StylesProvider>
);
Expand Down
4 changes: 2 additions & 2 deletions docs/src/modules/components/DemoFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { create } from 'jss';
import { withStyles, jssPreset } from '@material-ui/core/styles';
import { StylesProvider } from '@material-ui/styles';
import { withStyles } from '@material-ui/core/styles';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought the old module was removed and we use

- import { withStyles } from '@material-ui/core/styles';
+ import { withStyles } from '@material-ui/styles';

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You made me think that I have forgotten the hook demos. I have done the following change:

-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';

So people can copy & paste the demos directly.

import { jssPreset, StylesProvider } from '@material-ui/styles';
import NoSsr from '@material-ui/core/NoSsr';
import rtl from 'jss-rtl';
import Frame from 'react-frame-component';
Expand Down
3 changes: 0 additions & 3 deletions docs/src/modules/components/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
// Use the same helper as Babel to avoid bundle bloat.
import 'core-js/modules/es6.array.find-index';
import 'core-js/modules/es6.set';
import { install } from '@material-ui/styles';

// Disable auto highlighting
// https://github.com/PrismJS/prism/issues/765
if (process.browser) {
window.Prism = window.Prism || {};
window.Prism.manual = true;
}

install();
7 changes: 4 additions & 3 deletions docs/src/pages/customization/overrides/DynamicThemeNesting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import Button from '@material-ui/core/Button';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import blue from '@material-ui/core/colors/blue';
import Switch from '@material-ui/core/Switch';
Expand Down Expand Up @@ -30,7 +31,7 @@ class DynamicThemeNesting extends React.Component {
}
label="Blue"
/>
<MuiThemeProvider
<ThemeProvider
theme={
this.state.color === 'blue'
? {
Expand All @@ -49,7 +50,7 @@ class DynamicThemeNesting extends React.Component {
<Button variant="contained" color="secondary">
{'Theme nesting'}
</Button>
</MuiThemeProvider>
</ThemeProvider>
</React.Fragment>
);
}
Expand Down
7 changes: 4 additions & 3 deletions docs/src/pages/customization/themes/CustomStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import Checkbox from '@material-ui/core/Checkbox';
import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
import { createMuiTheme, withStyles } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import orange from '@material-ui/core/colors/orange';

const styles = theme => ({
Expand Down Expand Up @@ -39,9 +40,9 @@ const theme = createMuiTheme({

function CustomStyles() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<CustomCheckbox />
</MuiThemeProvider>
</ThemeProvider>
);
}

Expand Down
7 changes: 4 additions & 3 deletions docs/src/pages/customization/themes/DarkTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import WithTheme from './WithTheme';

const theme = createMuiTheme({
Expand All @@ -10,9 +11,9 @@ const theme = createMuiTheme({

function DarkTheme() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<WithTheme />
</MuiThemeProvider>
</ThemeProvider>
);
}

Expand Down
7 changes: 4 additions & 3 deletions docs/src/pages/customization/themes/FontSizeTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';

const theme = createMuiTheme({
Expand All @@ -11,9 +12,9 @@ const theme = createMuiTheme({

function FontSizeTheme() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Typography>body1</Typography>
</MuiThemeProvider>
</ThemeProvider>
);
}

Expand Down
7 changes: 4 additions & 3 deletions docs/src/pages/customization/themes/OverridesCss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const theme = createMuiTheme({
Expand All @@ -23,9 +24,9 @@ const theme = createMuiTheme({

function OverridesCss() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Button>Overrides CSS</Button>
</MuiThemeProvider>
</ThemeProvider>
);
}

Expand Down
7 changes: 4 additions & 3 deletions docs/src/pages/customization/themes/OverridesProperties.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const theme = createMuiTheme({
Expand All @@ -14,9 +15,9 @@ const theme = createMuiTheme({

function OverridesProperties() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Button>Overrides properties</Button>
</MuiThemeProvider>
</ThemeProvider>
);
}

Expand Down
7 changes: 4 additions & 3 deletions docs/src/pages/customization/themes/Palette.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import purple from '@material-ui/core/colors/purple';
import Button from '@material-ui/core/Button';

Expand All @@ -12,10 +13,10 @@ const theme = createMuiTheme({

function Palette() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
</MuiThemeProvider>
</ThemeProvider>
);
}

Expand Down
11 changes: 6 additions & 5 deletions docs/src/pages/customization/themes/ThemeNesting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Checkbox from '@material-ui/core/Checkbox';
import orange from '@material-ui/core/colors/orange';
import green from '@material-ui/core/colors/green';
Expand All @@ -22,12 +23,12 @@ const innerTheme = createMuiTheme({

function ThemeNesting() {
return (
<MuiThemeProvider theme={outerTheme}>
<ThemeProvider theme={outerTheme}>
<Checkbox defaultChecked />
<MuiThemeProvider theme={innerTheme}>
<ThemeProvider theme={innerTheme}>
<Checkbox defaultChecked />
</MuiThemeProvider>
</MuiThemeProvider>
</ThemeProvider>
</ThemeProvider>
);
}

Expand Down
11 changes: 6 additions & 5 deletions docs/src/pages/customization/themes/ThemeNestingExtend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Checkbox from '@material-ui/core/Checkbox';
import orange from '@material-ui/core/colors/orange';
import green from '@material-ui/core/colors/green';
Expand All @@ -14,9 +15,9 @@ const outerTheme = createMuiTheme({

function ThemeNestingExtend() {
return (
<MuiThemeProvider theme={outerTheme}>
<ThemeProvider theme={outerTheme}>
<Checkbox defaultChecked />
<MuiThemeProvider
<ThemeProvider
theme={theme =>
createMuiTheme({
...theme,
Expand All @@ -31,8 +32,8 @@ function ThemeNestingExtend() {
>
<Checkbox defaultChecked color="primary" />
<Checkbox defaultChecked color="secondary" />
</MuiThemeProvider>
</MuiThemeProvider>
</ThemeProvider>
</ThemeProvider>
);
}

Expand Down
5 changes: 3 additions & 2 deletions docs/src/pages/customization/themes/TypographyTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles';
import { createMuiTheme, withStyles } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';

Expand Down Expand Up @@ -52,7 +53,7 @@ function TypographyTheme(props) {
return (
<div className={classes.root}>
{children}
<MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</div>
);
}
Expand Down
9 changes: 5 additions & 4 deletions docs/src/pages/demos/buttons/CustomizedButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
import { createMuiTheme, withStyles } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';
Expand Down Expand Up @@ -67,11 +68,11 @@ function CustomizedButtons(props) {
<Button variant="contained" color="primary" className={clsx(classes.margin, classes.cssRoot)}>
Custom CSS
</Button>
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Button variant="contained" color="primary" className={classes.margin}>
MuiThemeProvider
ThemeProvider
</Button>
</MuiThemeProvider>
</ThemeProvider>
<Button
variant="contained"
color="primary"
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/demos/buttons/CustomizedButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import clsx from 'clsx';
import {
createMuiTheme,
createStyles,
MuiThemeProvider,
Theme,
withStyles,
WithStyles,
} from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';
Expand Down Expand Up @@ -75,11 +75,11 @@ function CustomizedButtons(props: WithStyles<typeof styles>) {
<Button variant="contained" color="primary" className={clsx(classes.margin, classes.cssRoot)}>
Custom CSS
</Button>
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Button variant="contained" color="primary" className={classes.margin}>
MuiThemeProvider
ThemeProvider
</Button>
</MuiThemeProvider>
</ThemeProvider>
<Button
variant="contained"
color="primary"
Expand Down
11 changes: 6 additions & 5 deletions docs/src/pages/demos/text-fields/CustomizedInputs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { withStyles, createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Input from '@material-ui/core/Input';
import InputBase from '@material-ui/core/InputBase';
import { fade } from '@material-ui/core/styles/colorManipulator';
Expand Down Expand Up @@ -136,20 +137,20 @@ function CustomizedInputs(props) {
id="custom-css-outlined-input"
/>

<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<TextField
className={classes.margin}
label="MuiThemeProvider"
label="ThemeProvider"
id="mui-theme-provider-standard-input"
/>

<TextField
className={classes.margin}
label="MuiThemeProvider"
label="ThemeProvider"
variant="outlined"
id="mui-theme-provider-outlined-input"
/>
</MuiThemeProvider>
</ThemeProvider>
<FormControl className={classes.margin}>
<InputLabel shrink htmlFor="bootstrap-input" className={classes.bootstrapFormLabel}>
Bootstrap
Expand Down
10 changes: 5 additions & 5 deletions docs/src/pages/demos/text-fields/CustomizedInputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import {
Theme,
withStyles,
WithStyles,
MuiThemeProvider,
createMuiTheme,
} from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Input from '@material-ui/core/Input';
import InputBase from '@material-ui/core/InputBase';
import { fade } from '@material-ui/core/styles/colorManipulator';
Expand Down Expand Up @@ -145,19 +145,19 @@ function CustomizedInputs(props: Props) {
variant="outlined"
id="custom-css-outlined-input"
/>
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<TextField
className={classes.margin}
label="MuiThemeProvider"
label="ThemeProvider"
id="mui-theme-provider-standard-input"
/>
<TextField
className={classes.margin}
label="MuiThemeProvider"
label="ThemeProvider"
variant="outlined"
id="mui-theme-provider-outlined-input"
/>
</MuiThemeProvider>
</ThemeProvider>
<FormControl className={classes.margin}>
<InputLabel shrink htmlFor="bootstrap-input" className={classes.bootstrapFormLabel}>
Bootstrap
Expand Down
Loading