{"action":"opened","issue":{"url":"https://api.github.com/repos/rackerlabs/encore-ui/issues/884","labels_url":"https://api.github.com/repos/rackerlabs/encore-ui/issues/884/labels{/name}","comments_url":"https://api.github.com/repos/rackerlabs/encore-ui/issues/884/comments","events_url":"https://api.github.com/repos/rackerlabs/encore-ui/issues/884/events","html_url":"https://github.com/rackerlabs/encore-ui/issues/884","id":66238585,"number":884,"title":"rxForm (and ilk) needs refactor/overhaul","user":{"login":"CITguy","id":545605,"avatar_url":"https://avatars.githubusercontent.com/u/545605?v=3","gravatar_id":"","url":"https://api.github.com/users/CITguy","html_url":"https://github.com/CITguy","followers_url":"https://api.github.com/users/CITguy/followers","following_url":"https://api.github.com/users/CITguy/following{/other_user}","gists_url":"https://api.github.com/users/CITguy/gists{/gist_id}","starred_url":"https://api.github.com/users/CITguy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CITguy/subscriptions","organizations_url":"https://api.github.com/users/CITguy/orgs","repos_url":"https://api.github.com/users/CITguy/repos","events_url":"https://api.github.com/users/CITguy/events{/privacy}","received_events_url":"https://api.github.com/users/CITguy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-04-03T22:16:56Z","updated_at":"2015-04-03T22:16:56Z","closed_at":null,"body":"While attempting to create an `rxSelect` directive based on http://jsbin.com/berose, I've run into multiple issues.\r\n\r\n### 1. rxFormItem Implementation\r\nImplementation of `rx-form-item` (in its current form) requires selective transclusion (rearranging content to fit the directive template).  Angular 1.x does not have functionality to perform selective transclusion (that I know of). See #748 \r\n\r\n### 2. Flexbox Implementation\r\n*The blue boxes are to show the boundaries of the label and content.*\r\n\r\n**Incorrect implementation (current)** - Current implementation requires JS logic to dynamically add css class to style the wrapper div. The screenshot shows that it is unsuccessful in Firefox for the text area. \r\n![screen shot 2015-04-03 at 3 01 07 pm](https://cloud.githubusercontent.com/assets/545605/6988102/83ebbf34-da13-11e4-80d4-75b21d1c0c6a.png)\r\n\r\n**Correct implementation** - No need for additional CSS class for edge case styling (i.e. textarea)\r\n![screen shot 2015-04-03 at 3 07 39 pm](https://cloud.githubusercontent.com/assets/545605/6988117/ad2d89f4-da13-11e4-999a-6714e91ec983.png)\r\n\r\n### 3. Advanced Form Element Styles\r\nAs per proof-of-concept at http://jsbin.com/wusiki, we can do some advanced styling of native form elements (and we're beginning to see the need for it - per [this comment](https://github.com/rackerlabs/encore-ui/issues/758#issuecomment-84167612)), but current directives either hinder implementation or require a great deal of logic overhaul to add support.\r\n\r\nFor example, the `rx-form-item` directive attempts to apply an `id` attribute to the transcluded form element for `<label for=\"id_here\">` functionality.  Unfortunately, because of its implementation and hacky logic for selective transclusion, when applied to an `rxSelect` directive, the ID is placed on the wrapper div rather than the select, which is incorrect.  The design of `rx-form-item` would require knowledge of the structure of `rx-select` in order to apply the ID correctly, and this problem would only get worse with the addition of more custom element directives.\r\n\r\n\r\nThese three items alone should show that we need to rethink the way we implement form element styling and directives to support them."}}