Theming improvement

[shaurya947]

Re-doing themes for version 0.12:

• Material-UI components can now be used without having to worry about theming. All components implement a default theme (light theme).
• Theme is passed down using context. Components use default theme iff an inherited theme is not found in context.
• There are now two "kinds" of themes: raw theme and material-ui theme. The raw theme is just a plain JS object defined in a file. It contains three keys, namely spacing, palette and fontFamily. The material-ui theme is a much bigger object, and is produced based on the raw theme. It contains a key for every material-ui component, and the corresponding value describes how that component is going to look under that particular theme. The material-ui theme also contains a reference to the raw theme object from which it was produced.
• The ThemeManager module has been modified. Now, it contains only the following functions that return a material-ui (mui) theme object:
  • getMuiTheme (rawTheme): this function takes in a raw theme object and returns the mui theme produced from it.
  • modifyRawThemeSpacing (muiTheme, newSpacing), modifyRawThemePalette (muiTheme, newPaletteKeys) and modifyRawThemeFontFamily (muiTheme, newFontFamily): these three functions are provided as modifiers for the raw theme. They take in the current mui theme object and the new information to be updated, and return a new, re-computed mui theme object. Providing these modifiers separately is an effort to keep the mui theme object immutable throughout the application.
• Inside a component, theme is part of state and should always be accessed using this.state.muiTheme. Reset the theme using this.setState(). This is consistent with the immutability approach as react components re-render whenever the state changes.
• Individual properties of the mui theme object may be overridden once the mui theme object has been calculated and obtained from the ThemeManager. For instance:

//initialize the state of your app component with an mui theme object
//based on the desired raw theme object
getInitialState () {
    return {
      muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme),
    };
},

//componentWillMount() is a good place to override specific theme attributes
//before your app component is rendered and the context is passed down
componentWillMount() {
    let newMuiTheme = this.state.muiTheme;
    newMuiTheme.inkBar.backgroundColor = Colors.yellow200;
    this.setState({
      muiTheme: newMuiTheme,
    });
},

//pass on this updated theme to children (material-ui components
//that you use in your app)
childContextTypes : {
    muiTheme: React.PropTypes.object
},

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

• Two raw themes are provided under lib/styles/raw-themes. Custom raw themes may be defined in a similar manner.
• All Material-UI components implement the following React lifecycle methods / static key:value pairs to support theming:
  • getInitialState(): the context is checked for a theme object here. If no theme is found, a default theme is applied.
  • contextTypes: to indicate that an muiTheme object is expected from the parent.
  • childContextTypes: to indicate that an muiTheme object will be passed down to children.
  • getChildContext(): to pass down the muiTheme object to the children.
  • componentWillReceiveProps(nextProps, nextContext): every time a new theme is passed down through the context, this method updates the state of the component with the new theme.
• To implement custom theming in an application that uses material-ui components, either a subset of the above mentioned React lifecycle methods / static key:value pairs can be implemented to pass on the theme, OR, the ThemeDecorator module can be used to decorate (ES7-style decorators) the app component. These are the two ways that we recommend that you go about theming for now.
  • If using ES7-style decorators, you must declare your React component using the ES6 class syntax; that is, you must define a class using the class keyword that extends React.Component (as opposed to using React.createClass).

[shaurya947]

Working on it @oliviertassinari .

[oliviertassinari]

@shaurya947 I can see this :p. You don't need to close the PR. A commit --amend or rebase -i should be enough.

[shaurya947]

@oliviertassinari I ran into some issues initially and I ranted about those on SO. Due to the process I had to follow (which was essentially a rebase but involved merging my master with callemall:master first), the other commits probably showed up. So I'm trying to reset, cherry-pick the commits, and then rebase.

Still getting used to troubleshooting git issues ^_^

[shaurya947]

@oliviertassinari should be good now. v0.12 is 2 commits behind master (your commit for the jsx-quotes rule and accompanying PR). So once v0.12 is updated I can rebase.

[oliviertassinari]

@shaurya947 Nice 👍