Skip to content

Commit 5375f96

Browse files
oliviertassinarioliviertassinari
committed
[styles] Remove the old styles modules
1 parent ebd0d1f commit 5375f96

File tree

102 files changed

+1459
-3771
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+1459
-3771
lines changed

‎CHANGELOG.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ Remove the deprecated button flat, raised and fab variants:
159159
#### Changes
160160

161161
- [core] Increase React peer dependency to v16.8.0 (#14432) @oliviertassinari
162-
- [Slider] Fix a11y issues with the handle (#14461) @eps1lon
162+
- [Slider] Fix a11y issues with the handle (#14461) @eps1lon
163163

164164
### Docs
165165

‎docs/scripts/buildApi.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import generateMarkdown from '../src/modules/utils/generateMarkdown';
88
import { findPagesMarkdown, findComponents } from '../src/modules/utils/find';
99
import { getHeaders } from '../src/modules/utils/parseMarkdown';
1010
import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme';
11-
import getStylesCreator from '../../packages/material-ui/src/styles/getStylesCreator';
11+
import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator';
1212

1313
function ensureExists(pat, mask, cb) {
1414
mkdir(pat, mask, err => {

‎docs/src/modules/components/AppWrapper.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import { connect } from 'react-redux';
44
import url from 'url';
5-
import { MuiThemeProvider } from '@material-ui/core/styles';
6-
import { StylesProvider } from '@material-ui/styles';
5+
import { ThemeProvider, StylesProvider } from '@material-ui/styles';
76
import acceptLanguage from 'accept-language';
87
import { lightTheme, darkTheme, setPrismTheme } from '@material-ui/docs/MarkdownElement/prism';
98
import { updatePageContext } from 'docs/src/modules/styles/getPageContext';
@@ -187,7 +186,7 @@ class AppWrapper extends React.Component {
187186
sheetsManager={pageContext.sheetsManager}
188187
sheetsRegistry={pageContext.sheetsRegistry}
189188
>
190-
<MuiThemeProvider theme={pageContext.theme}>{children}</MuiThemeProvider>
189+
<ThemeProvider theme={pageContext.theme}>{children}</ThemeProvider>
191190
<SideEffects />
192191
</StylesProvider>
193192
);

‎docs/src/modules/components/bootstrap.js

-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
// Use the same helper as Babel to avoid bundle bloat.
22
import 'core-js/modules/es6.array.find-index';
33
import 'core-js/modules/es6.set';
4-
import { install } from '@material-ui/styles';
54

65
// Disable auto highlighting
76
// https://github.com/PrismJS/prism/issues/765
87
if (process.browser) {
98
window.Prism = window.Prism || {};
109
window.Prism.manual = true;
1110
}
12-
13-
install();

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ DeepChildRaw.propTypes = {
1111
theme: PropTypes.object.isRequired,
1212
};
1313

14-
const DeepChild = withTheme()(DeepChildRaw);
14+
const DeepChild = withTheme(DeepChildRaw);
1515

1616
function WithTheme() {
1717
return (

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@ class MyComponent extends React.Component {
285285
export default MyComponent
286286
```
287287

288-
## `withTheme()(Component) => Component`
288+
## `withTheme(Component) => Component`
289289

290290
Provide the `theme` object as a property of the input component so it can be used
291291
in the render method.
@@ -308,5 +308,5 @@ function MyComponent(props) {
308308
return <div>{props.theme.direction}</div>;
309309
}
310310

311-
export default withTheme()(MyComponent);
311+
export default withTheme(MyComponent);
312312
```

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

-23
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@
22

33
<p class="description">You can leverage our styling solution, even if you are not using our components.</p>
44

5-
> ⚠️ `@material-ui/styles` is unstable (alpha version).
6-
Hopefully, we will make it the default style implementation for the core components in Material-UI v4.
7-
[Follow this path](/customization/css-in-js/) to read the documentation
8-
of the default style implementation.
9-
105
Material-UI aims to provide strong foundations for building dynamic UIs.
116
For the sake of simplicity, **we expose our styling solution to users**.
127
You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions.
@@ -41,24 +36,6 @@ npm install @material-ui/styles
4136
yarn add @material-ui/styles
4237
```
4338

44-
### Migration for `@material-ui/core` users
45-
46-
To switch from the default style implementation to this newest version, you need to execute the following code **before importing any** Material-UI's components:
47-
48-
```js
49-
import { install } from '@material-ui/styles';
50-
51-
install();
52-
```
53-
54-
It is **recommended** to place the above code in a separate file (e.g. `bootstrap.js`) and to import it in your application's entry point (e.g. `index.js`).
55-
This ensures that the installation is executed before anything else, because ECMAScript imports are hoisted to the top of the module. If the installation step is not performed correctly the resulting build could have conflicting class names.
56-
57-
We will make `@material-ui/styles` the default style implementation for the core components in Material-UI v4. This installation step is **temporary**.
58-
Behind the scenes, the `install()` function switches the styling engine the core components use.
59-
60-
Also, the `@material-ui/core/MuiThemeProvider` component can be replaced with `@material-ui/styles/ThemeProvider`. We will remove this component in v4.
61-
6239
## Getting started
6340

6441
We provide 3 different APIs. They all share the same underlying logic.

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import Button from '@material-ui/core/Button';
3-
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
3+
import { createMuiTheme } from '@material-ui/core/styles';
4+
import { ThemeProvider } from '@material-ui/styles';
45
import FormControlLabel from '@material-ui/core/FormControlLabel';
56
import blue from '@material-ui/core/colors/blue';
67
import Switch from '@material-ui/core/Switch';
@@ -30,7 +31,7 @@ class DynamicThemeNesting extends React.Component {
3031
}
3132
label="Blue"
3233
/>
33-
<MuiThemeProvider
34+
<ThemeProvider
3435
theme={
3536
this.state.color === 'blue'
3637
? {
@@ -49,7 +50,7 @@ class DynamicThemeNesting extends React.Component {
4950
<Button variant="contained" color="secondary">
5051
{'Theme nesting'}
5152
</Button>
52-
</MuiThemeProvider>
53+
</ThemeProvider>
5354
</React.Fragment>
5455
);
5556
}

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import Checkbox from '@material-ui/core/Checkbox';
4-
import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
4+
import { createMuiTheme, withStyles } from '@material-ui/core/styles';
5+
import { ThemeProvider } from '@material-ui/styles';
56
import orange from '@material-ui/core/colors/orange';
67

78
const styles = theme => ({
@@ -40,9 +41,9 @@ const theme = createMuiTheme({
4041

4142
function CustomStyles() {
4243
return (
43-
<MuiThemeProvider theme={theme}>
44+
<ThemeProvider theme={theme}>
4445
<CustomCheckbox />
45-
</MuiThemeProvider>
46+
</ThemeProvider>
4647
);
4748
}
4849

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
2+
import { createMuiTheme } from '@material-ui/core/styles';
3+
import { ThemeProvider } from '@material-ui/styles';
34
import WithTheme from './WithTheme';
45

56
const theme = createMuiTheme({
@@ -11,9 +12,9 @@ const theme = createMuiTheme({
1112

1213
function DarkTheme() {
1314
return (
14-
<MuiThemeProvider theme={theme}>
15+
<ThemeProvider theme={theme}>
1516
<WithTheme />
16-
</MuiThemeProvider>
17+
</ThemeProvider>
1718
);
1819
}
1920

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
2+
import { createMuiTheme } from '@material-ui/core/styles';
3+
import { ThemeProvider } from '@material-ui/styles';
34
import Typography from '@material-ui/core/Typography';
45

56
const theme = createMuiTheme({
@@ -12,9 +13,9 @@ const theme = createMuiTheme({
1213

1314
function FontSizeTheme() {
1415
return (
15-
<MuiThemeProvider theme={theme}>
16+
<ThemeProvider theme={theme}>
1617
<Typography>body1</Typography>
17-
</MuiThemeProvider>
18+
</ThemeProvider>
1819
);
1920
}
2021

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
2+
import { createMuiTheme } from '@material-ui/core/styles';
3+
import { ThemeProvider } from '@material-ui/styles';
34
import Button from '@material-ui/core/Button';
45

56
const theme = createMuiTheme({
@@ -24,9 +25,9 @@ const theme = createMuiTheme({
2425

2526
function OverridesCss() {
2627
return (
27-
<MuiThemeProvider theme={theme}>
28+
<ThemeProvider theme={theme}>
2829
<Button>Overrides CSS</Button>
29-
</MuiThemeProvider>
30+
</ThemeProvider>
3031
);
3132
}
3233

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
2+
import { createMuiTheme } from '@material-ui/core/styles';
3+
import { ThemeProvider } from '@material-ui/styles';
34
import Button from '@material-ui/core/Button';
45

56
const theme = createMuiTheme({
@@ -15,9 +16,9 @@ const theme = createMuiTheme({
1516

1617
function OverridesProperties() {
1718
return (
18-
<MuiThemeProvider theme={theme}>
19+
<ThemeProvider theme={theme}>
1920
<Button>Overrides properties</Button>
20-
</MuiThemeProvider>
21+
</ThemeProvider>
2122
);
2223
}
2324

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
2+
import { createMuiTheme } from '@material-ui/core/styles';
3+
import { ThemeProvider } from '@material-ui/styles';
34
import purple from '@material-ui/core/colors/purple';
45
import Button from '@material-ui/core/Button';
56

@@ -13,10 +14,10 @@ const theme = createMuiTheme({
1314

1415
function Palette() {
1516
return (
16-
<MuiThemeProvider theme={theme}>
17+
<ThemeProvider theme={theme}>
1718
<Button color="primary">Primary</Button>
1819
<Button color="secondary">Secondary</Button>
19-
</MuiThemeProvider>
20+
</ThemeProvider>
2021
);
2122
}
2223

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
2+
import { createMuiTheme } from '@material-ui/core/styles';
3+
import { ThemeProvider } from '@material-ui/styles';
34
import Checkbox from '@material-ui/core/Checkbox';
45
import orange from '@material-ui/core/colors/orange';
56
import green from '@material-ui/core/colors/green';
@@ -24,12 +25,12 @@ const innerTheme = createMuiTheme({
2425

2526
function ThemeNesting() {
2627
return (
27-
<MuiThemeProvider theme={outerTheme}>
28+
<ThemeProvider theme={outerTheme}>
2829
<Checkbox defaultChecked />
29-
<MuiThemeProvider theme={innerTheme}>
30+
<ThemeProvider theme={innerTheme}>
3031
<Checkbox defaultChecked />
31-
</MuiThemeProvider>
32-
</MuiThemeProvider>
32+
</ThemeProvider>
33+
</ThemeProvider>
3334
);
3435
}
3536

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
2+
import { createMuiTheme } from '@material-ui/core/styles';
3+
import { ThemeProvider } from '@material-ui/styles';
34
import Checkbox from '@material-ui/core/Checkbox';
45
import orange from '@material-ui/core/colors/orange';
56
import green from '@material-ui/core/colors/green';
@@ -15,9 +16,9 @@ const outerTheme = createMuiTheme({
1516

1617
function ThemeNestingExtend() {
1718
return (
18-
<MuiThemeProvider theme={outerTheme}>
19+
<ThemeProvider theme={outerTheme}>
1920
<Checkbox defaultChecked />
20-
<MuiThemeProvider
21+
<ThemeProvider
2122
theme={theme =>
2223
createMuiTheme({
2324
...theme,
@@ -32,8 +33,8 @@ function ThemeNestingExtend() {
3233
>
3334
<Checkbox defaultChecked color="primary" />
3435
<Checkbox defaultChecked color="secondary" />
35-
</MuiThemeProvider>
36-
</MuiThemeProvider>
36+
</ThemeProvider>
37+
</ThemeProvider>
3738
);
3839
}
3940

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { MuiThemeProvider, createMuiTheme, withStyles } from '@material-ui/core/styles';
3+
import { createMuiTheme, withStyles } from '@material-ui/core/styles';
4+
import { ThemeProvider } from '@material-ui/styles';
45
import Typography from '@material-ui/core/Typography';
56
import Button from '@material-ui/core/Button';
67

@@ -53,7 +54,7 @@ function TypographyTheme(props) {
5354
return (
5455
<div className={classes.root}>
5556
{children}
56-
<MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
57+
<ThemeProvider theme={theme}>{children}</ThemeProvider>
5758
</div>
5859
);
5960
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,4 @@ WithTheme.propTypes = {
3333
theme: PropTypes.object.isRequired,
3434
};
3535

36-
export default withTheme()(WithTheme); // Let's get the theme as a property
36+
export default withTheme(WithTheme); // Let's get the theme as a property

0 commit comments

Comments
 (0)