montagejs/montage — pull request #1295 by asolove (2013-09-11 14:09:27+00:00)
Title: Component styles

:warning: You probably don't want to merge this yet.

**What's done**

- Add a map of style axes to Component, configurable via properties or bindings.
- Automatically add/remove CSS classes for the current value of each axis.

**What's not done**

- Supported axes and values are configured in the blueprint, so right now at runtime the Component has no idea about which axes are supported, and what the default and valid values are. So you have to specify values for all style axes in the serialization. Options: leave it how it is, read the blueprint in at runtime, duplicate the declarations in the class file, or ...?
- Right now the classes added are not namespaced to the component, e.g. you'll get ```style--size-small``` rather than ```digit-Button--size-small``` because the default className is not exposed by widgets yet. Is it ok to add a magic ```componentClassName``` property that component authors can fill in and that defaults to the string name of the constructor?

**What it looks like**
```javascript
"button": {
"properties": {
"styles": {
"size": "large"
},
},
"bindings": {
"styles.get('enabled')": { "<-": "@form.valid" }
}
}
```