{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/7456","repository_url":"https://api.github.com/repos/Automattic/wp-calypso","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/7456/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/7456/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/7456/events","html_url":"https://github.com/Automattic/wp-calypso/pull/7456","id":171035366,"number":7456,"title":"Add/phone number react component","user":{"login":"umurkontaci","id":991022,"avatar_url":"https://avatars.githubusercontent.com/u/991022?v=3","gravatar_id":"","url":"https://api.github.com/users/umurkontaci","html_url":"https://github.com/umurkontaci","followers_url":"https://api.github.com/users/umurkontaci/followers","following_url":"https://api.github.com/users/umurkontaci/following{/other_user}","gists_url":"https://api.github.com/users/umurkontaci/gists{/gist_id}","starred_url":"https://api.github.com/users/umurkontaci/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/umurkontaci/subscriptions","organizations_url":"https://api.github.com/users/umurkontaci/orgs","repos_url":"https://api.github.com/users/umurkontaci/repos","events_url":"https://api.github.com/users/umurkontaci/events{/privacy}","received_events_url":"https://api.github.com/users/umurkontaci/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Components","name":"Components","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Domains","name":"Domains","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Author%20Reply","name":"[Status] Needs Author Reply","color":"eb6420"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Design%20Review","name":"[Status] Needs Design Review","color":"009800"}],"state":"open","locked":false,"assignee":{"login":"umurkontaci","id":991022,"avatar_url":"https://avatars.githubusercontent.com/u/991022?v=3","gravatar_id":"","url":"https://api.github.com/users/umurkontaci","html_url":"https://github.com/umurkontaci","followers_url":"https://api.github.com/users/umurkontaci/followers","following_url":"https://api.github.com/users/umurkontaci/following{/other_user}","gists_url":"https://api.github.com/users/umurkontaci/gists{/gist_id}","starred_url":"https://api.github.com/users/umurkontaci/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/umurkontaci/subscriptions","organizations_url":"https://api.github.com/users/umurkontaci/orgs","repos_url":"https://api.github.com/users/umurkontaci/repos","events_url":"https://api.github.com/users/umurkontaci/events{/privacy}","received_events_url":"https://api.github.com/users/umurkontaci/received_events","type":"User","site_admin":false},"assignees":[{"login":"umurkontaci","id":991022,"avatar_url":"https://avatars.githubusercontent.com/u/991022?v=3","gravatar_id":"","url":"https://api.github.com/users/umurkontaci","html_url":"https://github.com/umurkontaci","followers_url":"https://api.github.com/users/umurkontaci/followers","following_url":"https://api.github.com/users/umurkontaci/following{/other_user}","gists_url":"https://api.github.com/users/umurkontaci/gists{/gist_id}","starred_url":"https://api.github.com/users/umurkontaci/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/umurkontaci/subscriptions","organizations_url":"https://api.github.com/users/umurkontaci/orgs","repos_url":"https://api.github.com/users/umurkontaci/repos","events_url":"https://api.github.com/users/umurkontaci/events{/privacy}","received_events_url":"https://api.github.com/users/umurkontaci/received_events","type":"User","site_admin":false},{"login":"aidvu","id":1103398,"avatar_url":"https://avatars.githubusercontent.com/u/1103398?v=3","gravatar_id":"","url":"https://api.github.com/users/aidvu","html_url":"https://github.com/aidvu","followers_url":"https://api.github.com/users/aidvu/followers","following_url":"https://api.github.com/users/aidvu/following{/other_user}","gists_url":"https://api.github.com/users/aidvu/gists{/gist_id}","starred_url":"https://api.github.com/users/aidvu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aidvu/subscriptions","organizations_url":"https://api.github.com/users/aidvu/orgs","repos_url":"https://api.github.com/users/aidvu/repos","events_url":"https://api.github.com/users/aidvu/events{/privacy}","received_events_url":"https://api.github.com/users/aidvu/received_events","type":"User","site_admin":false},{"login":"klimeryk","id":3392497,"avatar_url":"https://avatars.githubusercontent.com/u/3392497?v=3","gravatar_id":"","url":"https://api.github.com/users/klimeryk","html_url":"https://github.com/klimeryk","followers_url":"https://api.github.com/users/klimeryk/followers","following_url":"https://api.github.com/users/klimeryk/following{/other_user}","gists_url":"https://api.github.com/users/klimeryk/gists{/gist_id}","starred_url":"https://api.github.com/users/klimeryk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/klimeryk/subscriptions","organizations_url":"https://api.github.com/users/klimeryk/orgs","repos_url":"https://api.github.com/users/klimeryk/repos","events_url":"https://api.github.com/users/klimeryk/events{/privacy}","received_events_url":"https://api.github.com/users/klimeryk/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/116","html_url":"https://github.com/Automattic/wp-calypso/milestones/Cobalt:%20Backlog","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/116/labels","id":1916340,"number":116,"title":"Cobalt: Backlog","description":"Issues that fall into the responsibility of team Cobalt (Spectrum Division). Feel free to fix/re-assign as needed, though!","creator":{"login":"klimeryk","id":3392497,"avatar_url":"https://avatars.githubusercontent.com/u/3392497?v=3","gravatar_id":"","url":"https://api.github.com/users/klimeryk","html_url":"https://github.com/klimeryk","followers_url":"https://api.github.com/users/klimeryk/followers","following_url":"https://api.github.com/users/klimeryk/following{/other_user}","gists_url":"https://api.github.com/users/klimeryk/gists{/gist_id}","starred_url":"https://api.github.com/users/klimeryk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/klimeryk/subscriptions","organizations_url":"https://api.github.com/users/klimeryk/orgs","repos_url":"https://api.github.com/users/klimeryk/repos","events_url":"https://api.github.com/users/klimeryk/events{/privacy}","received_events_url":"https://api.github.com/users/klimeryk/received_events","type":"User","site_admin":false},"open_issues":49,"closed_issues":4,"state":"open","created_at":"2016-08-01T17:24:13Z","updated_at":"2016-08-24T09:14:25Z","due_on":null,"closed_at":null},"comments":2,"created_at":"2016-08-14T00:48:01Z","updated_at":"2016-08-29T11:27:33Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/7456","html_url":"https://github.com/Automattic/wp-calypso/pull/7456","diff_url":"https://github.com/Automattic/wp-calypso/pull/7456.diff","patch_url":"https://github.com/Automattic/wp-calypso/pull/7456.patch"},"body":"**Important Note**: This PR's base is not `master`, it is `add/phone-number-library` since it builds off that library. This PR will merge into `add/phone-number-library`. If that's not desired, once it's reviewed, and `add/phone-number-library` is merged, create a new PR from the same branch that bases `master`.\r\n\r\nThis PR is part for #7453 and dependent on #7454. It adds a phone-number component that \r\n\r\n- Can detect the country from the phone number\r\n- Can format for national, international and NANPA formats\r\n- Allows user to select their own country\r\n- Uses vector based flags\r\n\r\n\r\nIt uses `flag-icon-css` to provide vector based flags.\r\n\r\n### Teaser\r\n![ykdzcapvqh](https://cloud.githubusercontent.com/assets/991022/17646390/b20b0730-617b-11e6-9db8-751ee7536b1c.gif)\r\n\r\n### Testing\r\nThere is one example in `/devdocs` where you can test it. \r\n\r\nMake sure to test around the edge cases as well such as when there are few numbers in the input, or plenty of them.\r\n\r\nOne of the known quirks is when the user deletes / inserts a number between the characters.\r\n\r\nIf a fix proves to be complex or relies on `phone-number` library, it might be easier to both of the PRs in and do the fix in a follow up PR. This shouldn't be a problem since none of them are being used anywhere but devdocs.\r\n\r\n### Design Notes\r\nThere are some countries in our country list that do not have a flag in SVG. They shouldn't be too many in numbers, but we might need to find and add those flags to our repository manually or to upstream `flag-icon-css`.\r\n\r\nWhen the country flag changes, there is a small delay as the flag changes require a download, I've did a hack by putting a loading indicator *behind* the flag so when it is invisible, the spinner is shown automatically. The problem is some of the flags are not at 100% opacity and you can see the spinner lying behind. Not sure what the solution is.\r\n\r\nI have opted to use a regular `<select/>` element instead of a custom element that acts like a selector. This should give us more confidence for cross-compatibility. \r\n\r\nThe flag as it is does not look clickable as it lacks an down arrow. We probably should add an arrow, but I wasn't sure how it would look like, we might also need to get rid of the borders around the flags as well. \r\n\r\n/cc: @klimeryk @aidvu @wensco @breezyskies @Automattic/sdev-feed \r\n\r\n\r\nTest live: https://calypso.live/devdocs/design/form-fields?branch=add/phone-number-react-component"},"comment":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments/243098850","html_url":"https://github.com/Automattic/wp-calypso/pull/7456#issuecomment-243098850","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/7456","id":243098850,"user":{"login":"folletto","id":4389,"avatar_url":"https://avatars.githubusercontent.com/u/4389?v=3","gravatar_id":"","url":"https://api.github.com/users/folletto","html_url":"https://github.com/folletto","followers_url":"https://api.github.com/users/folletto/followers","following_url":"https://api.github.com/users/folletto/following{/other_user}","gists_url":"https://api.github.com/users/folletto/gists{/gist_id}","starred_url":"https://api.github.com/users/folletto/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/folletto/subscriptions","organizations_url":"https://api.github.com/users/folletto/orgs","repos_url":"https://api.github.com/users/folletto/repos","events_url":"https://api.github.com/users/folletto/events{/privacy}","received_events_url":"https://api.github.com/users/folletto/received_events","type":"User","site_admin":false},"created_at":"2016-08-29T11:27:33Z","updated_at":"2016-08-29T11:27:33Z","body":"> When the country flag changes, there is a small delay as the flag changes require a download\r\n\r\nSo yes: \r\n\r\n> The flags are being used in a pretty tiny space. Have we considered using a simple sprite sheet instead? This should avoid the loading headaches\r\n\r\n+1\r\n\r\nI checked examples for size. [This](https://github.com/lafeber/world-flags-sprite) is 87k in its @2x resolution (32px).\r\n\r\nChecking the SVG library this PR is using, there are some SVGs that are **massive** in comparison. Seems to me one of the uncommon scenarios where SVG might not be a good choice.\r\n\r\n---\r\n\r\nSome feedback:\r\n\r\n(1) Flag looks odd in its borders — the flag area has an extra border, rounded too, that makes it look odd (`phone-input__flag-container`).\r\n\r\n![screen shot 2016-08-29 at 11 47 09](https://cloud.githubusercontent.com/assets/4389/18049159/54830bc0-6dde-11e6-8e7a-b57ede265ad3.png)\r\n\r\nIt's probably better if the item is slightly smaller so it just sits inside the input control, with just a right border.\r\n\r\n(2) Default status — the control shouldn't default to a specific country, or, if it does, should try to default by geolocation / IP / language / other locating technique. \r\n\r\nHowever: I acknowledge this might be overkill for now, so I'd say that at least it should start with one flag or a default one, and a text that is generic, like \"Type the phone number with + prefix\" (which should be default, and overridable with a prop).\r\n\r\n(3) Chevron — I'm not sure if it makes sense to include a dropdown more explicitly, but if it does we can show the chevron in its small size (`12px`).\r\n\r\n(4) If I switch country, then I start typing a different country prefix it \"forces\" the selected one. It should instead swap the flag.\r\n\r\n(5) If a user first types a number and then changes the country, we should do a smart-prefixing (this might be a separate PR). So the whole logic should be:\r\n\r\n* If nothing is in the input form, switching country adds the correct +00 code.\r\n* If something is in, but without +00, it adds the +00 country code on top.\r\n* If something is in, with the +00 prefix, it swaps the prefix with the new one.\r\n\r\nNote: this assumes we normalize for +00. I think it would be a good idea, but I also know it's not an idea without consequences. So take this advice with the required contextual reframing.\r\n\r\nSumming up all the points above in terms of UI:\r\n\r\n![screen shot 2016-08-29 at 12 22 37](https://cloud.githubusercontent.com/assets/4389/18049934/4a7f0ade-6de3-11e6-96a9-354b0c1ccf04.png)\r\n\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"folletto"}}