Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
louy committed Sep 27, 2015
2 parents 3cd46aa + b7b0b92 commit 9890af1
Show file tree
Hide file tree
Showing 125 changed files with 3,623 additions and 1,810 deletions.
22 changes: 22 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,25 @@
## 0.12.0
###### _Sep 25, 2015_

##### Breaking Changes
- Theming has been re-done so that material-ui components can be used without having to worry about passing a theme (all components implement a default theme) (#1662)
- There's now a concept of `mui theme` and `raw theme`, `mui theme` is produced from `raw theme`
- `ThemeManager` has been changed, no longer needs `new` in call
- `ThemeManager` produces `mui theme` from `raw theme`. Raw themes may be user-defined.
- Functions in `ThemeManager` allow to modify theme variables. Component-level styles may be overriden in the `mui theme`.
- See new documentation [here](http://material-ui.com/#/customization/themes)
- Function names in the context-pure mixin have been changed (#1711)
- `getContextProps()` has been changed to `getRelevantContextKeys()`

##### General
- Updated dependency of `react-tap-event-plugin` (#1714)

##### Component Fixes / Enhancements
- Dialog component (#1717)
- `actions` now has `id` property
- Fixed a bug in dialog where a faulty check caused an error in console
- Text field ipad scrolling in dialog

## 0.11.1
###### _Sep 15, 2015_

Expand Down
43 changes: 8 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,60 +41,33 @@ Material-UI was designed with the [Roboto](http://www.google.com/fonts/specimen/

## Usage

Once material-ui is included in your project, you can use the components this way:
Using material-ui components is very straightforward. Once material-ui is included in your project, you can use the components this way:

```js
// get constant references to React and Material-UI
// components, as we will not be modifying these
//Basic React component that renders a material-ui
//raised button with the text "Default"

const React = require('react');

// it is good practice to require only those components of
// Material-UI that your app needs, instead of requiring all of
// Material-UI. This will make your build process faster and
// your build output smaller

const RaisedButton = require('material-ui/lib/raised-button');

// see node_modules/material-ui/lib/index.js for a mapping of
// Material-UI components to require() calls

const MyAwesomeReactComponent = React.createClass({

childContextTypes: {
muiTheme: React.PropTypes.object
},

getChildContext() {
return {
muiTheme: ThemeManager.getCurrentTheme()
};
},

render() {
return (
<RaisedButton label="Default" />
);
}

},
});


module.exports = MyAwesomeReactComponent;

```

### Theme

**Please note that since v0.8.0, you also need to define a theme for components to start working.** For instructions on implementing and using themes, visit our [documentation](http://material-ui.com/#/customization/themes).

## Customization

Material-UI components have their styles defined inline. There are two approaches to overriding these styles:

* Override individual component styles via the `style` prop
* Define a Theme to apply overarching style changes
We have implemented a default theme to render all Material-UI components. Styling components to your liking is simple and hassle-free. This can be achieved in the following two ways:

This allows you to override variables used by components without having to modify material-ui source files directly.
* [Use a custom theme to style components](http://material-ui.com/#/customization/themes)
* [Override individual component styles via the `style` prop](http://material-ui.com/#/customization/inline-styles)

## Examples

Expand Down
2 changes: 1 addition & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "material-ui-docs",
"version": "0.11.1",
"version": "0.12.0",
"description": "Documentation site for material-ui",
"repository": {
"type": "git",
Expand Down
49 changes: 33 additions & 16 deletions docs/src/app/components/code-example/code-block.jsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,35 @@
let React = require('react');
let { Styles } = require('material-ui');
let { Spacing } = Styles;
const React = require('react');
const { Styles } = require('material-ui');
const { Spacing } = Styles;


class CodeBlock extends React.Component {
const CodeBlock = React.createClass({

constructor() {
super();
this.componentDidMount = this.componentDidMount.bind(this);
}
contextTypes : {
muiTheme: React.PropTypes.object
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

getChildContext () {
return {
muiTheme: this.state.muiTheme,
};
},

getInitialState () {
return {
muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
};
},

componentWillReceiveProps (nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
},

componentDidMount() {
var code = React.findDOMNode(this.refs.code);
Expand All @@ -21,21 +42,17 @@ class CodeBlock extends React.Component {
readOnly: true,
});
});
}
},

shouldComponentUpdate({children}, nextState){
return this.props.children !== children;
}
},

render() {
return (
<textarea ref="code" value={this.props.children} readOnly={true}/>
);
}
}

CodeBlock.contextTypes = {
muiTheme: React.PropTypes.object
}
},
});

module.exports = CodeBlock;
57 changes: 40 additions & 17 deletions docs/src/app/components/code-example/code-example.jsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,52 @@
let React = require('react');
const React = require('react');

let {
const {
ClearFix,
Paper,
Styles,
} = require('material-ui');

let {
const {
Spacing,
Typography,
} = Styles;

let CodeBlock = require('./code-block');
const CodeBlock = require('./code-block');
const ThemeManager = Styles.ThemeManager;
const DefaultRawTheme = Styles.LightRawTheme;

const CodeExample = React.createClass({

class CodeExample extends React.Component {
propTypes : {
code: React.PropTypes.string.isRequired,
layoutSideBySide: React.PropTypes.bool,
},

contextTypes : {
muiTheme: React.PropTypes.object
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

getChildContext () {
return {
muiTheme: this.state.muiTheme,
};
},

getInitialState () {
return {
muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
};
},

componentWillReceiveProps (nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
},

render() {

Expand All @@ -24,7 +56,7 @@ class CodeExample extends React.Component {
layoutSideBySide,
} = this.props;

let palette = this.context.muiTheme.palette;
let palette = this.state.muiTheme.rawTheme.palette;
let borderColor = palette.borderColor;
let canvasColor = palette.canvasColor;

Expand Down Expand Up @@ -59,16 +91,7 @@ class CodeExample extends React.Component {
<CodeBlock style={styles.codeBlock}>{code}</CodeBlock>
</Paper>
);
}
}

CodeExample.propTypes = {
code: React.PropTypes.string.isRequired,
layoutSideBySide: React.PropTypes.bool,
};

CodeExample.contextTypes = {
muiTheme: React.PropTypes.object
};
},
});

module.exports = CodeExample;
42 changes: 34 additions & 8 deletions docs/src/app/components/component-doc.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
let React = require('react');
let { ClearFix, Mixins, Styles } = require('material-ui');
let CodeExample = require('./code-example/code-example');
let ComponentInfo = require('./component-info');
let Typography = Styles.Typography;
let { Classable, StylePropable } = Mixins;
const React = require('react');
const { ClearFix, Mixins, Styles } = require('material-ui');
const CodeExample = require('./code-example/code-example');
const ComponentInfo = require('./component-info');
const Typography = Styles.Typography;
const { Classable, StylePropable } = Mixins;
const ThemeManager = Styles.ThemeManager;
const DefaultRawTheme = Styles.LightRawTheme;

let ComponentDoc = React.createClass({
const ComponentDoc = React.createClass({

mixins: [StylePropable],

Expand All @@ -22,8 +24,32 @@ let ComponentDoc = React.createClass({
componentInfo: React.PropTypes.array.isRequired
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

getChildContext () {
return {
muiTheme: this.state.muiTheme,
};
},

getInitialState () {
return {
muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
};
},

//to update theme inside state whenever a new theme is passed down
//from the parent / owner using context
componentWillReceiveProps (nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
},

getStyles() {
let borderColor = this.context.muiTheme.palette.borderColor;
let borderColor = this.state.muiTheme.rawTheme.palette.borderColor;
return {
desc: {
borderBottom: 'solid 1px ' + borderColor,
Expand Down
39 changes: 32 additions & 7 deletions docs/src/app/components/component-info.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
let React = require('react');
let { Mixins, Styles } = require('material-ui');
const React = require('react');
const { Mixins, Styles } = require('material-ui');

let { StyleResizable, StylePropable } = Mixins;
let { Typography, Spacing, Colors } = Styles;
const { StyleResizable, StylePropable } = Mixins;
const { Typography, Spacing, Colors } = Styles;
const ThemeManager = Styles.ThemeManager;
const DefaultRawTheme = Styles.LightRawTheme;


let ComponentInfo = React.createClass({
const ComponentInfo = React.createClass({

mixins: [StyleResizable, StylePropable],

Expand All @@ -18,9 +19,33 @@ let ComponentInfo = React.createClass({
infoArray: React.PropTypes.array.isRequired
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

getChildContext () {
return {
muiTheme: this.state.muiTheme,
};
},

getInitialState () {
return {
muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
};
},

//to update theme inside state whenever a new theme is passed down
//from the parent / owner using context
componentWillReceiveProps (nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
},

getStyles() {
let desktopGutter = Spacing.desktopGutter;
let borderColor = this.context.muiTheme.palette.borderColor;
let borderColor = this.state.muiTheme.rawTheme.palette.borderColor;
let styles = {
root: {
//.mui-font-style-subhead-1
Expand Down
Loading

0 comments on commit 9890af1

Please sign in to comment.