{"action":"created","issue":{"url":"https://api.github.com/repos/FormidableLabs/radium/issues/82","labels_url":"https://api.github.com/repos/FormidableLabs/radium/issues/82/labels{/name}","comments_url":"https://api.github.com/repos/FormidableLabs/radium/issues/82/comments","events_url":"https://api.github.com/repos/FormidableLabs/radium/issues/82/events","html_url":"https://github.com/FormidableLabs/radium/issues/82","id":60448614,"number":82,"title":"Eliminate modifiers","user":{"login":"ianobermiller","id":897931,"avatar_url":"https://avatars.githubusercontent.com/u/897931?v=3","gravatar_id":"","url":"https://api.github.com/users/ianobermiller","html_url":"https://github.com/ianobermiller","followers_url":"https://api.github.com/users/ianobermiller/followers","following_url":"https://api.github.com/users/ianobermiller/following{/other_user}","gists_url":"https://api.github.com/users/ianobermiller/gists{/gist_id}","starred_url":"https://api.github.com/users/ianobermiller/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ianobermiller/subscriptions","organizations_url":"https://api.github.com/users/ianobermiller/orgs","repos_url":"https://api.github.com/users/ianobermiller/repos","events_url":"https://api.github.com/users/ianobermiller/events{/privacy}","received_events_url":"https://api.github.com/users/ianobermiller/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/FormidableLabs/radium/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2015-03-10T04:11:45Z","updated_at":"2015-04-28T18:26:38Z","closed_at":"2015-04-28T18:26:38Z","body":"In my quest to simplify Radium, I propose we eliminate modifiers. Instead, if we implement something like #80, we can make the style object accept an array, and apply provided styles in order (ignoring non-object ones) [1]. Also, in this way, the component author can choose whether or not to include this.props.style. Finally, each state can specify :hover or :active states, and the merging would have to be somewhat intelligent about it [2]. I posit that this behavior is less magical than modifiers, and much more explicit & flexible.\r\n\r\n[1]\r\n```js\r\nvar Button = React.createClass(Cesium.wrap({\r\n  propTypes: {\r\n    use: PropTypes.oneOf(['default', 'special']),\r\n    style: PropTypes.object,\r\n  },\r\n\r\n  render(): any {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        style={[\r\n          styles.root,\r\n          (this.props.use === 'default') && styles.default,\r\n          (this.props.use === 'special') && styles.special,\r\n          this.props.style\r\n        ]} />\r\n    );\r\n  }\r\n}));\r\n\r\nvar styles = {\r\n  root: {\r\n    border: 'none',\r\n    borderRadius: '2px',\r\n    cursor: 'pointer',\r\n    lineHeight: '30px',\r\n    margin: 0,\r\n    padding: '1px 16px',\r\n    verticalAlign: 'top',\r\n\r\n    ':active': {\r\n      padding: '2px 15px 0 17px',\r\n    },\r\n  },\r\n\r\n  default: {\r\n    background: Colors.gray1,\r\n    color: Colors.black,\r\n\r\n    ':hover': {\r\n      background: Colors.gray1.darken(5),\r\n    },\r\n  },\r\n\r\n  special: {\r\n    background: Colors.accent,\r\n    color: Colors.white,\r\n\r\n    ':hover': {\r\n      background: Colors.accent.darken(5),\r\n    },\r\n  },\r\n};\r\n```\r\n\r\n[2]\r\n```js\r\n// Merge style objects. Special casing for props starting with ';'; the values\r\n// should be objects, and are merged with others of the same name (instead of\r\n// overwriting).\r\nfunction _mergeStyles(...styles: Array<Object|boolean>): any {\r\n  var styleProp = {};\r\n\r\n  styles.forEach(style => {\r\n    if (!style || typeof style !== 'object') {\r\n      return;\r\n    }\r\n\r\n    var styleObj: Object = style; // flow :(\r\n\r\n    Object.keys(styleObj).forEach(name => {\r\n      if (name.indexOf(':') === 0) {\r\n        styleProp[name] = styleProp[name] || {};\r\n        Object.assign(styleProp[name], styleObj[name]);\r\n      } else {\r\n        styleProp[name] = styleObj[name];\r\n      }\r\n    });\r\n  });\r\n\r\n  return styleProp;\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/FormidableLabs/radium/issues/comments/97162701","html_url":"https://github.com/FormidableLabs/radium/issues/82#issuecomment-97162701","issue_url":"https://api.github.com/repos/FormidableLabs/radium/issues/82","id":97162701,"user":{"login":"alexlande","id":808159,"avatar_url":"https://avatars.githubusercontent.com/u/808159?v=3","gravatar_id":"","url":"https://api.github.com/users/alexlande","html_url":"https://github.com/alexlande","followers_url":"https://api.github.com/users/alexlande/followers","following_url":"https://api.github.com/users/alexlande/following{/other_user}","gists_url":"https://api.github.com/users/alexlande/gists{/gist_id}","starred_url":"https://api.github.com/users/alexlande/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexlande/subscriptions","organizations_url":"https://api.github.com/users/alexlande/orgs","repos_url":"https://api.github.com/users/alexlande/repos","events_url":"https://api.github.com/users/alexlande/events{/privacy}","received_events_url":"https://api.github.com/users/alexlande/received_events","type":"User","site_admin":false},"created_at":"2015-04-28T18:26:38Z","updated_at":"2015-04-28T18:26:38Z","body":"Done!"}}