{"action":"created","issue":{"url":"https://api.github.com/repos/cloudflare/cf-ui/issues/147","repository_url":"https://api.github.com/repos/cloudflare/cf-ui","labels_url":"https://api.github.com/repos/cloudflare/cf-ui/issues/147/labels{/name}","comments_url":"https://api.github.com/repos/cloudflare/cf-ui/issues/147/comments","events_url":"https://api.github.com/repos/cloudflare/cf-ui/issues/147/events","html_url":"https://github.com/cloudflare/cf-ui/pull/147","id":219149669,"number":147,"title":"Spaced ButtonGroup","user":{"login":"tajo","id":1387913,"avatar_url":"https://avatars0.githubusercontent.com/u/1387913?v=3","gravatar_id":"","url":"https://api.github.com/users/tajo","html_url":"https://github.com/tajo","followers_url":"https://api.github.com/users/tajo/followers","following_url":"https://api.github.com/users/tajo/following{/other_user}","gists_url":"https://api.github.com/users/tajo/gists{/gist_id}","starred_url":"https://api.github.com/users/tajo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tajo/subscriptions","organizations_url":"https://api.github.com/users/tajo/orgs","repos_url":"https://api.github.com/users/tajo/repos","events_url":"https://api.github.com/users/tajo/events{/privacy}","received_events_url":"https://api.github.com/users/tajo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-04-04T06:11:42Z","updated_at":"2017-04-04T14:32:21Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/cloudflare/cf-ui/pulls/147","html_url":"https://github.com/cloudflare/cf-ui/pull/147","diff_url":"https://github.com/cloudflare/cf-ui/pull/147.diff","patch_url":"https://github.com/cloudflare/cf-ui/pull/147.patch"},"body":"The original button CSS styles had this rule:\r\n\r\n```css\r\n'& + &': {\r\n  marginLeft: '0.4rem'\r\n}\r\n```\r\n\r\nIf you put two cf-component-buttons next to each other, the right one would get the left margin. However, this selector doesn't work with Fela since all classNames are random and atomic. So we need a different solution.\r\n\r\nThis PR adds a new prop `spaced` to the component `<ButtonGroup>`, so if you want to have spaces between `<Button>`s wrap them by `<ButtonGroup spaced>...</ButtonGroup>`.\r\n\r\nAlso, I made the `styles` function a little bit cleaner with `...function()` replacing `Object.assign()`.\r\n\r\n<img width=\"704\" alt=\"screen shot 2017-04-03 at 11 05 07 pm\" src=\"https://cloud.githubusercontent.com/assets/1387913/24643398/92d16360-18c2-11e7-8dd1-36505b2043e7.png\">\r\n"},"comment":{"url":"https://api.github.com/repos/cloudflare/cf-ui/issues/comments/291518524","html_url":"https://github.com/cloudflare/cf-ui/pull/147#issuecomment-291518524","issue_url":"https://api.github.com/repos/cloudflare/cf-ui/issues/147","id":291518524,"user":{"login":"sejoker","id":125466,"avatar_url":"https://avatars2.githubusercontent.com/u/125466?v=3","gravatar_id":"","url":"https://api.github.com/users/sejoker","html_url":"https://github.com/sejoker","followers_url":"https://api.github.com/users/sejoker/followers","following_url":"https://api.github.com/users/sejoker/following{/other_user}","gists_url":"https://api.github.com/users/sejoker/gists{/gist_id}","starred_url":"https://api.github.com/users/sejoker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sejoker/subscriptions","organizations_url":"https://api.github.com/users/sejoker/orgs","repos_url":"https://api.github.com/users/sejoker/repos","events_url":"https://api.github.com/users/sejoker/events{/privacy}","received_events_url":"https://api.github.com/users/sejoker/received_events","type":"User","site_admin":false},"created_at":"2017-04-04T14:32:21Z","updated_at":"2017-04-04T14:32:21Z","body":"as an alternative we could use [monolithic class name](https://github.com/rofrischmann/fela/pull/204/files) and use it for '&+ customclass' styling. It's less code to support and compromise worth to consider."}}
{"actor":{"display_login":"sejoker"}}