Update components to be on par with angular material v1

[miguelcobain]

Angular material has reached v1.0.0. It is now a good time for us to update ember-paper to be on par with angular material.

Component List

• [x] #119 Pull angular material sass styles into the build pipeline (@miguelcobain in https://github.com/miguelcobain/ember-paper/commit/d001c4a8e77c8b4d68b48cfe503abeaba5ec84e6 and @mike1o1 in https://github.com/miguelcobain/ember-paper/commit/e85fc2ee61fcf4288eec40c18af05413d3733f1a)
• [x] import core styles
• [x] review color palettes and theming
• [x] review layout (there is now a class-based thing? See under the hood section) (@mellatone and @miguelcobain in https://github.com/miguelcobain/ember-paper/issues/507)
  • [x] we've decided to use classes and get rid of the attributes. The reason is that classes are the only way to have a consistent API across components and html elements.
  • [x] remove all references to layout attributes and replace them with layout classes
  • [x] remove FlexMixin as the use of classes should make it useless
• [ ] use a more meaningful file structure (see https://github.com/miguelcobain/ember-paper/issues/82#issuecomment-167522109) (sync with @saladfork)
• [x] Update components
  • [x] Autocomplete (@xomaczar @ibarrick @miguelcobain in https://github.com/miguelcobain/ember-paper/pull/395)
  • [x] Button (@jorgelainfiesta in https://github.com/miguelcobain/ember-paper/pull/324)
  • [x] Card (@joukevandermaas in #341)
  • [x] Checkbox (@miguelcobain in https://github.com/miguelcobain/ember-paper/pull/285)
  • [x] Grid list (@Subtletree https://github.com/miguelcobain/ember-paper/pull/739)
  • [x] Icons (@peec in https://github.com/miguelcobain/ember-paper/pull/275 )
  • [x] Input (@DanChadwick @miguelcobain in https://github.com/miguelcobain/ember-paper/pull/326)
  • [x] List, Divider and List controls
    • [x] list and list controls (@miguelcobain in https://github.com/miguelcobain/ember-paper/pull/577)
    • [x] divider (@andybeesee in https://github.com/miguelcobain/ember-paper/pull/398)
  • [x] Menu (@xomaczar @ibarrick @miguelcobain in https://github.com/miguelcobain/ember-paper/pull/395)
  • [x] Progress circular (@miguelcobain in https://github.com/miguelcobain/ember-paper/commit/1a9b6411a8ca30f3e9440d8585dc0f1ff4ff7649)
  • [x] Progress linear (@peec in https://github.com/miguelcobain/ember-paper/pull/277)
  • [x] Radio and radio group (@miguelcobain in https://github.com/miguelcobain/ember-paper/pull/286)
  • [x] RippleMixin (@peec in https://github.com/miguelcobain/ember-paper/pull/275 )
  • [x] Select (@xomaczar @ibarrick @miguelcobain in https://github.com/miguelcobain/ember-paper/pull/395)
  • [x] Sidenav (@miguelcobain in #384)
  • [x] Slider (@mansona in #572)
  • [x] Switch (@jorgelainfiesta in https://github.com/miguelcobain/ember-paper/pull/293)
  • [x] Toolbar (@miguelcobain in https://github.com/miguelcobain/ember-paper/pull/367)
  • [x] Virtual repeat (@xomaczar @ibarrick @miguelcobain in https://github.com/miguelcobain/ember-paper/pull/395)
• [ ] New components
  • [x] Dialogs (@DanChadwick @mellatone @miguelcobain in https://github.com/miguelcobain/ember-paper/pull/308 https://github.com/miguelcobain/ember-paper/pull/325 https://github.com/miguelcobain/ember-paper/commit/1dd229581684ee032616df779f5510fe90b87d80 https://github.com/miguelcobain/ember-paper/commit/05608bfa3b52d270e83b77b880c1e03eade729c6)
    • [x] don't use transitionend events for animation. Figure out a way to reuse ember-css-transitions "wait for animations" logic.
  • [x] Chips (@mansona and @pauln in https://github.com/miguelcobain/ember-paper/pull/527)
  • [x] Tabs (@mellatone @miguelcobain in #753, #755 and bc90bea)
  • [x] Tooltips (@miguelcobain in https://github.com/miguelcobain/ember-paper/pull/752)
  • [x] Toasts (@mellatone in https://github.com/miguelcobain/ember-paper/pull/750)
• [x] Docs
  • [ ] review the doc styling and needed primitives (tabs, code highlighting and overall styles)

Components should be updated using the automatically-imported Angular Material stylesheets. See Angular Material v1.0.6 for reference: https://github.com/angular/material/tree/v1.0.6

How to get started

For each component in the above list, one should:

1. do your work in a branch based on the master branch.
2. angular-material 1.0 styles are now included. Check if we need to update our markup to conform the styles (the "hbs" part).
3. Double check for missing or buggy functionality (the "js" part, you can use the docs, the dummy app, to quickly test 1 and 2).
4. use new ember features when applicable (e.g closure actions, contextual components, ddau in general).
5. write/review tests. convert unit to integration tests. check angular material tests to make sure we're not forgetting anything.
6. update the docs if necessary. The website hosted at http://miguelcobain.github.io/ember-paper/ is the "dummy" app in the tests/ folder. It's a regular ember application. Don't waste too much time on docs for now. We'll update the docs later using angular material docs for inspiration, where applicable.
7. document changes, especially breaking changes if any, in CHANGELOG.md (see other examples there)

Example commit (paper-progress-circular): https://github.com/miguelcobain/ember-paper/commit/1a9b6411a8ca30f3e9440d8585dc0f1ff4ff7649 Try to follow the same style.

Current work for ember-paper v1 is being done at master Reference in issues to branch wip/v1.0.0 now refer to master as the wip branch was merged into master.

FAQ

See this comment for some more info: FAQ

[SirZach]

Does updating also mean including closure actions?

[miguelcobain]

@SirZach Sure! Just added "use new ember features when applicable (e.g closure actions)" as a part of the update process.

[SirZach]

@miguelcobain if you can describe how you would best like to see that implemented, I'll give a stab at a PR. I know you like the ember-actions(?) addon that you're using ember-leaflet.

[miguelcobain]

@SirZach A PR that uses ember-actions will be accepted, of course. People could use them immediately. However, feels easier if that was to be made part of the update process.

[joukevandermaas]

Will this lead to breaking changes? If so can we make an effort to document them with a clear migration path?

[miguelcobain]

@joukevandermaas It may lead to breaking changes or may not. I'm not into angular 1 changes yet. But good point I'll add that as a part of the update process.

[jamesdixon]

@miguelcobain do you want to work from the 1.0 branch or the 1.0.1 branch that was released a couple of days ago?

[miguelcobain]

Currently working for 1.0.0 release. Shouldn't be hard to take it to further patch versions later (1.0.x).

A sáb, 19/12/2015, 23:28, James Dixon [email protected] escreveu:

@miguelcobain https://github.com/miguelcobain do you want to work from the 1.0 branch or the 1.0.1 branch that was released a couple of days ago?

— Reply to this email directly or view it on GitHub https://github.com/miguelcobain/ember-paper/issues/249#issuecomment-166033427 .

[jamesdixon]

thanks, @miguelcobain. before I start, anything special when bringing over the style sheets -- literally just a copy/paste or is there anything else that needs to be done to prep for EP?

[miguelcobain]

One of the main features of ember-paper 1.0 will be the automatic pulling of angular material stylesheets. So you won't need to copy paste anything. Just "import" it.

A dom, 20/12/2015, 00:23, James Dixon [email protected] escreveu:

thanks, @miguelcobain https://github.com/miguelcobain. before I start, anything special when bringing over the style sheets -- literally just a copy/paste or is there anything else that needs to be done to prep for EP?

— Reply to this email directly or view it on GitHub https://github.com/miguelcobain/ember-paper/issues/249#issuecomment-166035728 .

[miguelcobain]

Styles are now being imported from angular material directly: https://github.com/miguelcobain/ember-paper/commit/d001c4a8e77c8b4d68b48cfe503abeaba5ec84e6

Goodbye copy pasting and version inconsistency!

Current work being done in the wip/v1.0.0 branch.

@mike1o1 can I count on you to review theming? Colors seem a bit broken with AM v1.0.0 styles.

[mike1o1]

Awesome work! I won't be able to work on this until the weekend, but I'll take a look then. :+1:

[xomaczar]

@miguelcobain how about converting components into pod structure, hbs next to the components js

[miguelcobain]

@xomaczar That would be awesome. Is that possible in addons?

[knownasilya]

Yes, just do ember g component --pod my-comp and it'll set it up.

[miguelcobain]

pod discussion at https://github.com/miguelcobain/ember-paper/issues/82

[knownasilya]

Also, can 1.0 make use of contextual components (2.3+)?

[miguelcobain]

@knownasilya Yes, for a couple of reasons:

• by the time ember-paper v1 is done, contextual components will hopefully be widespread
• if backwards compatibility is desired, there is a way to provide specific templates for lower ember versions

Nevertheless, I think we should discuss the use of contextual components on a per component basis.

[mike1o1]

I was able to get layout working, and better handling off some themes for non-standard names, such as foreground and background. This fixed the issue with md-content not pulling in the correct colors, so now the demo page looks much nicer!

[peec]

Updated list with completed RippleMixin and Icons, all done in https://github.com/miguelcobain/ember-paper/pull/275

PS. great work on the dynamic import of angular css

[peec]

@miguelcobain Just noticed this when I tried to install ember-paper#wip/1.0.0 to another app:

Does not happen when I use the development version of ember-paper, but only when I try to install wip to an existing app:

peec@peec-virtual-machine ~/Projects/app $ ember serve
version: 1.13.8
undefined is not a function
TypeError: undefined is not a function
    at Class.module.exports.treeForStyles (/home/peec/Projects/app/node_modules/ember-paper/index.js:116:24)

Couldn't figure it out as im not familiar with the build process

[miguelcobain]

There are plenty of PRs and commits to take inspiration from. People that were thinking about contributing to this huge milestone in material design for ember: you can take a look at previous commits and that will make your life easier.

[miguelcobain]

Since https://github.com/miguelcobain/ember-paper/commit/2b483d2f43299f3814dfa2f2b266dfee78d5cf2b ember-paper has integrated ember-suave. So, the next PRs will need to conform the codestyle, or you get an error. Neat!

[jaichandra]

@miguelcobain we are planning to use ember-paper and angular-material in our organization and started doing some initial work. We were thinking on how to keep both repos in sync and I luckily found this thread. I'm really delighted to see that you are working towards reusing angular stylesheets directly. I tried building out of this branch and see that lot of components still doesn't work. Not sure how much I can contribute, but wanted to check, if this is because of stylesheet issues or more? I see that there are no ember sass files (except color-pallette and default-theme) any more. Is it going to be that way (no more css) or are you planning to add some stylesheet overrides to fix the issues? Or if the direction is to update javascript and hbs files to use the angular stylesheets?

It would really help if I could get some direction on this and also some tentative timelines on when we could expect a release of this version.

[miguelcobain]

@jaichandra

I'm really delighted to see that you are working towards reusing angular stylesheets directly.

Historically, ember-paper always used angular material stylesheets. The difference with 1.0.0 is that:

1. stylesheets are now pulled in directly through npm (previously we had to copy paste and find-replace them into the project)
2. stylesheets now get version-locked. This means that we make sure that we use styles from the same version. Previously we could copy paste styles from different angular material versions and it was hard to keep track of inconsistencies

I tried building out of this branch and see that lot of components still doesn't work.

It is normal. This is a wip (work in progress) branch. That happens because we now pull in the styles from angular material 1.0 but we still didn't update the ember components to conform those style updates. In this issue you can see a list of completed components. Those should work fine.

I see that there are no ember sass files (except color-pallette and default-theme) any more. Is it going to be that way (no more css) or are you planning to add some stylesheet overrides to fix the issues?

The idea is to not write any styles. Angular material's styles are maintained officially by google. That means that we're as close as possible to the spec without having maintenance nightmares (writing so much components is already an herculean task, imagine if we had to style components as well).

Or if the direction is to update javascript and hbs files to use the angular stylesheets?

This is exactly what this issue is about: updating current ember components to conform the latest angular material stylesheets. It is a good time for that now that angular material reached v1.0. I expect some more stability from now on.

Not sure how much I can contribute

This is the correct issue for that question. Just pick a component and follow the "How to get started" guide in this issue! If you need any ad-hoc guidance, me and other users are at the #e-paper channel at ember's slack.

we are planning to use ember-paper and angular-material in our organization

It would be best for both if we joined forces.

It would really help if I could get some direction on this and also some tentative timelines on when we could expect a release of this version.

It is very difficult to predict a release date or a timeline. But considering the current activity, maybe two/three months? I hope more people jump in because I believe ember-paper v1.0.0 will be a game changer in the ember landscape for building UIs.

[jaichandra]

Thanks @miguelcobain for the detailed response. helps a lot.

[jorgelainfiesta]

I think we should start using getAttr instead of get for attributes. Right now, using just get works because of the attributes proxy. I now there's this article by locks stating we shouldn't get the attrs hash directly. However, getAttr helps us enforce one-way-bindings and makes variables more explicit in our code base.

[mellatone]

@jaichandra I'm really glad that you were considering using Ember Paper in your organization. I wanted to follow up and see how things were going with that effort? I had to take the same considerations into account before adopting it at my organization. Are there any major blockers that you've run into so far?

Ember Paper has been gaining a lot of momentum, and community contributions are still welcome to help get [email protected] shipped. If you haven't joined already, I'd like to invite you to also connect with the Ember Community #ember-paper channel.

[chbonser]

@miguelcobain are there any plans to support a subheader? https://material.angularjs.org/latest/demo/subheader

[mellatone]

@chbonser We can hide it behind an officially maintained component, but I do this for now:

hbs: <md-subheader class="md-primary">Unread Messages</md-subheader>