{"action":"created","issue":{"url":"https://api.github.com/repos/emberui/emberui/issues/103","labels_url":"https://api.github.com/repos/emberui/emberui/issues/103/labels{/name}","comments_url":"https://api.github.com/repos/emberui/emberui/issues/103/comments","events_url":"https://api.github.com/repos/emberui/emberui/issues/103/events","html_url":"https://github.com/emberui/emberui/issues/103","id":108492994,"number":103,"title":"Discussion: Finalize API and Ember 2.0 support","user":{"login":"jacojoubert","id":41799,"avatar_url":"https://avatars.githubusercontent.com/u/41799?v=3","gravatar_id":"","url":"https://api.github.com/users/jacojoubert","html_url":"https://github.com/jacojoubert","followers_url":"https://api.github.com/users/jacojoubert/followers","following_url":"https://api.github.com/users/jacojoubert/following{/other_user}","gists_url":"https://api.github.com/users/jacojoubert/gists{/gist_id}","starred_url":"https://api.github.com/users/jacojoubert/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jacojoubert/subscriptions","organizations_url":"https://api.github.com/users/jacojoubert/orgs","repos_url":"https://api.github.com/users/jacojoubert/repos","events_url":"https://api.github.com/users/jacojoubert/events{/privacy}","received_events_url":"https://api.github.com/users/jacojoubert/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/emberui/emberui/labels/discussion","name":"discussion","color":"fbca04"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2015-09-26T20:11:15Z","updated_at":"2015-09-30T12:54:00Z","closed_at":null,"body":"It is time to update EmberUI to support Ember 2.0 and bring EmberUI itself to version 1.0. A lot has changed since EmberUI was first started, and it is time to advantage of some of the new conventions to make it more customizable and flexible.\r\n\r\n**The purpose of this post is to gather feedback on the proposed changes.**\r\n\r\n#### Goals\r\n\r\nEmber 2.0 compatibility\r\nFinalized API for EmberUI that is flexible and extensible\r\nMove to ES6 from Coffeescript\r\nEnsure we are using data down, actions up where it makes sense\r\n\r\n\r\n## Poplist (placeholder name)\r\n\r\nThis would promote the `poplist` component for for public use. Making use of the new `ember-collections` component to replace `list-view`, we will allow for the customization of each of the items in the poplist. This would allow the popup to show a great variety of content, not just a simple text list.\r\n\r\n    {{#eui-poplist\r\n      options=options\r\n      target=\"button-id\"\r\n      targetAttachment=\"top left\"\r\n      onClose=\"poplistClosed\" as |option index|}}\r\n        {{option.label}}\r\n    {{/eui-poplist}}\r\n\r\nThe popup can be positioned relative to an element via the `target` attribute. You pass it an `id` selector of the element you want to position against, as well as the `attachment` and `targetAttachment`. We will use Tether to do the actual positioning.\r\n\r\n\r\n## Button\r\n\r\nThe `button` will be converted to a block component. This would drop the `label` attribute and instead allow the user to customize the content of the button itself however they choose. This would make the usage identical to the `<button>` element from HTML.\r\n\r\n    {{#eui-button\r\n      action=\"save\"\r\n      style=\"primary\"\r\n      size=\"medium\"}}\r\n        Label of button\r\n    {{/eui-button}}\r\n\r\nThe `leadingIcon` and `trailingIcon` attributes would be removed, and instead it would be up to the user to insert a tag inside the block that displays the icon. This would allow for css based icons, or using SVGs and other images.\r\n\r\n\r\n## Dropbutton\r\n\r\nThe `dropbutton` would be converted to a block element and take the styling options from the `button`. You can customize how each of the options are displayed via the contents of the block.\r\n\r\n    {{#eui-dropbutton\r\n      label=\"Actions\"\r\n      options=options as |option index|}}\r\n        {{eui-dropbutton-option label=option.label click=option.action}}\r\n    {{/#ui-dropbutton}}\r\n\r\nA default `dropbutton-option` component will be provided that provides the same functionality as the current `dropbutton`. The `dropbutton` would also retain the `label` attribute to customize the label of the button when there is no primary action.\r\n\r\n\r\n## Select\r\n\r\nThe `select` will be converted to a block element and take the styling options from the `button`. You can customize how each of the options are displayed via the contents of the block.\r\n\r\n    {{#eui-select\r\n      placeholder=\"Select a country\"\r\n      selection=selection\r\n      value=value\r\n      valuePath=\"value\"\r\n      onChange=\"save\"\r\n      options=options as |option index|}}\r\n        {{eui-select-option label=option.label}}\r\n    {{/eui-select}}\r\n\r\nA default `eui-select-option` component will be provided that provides the same functionality as the current select.\r\n\r\nYou can specify an action via `onChange` that needs to fire when the selection changes.\r\n\r\n\r\n## Checkbox\r\n\r\nThe `checkbox` will be converted to a block element to allow for the display of the label and consistency with the other components.\r\n\r\n    {{#eui-checkbox\r\n      value=rememberMe}}\r\n        Remember me\r\n    {{/eui-checkbox}}\r\n\r\n\r\n## Input & Textarea\r\n\r\nThe `input` and `textarea` components will become wrappers around the ember components. The `placeholder` attribute would also be removed and done via the native placeholder attribute. This means IE8 will no longer be supported.\r\n\r\n    {{#eui-input\r\n      value=value\r\n      error=error\r\n      forceErrorCheck=true}}\r\n        {{input type=\"text placeholder=\"Email address\" value=value}}\r\n    {{/eui-input}}\r\n\r\nBy separating the input out it will be easier to write custom inputs (for example that only allows certain kinds of inputs) and layer the EmberUI error handling and styling on top.\r\n\r\n    {{#eui-input\r\n      value=value\r\n      error=error}}\r\n        {{custom-input type=\"text\" value=value}}\r\n    {{/eui-input}}\r\n\r\n\r\n## Things that still needs attention\r\n\r\n- Animations aren't done very well right now. Changes should be made, just not sure how to structure it yet.\r\n- Specifying the label via an attribute on `dropbutton` is inconsistent with other components. Not sure if there is another approach we could take. \r\n- Does the `calendar` and `select-date` components need any changes?\r\n"},"comment":{"url":"https://api.github.com/repos/emberui/emberui/issues/comments/144387417","html_url":"https://github.com/emberui/emberui/issues/103#issuecomment-144387417","issue_url":"https://api.github.com/repos/emberui/emberui/issues/103","id":144387417,"user":{"login":"jacojoubert","id":41799,"avatar_url":"https://avatars.githubusercontent.com/u/41799?v=3","gravatar_id":"","url":"https://api.github.com/users/jacojoubert","html_url":"https://github.com/jacojoubert","followers_url":"https://api.github.com/users/jacojoubert/followers","following_url":"https://api.github.com/users/jacojoubert/following{/other_user}","gists_url":"https://api.github.com/users/jacojoubert/gists{/gist_id}","starred_url":"https://api.github.com/users/jacojoubert/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jacojoubert/subscriptions","organizations_url":"https://api.github.com/users/jacojoubert/orgs","repos_url":"https://api.github.com/users/jacojoubert/repos","events_url":"https://api.github.com/users/jacojoubert/events{/privacy}","received_events_url":"https://api.github.com/users/jacojoubert/received_events","type":"User","site_admin":false},"created_at":"2015-09-30T12:54:00Z","updated_at":"2015-09-30T12:54:00Z","body":"Do you have an example of what you mean?"}}