{"action":"created","issue":{"url":"https://api.github.com/repos/rackerlabs/canon-react/issues/16","labels_url":"https://api.github.com/repos/rackerlabs/canon-react/issues/16/labels{/name}","comments_url":"https://api.github.com/repos/rackerlabs/canon-react/issues/16/comments","events_url":"https://api.github.com/repos/rackerlabs/canon-react/issues/16/events","html_url":"https://github.com/rackerlabs/canon-react/issues/16","id":86676826,"number":16,"title":"Popover","user":{"login":"adampickeral","id":1210971,"avatar_url":"https://avatars.githubusercontent.com/u/1210971?v=3","gravatar_id":"","url":"https://api.github.com/users/adampickeral","html_url":"https://github.com/adampickeral","followers_url":"https://api.github.com/users/adampickeral/followers","following_url":"https://api.github.com/users/adampickeral/following{/other_user}","gists_url":"https://api.github.com/users/adampickeral/gists{/gist_id}","starred_url":"https://api.github.com/users/adampickeral/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adampickeral/subscriptions","organizations_url":"https://api.github.com/users/adampickeral/orgs","repos_url":"https://api.github.com/users/adampickeral/repos","events_url":"https://api.github.com/users/adampickeral/events{/privacy}","received_events_url":"https://api.github.com/users/adampickeral/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"adampickeral","id":1210971,"avatar_url":"https://avatars.githubusercontent.com/u/1210971?v=3","gravatar_id":"","url":"https://api.github.com/users/adampickeral","html_url":"https://github.com/adampickeral","followers_url":"https://api.github.com/users/adampickeral/followers","following_url":"https://api.github.com/users/adampickeral/following{/other_user}","gists_url":"https://api.github.com/users/adampickeral/gists{/gist_id}","starred_url":"https://api.github.com/users/adampickeral/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adampickeral/subscriptions","organizations_url":"https://api.github.com/users/adampickeral/orgs","repos_url":"https://api.github.com/users/adampickeral/repos","events_url":"https://api.github.com/users/adampickeral/events{/privacy}","received_events_url":"https://api.github.com/users/adampickeral/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/rackerlabs/canon-react/milestones/2","html_url":"https://github.com/rackerlabs/canon-react/milestones/Release%20v%200.2.0","labels_url":"https://api.github.com/repos/rackerlabs/canon-react/milestones/2/labels","id":1155760,"number":2,"title":"Release v 0.2.0","description":"","creator":{"login":"adampickeral","id":1210971,"avatar_url":"https://avatars.githubusercontent.com/u/1210971?v=3","gravatar_id":"","url":"https://api.github.com/users/adampickeral","html_url":"https://github.com/adampickeral","followers_url":"https://api.github.com/users/adampickeral/followers","following_url":"https://api.github.com/users/adampickeral/following{/other_user}","gists_url":"https://api.github.com/users/adampickeral/gists{/gist_id}","starred_url":"https://api.github.com/users/adampickeral/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adampickeral/subscriptions","organizations_url":"https://api.github.com/users/adampickeral/orgs","repos_url":"https://api.github.com/users/adampickeral/repos","events_url":"https://api.github.com/users/adampickeral/events{/privacy}","received_events_url":"https://api.github.com/users/adampickeral/received_events","type":"User","site_admin":false},"open_issues":6,"closed_issues":0,"state":"open","created_at":"2015-06-08T21:07:35Z","updated_at":"2015-06-09T17:52:53Z","due_on":null,"closed_at":null},"comments":3,"created_at":"2015-06-09T17:41:44Z","updated_at":"2015-07-02T20:23:06Z","closed_at":null,"body":"http://rackerlabs.github.io/canon/ui-components/#popover\r\n\r\n# Design Considerations\r\nAs with most of the components in this library, the design for the popover is intended to be very dumb, i.e. any logic to display data within the popover is up to the consumer. Deciding when to hide the popover after some action is completed is also the responsibility of the consumer, but a callback is provided within this design. Showing and hiding the popover based on the click of a trigger or clicks outside of the popover is handled by the components in this design.\r\n\r\n## Components\r\n`PopoverTrigger`\r\n`Popover`\r\n`PopoverBody`\r\n`PopoverFooter`\r\n\r\n### `PopoverTrigger`\r\nThe `PopoverTrigger` is used to specify the component that will trigger the rendering of the popover as well as the popover to be rendered.\r\n\r\n###### Example\r\n```javascript\r\n<PopoverTrigger placement='right' popover={<SomePopover/>}>\r\n  <Button>Click Here</Button>\r\n</PopoverTrigger>\r\n```\r\nThe `PopoverTrigger` handles rendering the popover whenever the trigger is clicked, as well as hiding the popover whenever a click outside of the popover occurs, the `Escape` key is pressed, or the hide callback is invoked by the popover.\r\n\r\nThe 'placement' prop is used to position the popover relative to the trigger. This prop is also passed to the popover when it is rendered. The accepted values are:\r\n* `'right'`\r\n* `'left'`\r\n* `'bottom-right'`\r\n* `'bottom-left'`\r\n\r\nThe trigger itself is rendered with an `onClick` prop that is configured by the trigger which in decides when to show or hide the popover.\r\n\r\nThe `popover` prop is the actual popover component that will be displayed when the trigger is clicked. This component is rendered with a `placement` prop and a `hideCallback` prop. The `placement` prop must be passed down to the `Popover` component in order to properly position the arrow of the popover. The `hideCallback` prop should be called whenever some form processing has completed and the popover should be hidden, or as the value to the `onClick` prop of a cancel link.\r\n\r\n### `Popover`\r\nThe `Popover` class renders the outer markup of a popover, as well as the arrow of the popover. It accepts a `placement` prop which is used to determine the position of the arrow relative to the target at  which the popover will be pointing. The values accepted are the same as those of the `PopoverTrigger`.\r\n\r\n### `PopoverBody` and `PopoverFooter`\r\nThese components should be used together when displaying a popover that will do some sort of form processing. If a popover is only being used to display information, these components aren't needed. These components simple wrap their children in the appropriate markup for a popover form. They don't do any special processing of the children to be rendered. Any change of state of buttons rendered in the footer is the responsibility of the consumer to update. This allows for greater flexibility of what the body and footer can be composed of.\r\n\r\n## Example\r\n###### Render the Trigger\r\n```javascript\r\n<PopoverTrigger placement='right' popover={<UpdateNamePopover/>}>\r\n  <Button>Update Name</Button>\r\n</PopoverTrigger>\r\n```\r\n\r\n###### Popover\r\n```javascript\r\nvar UpdateNamePopover = React.createClass({\r\n  render: function () {\r\n    return (\r\n      <Popover placement={this.props.placement}>\r\n        <PopoverBody>\r\n          <form>\r\n           <label>Name</label>\r\n           <input type='text' />\r\n          </form>\r\n        </PopoverBody>\r\n        <PopoverFooter>\r\n          <Button type='primary' onClick={this._processSave}>Save</Button>\r\n          <Button type='link' onClick={this.props.hideCallback}>Cancel</Button>\r\n          <ProcessingIndicator hidden={true} />\r\n        </PopoverFooter>\r\n      </Popover>\r\n    );\r\n  },\r\n\r\n  _processSave: function () {\r\n    // set some state to toggle button states for processing of action\r\n    // perform some action, maybe through stores\r\n    // on successful action completion, invoke this.props.hideCallback\r\n  }\r\n});\r\n```"},"comment":{"url":"https://api.github.com/repos/rackerlabs/canon-react/issues/comments/118155192","html_url":"https://github.com/rackerlabs/canon-react/issues/16#issuecomment-118155192","issue_url":"https://api.github.com/repos/rackerlabs/canon-react/issues/16","id":118155192,"user":{"login":"jdrush89","id":955442,"avatar_url":"https://avatars.githubusercontent.com/u/955442?v=3","gravatar_id":"","url":"https://api.github.com/users/jdrush89","html_url":"https://github.com/jdrush89","followers_url":"https://api.github.com/users/jdrush89/followers","following_url":"https://api.github.com/users/jdrush89/following{/other_user}","gists_url":"https://api.github.com/users/jdrush89/gists{/gist_id}","starred_url":"https://api.github.com/users/jdrush89/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jdrush89/subscriptions","organizations_url":"https://api.github.com/users/jdrush89/orgs","repos_url":"https://api.github.com/users/jdrush89/repos","events_url":"https://api.github.com/users/jdrush89/events{/privacy}","received_events_url":"https://api.github.com/users/jdrush89/received_events","type":"User","site_admin":false},"created_at":"2015-07-02T20:23:06Z","updated_at":"2015-07-02T20:23:06Z","body":"Awesome!  You think the PopoverTrigger trigger logic should be generalized in the future into an OverlayTrigger and used elsewhere like ActionMenus?"}}