{"action":"created","comment":{"url":"https://api.github.com/repos/stardust-ui/react/pulls/comments/218986796","pull_request_review_id":157050337,"id":218986796,"node_id":"MDI0OlB1bGxSZXF1ZXN0UmV2aWV3Q29tbWVudDIxODk4Njc5Ng==","diff_hunk":"@@ -0,0 +1,35 @@\n+import * as React from 'react'\n+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'\n+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'\n+\n+const Slots = () => (\n+  <ExampleSection title=\"Slots\">\n+    <ComponentExample\n+      title=\"Icon\"\n+      description=\"An attachment can have an icon.\"\n+      examplePath=\"components/Attachment/Slots/AttachmentIconExample\"\n+    />\n+    <ComponentExample\n+      title=\"Header\"","path":"docs/src/examples/components/Attachment/Slots/index.tsx","position":13,"original_position":13,"commit_id":"4e3dd5da36c7b836247dc626a70f4bfc3e5c85fb","original_commit_id":"4e3dd5da36c7b836247dc626a70f4bfc3e5c85fb","user":{"login":"kuzhelov","id":9024564,"node_id":"MDQ6VXNlcjkwMjQ1NjQ=","avatar_url":"https://avatars0.githubusercontent.com/u/9024564?v=4","gravatar_id":"","url":"https://api.github.com/users/kuzhelov","html_url":"https://github.com/kuzhelov","followers_url":"https://api.github.com/users/kuzhelov/followers","following_url":"https://api.github.com/users/kuzhelov/following{/other_user}","gists_url":"https://api.github.com/users/kuzhelov/gists{/gist_id}","starred_url":"https://api.github.com/users/kuzhelov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kuzhelov/subscriptions","organizations_url":"https://api.github.com/users/kuzhelov/orgs","repos_url":"https://api.github.com/users/kuzhelov/repos","events_url":"https://api.github.com/users/kuzhelov/events{/privacy}","received_events_url":"https://api.github.com/users/kuzhelov/received_events","type":"User","site_admin":false},"body":"@brianespinosa, sorry for the late response, my bad :( my promise to be better next time.\r\n\r\n> @kuzhelov will this PR solve that? #238 \r\n\r\nUnfortunately, now - and the reason is that `header` is currently introduced as a simple `string`, and not a Stardust component that encapsulates this knowledge on how this styling should be applied. \r\n\r\nHowever, this is quite easy to fix - we could use `Text` component for `header` and `content`, so that all functionality of slots (where main aspect is styling) will be preserved.","created_at":"2018-09-19T22:39:59Z","updated_at":"2018-09-19T22:39:59Z","html_url":"https://github.com/stardust-ui/react/pull/220#discussion_r218986796","pull_request_url":"https://api.github.com/repos/stardust-ui/react/pulls/220","author_association":"COLLABORATOR","_links":{"self":{"href":"https://api.github.com/repos/stardust-ui/react/pulls/comments/218986796"},"html":{"href":"https://github.com/stardust-ui/react/pull/220#discussion_r218986796"},"pull_request":{"href":"https://api.github.com/repos/stardust-ui/react/pulls/220"}},"in_reply_to_id":218085408},"pull_request":{"url":"https://api.github.com/repos/stardust-ui/react/pulls/220","id":215145518,"node_id":"MDExOlB1bGxSZXF1ZXN0MjE1MTQ1NTE4","html_url":"https://github.com/stardust-ui/react/pull/220","diff_url":"https://github.com/stardust-ui/react/pull/220.diff","patch_url":"https://github.com/stardust-ui/react/pull/220.patch","issue_url":"https://api.github.com/repos/stardust-ui/react/issues/220","number":220,"state":"open","locked":false,"title":"feat: add Attachment component","user":{"login":"levithomason","id":5067638,"node_id":"MDQ6VXNlcjUwNjc2Mzg=","avatar_url":"https://avatars3.githubusercontent.com/u/5067638?v=4","gravatar_id":"","url":"https://api.github.com/users/levithomason","html_url":"https://github.com/levithomason","followers_url":"https://api.github.com/users/levithomason/followers","following_url":"https://api.github.com/users/levithomason/following{/other_user}","gists_url":"https://api.github.com/users/levithomason/gists{/gist_id}","starred_url":"https://api.github.com/users/levithomason/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/levithomason/subscriptions","organizations_url":"https://api.github.com/users/levithomason/orgs","repos_url":"https://api.github.com/users/levithomason/repos","events_url":"https://api.github.com/users/levithomason/events{/privacy}","received_events_url":"https://api.github.com/users/levithomason/received_events","type":"User","site_admin":false},"body":"# Attachment\r\n\r\nAn Attachment displays a file attachment.\r\n\r\n### TODO\r\n\r\n- [X] Conformance test\r\n- [X] Minimal doc site example\r\n- [X] Teams Light theme\r\n- [X] Confirm RTL usage\r\n- [x] [W3 accessibility](https://www.w3.org/standards/webdesign/accessibility) check\r\n- [x] [Stardust accessibility](https://github.com/stardust-ui/accessibility) check\r\n- [x] Update the CHANGELOG.md\r\n- [ ] Handle focus style outline\r\n- [ ] add colors for various file types\r\n\r\n# API Proposal\r\n\r\nThis PR is implementing the Attachment component from https://github.com/stardust-ui/specifications/issues/1.  The latest Teams theme redlines were used.  Sizes, spacing, colors, and states are redline correct for this version of the component.\r\n\r\n![image](https://user-images.githubusercontent.com/5067638/45529301-46c51300-b799-11e8-94d1-f3056bab871e.png)\r\n\r\n```jsx\r\n<Attachment\r\n  icon=\"file word outline\"    // font awesome, for now\r\n  header=\"Document.docx\"\r\n  description=\"800 Kb\"\r\n  action={{ icon: 'x' }}      // Button shorthand\r\n  progress={33}               // percent complete\r\n/>\r\n```\r\n\r\nThe markup includes a div for each slot.  This makes flexbox and css grid layouts easier.\r\n\r\n```html\r\n<div class=\"ui-attachment\">\r\n  <!-- Icon -->\r\n  <div class=\"...\">\r\n    <span class=\"ui-icon\" aria-hidden=\"true\"></span>\r\n  </div>\r\n\r\n  <!-- Header / Description -->\r\n  <div class=\"...\">\r\n    <div class=\"...\">Document.docx</div>\r\n    <div class=\"...\">800 Kb</div>\r\n  </div>\r\n\r\n  <!-- Action -->\r\n  <div class=\"...\">\r\n    <button class=\"ui-button\" aria-disabled=\"false\">\r\n        <span class=\"ui-icon\" aria-hidden=\"true\"></span>\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Progress -->\r\n  <div class=\"...\"></div>\r\n</div>\r\n```\r\n\r\n### Actionable\r\n\r\nThis prop styles the component to appear actionable by the user.  A pointer cursor is used and a hover color is applied.\r\n\r\n```jsx\r\n<Attachment actionable ... />\r\n```\r\n\r\n### Things to know\r\n\r\n- **Limited features**: This PR only introduces the base component and its slots.  Other PRs will handle the various types and colors of Attachments.\r\n- **Icon**: These are currently font awesome icons, pending #183 and subsequent work.\r\n- **Action**: The action (Button) likely needs more specific positioning and styling to match the Teams theme.  This will require some button updates and maybe some theme updates.  A separate PR should handle this.\r\n- **Multiple Actions** - The spec called for multiple actions, however, this usage was limited to Slack.  Gmail, Teams, and Outlook all use a single action.  A single `action` slot was used instead.  The render prop callback can be used to provide a button group if the user wishes.\r\n","created_at":"2018-09-13T02:15:36Z","updated_at":"2018-09-19T22:39:59Z","closed_at":null,"merged_at":null,"merge_commit_sha":"bfc5e95df24c2060e452e2a47af2241090d28346","assignee":null,"assignees":[],"requested_reviewers":[{"login":"davezuko","id":6439050,"node_id":"MDQ6VXNlcjY0MzkwNTA=","avatar_url":"https://avatars3.githubusercontent.com/u/6439050?v=4","gravatar_id":"","url":"https://api.github.com/users/davezuko","html_url":"https://github.com/davezuko","followers_url":"https://api.github.com/users/davezuko/followers","following_url":"https://api.github.com/users/davezuko/following{/other_user}","gists_url":"https://api.github.com/users/davezuko/gists{/gist_id}","starred_url":"https://api.github.com/users/davezuko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davezuko/subscriptions","organizations_url":"https://api.github.com/users/davezuko/orgs","repos_url":"https://api.github.com/users/davezuko/repos","events_url":"https://api.github.com/users/davezuko/events{/privacy}","received_events_url":"https://api.github.com/users/davezuko/received_events","type":"User","site_admin":false},{"login":"miroslavstastny","id":9615899,"node_id":"MDQ6VXNlcjk2MTU4OTk=","avatar_url":"https://avatars0.githubusercontent.com/u/9615899?v=4","gravatar_id":"","url":"https://api.github.com/users/miroslavstastny","html_url":"https://github.com/miroslavstastny","followers_url":"https://api.github.com/users/miroslavstastny/followers","following_url":"https://api.github.com/users/miroslavstastny/following{/other_user}","gists_url":"https://api.github.com/users/miroslavstastny/gists{/gist_id}","starred_url":"https://api.github.com/users/miroslavstastny/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/miroslavstastny/subscriptions","organizations_url":"https://api.github.com/users/miroslavstastny/orgs","repos_url":"https://api.github.com/users/miroslavstastny/repos","events_url":"https://api.github.com/users/miroslavstastny/events{/privacy}","received_events_url":"https://api.github.com/users/miroslavstastny/received_events","type":"User","site_admin":false}],"requested_teams":[],"labels":[{"id":1030124399,"node_id":"MDU6TGFiZWwxMDMwMTI0Mzk5","url":"https://api.github.com/repos/stardust-ui/react/labels/ready%20for%20merge","name":"ready for merge","color":"d4c5f9","default":false}],"milestone":null,"commits_url":"https://api.github.com/repos/stardust-ui/react/pulls/220/commits","review_comments_url":"https://api.github.com/repos/stardust-ui/react/pulls/220/comments","review_comment_url":"https://api.github.com/repos/stardust-ui/react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/stardust-ui/react/issues/220/comments","statuses_url":"https://api.github.com/repos/stardust-ui/react/statuses/4e3dd5da36c7b836247dc626a70f4bfc3e5c85fb","head":{"label":"stardust-ui:feat/attachment","ref":"feat/attachment","sha":"4e3dd5da36c7b836247dc626a70f4bfc3e5c85fb","user":{"login":"stardust-ui","id":40412095,"node_id":"MDEyOk9yZ2FuaXphdGlvbjQwNDEyMDk1","avatar_url":"https://avatars3.githubusercontent.com/u/40412095?v=4","gravatar_id":"","url":"https://api.github.com/users/stardust-ui","html_url":"https://github.com/stardust-ui","followers_url":"https://api.github.com/users/stardust-ui/followers","following_url":"https://api.github.com/users/stardust-ui/following{/other_user}","gists_url":"https://api.github.com/users/stardust-ui/gists{/gist_id}","starred_url":"https://api.github.com/users/stardust-ui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stardust-ui/subscriptions","organizations_url":"https://api.github.com/users/stardust-ui/orgs","repos_url":"https://api.github.com/users/stardust-ui/repos","events_url":"https://api.github.com/users/stardust-ui/events{/privacy}","received_events_url":"https://api.github.com/users/stardust-ui/received_events","type":"Organization","site_admin":false},"repo":{"id":141743704,"node_id":"MDEwOlJlcG9zaXRvcnkxNDE3NDM3MDQ=","name":"react","full_name":"stardust-ui/react","private":false,"owner":{"login":"stardust-ui","id":40412095,"node_id":"MDEyOk9yZ2FuaXphdGlvbjQwNDEyMDk1","avatar_url":"https://avatars3.githubusercontent.com/u/40412095?v=4","gravatar_id":"","url":"https://api.github.com/users/stardust-ui","html_url":"https://github.com/stardust-ui","followers_url":"https://api.github.com/users/stardust-ui/followers","following_url":"https://api.github.com/users/stardust-ui/following{/other_user}","gists_url":"https://api.github.com/users/stardust-ui/gists{/gist_id}","starred_url":"https://api.github.com/users/stardust-ui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stardust-ui/subscriptions","organizations_url":"https://api.github.com/users/stardust-ui/orgs","repos_url":"https://api.github.com/users/stardust-ui/repos","events_url":"https://api.github.com/users/stardust-ui/events{/privacy}","received_events_url":"https://api.github.com/users/stardust-ui/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/stardust-ui/react","description":"A themable React component library","fork":false,"url":"https://api.github.com/repos/stardust-ui/react","forks_url":"https://api.github.com/repos/stardust-ui/react/forks","keys_url":"https://api.github.com/repos/stardust-ui/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/stardust-ui/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/stardust-ui/react/teams","hooks_url":"https://api.github.com/repos/stardust-ui/react/hooks","issue_events_url":"https://api.github.com/repos/stardust-ui/react/issues/events{/number}","events_url":"https://api.github.com/repos/stardust-ui/react/events","assignees_url":"https://api.github.com/repos/stardust-ui/react/assignees{/user}","branches_url":"https://api.github.com/repos/stardust-ui/react/branches{/branch}","tags_url":"https://api.github.com/repos/stardust-ui/react/tags","blobs_url":"https://api.github.com/repos/stardust-ui/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/stardust-ui/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/stardust-ui/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/stardust-ui/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/stardust-ui/react/statuses/{sha}","languages_url":"https://api.github.com/repos/stardust-ui/react/languages","stargazers_url":"https://api.github.com/repos/stardust-ui/react/stargazers","contributors_url":"https://api.github.com/repos/stardust-ui/react/contributors","subscribers_url":"https://api.github.com/repos/stardust-ui/react/subscribers","subscription_url":"https://api.github.com/repos/stardust-ui/react/subscription","commits_url":"https://api.github.com/repos/stardust-ui/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/stardust-ui/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/stardust-ui/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/stardust-ui/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/stardust-ui/react/contents/{+path}","compare_url":"https://api.github.com/repos/stardust-ui/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/stardust-ui/react/merges","archive_url":"https://api.github.com/repos/stardust-ui/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/stardust-ui/react/downloads","issues_url":"https://api.github.com/repos/stardust-ui/react/issues{/number}","pulls_url":"https://api.github.com/repos/stardust-ui/react/pulls{/number}","milestones_url":"https://api.github.com/repos/stardust-ui/react/milestones{/number}","notifications_url":"https://api.github.com/repos/stardust-ui/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/stardust-ui/react/labels{/name}","releases_url":"https://api.github.com/repos/stardust-ui/react/releases{/id}","deployments_url":"https://api.github.com/repos/stardust-ui/react/deployments","created_at":"2018-07-20T18:12:35Z","updated_at":"2018-09-19T22:27:00Z","pushed_at":"2018-09-19T22:26:54Z","git_url":"git://github.com/stardust-ui/react.git","ssh_url":"git@github.com:stardust-ui/react.git","clone_url":"https://github.com/stardust-ui/react.git","svn_url":"https://github.com/stardust-ui/react","homepage":"http://stardust-ui.github.io/react","size":20619,"stargazers_count":54,"watchers_count":54,"language":"TypeScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":11,"mirror_url":null,"archived":false,"open_issues_count":61,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit","node_id":"MDc6TGljZW5zZTEz"},"forks":11,"open_issues":61,"watchers":54,"default_branch":"master"}},"base":{"label":"stardust-ui:master","ref":"master","sha":"f5d78bec46e2970d2b5298bfb80dd219dfdccf84","user":{"login":"stardust-ui","id":40412095,"node_id":"MDEyOk9yZ2FuaXphdGlvbjQwNDEyMDk1","avatar_url":"https://avatars3.githubusercontent.com/u/40412095?v=4","gravatar_id":"","url":"https://api.github.com/users/stardust-ui","html_url":"https://github.com/stardust-ui","followers_url":"https://api.github.com/users/stardust-ui/followers","following_url":"https://api.github.com/users/stardust-ui/following{/other_user}","gists_url":"https://api.github.com/users/stardust-ui/gists{/gist_id}","starred_url":"https://api.github.com/users/stardust-ui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stardust-ui/subscriptions","organizations_url":"https://api.github.com/users/stardust-ui/orgs","repos_url":"https://api.github.com/users/stardust-ui/repos","events_url":"https://api.github.com/users/stardust-ui/events{/privacy}","received_events_url":"https://api.github.com/users/stardust-ui/received_events","type":"Organization","site_admin":false},"repo":{"id":141743704,"node_id":"MDEwOlJlcG9zaXRvcnkxNDE3NDM3MDQ=","name":"react","full_name":"stardust-ui/react","private":false,"owner":{"login":"stardust-ui","id":40412095,"node_id":"MDEyOk9yZ2FuaXphdGlvbjQwNDEyMDk1","avatar_url":"https://avatars3.githubusercontent.com/u/40412095?v=4","gravatar_id":"","url":"https://api.github.com/users/stardust-ui","html_url":"https://github.com/stardust-ui","followers_url":"https://api.github.com/users/stardust-ui/followers","following_url":"https://api.github.com/users/stardust-ui/following{/other_user}","gists_url":"https://api.github.com/users/stardust-ui/gists{/gist_id}","starred_url":"https://api.github.com/users/stardust-ui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stardust-ui/subscriptions","organizations_url":"https://api.github.com/users/stardust-ui/orgs","repos_url":"https://api.github.com/users/stardust-ui/repos","events_url":"https://api.github.com/users/stardust-ui/events{/privacy}","received_events_url":"https://api.github.com/users/stardust-ui/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/stardust-ui/react","description":"A themable React component library","fork":false,"url":"https://api.github.com/repos/stardust-ui/react","forks_url":"https://api.github.com/repos/stardust-ui/react/forks","keys_url":"https://api.github.com/repos/stardust-ui/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/stardust-ui/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/stardust-ui/react/teams","hooks_url":"https://api.github.com/repos/stardust-ui/react/hooks","issue_events_url":"https://api.github.com/repos/stardust-ui/react/issues/events{/number}","events_url":"https://api.github.com/repos/stardust-ui/react/events","assignees_url":"https://api.github.com/repos/stardust-ui/react/assignees{/user}","branches_url":"https://api.github.com/repos/stardust-ui/react/branches{/branch}","tags_url":"https://api.github.com/repos/stardust-ui/react/tags","blobs_url":"https://api.github.com/repos/stardust-ui/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/stardust-ui/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/stardust-ui/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/stardust-ui/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/stardust-ui/react/statuses/{sha}","languages_url":"https://api.github.com/repos/stardust-ui/react/languages","stargazers_url":"https://api.github.com/repos/stardust-ui/react/stargazers","contributors_url":"https://api.github.com/repos/stardust-ui/react/contributors","subscribers_url":"https://api.github.com/repos/stardust-ui/react/subscribers","subscription_url":"https://api.github.com/repos/stardust-ui/react/subscription","commits_url":"https://api.github.com/repos/stardust-ui/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/stardust-ui/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/stardust-ui/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/stardust-ui/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/stardust-ui/react/contents/{+path}","compare_url":"https://api.github.com/repos/stardust-ui/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/stardust-ui/react/merges","archive_url":"https://api.github.com/repos/stardust-ui/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/stardust-ui/react/downloads","issues_url":"https://api.github.com/repos/stardust-ui/react/issues{/number}","pulls_url":"https://api.github.com/repos/stardust-ui/react/pulls{/number}","milestones_url":"https://api.github.com/repos/stardust-ui/react/milestones{/number}","notifications_url":"https://api.github.com/repos/stardust-ui/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/stardust-ui/react/labels{/name}","releases_url":"https://api.github.com/repos/stardust-ui/react/releases{/id}","deployments_url":"https://api.github.com/repos/stardust-ui/react/deployments","created_at":"2018-07-20T18:12:35Z","updated_at":"2018-09-19T22:27:00Z","pushed_at":"2018-09-19T22:26:54Z","git_url":"git://github.com/stardust-ui/react.git","ssh_url":"git@github.com:stardust-ui/react.git","clone_url":"https://github.com/stardust-ui/react.git","svn_url":"https://github.com/stardust-ui/react","homepage":"http://stardust-ui.github.io/react","size":20619,"stargazers_count":54,"watchers_count":54,"language":"TypeScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":11,"mirror_url":null,"archived":false,"open_issues_count":61,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit","node_id":"MDc6TGljZW5zZTEz"},"forks":11,"open_issues":61,"watchers":54,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/stardust-ui/react/pulls/220"},"html":{"href":"https://github.com/stardust-ui/react/pull/220"},"issue":{"href":"https://api.github.com/repos/stardust-ui/react/issues/220"},"comments":{"href":"https://api.github.com/repos/stardust-ui/react/issues/220/comments"},"review_comments":{"href":"https://api.github.com/repos/stardust-ui/react/pulls/220/comments"},"review_comment":{"href":"https://api.github.com/repos/stardust-ui/react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/stardust-ui/react/pulls/220/commits"},"statuses":{"href":"https://api.github.com/repos/stardust-ui/react/statuses/4e3dd5da36c7b836247dc626a70f4bfc3e5c85fb"}},"author_association":"MEMBER"}}
{"actor":{"display_login":"kuzhelov"}}