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

• Use angular material stylesheets #119 Pull angular material sass styles into the build pipeline (@miguelcobain in d001c4a and @mike1o1 in e85fc2e)
• import core styles
• review color palettes and theming
• review layout (there is now a class-based thing? See under the hood section) (@mellatone and @miguelcobain in replace all instances of attribute based flex layout and replace with class based ones #507)
  • 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.
  • remove all references to layout attributes and replace them with layout classes
  • remove FlexMixin as the use of classes should make it useless
• use a more meaningful file structure (see Move to PODs #82 (comment)) (sync with @SaladFork)
• Update components
  • Autocomplete (@xomaczar @ibarrick @miguelcobain in paper menu, paper select and paper autocomplete #395)
  • Button (@jorgelainfiesta in Updated paper-button #324)
  • Card (@joukevandermaas in paper-card: implementation for v1.0 #341)
  • Checkbox (@miguelcobain in update paper-checkbox component #285)
  • Grid list (@Subtletree Update grid list #739)
  • Icons (@peec in ripples and icons #275 )
  • Input (@DanChadwick @miguelcobain in Dan chadwick paper input #326)
  • List, Divider and List controls
    • list and list controls (@miguelcobain in update list and list controls #577)
    • divider (@andybeesee in Divider cleanup, docs and test #398)
  • Menu (@xomaczar @ibarrick @miguelcobain in paper menu, paper select and paper autocomplete #395)
  • Progress circular (@miguelcobain in 1a9b641)
  • Progress linear (@peec in 1.0: paper-progress-linear #277)
  • Radio and radio group (@miguelcobain in update paper-radio and create paper-radio-group #286)
  • RippleMixin (@peec in ripples and icons #275 )
  • Select (@xomaczar @ibarrick @miguelcobain in paper menu, paper select and paper autocomplete #395)
  • Sidenav (@miguelcobain in sidenav update #384)
  • Slider (@mansona in Slider #572)
  • Switch (@jorgelainfiesta in Updated paper-switch component #293)
  • Toolbar (@miguelcobain in update toolbars #367)
  • Virtual repeat (@xomaczar @ibarrick @miguelcobain in paper menu, paper select and paper autocomplete #395)
• New components
  • Dialogs (@DanChadwick @mellatone @miguelcobain in Added tests and further implementation of paper-dialogs #308 Dialog API buff-up. #325 1dd2295 05608bf)
    • don't use transitionend events for animation. Figure out a way to reuse ember-css-transitions "wait for animations" logic.
  • Chips (@mansona and @pauln in Add paper-chips & paper-contact-chips #527)
  • Tabs (@mellatone @miguelcobain in #753, #755 and bc90bea)
  • Tooltips (@miguelcobain in Tooltips #752)
  • Toasts (@mellatone in Feature/snackbar #750)
• 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): 1a9b641
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
#249 (comment)
.

[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
#249 (comment)
.

[miguelcobain]

Styles are now being imported from angular material directly: d001c4a

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. 👍

[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 #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.

[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>

[mellatone]

But for anything more than static styles, we'll have to see about tying that into a pattern for "sticky" items.

[mansona]

Do we want to add Chips to this list? #267 it has been rebased and will probably pass tests if the PR is reopened.

The only current issue with that PR at the moment is that Autocomplete seems to be broken. It's broken on the main Autocomplete demo page as well so it's not something silly I'm doing 😂

[v3ss0n]

Quite close to milestone and things looking quite solid.
Looks like its time for an alpha release for the cli users who would like to test drive?
Thanks

[miguelcobain]

@v3ss0n there are already alpha releases. :)

[v3ss0n]

how to get them on CLI ?

[v3ss0n]

i mean 0.2.14 is still 0.2x release right? not after new 1.0x branch merged , right?

[miguelcobain]

@v3ss0n Correct.

Follow instructions on website to install latest version (the main website runs on alpha).
To install an alpha release ember install [email protected] should do it.

[v3ss0n]

thanks gonna try now.

[steven-ferguson]

@miguelcobain it doesn't look like v1.0.0-alpha.1 has been published to npm, so ember install will not work unless you reference the git rep: ember install miguelcobain/ember-paper.git#1.0.0-alpha.1

[v3ss0n]

@steven-ferguson just use master version right now. it is much improved and stable ember install miguelcobain/ember-paper

[ghost]

Can you do something similar for the latest release? Create a milestone document what needs to be done to reach 1.0.0 and we can all pitch in?

[miguelcobain]

@anthonycollini not sure I understand. This is the document to reach 1.0. we didn't reach it yet (although we're close).

[saerdnaer]

@miguelcobain Can you update the reference in "Tabs (@mellatone in #314)" in the top comment, to point to #578 ?

[miguelcobain]

@saerdnaer done. thanks.

[josiahbryan]

Just wanted to check in here - read most of this thread, but see no activity here in the last several months - totally cool, everyone has lives! :-) Just wanted to ask how the 1.0.0 release is coming, and how everyone feels - is it close? This-year-close? Next year perhaps? Just checking, no worries, just curious. Great work everyone!

[Subtletree]

@josiahbryan It might be closer than you think. No one's commenting in this thread but the OP is being updated.

1.0.0-beta.1 was released 18 days ago and went into 1.0.0-beta.2 3 days ago.

I consider the current release to be fully stable and am using it in production and I know many others are too. #738 (comment)

[josiahbryan]

Wow, good job all! Thanks for the input, good to hear! I'll seriously consider it then for my next project for sure.

Quick question, since you and others are using it in prod quite successfully - does it play nice with bootstrap then? Or is bootstrap and this project (and styles) mutually exclusive?

[Subtletree]

Hmm i guess they are both class based so you might be able to use them both. Personally I'd just use one though since they accomplish the same task. Using 1 means a more cohesive style for your app and doesn't force your users to download 2 separate styling frameworks.

There's things like this out there too https://mdbootstrap.com/material-design-for-bootstrap/

[josiahbryan]

Yeah, tried m-d-for-bs but ...yeah...felt very poorly done in practice and left me gun-shy of material design in general....that is, until I started my latest project, based on bootstrap, and found myself constantly trying to emulate the navbars, buttons, side menus, input fields, et al - all manually, through my own CSS modifications on top of bootstrap. Then I realized (just today), that even though I started with a bootstrap base, I was constantly moving closer and closer to a material look and feel for it since I kept trying to emulate native android apps.

At this point, I'm too invested and too close to beta launch of Sept 1 (per management) on the project to switch to ember-paper, but the next project we start here, I absolutely will try ember-paper with at least one of the betas, even if not full 1.0.0 yet.

Thanks for the space to rant, sorry to clutter the thread. All that is to say, good work guys, and this looks like an awesome project. Stoked to get my hands dirty with your {{paper}} components in my hbs in my next project. Cheers!

[v3ss0n]

@jaichandra we are using it in production for a mobile + Desktop app medical consultation chat platform for medical consultation. We have it running : more than 10K monthly active users.Not in english tho.
https://play.google.com/store/apps/details?id=co.ondr.chat

[ghost]

What stylesheets does 1.0.0 use? Are they the latest angular stylesheets (https://material.angular.io/)?

[miguelcobain]

@anthonycollini correct.