{"action":"created","comment":{"url":"https://api.github.com/repos/salesforce/design-system-react/pulls/comments/200486872","pull_request_review_id":134814567,"id":200486872,"node_id":"MDI0OlB1bGxSZXF1ZXN0UmV2aWV3Q29tbWVudDIwMDQ4Njg3Mg==","diff_hunk":"@@ -414,15 +435,19 @@ const Dialog = createReactClass({\n \t\t\t\t\t\t\t[`${this.props.outsideClickIgnoreClass}`]:\n \t\t\t\t\t\t\t\tthis.props.position === 'overflowBoundaryElement',\n \t\t\t\t\t\t},\n+\t\t\t\t\t\tthis.props.hasNubbin && getNubbinClassName(this.props.align),\n \t\t\t\t\t\tthis.props.contentsClassName\n \t\t\t\t\t) || undefined\n \t\t\t\t}\n+\t\t\t\tid={this.props.id}","path":"components/utilities/dialog/index.jsx","position":122,"original_position":122,"commit_id":"9e010cd9868f44c56822dbc717facb8695477477","original_commit_id":"9e010cd9868f44c56822dbc717facb8695477477","user":{"login":"Vintik","id":1200096,"node_id":"MDQ6VXNlcjEyMDAwOTY=","avatar_url":"https://avatars2.githubusercontent.com/u/1200096?v=4","gravatar_id":"","url":"https://api.github.com/users/Vintik","html_url":"https://github.com/Vintik","followers_url":"https://api.github.com/users/Vintik/followers","following_url":"https://api.github.com/users/Vintik/following{/other_user}","gists_url":"https://api.github.com/users/Vintik/gists{/gist_id}","starred_url":"https://api.github.com/users/Vintik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Vintik/subscriptions","organizations_url":"https://api.github.com/users/Vintik/orgs","repos_url":"https://api.github.com/users/Vintik/repos","events_url":"https://api.github.com/users/Vintik/events{/privacy}","received_events_url":"https://api.github.com/users/Vintik/received_events","type":"User","site_admin":false},"body":"Should be removed. This should be passed as containerProps instead.","created_at":"2018-07-05T20:54:03Z","updated_at":"2018-07-05T20:54:03Z","html_url":"https://github.com/salesforce/design-system-react/pull/1404#discussion_r200486872","pull_request_url":"https://api.github.com/repos/salesforce/design-system-react/pulls/1404","author_association":"CONTRIBUTOR","_links":{"self":{"href":"https://api.github.com/repos/salesforce/design-system-react/pulls/comments/200486872"},"html":{"href":"https://github.com/salesforce/design-system-react/pull/1404#discussion_r200486872"},"pull_request":{"href":"https://api.github.com/repos/salesforce/design-system-react/pulls/1404"}}},"pull_request":{"url":"https://api.github.com/repos/salesforce/design-system-react/pulls/1404","id":192169401,"node_id":"MDExOlB1bGxSZXF1ZXN0MTkyMTY5NDAx","html_url":"https://github.com/salesforce/design-system-react/pull/1404","diff_url":"https://github.com/salesforce/design-system-react/pull/1404.diff","patch_url":"https://github.com/salesforce/design-system-react/pull/1404.patch","issue_url":"https://api.github.com/repos/salesforce/design-system-react/issues/1404","number":1404,"state":"open","locked":false,"title":"Make Dialog positioning more robust","user":{"login":"Vintik","id":1200096,"node_id":"MDQ6VXNlcjEyMDAwOTY=","avatar_url":"https://avatars2.githubusercontent.com/u/1200096?v=4","gravatar_id":"","url":"https://api.github.com/users/Vintik","html_url":"https://github.com/Vintik","followers_url":"https://api.github.com/users/Vintik/followers","following_url":"https://api.github.com/users/Vintik/following{/other_user}","gists_url":"https://api.github.com/users/Vintik/gists{/gist_id}","starred_url":"https://api.github.com/users/Vintik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Vintik/subscriptions","organizations_url":"https://api.github.com/users/Vintik/orgs","repos_url":"https://api.github.com/users/Vintik/repos","events_url":"https://api.github.com/users/Vintik/events{/privacy}","received_events_url":"https://api.github.com/users/Vintik/received_events","type":"User","site_admin":false},"body":"This pull request is meant to make dialog positioning more robust and move responsibility closer to the Dialog component instead of having the parent/consumer be responsible for the dialog logic.\r\n\r\nIn my eyes, the responsibility of the parent should be only what gets rendered in the Dialog. Not how the dialog renders. It can use props to change that on a case by case basis. Currently the coupling between parent and Dialog is very tight and needs to be loosened.\r\n\r\nOur internal utility Dialog component now receives a `hasNubbin` which will add a nubbin. The placement of the nubbin will be determined from the overall `align`. Nubbins can only be added onto `position=\"absolute\"` or `position=\"overflowBoundaryElement\"`\r\n\r\nTake a look at any of the alignments for PopoverTooltips:\r\nhttps://design-system-react-components.herokuapp.com/?selectedKind=SLDSPopoverTooltip&selectedStory=Alignment%20%28Button%29&full=0&addons=0&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel\r\n\r\n\r\nBig things to figure out:\r\n- Getting snapshot tests to pass\r\n\r\n- Due to reasons for trapping focus, the `slds-popover` class is required to be a child of `Dialog` and not on dialog, otherwise it breaks. I'd much rather prefer to pass these higher level classes to dialog and not have special divs that try to control the internals of Dialog.\r\n\r\n- After these changes the nubbin always points at the center of the element instead of being on the side of the element. Unless we require the user to explicitly provide the exact nubbin position, I think this is the much more reasonable default because it works consistently in many more cases. Otherwise, what would a top left nubbin position on a top left align mean? The nubbin would point up even though the reference element is below the dialog. \r\n\r\n- In a few of the parents I change the wrapper from `display: inline` to `display: inline-block`. Can it be done? Is this a breaking change? We want the \"container\" to take up the full height in whatever the user renders it in. Otherwise the nubbin will always point at the wrong part.\r\n\r\n- preventOverflow. Pretty sure this has never worked properly, but if we add offsets this may not work or the addition of offsets may need to move to a different time in the popper cycle. Either way I think this part would be out of scope unless this actually works for anybody currently using Dialog.\r\n---\r\n\r\n### Pull Request Review checklist (do not remove)\r\n\r\n* [ ] `npm run lint:fix` has been run and linting passes.\r\n* [ ] Mocha, Jest (Storyshots), and `components/component-docs.json` CI tests pass (`npm test`).\r\n* [ ] Tests have been added for new props to prevent regressions in the future. See [readme](https://github.com/salesforce/design-system-react/blob/master/tests/README.md).\r\n* [ ] Review the appropriate Storybook stories. Open [http://localhost:9001/](http://localhost:9001/).\r\n* [ ] Review tests are passing in the browser. Open [http://localhost:8001/](http://localhost:8001/).\r\n* [ ] Review markup conforms to [SLDS](https://www.lightningdesignsystem.com/) by looking at [DOM snapshot strings](https://facebook.github.io/jest/docs/en/snapshot-testing.html).\r\n* [ ] Add year-first date and commit SHA to `last-slds-markup-review` in `package.json` and push.\r\n* [ ] Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.\r\n* [ ] Add year-first review date, and commit SHA, `last-accessibility-review`, to `package.json` and push.\r\n* [ ] While the contributor's branch is checked out, run `npm run local-update` within locally cloned [site repo](https://github.com/salesforce-ux/design-system-react-site) to confirm the site will function correctly at the next release.\r\n","created_at":"2018-06-02T00:35:20Z","updated_at":"2018-07-05T20:54:03Z","closed_at":null,"merged_at":null,"merge_commit_sha":"65a3cc80658c91c97e4e38dbccb61c3822dc1832","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[{"id":729734498,"node_id":"MDU6TGFiZWw3Mjk3MzQ0OTg=","url":"https://api.github.com/repos/salesforce/design-system-react/labels/cla:signed","name":"cla:signed","color":"5ebc41","default":false}],"milestone":null,"commits_url":"https://api.github.com/repos/salesforce/design-system-react/pulls/1404/commits","review_comments_url":"https://api.github.com/repos/salesforce/design-system-react/pulls/1404/comments","review_comment_url":"https://api.github.com/repos/salesforce/design-system-react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/salesforce/design-system-react/issues/1404/comments","statuses_url":"https://api.github.com/repos/salesforce/design-system-react/statuses/9e010cd9868f44c56822dbc717facb8695477477","head":{"label":"Vintik:vintik/dialogs","ref":"vintik/dialogs","sha":"9e010cd9868f44c56822dbc717facb8695477477","user":{"login":"Vintik","id":1200096,"node_id":"MDQ6VXNlcjEyMDAwOTY=","avatar_url":"https://avatars2.githubusercontent.com/u/1200096?v=4","gravatar_id":"","url":"https://api.github.com/users/Vintik","html_url":"https://github.com/Vintik","followers_url":"https://api.github.com/users/Vintik/followers","following_url":"https://api.github.com/users/Vintik/following{/other_user}","gists_url":"https://api.github.com/users/Vintik/gists{/gist_id}","starred_url":"https://api.github.com/users/Vintik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Vintik/subscriptions","organizations_url":"https://api.github.com/users/Vintik/orgs","repos_url":"https://api.github.com/users/Vintik/repos","events_url":"https://api.github.com/users/Vintik/events{/privacy}","received_events_url":"https://api.github.com/users/Vintik/received_events","type":"User","site_admin":false},"repo":{"id":109318010,"node_id":"MDEwOlJlcG9zaXRvcnkxMDkzMTgwMTA=","name":"design-system-react","full_name":"Vintik/design-system-react","owner":{"login":"Vintik","id":1200096,"node_id":"MDQ6VXNlcjEyMDAwOTY=","avatar_url":"https://avatars2.githubusercontent.com/u/1200096?v=4","gravatar_id":"","url":"https://api.github.com/users/Vintik","html_url":"https://github.com/Vintik","followers_url":"https://api.github.com/users/Vintik/followers","following_url":"https://api.github.com/users/Vintik/following{/other_user}","gists_url":"https://api.github.com/users/Vintik/gists{/gist_id}","starred_url":"https://api.github.com/users/Vintik/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Vintik/subscriptions","organizations_url":"https://api.github.com/users/Vintik/orgs","repos_url":"https://api.github.com/users/Vintik/repos","events_url":"https://api.github.com/users/Vintik/events{/privacy}","received_events_url":"https://api.github.com/users/Vintik/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/Vintik/design-system-react","description":"React implementation of the Salesforce Lightning Design System.","fork":true,"url":"https://api.github.com/repos/Vintik/design-system-react","forks_url":"https://api.github.com/repos/Vintik/design-system-react/forks","keys_url":"https://api.github.com/repos/Vintik/design-system-react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Vintik/design-system-react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Vintik/design-system-react/teams","hooks_url":"https://api.github.com/repos/Vintik/design-system-react/hooks","issue_events_url":"https://api.github.com/repos/Vintik/design-system-react/issues/events{/number}","events_url":"https://api.github.com/repos/Vintik/design-system-react/events","assignees_url":"https://api.github.com/repos/Vintik/design-system-react/assignees{/user}","branches_url":"https://api.github.com/repos/Vintik/design-system-react/branches{/branch}","tags_url":"https://api.github.com/repos/Vintik/design-system-react/tags","blobs_url":"https://api.github.com/repos/Vintik/design-system-react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Vintik/design-system-react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Vintik/design-system-react/git/refs{/sha}","trees_url":"https://api.github.com/repos/Vintik/design-system-react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Vintik/design-system-react/statuses/{sha}","languages_url":"https://api.github.com/repos/Vintik/design-system-react/languages","stargazers_url":"https://api.github.com/repos/Vintik/design-system-react/stargazers","contributors_url":"https://api.github.com/repos/Vintik/design-system-react/contributors","subscribers_url":"https://api.github.com/repos/Vintik/design-system-react/subscribers","subscription_url":"https://api.github.com/repos/Vintik/design-system-react/subscription","commits_url":"https://api.github.com/repos/Vintik/design-system-react/commits{/sha}","git_commits_url":"https://api.github.com/repos/Vintik/design-system-react/git/commits{/sha}","comments_url":"https://api.github.com/repos/Vintik/design-system-react/comments{/number}","issue_comment_url":"https://api.github.com/repos/Vintik/design-system-react/issues/comments{/number}","contents_url":"https://api.github.com/repos/Vintik/design-system-react/contents/{+path}","compare_url":"https://api.github.com/repos/Vintik/design-system-react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Vintik/design-system-react/merges","archive_url":"https://api.github.com/repos/Vintik/design-system-react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Vintik/design-system-react/downloads","issues_url":"https://api.github.com/repos/Vintik/design-system-react/issues{/number}","pulls_url":"https://api.github.com/repos/Vintik/design-system-react/pulls{/number}","milestones_url":"https://api.github.com/repos/Vintik/design-system-react/milestones{/number}","notifications_url":"https://api.github.com/repos/Vintik/design-system-react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Vintik/design-system-react/labels{/name}","releases_url":"https://api.github.com/repos/Vintik/design-system-react/releases{/id}","deployments_url":"https://api.github.com/repos/Vintik/design-system-react/deployments","created_at":"2017-11-02T20:56:31Z","updated_at":"2018-06-29T17:52:15Z","pushed_at":"2018-07-04T23:47:06Z","git_url":"git://github.com/Vintik/design-system-react.git","ssh_url":"git@github.com:Vintik/design-system-react.git","clone_url":"https://github.com/Vintik/design-system-react.git","svn_url":"https://github.com/Vintik/design-system-react","homepage":"https://design-system-react.herokuapp.com/","size":75337,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":0,"license":{"key":"bsd-3-clause","name":"BSD 3-Clause \"New\" or \"Revised\" License","spdx_id":"BSD-3-Clause","url":"https://api.github.com/licenses/bsd-3-clause","node_id":"MDc6TGljZW5zZTU="},"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"salesforce:master","ref":"master","sha":"ec0ea252b80399825b6c5afdc9364015fe451d68","user":{"login":"salesforce","id":453694,"node_id":"MDEyOk9yZ2FuaXphdGlvbjQ1MzY5NA==","avatar_url":"https://avatars3.githubusercontent.com/u/453694?v=4","gravatar_id":"","url":"https://api.github.com/users/salesforce","html_url":"https://github.com/salesforce","followers_url":"https://api.github.com/users/salesforce/followers","following_url":"https://api.github.com/users/salesforce/following{/other_user}","gists_url":"https://api.github.com/users/salesforce/gists{/gist_id}","starred_url":"https://api.github.com/users/salesforce/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/salesforce/subscriptions","organizations_url":"https://api.github.com/users/salesforce/orgs","repos_url":"https://api.github.com/users/salesforce/repos","events_url":"https://api.github.com/users/salesforce/events{/privacy}","received_events_url":"https://api.github.com/users/salesforce/received_events","type":"Organization","site_admin":false},"repo":{"id":40749402,"node_id":"MDEwOlJlcG9zaXRvcnk0MDc0OTQwMg==","name":"design-system-react","full_name":"salesforce/design-system-react","owner":{"login":"salesforce","id":453694,"node_id":"MDEyOk9yZ2FuaXphdGlvbjQ1MzY5NA==","avatar_url":"https://avatars3.githubusercontent.com/u/453694?v=4","gravatar_id":"","url":"https://api.github.com/users/salesforce","html_url":"https://github.com/salesforce","followers_url":"https://api.github.com/users/salesforce/followers","following_url":"https://api.github.com/users/salesforce/following{/other_user}","gists_url":"https://api.github.com/users/salesforce/gists{/gist_id}","starred_url":"https://api.github.com/users/salesforce/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/salesforce/subscriptions","organizations_url":"https://api.github.com/users/salesforce/orgs","repos_url":"https://api.github.com/users/salesforce/repos","events_url":"https://api.github.com/users/salesforce/events{/privacy}","received_events_url":"https://api.github.com/users/salesforce/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/salesforce/design-system-react","description":"React implementation of the Salesforce Lightning Design System.","fork":false,"url":"https://api.github.com/repos/salesforce/design-system-react","forks_url":"https://api.github.com/repos/salesforce/design-system-react/forks","keys_url":"https://api.github.com/repos/salesforce/design-system-react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/salesforce/design-system-react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/salesforce/design-system-react/teams","hooks_url":"https://api.github.com/repos/salesforce/design-system-react/hooks","issue_events_url":"https://api.github.com/repos/salesforce/design-system-react/issues/events{/number}","events_url":"https://api.github.com/repos/salesforce/design-system-react/events","assignees_url":"https://api.github.com/repos/salesforce/design-system-react/assignees{/user}","branches_url":"https://api.github.com/repos/salesforce/design-system-react/branches{/branch}","tags_url":"https://api.github.com/repos/salesforce/design-system-react/tags","blobs_url":"https://api.github.com/repos/salesforce/design-system-react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/salesforce/design-system-react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/salesforce/design-system-react/git/refs{/sha}","trees_url":"https://api.github.com/repos/salesforce/design-system-react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/salesforce/design-system-react/statuses/{sha}","languages_url":"https://api.github.com/repos/salesforce/design-system-react/languages","stargazers_url":"https://api.github.com/repos/salesforce/design-system-react/stargazers","contributors_url":"https://api.github.com/repos/salesforce/design-system-react/contributors","subscribers_url":"https://api.github.com/repos/salesforce/design-system-react/subscribers","subscription_url":"https://api.github.com/repos/salesforce/design-system-react/subscription","commits_url":"https://api.github.com/repos/salesforce/design-system-react/commits{/sha}","git_commits_url":"https://api.github.com/repos/salesforce/design-system-react/git/commits{/sha}","comments_url":"https://api.github.com/repos/salesforce/design-system-react/comments{/number}","issue_comment_url":"https://api.github.com/repos/salesforce/design-system-react/issues/comments{/number}","contents_url":"https://api.github.com/repos/salesforce/design-system-react/contents/{+path}","compare_url":"https://api.github.com/repos/salesforce/design-system-react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/salesforce/design-system-react/merges","archive_url":"https://api.github.com/repos/salesforce/design-system-react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/salesforce/design-system-react/downloads","issues_url":"https://api.github.com/repos/salesforce/design-system-react/issues{/number}","pulls_url":"https://api.github.com/repos/salesforce/design-system-react/pulls{/number}","milestones_url":"https://api.github.com/repos/salesforce/design-system-react/milestones{/number}","notifications_url":"https://api.github.com/repos/salesforce/design-system-react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/salesforce/design-system-react/labels{/name}","releases_url":"https://api.github.com/repos/salesforce/design-system-react/releases{/id}","deployments_url":"https://api.github.com/repos/salesforce/design-system-react/deployments","created_at":"2015-08-15T06:29:58Z","updated_at":"2018-07-05T19:41:47Z","pushed_at":"2018-07-05T20:48:05Z","git_url":"git://github.com/salesforce/design-system-react.git","ssh_url":"git@github.com:salesforce/design-system-react.git","clone_url":"https://github.com/salesforce/design-system-react.git","svn_url":"https://github.com/salesforce/design-system-react","homepage":"https://react.lightningdesignsystem.com/","size":86463,"stargazers_count":192,"watchers_count":192,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":79,"mirror_url":null,"archived":false,"open_issues_count":118,"license":{"key":"bsd-3-clause","name":"BSD 3-Clause \"New\" or \"Revised\" License","spdx_id":"BSD-3-Clause","url":"https://api.github.com/licenses/bsd-3-clause","node_id":"MDc6TGljZW5zZTU="},"forks":79,"open_issues":118,"watchers":192,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/salesforce/design-system-react/pulls/1404"},"html":{"href":"https://github.com/salesforce/design-system-react/pull/1404"},"issue":{"href":"https://api.github.com/repos/salesforce/design-system-react/issues/1404"},"comments":{"href":"https://api.github.com/repos/salesforce/design-system-react/issues/1404/comments"},"review_comments":{"href":"https://api.github.com/repos/salesforce/design-system-react/pulls/1404/comments"},"review_comment":{"href":"https://api.github.com/repos/salesforce/design-system-react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/salesforce/design-system-react/pulls/1404/commits"},"statuses":{"href":"https://api.github.com/repos/salesforce/design-system-react/statuses/9e010cd9868f44c56822dbc717facb8695477477"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"Vintik"}}