{"action":"created","issue":{"url":"https://api.github.com/repos/miguelcobain/ember-paper/issues/65","labels_url":"https://api.github.com/repos/miguelcobain/ember-paper/issues/65/labels{/name}","comments_url":"https://api.github.com/repos/miguelcobain/ember-paper/issues/65/comments","events_url":"https://api.github.com/repos/miguelcobain/ember-paper/issues/65/events","html_url":"https://github.com/miguelcobain/ember-paper/issues/65","id":60331944,"number":65,"title":"Material Design Menus implementation","user":{"login":"miguelcobain","id":631691,"avatar_url":"https://avatars.githubusercontent.com/u/631691?v=3","gravatar_id":"","url":"https://api.github.com/users/miguelcobain","html_url":"https://github.com/miguelcobain","followers_url":"https://api.github.com/users/miguelcobain/followers","following_url":"https://api.github.com/users/miguelcobain/following{/other_user}","gists_url":"https://api.github.com/users/miguelcobain/gists{/gist_id}","starred_url":"https://api.github.com/users/miguelcobain/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/miguelcobain/subscriptions","organizations_url":"https://api.github.com/users/miguelcobain/orgs","repos_url":"https://api.github.com/users/miguelcobain/repos","events_url":"https://api.github.com/users/miguelcobain/events{/privacy}","received_events_url":"https://api.github.com/users/miguelcobain/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/miguelcobain/ember-paper/labels/discussion","name":"discussion","color":"fad8c7"},{"url":"https://api.github.com/repos/miguelcobain/ember-paper/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":25,"created_at":"2015-03-09T11:48:07Z","updated_at":"2015-07-27T17:12:54Z","closed_at":null,"body":"After looking at the specs, I came to this conclusion:\r\nMaterial Design doesn't define any select component. Instead it has the concept of [menus](http://www.google.com/design/spec/components/menus.html). Menus **are pretty much the same everywhere**. Some common features are:\r\n- they're all triggered by an element, a button for example\r\n- their styling is pretty much the same everywhere, including the ripple effect, animation, icons, etc\r\n- they all have a list of items/options\r\n- they can have separators between the options\r\n- clicking an item triggers an action\r\n\r\nUse cases that menus should cover:\r\n- Textfield drop down/select ([video](http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B0NGgBg38lWWX2VYY3Vnd1J2cTQ/components-menus-usage-061001_Textfield_Dropdown_xhdpi_003.webm))\r\n- App bar drop down ([video](http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B2wX4iIvu8L6YVh1eDYzUTdLNVU/components-menus-usage-061001_Appbar_Dropdown_xhdpi_002.webm))\r\n- Cascading drop down ([video](http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B08MbvYZK1iNaDNNa01QX2x4UkU/components-menus-menus-cascading_dropdown_spec_large_xhdpi.webm))\r\n- List views ([image](http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7MFE5VE1TUF9HRGc/components_dialogs_simplemenus3.png))\r\n- enabled/disabled items and separators ([image](http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7bmZ1ajBVaXhsNTQ/components_menus_items2.png))\r\n\r\nI'm willing to make a full-featured material menu component, or at least the base abstractions for having a decent way to compose future menus.\r\n\r\nI separated this on a number of tasks I could identify, so we don't step on each others toes:\r\n\r\n - [ ] create component `paper-menu`.\r\n   - Animation styling should be here, probably\r\n   - Will contain all menu items\r\n   - should center itself on a certain menu item (tricky, javascript must be used :/)\r\n - [ ] create component `paper-menu-item` (that's what the spec calls them)\r\n   - are meant to be used inside `paper-menu`\r\n   - Styling, including ripple effect\r\n   - trigger action/event/something on click/tap\r\n   - should have a disabled state\r\n   - styling should support a `paper-icon` on the right or left side ([image](http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7VW5LS2JTQ2puOUE/components_menus_usage3do.png))\r\n - [ ] create component `paper-menu-item-divider` or reuse existing [`paper-divider`](http://miguelcobain.github.io/ember-paper/#/divider)\r\n - [ ] create component `paper-menu-container`\r\n   - holds a `paper-menu` and a triggering element element that shows the menu. This is generic, any element could trigger it, probably meant to be subclassed by ember-paper or to customize menu elements users.\r\n   - Is responsible for receiving the actions `open` and `close`\r\n\r\nProposal for the generic menu usage:\r\n```handlebars\r\n{{#paper-menu-container}}\r\n  {{#paper-button action=\"open\"}}\r\n    Open\r\n  {{/paper-button}}\r\n\r\n  {{#paper-menu open=isOpen}}\r\n    {{#paper-menu-item action=\"open\"}} {{!-- this action will go to the user's controller --}}\r\n      Open\r\n    {{/paper-menu-item}}\r\n    {{#paper-menu-item action=\"close\"}} {{!-- this action will go to the user's controller --}}\r\n      Close\r\n    {{/paper-menu-item}}\r\n    {{#paper-menu-item action=\"refresh\"}} {{!-- this action will go to the user's controller --}}\r\n      Refresh\r\n    {{/paper-menu-item}}\r\n  {{/paper-menu}}\r\n{{/paper-menu-container}}\r\n```\r\n\r\nNotice that this follows ember's new motto \"actions up, data down\", i.e `paper-menu` has `open` from parent component and `paper-menu-item` sends actions to parent. Correct me if I'm wrong.\r\n\r\nAfter this, it may be the time where we need to create specific components for each use case:\r\n- [ ] `paper-button-menu` extends `paper-menu-container`\r\n - displays a ready to use button with menu upon clicking\r\n - should also cover the case for Cascading drop down menus. Perhaps with a boolean attribute to distinguish. Or we can just create a new component for them.\r\n- [ ] `paper-select` extends `paper-menu-container`\r\n - displays the selected option and a menu upon triggering\r\n- [ ] `paper-list-item-menu` extends `paper-menu-container`\r\n\r\nNot so sure about how one would use these concrete components, though. We'll give it some more thoughts later.\r\n\r\nAny suggestions/comments?"},"comment":{"url":"https://api.github.com/repos/miguelcobain/ember-paper/issues/comments/125275817","html_url":"https://github.com/miguelcobain/ember-paper/issues/65#issuecomment-125275817","issue_url":"https://api.github.com/repos/miguelcobain/ember-paper/issues/65","id":125275817,"user":{"login":"SirZach","id":1113484,"avatar_url":"https://avatars.githubusercontent.com/u/1113484?v=3","gravatar_id":"","url":"https://api.github.com/users/SirZach","html_url":"https://github.com/SirZach","followers_url":"https://api.github.com/users/SirZach/followers","following_url":"https://api.github.com/users/SirZach/following{/other_user}","gists_url":"https://api.github.com/users/SirZach/gists{/gist_id}","starred_url":"https://api.github.com/users/SirZach/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SirZach/subscriptions","organizations_url":"https://api.github.com/users/SirZach/orgs","repos_url":"https://api.github.com/users/SirZach/repos","events_url":"https://api.github.com/users/SirZach/events{/privacy}","received_events_url":"https://api.github.com/users/SirZach/received_events","type":"User","site_admin":false},"created_at":"2015-07-27T17:12:54Z","updated_at":"2015-07-27T17:12:54Z","body":"@peec very exciting!"}}