{"action":"created","issue":{"url":"https://api.github.com/repos/Shopify/polaris-react/issues/557","repository_url":"https://api.github.com/repos/Shopify/polaris-react","labels_url":"https://api.github.com/repos/Shopify/polaris-react/issues/557/labels{/name}","comments_url":"https://api.github.com/repos/Shopify/polaris-react/issues/557/comments","events_url":"https://api.github.com/repos/Shopify/polaris-react/issues/557/events","html_url":"https://github.com/Shopify/polaris-react/pull/557","id":378069056,"node_id":"MDExOlB1bGxSZXF1ZXN0MjI4ODYyODgy","number":557,"title":"Update Avatar and Image component to handle onError with images.","user":{"login":"dleroux","id":1229901,"node_id":"MDQ6VXNlcjEyMjk5MDE=","avatar_url":"https://avatars0.githubusercontent.com/u/1229901?v=4","gravatar_id":"","url":"https://api.github.com/users/dleroux","html_url":"https://github.com/dleroux","followers_url":"https://api.github.com/users/dleroux/followers","following_url":"https://api.github.com/users/dleroux/following{/other_user}","gists_url":"https://api.github.com/users/dleroux/gists{/gist_id}","starred_url":"https://api.github.com/users/dleroux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dleroux/subscriptions","organizations_url":"https://api.github.com/users/dleroux/orgs","repos_url":"https://api.github.com/users/dleroux/repos","events_url":"https://api.github.com/users/dleroux/events{/privacy}","received_events_url":"https://api.github.com/users/dleroux/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-11-06T22:54:45Z","updated_at":"2018-11-15T00:29:45Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/Shopify/polaris-react/pulls/557","html_url":"https://github.com/Shopify/polaris-react/pull/557","diff_url":"https://github.com/Shopify/polaris-react/pull/557.diff","patch_url":"https://github.com/Shopify/polaris-react/pull/557.patch"},"body":"### WHY are these changes introduced?\r\n\r\nResolves https://github.com/Shopify/shopify/issues/174824\r\n\r\nThe default option we want for our Avatar component is to show the  logged in user initials if an avatar image is not found. Gravatar gives us the possibility of providing a default image when an image is not found or to return a 404. \r\n\r\nIn this [pr](https://github.com/Shopify/web/pull/5377) we attempted to return a transparent image. This was done with the following option in the query:\r\n\r\n```\r\navatar(fallback: TRANSPARENT) {\r\n      src\r\n    }\r\n```\r\n\r\nThe idea being that if the fallback was a transparent image it would simply lay over the Initials and wouldn't be visible.\r\n\r\nHowever the Initials are in circle coloured background. As a result when an image was present it would show through [pr](https://github.com/Shopify/polaris-react-deprecated/pull/1157)\r\n\r\n### WHAT is this pull request doing?\r\n\r\nThis PR is taking the is relying on gravatar returning a 404.\r\n\r\n```\r\navatar(fallback: NOT_FOUND) {\r\n      src\r\n    }\r\n```\r\n\r\nBoth the Image component and Avatar component have an onError prop now. If an image requested returns a 404 the onError attribute of the image tag will trigger the onError and no image will be outputted.\r\n\r\nThis is one approach. Another approach would be to have web check for the image, or to have the graphQl return a boolean. identifying if the fall back was used. I see some benefits of making the change in Polaris as well as web. \r\n\r\nI'm putting up this PR for discussion on the approach. I will polish and update tests if we chose to go this route.\r\n\r\n\r\n\r\n## <!-- ℹ️ Delete the following for small / trivial changes -->\r\n\r\n### How to 🎩\r\n\r\n🖥 [Local development instructions](https://github.com/Shopify/polaris-react/blob/master/README.md#development)\r\n🗒 [General tophatting guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md)\r\n📄 [Changelog guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md)\r\n\r\n<!--\r\n  Give as much information as needed to experiment with the component\r\n  in the playground.\r\n-->\r\n\r\n<details>\r\n<summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary>\r\n\r\n```jsx\r\nimport * as React from 'react';\r\nimport {Page, Avatar, Image, Stack} from '@shopify/polaris';\r\n\r\ninterface State {}\r\n\r\nexport default class Playground extends React.Component<never, State> {\r\n  render() {\r\n    return (\r\n      <Page title=\"Playground\">\r\n        <Stack>\r\n          <Avatar size=\"large\" initials=\"DL\" customer />\r\n          <Avatar\r\n            size=\"large\"\r\n            initials=\"DL\"\r\n            source=\"https://avatars2.githubusercontent.com/u/1229901?s=80&v=4\"\r\n          />\r\n          <Avatar size=\"large\" initials=\"DL\" source=\"https://bla\" />\r\n        </Stack>\r\n        <br />\r\n        <Image\r\n          alt=\"Just an image\"\r\n          source=\"https://avatars2.githubusercontent.com/u/1229901?s=80&v=4\"\r\n        />\r\n      </Page>\r\n    );\r\n  }\r\n}\r\n```\r\n\r\n</details>\r\n\r\n### 🎩 checklist\r\n\r\n* [ ] Tested on [mobile](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md#cross-browser-testing)\r\n* [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/intro-to-shopify/shopify-admin/supported-browsers)\r\n* [ ] Tested for [accessibility](https://github.com/Shopify/polaris-react/blob/master/documentation/Accessibility%20testing.md)\r\n* [x] Updated [UNRELEASED.md](https://github.com/Shopify/polaris-react/blob/master/UNRELEASED.md)\r\n\r\n<!--\r\n  When tophatting, please check the UNRELEASED entry for consistency, as per the [guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md).\r\n-->\r\n\r\n<!--\r\n  If you don't have access to Percy, please request access in the #polaris Slack channel.\r\n-->\r\n"},"comment":{"url":"https://api.github.com/repos/Shopify/polaris-react/issues/comments/438870027","html_url":"https://github.com/Shopify/polaris-react/pull/557#issuecomment-438870027","issue_url":"https://api.github.com/repos/Shopify/polaris-react/issues/557","id":438870027,"node_id":"MDEyOklzc3VlQ29tbWVudDQzODg3MDAyNw==","user":{"login":"dleroux","id":1229901,"node_id":"MDQ6VXNlcjEyMjk5MDE=","avatar_url":"https://avatars0.githubusercontent.com/u/1229901?v=4","gravatar_id":"","url":"https://api.github.com/users/dleroux","html_url":"https://github.com/dleroux","followers_url":"https://api.github.com/users/dleroux/followers","following_url":"https://api.github.com/users/dleroux/following{/other_user}","gists_url":"https://api.github.com/users/dleroux/gists{/gist_id}","starred_url":"https://api.github.com/users/dleroux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dleroux/subscriptions","organizations_url":"https://api.github.com/users/dleroux/orgs","repos_url":"https://api.github.com/users/dleroux/repos","events_url":"https://api.github.com/users/dleroux/events{/privacy}","received_events_url":"https://api.github.com/users/dleroux/received_events","type":"User","site_admin":false},"created_at":"2018-11-15T00:29:45Z","updated_at":"2018-11-15T00:29:45Z","author_association":"CONTRIBUTOR","body":"Awesome thanks. :shipit: ?"}}
{"actor":{"display_login":"dleroux"}}