{"action":"created","comment":{"url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/comments/185624172","pull_request_review_id":117051372,"id":185624172,"diff_hunk":"@@ -0,0 +1,119 @@\n+// @flow\n+import * as React from \"react\";\n+import {StyleSheet, css} from \"aphrodite\";\n+\n+import Color from \"wonder-blocks-color\";\n+import {View} from \"wonder-blocks-core\";\n+import {Grid, Row, Cell, FlexCell, GRID_MODAL_SPEC} from \"wonder-blocks-grid\";\n+\n+import ModalCloseButton from \"./modal-close-button.js\";\n+import ModalFooter from \"./modal-footer.js\";\n+\n+/**\n+ * A one-column modal layout.\n+ */\n+export default class OneColumnModal extends React.Component<{\n+    /**\n+     * Called when the close button is clicked.\n+     *\n+     * If you're using `ModalLauncher`, you probably shouldn't use this prop!\n+     * Instead, to listen for when the modal closes, add an `onClose` handler\n+     * to the `ModalLauncher`.\n+     *\n+     * This defaults to a no-op via `defaultProps`. (When used in a\n+     * `ModalLauncher`, we'll automatically add an extra listener here via\n+     * `cloneElement`, so that the `ModalLauncher` can listen for close button\n+     * clicks too.)\n+     */\n+    onClickCloseButton: () => void,\n+\n+    /** The footer to show under the contents. */\n+    footer?: React.Node,\n+\n+    /** The contents of the modal. */\n+    content: React.Node,\n+}> {\n+    static defaultProps = {\n+        onClickCloseButton: () => {},\n+    };\n+\n+    render() {\n+        const {footer, content} = this.props;\n+\n+        return (\n+            <View style={styles.container}>\n+                <Grid spec={GRID_MODAL_SPEC}>\n+                    <Row flush>\n+                        <FlexCell style={[styles.column, styles.bgContents]}>\n+                            <View\n+                                style={[\n+                                    styles.contents,\n+                                    footer && styles.contentsHasFooter,\n+                                ]}\n+                            >\n+                                {content}\n+                            </View>\n+                            {footer && (\n+                                <ModalFooter style={styles.footer}>\n+                                    {footer}\n+                                </ModalFooter>\n+                            )}\n+                        </FlexCell>\n+                    </Row>\n+                </Grid>\n+                <View style={styles.closeButton}>\n+                    <ModalCloseButton\n+                        color=\"dark\"\n+                        onClick={this.props.onClickCloseButton}\n+                    />\n+                </View>\n+            </View>\n+        );\n+    }\n+}\n+\n+const styles = StyleSheet.create({\n+    container: {\n+        margin: \"0 auto\",\n+        position: \"relative\",\n+\n+        width: \"64.65%\",\n+\n+        borderRadius: 4,\n+        overflow: \"hidden\",\n+    },\n+\n+    closeButton: {\n+        position: \"absolute\",\n+        left: 4,\n+        top: 8,\n+    },\n+\n+    column: {\n+        paddingTop: 64,\n+        paddingBottom: 64,\n+        flex: \"1 1 50%\",\n+        boxSizing: \"border-box\",\n+    },\n+\n+    bgContents: {\n+        background: Color.white,\n+        position: \"relative\",\n+        flexDirection: \"column\",\n+    },\n+\n+    contents: {\n+        overflow: \"auto\",\n+        flex: \"1 0 0\",\n+    },\n+\n+    contentsHasFooter: {\n+        paddingBottom: 48,\n+    },\n+\n+    footer: {\n+        position: \"absolute\",","path":"packages/wonder-blocks-modal/components/one-column-modal.js","position":115,"original_position":115,"commit_id":"222d9fc916610553905fa82c97e54c9dce998edd","original_commit_id":"222d9fc916610553905fa82c97e54c9dce998edd","user":{"login":"jeresig","id":1615,"avatar_url":"https://avatars0.githubusercontent.com/u/1615?v=4","gravatar_id":"","url":"https://api.github.com/users/jeresig","html_url":"https://github.com/jeresig","followers_url":"https://api.github.com/users/jeresig/followers","following_url":"https://api.github.com/users/jeresig/following{/other_user}","gists_url":"https://api.github.com/users/jeresig/gists{/gist_id}","starred_url":"https://api.github.com/users/jeresig/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeresig/subscriptions","organizations_url":"https://api.github.com/users/jeresig/orgs","repos_url":"https://api.github.com/users/jeresig/repos","events_url":"https://api.github.com/users/jeresig/events{/privacy}","received_events_url":"https://api.github.com/users/jeresig/received_events","type":"User","site_admin":false},"body":"Yeah, this is to escape the padding - and unfortunately it's not possible to move it outside (I would've loved to have done this!) as its positioning is also defined by the grid system 😭 ","created_at":"2018-05-02T20:12:56Z","updated_at":"2018-05-02T20:12:56Z","html_url":"https://github.com/Khan/wonder-blocks/pull/62#discussion_r185624172","pull_request_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/62","author_association":"OWNER","_links":{"self":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/comments/185624172"},"html":{"href":"https://github.com/Khan/wonder-blocks/pull/62#discussion_r185624172"},"pull_request":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/62"}},"in_reply_to_id":185601025},"pull_request":{"url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/62","id":185482700,"html_url":"https://github.com/Khan/wonder-blocks/pull/62","diff_url":"https://github.com/Khan/wonder-blocks/pull/62.diff","patch_url":"https://github.com/Khan/wonder-blocks/pull/62.patch","issue_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/62","number":62,"state":"open","locked":false,"title":"Use the Grid for the one and two-column modal dialogs.","user":{"login":"jeresig","id":1615,"avatar_url":"https://avatars0.githubusercontent.com/u/1615?v=4","gravatar_id":"","url":"https://api.github.com/users/jeresig","html_url":"https://github.com/jeresig","followers_url":"https://api.github.com/users/jeresig/followers","following_url":"https://api.github.com/users/jeresig/following{/other_user}","gists_url":"https://api.github.com/users/jeresig/gists{/gist_id}","starred_url":"https://api.github.com/users/jeresig/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeresig/subscriptions","organizations_url":"https://api.github.com/users/jeresig/orgs","repos_url":"https://api.github.com/users/jeresig/repos","events_url":"https://api.github.com/users/jeresig/events{/privacy}","received_events_url":"https://api.github.com/users/jeresig/received_events","type":"User","site_admin":false},"body":"This diff adds in support for the one and two-column modal dialogs, using the new grid system. See #65 for the details of how the grid is ready.\r\n\r\nA couple things that had fuzzy definitions in the design that I made a decision on:\r\n* I added a 64px margin to the top and bottom of the modal, which seems to match the current design.\r\n* I used a single 12-column grid for all two-column modals (which will be the same one I use for the standard modal, too).\r\n* For the \"11-column\" modal the new design calls for a 128px space between the two pieces of text. I implemented that as: (in Sidebar: 32px space + 32px gutter + in Content: 64px space). This helps us to avoid having to implement a brand new type of grid just for this one modal.\r\n* If the contents have a footer then I add a 48px padding to the bottom so that when the content scrolls up it looks nice (Zeplin shows it as 40px, but that's not one of our standard spacing sizes).\r\n\r\nI haven't implemented mobile support yet, I'll handle that in a follow-up diff.","created_at":"2018-05-02T15:51:16Z","updated_at":"2018-05-02T20:12:56Z","closed_at":null,"merged_at":null,"merge_commit_sha":"f30cb987cfad035a04e2fbe6f39a8f45a6448086","assignee":null,"assignees":[],"requested_reviewers":[{"login":"kevinbarabash","id":1044413,"avatar_url":"https://avatars3.githubusercontent.com/u/1044413?v=4","gravatar_id":"","url":"https://api.github.com/users/kevinbarabash","html_url":"https://github.com/kevinbarabash","followers_url":"https://api.github.com/users/kevinbarabash/followers","following_url":"https://api.github.com/users/kevinbarabash/following{/other_user}","gists_url":"https://api.github.com/users/kevinbarabash/gists{/gist_id}","starred_url":"https://api.github.com/users/kevinbarabash/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kevinbarabash/subscriptions","organizations_url":"https://api.github.com/users/kevinbarabash/orgs","repos_url":"https://api.github.com/users/kevinbarabash/repos","events_url":"https://api.github.com/users/kevinbarabash/events{/privacy}","received_events_url":"https://api.github.com/users/kevinbarabash/received_events","type":"User","site_admin":false},{"login":"tyong","id":2502412,"avatar_url":"https://avatars1.githubusercontent.com/u/2502412?v=4","gravatar_id":"","url":"https://api.github.com/users/tyong","html_url":"https://github.com/tyong","followers_url":"https://api.github.com/users/tyong/followers","following_url":"https://api.github.com/users/tyong/following{/other_user}","gists_url":"https://api.github.com/users/tyong/gists{/gist_id}","starred_url":"https://api.github.com/users/tyong/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tyong/subscriptions","organizations_url":"https://api.github.com/users/tyong/orgs","repos_url":"https://api.github.com/users/tyong/repos","events_url":"https://api.github.com/users/tyong/events{/privacy}","received_events_url":"https://api.github.com/users/tyong/received_events","type":"User","site_admin":false}],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/62/commits","review_comments_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/62/comments","review_comment_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/62/comments","statuses_url":"https://api.github.com/repos/Khan/wonder-blocks/statuses/222d9fc916610553905fa82c97e54c9dce998edd","head":{"label":"Khan:modal-grid","ref":"modal-grid","sha":"222d9fc916610553905fa82c97e54c9dce998edd","user":{"login":"Khan","id":15455,"avatar_url":"https://avatars1.githubusercontent.com/u/15455?v=4","gravatar_id":"","url":"https://api.github.com/users/Khan","html_url":"https://github.com/Khan","followers_url":"https://api.github.com/users/Khan/followers","following_url":"https://api.github.com/users/Khan/following{/other_user}","gists_url":"https://api.github.com/users/Khan/gists{/gist_id}","starred_url":"https://api.github.com/users/Khan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Khan/subscriptions","organizations_url":"https://api.github.com/users/Khan/orgs","repos_url":"https://api.github.com/users/Khan/repos","events_url":"https://api.github.com/users/Khan/events{/privacy}","received_events_url":"https://api.github.com/users/Khan/received_events","type":"Organization","site_admin":false},"repo":{"id":123198469,"name":"wonder-blocks","full_name":"Khan/wonder-blocks","owner":{"login":"Khan","id":15455,"avatar_url":"https://avatars1.githubusercontent.com/u/15455?v=4","gravatar_id":"","url":"https://api.github.com/users/Khan","html_url":"https://github.com/Khan","followers_url":"https://api.github.com/users/Khan/followers","following_url":"https://api.github.com/users/Khan/following{/other_user}","gists_url":"https://api.github.com/users/Khan/gists{/gist_id}","starred_url":"https://api.github.com/users/Khan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Khan/subscriptions","organizations_url":"https://api.github.com/users/Khan/orgs","repos_url":"https://api.github.com/users/Khan/repos","events_url":"https://api.github.com/users/Khan/events{/privacy}","received_events_url":"https://api.github.com/users/Khan/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Khan/wonder-blocks","description":"React components for Wonder Blocks design system.","fork":false,"url":"https://api.github.com/repos/Khan/wonder-blocks","forks_url":"https://api.github.com/repos/Khan/wonder-blocks/forks","keys_url":"https://api.github.com/repos/Khan/wonder-blocks/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Khan/wonder-blocks/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Khan/wonder-blocks/teams","hooks_url":"https://api.github.com/repos/Khan/wonder-blocks/hooks","issue_events_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/events{/number}","events_url":"https://api.github.com/repos/Khan/wonder-blocks/events","assignees_url":"https://api.github.com/repos/Khan/wonder-blocks/assignees{/user}","branches_url":"https://api.github.com/repos/Khan/wonder-blocks/branches{/branch}","tags_url":"https://api.github.com/repos/Khan/wonder-blocks/tags","blobs_url":"https://api.github.com/repos/Khan/wonder-blocks/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Khan/wonder-blocks/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Khan/wonder-blocks/git/refs{/sha}","trees_url":"https://api.github.com/repos/Khan/wonder-blocks/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Khan/wonder-blocks/statuses/{sha}","languages_url":"https://api.github.com/repos/Khan/wonder-blocks/languages","stargazers_url":"https://api.github.com/repos/Khan/wonder-blocks/stargazers","contributors_url":"https://api.github.com/repos/Khan/wonder-blocks/contributors","subscribers_url":"https://api.github.com/repos/Khan/wonder-blocks/subscribers","subscription_url":"https://api.github.com/repos/Khan/wonder-blocks/subscription","commits_url":"https://api.github.com/repos/Khan/wonder-blocks/commits{/sha}","git_commits_url":"https://api.github.com/repos/Khan/wonder-blocks/git/commits{/sha}","comments_url":"https://api.github.com/repos/Khan/wonder-blocks/comments{/number}","issue_comment_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/comments{/number}","contents_url":"https://api.github.com/repos/Khan/wonder-blocks/contents/{+path}","compare_url":"https://api.github.com/repos/Khan/wonder-blocks/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Khan/wonder-blocks/merges","archive_url":"https://api.github.com/repos/Khan/wonder-blocks/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Khan/wonder-blocks/downloads","issues_url":"https://api.github.com/repos/Khan/wonder-blocks/issues{/number}","pulls_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls{/number}","milestones_url":"https://api.github.com/repos/Khan/wonder-blocks/milestones{/number}","notifications_url":"https://api.github.com/repos/Khan/wonder-blocks/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Khan/wonder-blocks/labels{/name}","releases_url":"https://api.github.com/repos/Khan/wonder-blocks/releases{/id}","deployments_url":"https://api.github.com/repos/Khan/wonder-blocks/deployments","created_at":"2018-02-27T22:50:41Z","updated_at":"2018-05-01T22:21:12Z","pushed_at":"2018-05-02T20:03:01Z","git_url":"git://github.com/Khan/wonder-blocks.git","ssh_url":"git@github.com:Khan/wonder-blocks.git","clone_url":"https://github.com/Khan/wonder-blocks.git","svn_url":"https://github.com/Khan/wonder-blocks","homepage":"https://wonder-blocks.netlify.com","size":3348,"stargazers_count":13,"watchers_count":13,"language":"JavaScript","has_issues":false,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":6,"license":null,"forks":0,"open_issues":6,"watchers":13,"default_branch":"master"}},"base":{"label":"Khan:grid-flush","ref":"grid-flush","sha":"f347ea51d3cfdd234701db1f25ac444c3060b36a","user":{"login":"Khan","id":15455,"avatar_url":"https://avatars1.githubusercontent.com/u/15455?v=4","gravatar_id":"","url":"https://api.github.com/users/Khan","html_url":"https://github.com/Khan","followers_url":"https://api.github.com/users/Khan/followers","following_url":"https://api.github.com/users/Khan/following{/other_user}","gists_url":"https://api.github.com/users/Khan/gists{/gist_id}","starred_url":"https://api.github.com/users/Khan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Khan/subscriptions","organizations_url":"https://api.github.com/users/Khan/orgs","repos_url":"https://api.github.com/users/Khan/repos","events_url":"https://api.github.com/users/Khan/events{/privacy}","received_events_url":"https://api.github.com/users/Khan/received_events","type":"Organization","site_admin":false},"repo":{"id":123198469,"name":"wonder-blocks","full_name":"Khan/wonder-blocks","owner":{"login":"Khan","id":15455,"avatar_url":"https://avatars1.githubusercontent.com/u/15455?v=4","gravatar_id":"","url":"https://api.github.com/users/Khan","html_url":"https://github.com/Khan","followers_url":"https://api.github.com/users/Khan/followers","following_url":"https://api.github.com/users/Khan/following{/other_user}","gists_url":"https://api.github.com/users/Khan/gists{/gist_id}","starred_url":"https://api.github.com/users/Khan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Khan/subscriptions","organizations_url":"https://api.github.com/users/Khan/orgs","repos_url":"https://api.github.com/users/Khan/repos","events_url":"https://api.github.com/users/Khan/events{/privacy}","received_events_url":"https://api.github.com/users/Khan/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Khan/wonder-blocks","description":"React components for Wonder Blocks design system.","fork":false,"url":"https://api.github.com/repos/Khan/wonder-blocks","forks_url":"https://api.github.com/repos/Khan/wonder-blocks/forks","keys_url":"https://api.github.com/repos/Khan/wonder-blocks/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Khan/wonder-blocks/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Khan/wonder-blocks/teams","hooks_url":"https://api.github.com/repos/Khan/wonder-blocks/hooks","issue_events_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/events{/number}","events_url":"https://api.github.com/repos/Khan/wonder-blocks/events","assignees_url":"https://api.github.com/repos/Khan/wonder-blocks/assignees{/user}","branches_url":"https://api.github.com/repos/Khan/wonder-blocks/branches{/branch}","tags_url":"https://api.github.com/repos/Khan/wonder-blocks/tags","blobs_url":"https://api.github.com/repos/Khan/wonder-blocks/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Khan/wonder-blocks/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Khan/wonder-blocks/git/refs{/sha}","trees_url":"https://api.github.com/repos/Khan/wonder-blocks/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Khan/wonder-blocks/statuses/{sha}","languages_url":"https://api.github.com/repos/Khan/wonder-blocks/languages","stargazers_url":"https://api.github.com/repos/Khan/wonder-blocks/stargazers","contributors_url":"https://api.github.com/repos/Khan/wonder-blocks/contributors","subscribers_url":"https://api.github.com/repos/Khan/wonder-blocks/subscribers","subscription_url":"https://api.github.com/repos/Khan/wonder-blocks/subscription","commits_url":"https://api.github.com/repos/Khan/wonder-blocks/commits{/sha}","git_commits_url":"https://api.github.com/repos/Khan/wonder-blocks/git/commits{/sha}","comments_url":"https://api.github.com/repos/Khan/wonder-blocks/comments{/number}","issue_comment_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/comments{/number}","contents_url":"https://api.github.com/repos/Khan/wonder-blocks/contents/{+path}","compare_url":"https://api.github.com/repos/Khan/wonder-blocks/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Khan/wonder-blocks/merges","archive_url":"https://api.github.com/repos/Khan/wonder-blocks/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Khan/wonder-blocks/downloads","issues_url":"https://api.github.com/repos/Khan/wonder-blocks/issues{/number}","pulls_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls{/number}","milestones_url":"https://api.github.com/repos/Khan/wonder-blocks/milestones{/number}","notifications_url":"https://api.github.com/repos/Khan/wonder-blocks/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Khan/wonder-blocks/labels{/name}","releases_url":"https://api.github.com/repos/Khan/wonder-blocks/releases{/id}","deployments_url":"https://api.github.com/repos/Khan/wonder-blocks/deployments","created_at":"2018-02-27T22:50:41Z","updated_at":"2018-05-01T22:21:12Z","pushed_at":"2018-05-02T20:03:01Z","git_url":"git://github.com/Khan/wonder-blocks.git","ssh_url":"git@github.com:Khan/wonder-blocks.git","clone_url":"https://github.com/Khan/wonder-blocks.git","svn_url":"https://github.com/Khan/wonder-blocks","homepage":"https://wonder-blocks.netlify.com","size":3348,"stargazers_count":13,"watchers_count":13,"language":"JavaScript","has_issues":false,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":6,"license":null,"forks":0,"open_issues":6,"watchers":13,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/62"},"html":{"href":"https://github.com/Khan/wonder-blocks/pull/62"},"issue":{"href":"https://api.github.com/repos/Khan/wonder-blocks/issues/62"},"comments":{"href":"https://api.github.com/repos/Khan/wonder-blocks/issues/62/comments"},"review_comments":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/62/comments"},"review_comment":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/62/commits"},"statuses":{"href":"https://api.github.com/repos/Khan/wonder-blocks/statuses/222d9fc916610553905fa82c97e54c9dce998edd"}},"author_association":"OWNER"}}
{"actor":{"display_login":"jeresig"}}