{"action":"created","issue":{"url":"https://api.github.com/repos/enactjs/agate/issues/46","repository_url":"https://api.github.com/repos/enactjs/agate","labels_url":"https://api.github.com/repos/enactjs/agate/issues/46/labels{/name}","comments_url":"https://api.github.com/repos/enactjs/agate/issues/46/comments","events_url":"https://api.github.com/repos/enactjs/agate/issues/46/events","html_url":"https://github.com/enactjs/agate/issues/46","id":359580140,"node_id":"MDU6SXNzdWUzNTk1ODAxNDA=","number":46,"title":"Input Component should include icon?","user":{"login":"haileyR","id":8715394,"node_id":"MDQ6VXNlcjg3MTUzOTQ=","avatar_url":"https://avatars1.githubusercontent.com/u/8715394?v=4","gravatar_id":"","url":"https://api.github.com/users/haileyR","html_url":"https://github.com/haileyR","followers_url":"https://api.github.com/users/haileyR/followers","following_url":"https://api.github.com/users/haileyR/following{/other_user}","gists_url":"https://api.github.com/users/haileyR/gists{/gist_id}","starred_url":"https://api.github.com/users/haileyR/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/haileyR/subscriptions","organizations_url":"https://api.github.com/users/haileyR/orgs","repos_url":"https://api.github.com/users/haileyR/repos","events_url":"https://api.github.com/users/haileyR/events{/privacy}","received_events_url":"https://api.github.com/users/haileyR/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-09-12T17:29:21Z","updated_at":"2018-09-12T17:39:16Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"### Current situation\r\nThe `<Input>` on the phone tab in the console app uses an `<Icon>` component to delete one string by one from the right (acting like backspace). This `<Icon>` is used outside of `<Input>`. With this, the consumers who use this component will have to implement all the logic, functionality and styling outside the `<Input>` component. \r\n- Delete from the right\r\n- Delete from the middle of the input string when the cursor position changes\r\n- Focus back to the input after deleting\r\n- border-bottom should be extended to go under the icon, and padding-right should be added for icon in input.\r\n\r\n### Suggestion\r\nSince the functionalities and styles are directly/only for `Input`, I think the `Icon` should be included in the `Input`. To support this, we we check the native html inputs in different browsers, we get the x delete button for the input and it's inside the input box.\r\n\r\n![image](https://user-images.githubusercontent.com/8715394/45394718-e2625200-b5e6-11e8-9d9e-d8dadcd20c30.png)\r\n\r\nIf we want to have a different type of input like `SearchInput`, we can create a new component for it. Or, we can have a prop to set the type of input or an icon prop and provide according functionalities. In this way, we are able to have consistent UX and design for different types of inputs across the board."},"comment":{"url":"https://api.github.com/repos/enactjs/agate/issues/comments/420735327","html_url":"https://github.com/enactjs/agate/issues/46#issuecomment-420735327","issue_url":"https://api.github.com/repos/enactjs/agate/issues/46","id":420735327,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMDczNTMyNw==","user":{"login":"haileyR","id":8715394,"node_id":"MDQ6VXNlcjg3MTUzOTQ=","avatar_url":"https://avatars1.githubusercontent.com/u/8715394?v=4","gravatar_id":"","url":"https://api.github.com/users/haileyR","html_url":"https://github.com/haileyR","followers_url":"https://api.github.com/users/haileyR/followers","following_url":"https://api.github.com/users/haileyR/following{/other_user}","gists_url":"https://api.github.com/users/haileyR/gists{/gist_id}","starred_url":"https://api.github.com/users/haileyR/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/haileyR/subscriptions","organizations_url":"https://api.github.com/users/haileyR/orgs","repos_url":"https://api.github.com/users/haileyR/repos","events_url":"https://api.github.com/users/haileyR/events{/privacy}","received_events_url":"https://api.github.com/users/haileyR/received_events","type":"User","site_admin":false},"created_at":"2018-09-12T17:39:16Z","updated_at":"2018-09-12T17:39:16Z","author_association":"CONTRIBUTOR","body":"Yes, with the current input, we have to click the delete btn twice to start deleting."}}
{"actor":{"display_login":"haileyR"}}