{"action":"created","issue":{"url":"https://api.github.com/repos/cerner/terra-core/issues/502","repository_url":"https://api.github.com/repos/cerner/terra-core","labels_url":"https://api.github.com/repos/cerner/terra-core/issues/502/labels{/name}","comments_url":"https://api.github.com/repos/cerner/terra-core/issues/502/comments","events_url":"https://api.github.com/repos/cerner/terra-core/issues/502/events","html_url":"https://github.com/cerner/terra-core/issues/502","id":237935636,"number":502,"title":"Compose the SearchField, DatePicker, TimeInput components with the Field component","user":{"login":"benbcai","id":22618655,"avatar_url":"https://avatars2.githubusercontent.com/u/22618655?v=4","gravatar_id":"","url":"https://api.github.com/users/benbcai","html_url":"https://github.com/benbcai","followers_url":"https://api.github.com/users/benbcai/followers","following_url":"https://api.github.com/users/benbcai/following{/other_user}","gists_url":"https://api.github.com/users/benbcai/gists{/gist_id}","starred_url":"https://api.github.com/users/benbcai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benbcai/subscriptions","organizations_url":"https://api.github.com/users/benbcai/orgs","repos_url":"https://api.github.com/users/benbcai/repos","events_url":"https://api.github.com/users/benbcai/events{/privacy}","received_events_url":"https://api.github.com/users/benbcai/received_events","type":"User","site_admin":false},"labels":[{"id":593469440,"url":"https://api.github.com/repos/cerner/terra-core/labels/datepicker","name":"datepicker","color":"FF4081","default":false},{"id":547258202,"url":"https://api.github.com/repos/cerner/terra-core/labels/enhancement","name":"enhancement","color":"84b6eb","default":true},{"id":630615128,"url":"https://api.github.com/repos/cerner/terra-core/labels/search%20field","name":"search field","color":"fef2c0","default":false},{"id":593470173,"url":"https://api.github.com/repos/cerner/terra-core/labels/time%20input","name":"time input","color":"D500F9","default":false}],"state":"open","locked":false,"assignee":{"login":"samvaity","id":16845631,"avatar_url":"https://avatars0.githubusercontent.com/u/16845631?v=4","gravatar_id":"","url":"https://api.github.com/users/samvaity","html_url":"https://github.com/samvaity","followers_url":"https://api.github.com/users/samvaity/followers","following_url":"https://api.github.com/users/samvaity/following{/other_user}","gists_url":"https://api.github.com/users/samvaity/gists{/gist_id}","starred_url":"https://api.github.com/users/samvaity/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samvaity/subscriptions","organizations_url":"https://api.github.com/users/samvaity/orgs","repos_url":"https://api.github.com/users/samvaity/repos","events_url":"https://api.github.com/users/samvaity/events{/privacy}","received_events_url":"https://api.github.com/users/samvaity/received_events","type":"User","site_admin":false},"assignees":[{"login":"samvaity","id":16845631,"avatar_url":"https://avatars0.githubusercontent.com/u/16845631?v=4","gravatar_id":"","url":"https://api.github.com/users/samvaity","html_url":"https://github.com/samvaity","followers_url":"https://api.github.com/users/samvaity/followers","following_url":"https://api.github.com/users/samvaity/following{/other_user}","gists_url":"https://api.github.com/users/samvaity/gists{/gist_id}","starred_url":"https://api.github.com/users/samvaity/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samvaity/subscriptions","organizations_url":"https://api.github.com/users/samvaity/orgs","repos_url":"https://api.github.com/users/samvaity/repos","events_url":"https://api.github.com/users/samvaity/events{/privacy}","received_events_url":"https://api.github.com/users/samvaity/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/cerner/terra-core/milestones/4","html_url":"https://github.com/cerner/terra-core/milestone/4","labels_url":"https://api.github.com/repos/cerner/terra-core/milestones/4/labels","id":2659238,"number":4,"title":"Q4 2017","description":"","creator":{"login":"bjankord","id":633148,"avatar_url":"https://avatars1.githubusercontent.com/u/633148?v=4","gravatar_id":"","url":"https://api.github.com/users/bjankord","html_url":"https://github.com/bjankord","followers_url":"https://api.github.com/users/bjankord/followers","following_url":"https://api.github.com/users/bjankord/following{/other_user}","gists_url":"https://api.github.com/users/bjankord/gists{/gist_id}","starred_url":"https://api.github.com/users/bjankord/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bjankord/subscriptions","organizations_url":"https://api.github.com/users/bjankord/orgs","repos_url":"https://api.github.com/users/bjankord/repos","events_url":"https://api.github.com/users/bjankord/events{/privacy}","received_events_url":"https://api.github.com/users/bjankord/received_events","type":"User","site_admin":false},"open_issues":44,"closed_issues":12,"state":"open","created_at":"2017-07-24T20:24:09Z","updated_at":"2017-09-15T19:51:28Z","due_on":"2017-12-31T08:00:00Z","closed_at":null},"comments":0,"created_at":"2017-06-22T18:37:48Z","updated_at":"2017-09-15T21:31:00Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"# Issue Description\r\nThe SearchField component should be wrapped by the Field component just like the other Form components so that a label, error message, help text, etc, can be rendered. The DatePicker and TimeInput should also be wrapped by the Field component or perhaps a new DateField and TimeField components should be created similar to how there is a TextField component for the Input component.\r\n\r\n## Issue Type\r\n- [ ] New Feature\r\n- [X] Enhancement\r\n- [ ] Bug\r\n- [ ] Other\r\n"},"comment":{"url":"https://api.github.com/repos/cerner/terra-core/issues/comments/329908971","html_url":"https://github.com/cerner/terra-core/issues/502#issuecomment-329908971","issue_url":"https://api.github.com/repos/cerner/terra-core/issues/502","id":329908971,"user":{"login":"samvaity","id":16845631,"avatar_url":"https://avatars0.githubusercontent.com/u/16845631?v=4","gravatar_id":"","url":"https://api.github.com/users/samvaity","html_url":"https://github.com/samvaity","followers_url":"https://api.github.com/users/samvaity/followers","following_url":"https://api.github.com/users/samvaity/following{/other_user}","gists_url":"https://api.github.com/users/samvaity/gists{/gist_id}","starred_url":"https://api.github.com/users/samvaity/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samvaity/subscriptions","organizations_url":"https://api.github.com/users/samvaity/orgs","repos_url":"https://api.github.com/users/samvaity/repos","events_url":"https://api.github.com/users/samvaity/events{/privacy}","received_events_url":"https://api.github.com/users/samvaity/received_events","type":"User","site_admin":false},"created_at":"2017-09-15T21:31:00Z","updated_at":"2017-09-15T21:31:00Z","author_association":"CONTRIBUTOR","body":"# Issue Description\r\nThe SearchField, DatePicker and TimeInput components should be wrapped by the Field component just like the other Form components so that a label, error message, help text, etc, can be rendered.\r\n\r\n## Questions\r\n- DatePicker - For this component, should we be refactoring the existing code to have it wrapped in the Field component or have it as a new component called “DateField”?\r\n- TimeInput - For this component, should we be refactoring the existing code to have it wrapped in the Field component or have it as a new component called “TimeField ”?\r\n- Do we have to render all the props( error, help, htmlFor etc) of “Field” component for all the above mentioned elements or should they be aligned to match the children elements?\r\n\r\n## Issue Type\r\n<!-- Is this a new feature request, enhancement, bug report, other? -->\r\n- [ ] New Feature\r\n- [X] Enhancement\r\n- [ ] Bug\r\n- [ ] Other\r\n\r\n## Expected Behavior\r\n\r\nThis should work similar to the TextField component for the Input component.\r\n\r\n## Tech Design:\r\n\r\n\r\n### Approach :\r\n- Import Field component in SearchField, DatePicker and TimeInput components.\r\n- Wrap the existing components inside the ```<Field> </Field>``` tags (Add any props needed for Field component).\r\n\r\n### Example:\r\n```\r\nreturn (\r\n      <Field>\r\n        <div {...customProps} className={searchFieldClassNames}>\r\n          <Input\r\n            className={cx('input')}\r\n            type=\"search\"\r\n            placeholder={placeholder}\r\n            value={this.state.searchText}\r\n            onChange={this.handleTextChange}\r\n          />\r\n          <Button\r\n            className={cx('button')}\r\n            onClick={this.handleSearch}\r\n            isCompact\r\n          >\r\n            <IconSearch />\r\n          </Button>\r\n        </div>\r\n      </Field>\r\n    );\r\n}\r\n```"}}
{"actor":{"display_login":"samvaity"}}