replace all instances of attribute based flex layout and replace with class based ones

[miguelcobain]

Previously we used Angular Material's attribute based flex layout like:

<div layout="row">
  <div flex>First item in row</div>
  <div flex="20">Second item in row</div>
</div>

However, sometimes we need these attributes in components, so we created a FlexMixin that has those attributeBindings, e.g {{paper-component flex="20"}}. However, the current scenario is suboptimal:

• There are performance penalties with generic css attribute-based selectors, especially in IE
• Always using FlexMixin in every component is not very handy, especially because we cant use an attribute binding named layout. That property name is already taken in Ember components.

Angular Material converts attributes to classes under the hood with attribute directives. We think the classes AM uses under the hood make a perfect public api. Ember components and normal elements support class attribute by default.

So, the above example converts to:

<div class="layout-row">
  <div class="flex">First item in row</div>
  <div class="flex-20">Second item in row</div>
</div>

TODO:

• replace all layout related attributes with classes in documentation (located in the dummy app of this repo) (@mellatone in replaced layout attributes with classes #528)
• drop FlexMixin (@miguelcobain in 338c324)
• stop importing attribute scss from AM here (@miguelcobain in 473ff52)

[chriskrycho]

👋 I might take a stab at this this week.

[topaxi]

+1

I'm currently excluding the attribute css file by hand (by completely copying the ember-paper.scss except that one import statement) because it makes the output css file huge!

[chriskrycho]

Alas: I’ve gotten hammered with some surprises this month. If someone else wants this for t-shirt time… please take it.

[jamesdixon]

I noticed in the Angular docs that it says:

Developers should continue to use Layout directives in the HTML markup as the classes may change between releases.

Thoughts?

[joukevandermaas]

@jamesdixon angular has some capabilities that ember does not. Those directives are translated to classes at runtime (or compile time?). In ember they would remain in the DOM, with performance and flexibility concerns.

I think the general conclusion was that classes are a better fit for ember.

[jamesdixon]

Fair enough! Just wanted to mention it. Thanks, @joukevandermaas!

[miguelcobain]

Fixed (see #507 (comment) for details)