{"action":"created","issue":{"url":"https://api.github.com/repos/FormidableLabs/radium/issues/80","labels_url":"https://api.github.com/repos/FormidableLabs/radium/issues/80/labels{/name}","comments_url":"https://api.github.com/repos/FormidableLabs/radium/issues/80/comments","events_url":"https://api.github.com/repos/FormidableLabs/radium/issues/80/events","html_url":"https://github.com/FormidableLabs/radium/issues/80","id":60399375,"number":80,"title":"Eliminate getBrowserStateEvents and buildStyles","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":{"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},"milestone":null,"comments":16,"created_at":"2015-03-09T19:50:19Z","updated_at":"2015-04-28T21:30:56Z","closed_at":"2015-04-28T18:27:15Z","body":" I've been thinking a lot about how we can simplify the API surface of Radium. As we've already seen from #76, it can be burdensome to remember to add getBrowserStateEvents and then wire up your own handlers. It is also not ideal to have to call buildStyles. Further, Radium only allows you to style a single element in the component (correct me if I'm wrong).\r\n\r\nThe only way to simplify this API is by somehow wrapping the render functions. There are a ton of ways to accomplish this, and they don't necessarily require monkeypatching createClass. I've been playing around with my own inline style helper, jokingly named Cesium: https://github.com/ianobermiller/nuclearmail/blob/master/src/js/Cesium.js. The main goals of Cesium are to:\r\n- Be compatible with normal inline styles (you only include Cesium if you want interactivity or vendor prefixing)\r\n- Be as simple and foolproof as possible to use\r\n\r\nThe syntax I'm currently using looks like this, simplified for the example. Note that the only differences between using normal inline styles are: 1) `Cesium.wrap` inside of `createClass`, and 2) `':hover'` prop with a style object value (this is basically a more concise version of `modifiers: { hover: { ... } }`\r\n\r\n```js\r\nvar Button = React.createClass(Cesium.wrap({\r\n  propTypes: {\r\n    onClick: PropTypes.func,\r\n  },\r\n  _onClick() {\r\n    this.props.onClick && this.props.onClick();\r\n  },\r\n\r\n  render(): any {\r\n    return (\r\n      <button type=\"button\" style={styles.root} onClick={this._onClick}>\r\n        {this.props.children}\r\n      </button>\r\n    );\r\n  }\r\n}));\r\n\r\nvar styles = {\r\n  root: {\r\n    background: Colors.gray1,\r\n\r\n    ':hover': {\r\n      background: Colors.gray1.darken(5),\r\n    },\r\n\r\n    ':active': {\r\n      background: Colors.gray1.darken(10),\r\n    },\r\n  },\r\n};\r\n```\r\n\r\nThe main idea here is that you don't need `getBrowserStateEvents` and `buildStyles`. `Cesium.wrap` wraps the `render` method, walks the result of the original render, and updates styles/adds handlers as appropriate.\r\n\r\nIn the simple case of one interactive component, you don't need anything more than this. If you want to style multiple elements in a single component, you have to specify a unique `ref` or `key` for each one, to correlate the interactive state from the event handlers.\r\n\r\nI'd love to see these ideas make their way into Radium. Thoughts?\r\n"},"comment":{"url":"https://api.github.com/repos/FormidableLabs/radium/issues/comments/97216388","html_url":"https://github.com/FormidableLabs/radium/issues/80#issuecomment-97216388","issue_url":"https://api.github.com/repos/FormidableLabs/radium/issues/80","id":97216388,"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-28T21:30:56Z","updated_at":"2015-04-28T21:30:56Z","body":"@benoneal: I'm sorry to hear that. Could you open a new issue with the example you mentioned? It would be really helpful to see some details and try to figure out how we can make things better.\r\n\r\nThe new API makes the authoring experience quite a bit different, but we definitely don't want to make any existing use cases more difficult because of it."}}