update toolbars (#367)

* update toolbars * update changelog
adopted-ember-addons · May 5, 2016 · 5b0a542 · 5b0a542
1 parent 3419ff8
commit 5b0a542
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 100 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,7 +18,8 @@ Contributions and pull requests are always welcome. Contributors may often be fo
 
 - [#365](https://github.com/miguelcobain/ember-paper/pull/365) paper-button: Support for `fab` and `mini`.
 - [#362](https://github.com/miguelcobain/ember-paper/pull/362) paper-toolbar: Support for `tall`.
-- [#364](https://github.com/miguelcobain/ember-paper/pull/364) Support installation via both npm versions 2 and 3. 
+- [#364](https://github.com/miguelcobain/ember-paper/pull/364) Support installation via both npm versions 2 and 3.
+- [#367](https://github.com/miguelcobain/ember-paper/pull/367) You should now use `paper-toolbar-tools` component (or respective contextual component) instead of the `md-toolbar-tools` class.
 
 #### 1.0.0-alpha.0
 - [1a9b641](https://github.com/miguelcobain/ember-paper/commit/1a9b6411a8ca30f3e9440d8585dc0f1ff4ff7649) paper-progress-circular now uses `diameter` instead of `md-diameter`

diff --git a/addon/components/paper-toolbar-tools.js b/addon/components/paper-toolbar-tools.js
@@ -0,0 +1,6 @@
+import Ember from 'ember';
+const { Component } = Ember;
+
+export default Component.extend({
+  classNames: ['md-toolbar-tools']
+});
diff --git a/addon/components/paper-toolbar.js b/addon/components/paper-toolbar.js
@@ -1,7 +1,8 @@
 import Ember from 'ember';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
+const { Component } = Ember;
 
-export default Ember.Component.extend(ColorMixin, {
+export default Component.extend(ColorMixin, {
   tagName: 'md-toolbar',
   classNames: ['md-default-theme'],
   tall: false,

diff --git a/app/components/paper-toolbar-tools.js b/app/components/paper-toolbar-tools.js
@@ -0,0 +1,3 @@
+import PaperToolbarTools from 'ember-paper/components/paper-toolbar-tools';
+
+export default PaperToolbarTools;
diff --git a/app/templates/components/paper-toolbar.hbs b/app/templates/components/paper-toolbar.hbs
@@ -0,0 +1,3 @@
+{{yield (hash
+  tools=(component "paper-toolbar-tools")
+)}}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -32,7 +32,7 @@
         {{#paper-item onClick=(transition-to "sidenav")}}Sidenav {{paper-icon "warning" title="Not updated yet."}}{{/paper-item}}
         {{#paper-item onClick=(transition-to "slider")}}Slider {{paper-icon "warning" title="Not updated yet."}}{{/paper-item}}
         {{#paper-item onClick=(transition-to "switch")}}Switch{{/paper-item}}
-        {{#paper-item onClick=(transition-to "toolbar")}}Toolbar {{paper-icon "warning" title="Not updated yet."}}{{/paper-item}}
+        {{#paper-item onClick=(transition-to "toolbar")}}Toolbar{{/paper-item}}
         {{#paper-item onClick=(transition-to "typography")}}Typography{{/paper-item}}
       {{/paper-list}}
 

diff --git a/tests/dummy/app/templates/toolbar.hbs b/tests/dummy/app/templates/toolbar.hbs
@@ -1,128 +1,125 @@
 {{#paper-toolbar}}
-    <div class="md-toolbar-tools">
+    {{#paper-toolbar-tools}}
       {{#paper-sidenav-toggle as |toggle|}}
         {{#paper-button onClick=(action "toggleMenu" target=toggle) iconButton=true}}{{paper-icon "menu"}}{{/paper-button}}
       {{/paper-sidenav-toggle}}
         <span class="md-breadcrumb-page">Toolbars</span>
-    </div>
+    {{/paper-toolbar-tools}}
 {{/paper-toolbar}}
 {{#paper-content class="md-padding"}}
 <div class="doc-content">
-  {{#paper-toolbar}}
-    <div class="md-toolbar-tools">
-      {{#paper-button}}Example button{{/paper-button}}
-      {{#paper-button}}Example button{{/paper-button}}
-    </div>
-  {{/paper-toolbar}}
-
-  <p>"md-toolbar-tools" is a class that centers your elements in the toolbar.</p>
-
 
   {{#paper-toolbar}}
-    <div class="md-toolbar-tools">
-      {{#paper-button}}
-        {{paper-icon 'menu'}}
+    {{#paper-toolbar-tools}}
+      {{#paper-button iconButton=true}}
+        {{paper-icon "menu"}}
       {{/paper-button}}
       <h2>
-        <span>Toolbar with Icon Buttons</span>
+        Toolbar with Icon Buttons
       </h2>
-      <span flex></span>
-      {{#paper-button}}
-        {{paper-icon 'favorite'}}
+      <span class="flex"></span>
+      {{#paper-button iconButton=true}}
+        {{paper-icon "favorite"}}
       {{/paper-button}}
-      {{#paper-button}}
-        {{paper-icon 'more-vert'}}
+      {{#paper-button iconButton=true}}
+        {{paper-icon "more_vert"}}
       {{/paper-button}}
-    </div>
+    {{/paper-toolbar-tools}}
   {{/paper-toolbar}}
+
   <br />
-  {{#paper-toolbar}}
-     <div class="md-toolbar-tools">
+
+  {{#paper-toolbar as |toolbar|}}
+     {{#toolbar.tools}}
        {{#paper-button}}
          Go Back
        {{/paper-button}}
-       <h2>
-         <span>Toolbar with Standard Buttons</span>
-       </h2>
-       <span flex></span>
+       <h2>Toolbar with Standard Buttons</h2>
+       <span class="flex"></span>
        {{#paper-button raised=true}}
          Learn More
        {{/paper-button}}
-       {{#paper-button mini=true fab=true aria-label="Favorite"}}
-        {{paper-icon 'favorite'}}
+       {{#paper-button mini=true aria-label="Favorite"}}
+        {{paper-icon "favorite"}}
        {{/paper-button}}
-     </div>
+     {{/toolbar.tools}}
    {{/paper-toolbar}}
+
   <br />
+
   {{#paper-toolbar tall=true accent=true}}
-    <h2 class="md-toolbar-tools">
-      <span>Toolbar: tall, accent</span>
-    </h2>
+    {{#paper-toolbar-tools}}
+      <h2>Toolbar: tall=true, accent=true</h2>
+    {{/paper-toolbar-tools}}
   {{/paper-toolbar}}
+
   <br />
-  {{#paper-toolbar tall=true class="md-warn md-hue-3"}}
+
+  {{#paper-toolbar tall=true warn=true}}
     <span flex></span>
-    <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
-      <span class="md-flex">Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</span>
-    </h2>
+    {{#paper-toolbar-tools}}
+      <h2>Toolbar: tall with actions pin to the bottom (tall=true warn=true)</h2>
+    {{/paper-toolbar-tools}}
   {{/paper-toolbar}}
+
+
   <h3>Template</h3>
-  {{#code-block language='handlebars'}}
-    \{{#paper-toolbar}}
-      &lt;div class="md-toolbar-tools"&gt;
-        \{{#paper-button}}Example button\{{/paper-button}}
-        \{{#paper-button}}Example button\{{/paper-button}}
-      &lt;/div&gt;
-
-      \{{#paper-toolbar}}
-        &lt;div class="md-toolbar-tools"&gt;
-          \{{#paper-button}}
-            \{{paper-icon 'menu'}}
-          \{{/paper-button}}
-          &lt;h2&gt;
-            &lt;span&gt;Toolbar with Icon Buttons&lt;/span&gt;
-          &lt;/h2&gt;
-          &lt;span flex&gt;&lt;/span&gt;
-          \{{#paper-button}}
-            \{{paper-icon 'favorite'}}
-          \{{/paper-button}}
-          \{{#paper-button}}
-            \{{paper-icon 'more-vert'}}
-          \{{/paper-button}}
-        &lt;/div&gt;
-      \{{/paper-toolbar}}
-
-      \{{#paper-toolbar}}
-         &lt;div class="md-toolbar-tools"&gt;
-           \{{#paper-button}}
-             Go Back
-           \{{/paper-button}}
-           &lt;h2&gt;
-             &lt;span&gt;Toolbar with Standard Buttons&lt;/span&gt;
-           &lt;/h2&gt;
-           &lt;span flex&gt;&lt;/span&gt;
-           \{{#paper-button raised=true}}
-             Learn More
-           \{{/paper-button}}
-           \{{#paper-button mini=true fab=true aria-label="Favorite"}}
-            \{{paper-icon 'favorite'}}
-           \{{/paper-button}}
-         &lt;/div&gt;
-       \{{/paper-toolbar}}
-
-      \{{#paper-toolbar tall=true accent=true}}
-        &lt;h2 class="md-toolbar-tools"&gt;
-          &lt;span&gt;Toolbar: tall, accent&lt;/span&gt;
-        &lt;/h2&gt;
-      \{{/paper-toolbar}}
-    \{{/paper-toolbar}}
-
-    \{{#paper-toolbar tall=true class="md-warn md-hue-3"}}
-      &lt;span flex&gt;&lt;/span&gt;
-      &lt;h2 class="md-toolbar-tools md-toolbar-tools-bottom"&gt;
-        &lt;span class="md-flex"&gt;Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)&lt;/span&gt;
+  {{#code-block language="handlebars"}}
+  \{{#paper-toolbar}}
+    \{{#paper-toolbar-tools}}
+      \{{#paper-button iconButton=true}}
+        \{{paper-icon "menu"}}
+      \{{/paper-button}}
+      &lt;h2&gt;
+        Toolbar with Icon Buttons
       &lt;/h2&gt;
-    \{{/paper-toolbar}}
-  {{/code-block}}
+      &lt;span class="flex"&gt;&lt;/span&gt;
+      \{{#paper-button iconButton=true}}
+        \{{paper-icon "favorite"}}
+      \{{/paper-button}}
+      \{{#paper-button iconButton=true}}
+        \{{paper-icon "more_vert"}}
+      \{{/paper-button}}
+    \{{/paper-toolbar-tools}}
+  \{{/paper-toolbar}}
+
+  &lt;br /&gt;
+
+  \{{!-- using contextual components form --}}
+  \{{#paper-toolbar as |toolbar|}}
+     \{{#toolbar.tools}}
+       \{{#paper-button}}
+         Go Back
+       \{{/paper-button}}
+       &lt;h2&gt;Toolbar with Standard Buttons&lt;/h2&gt;
+       &lt;span class="flex"&gt;&lt;/span&gt;
+       \{{#paper-button raised=true}}
+         Learn More
+       \{{/paper-button}}
+       \{{#paper-button mini=true aria-label="Favorite"}}
+        \{{paper-icon "favorite"}}
+       \{{/paper-button}}
+     \{{/toolbar.tools}}
+   \{{/paper-toolbar}}
+
+  &lt;br /&gt;
+
+  \{{#paper-toolbar tall=true accent=true}}
+    \{{#paper-toolbar-tools}}
+      &lt;h2&gt;Toolbar: tall=true, accent=true&lt;/h2&gt;
+    \{{/paper-toolbar-tools}}
+  \{{/paper-toolbar}}
+
+  &lt;br /&gt;
+
+  \{{#paper-toolbar tall=true warn=true}}
+    &lt;span class="flex"&gt;&lt;/span&gt;
+    \{{#paper-toolbar-tools}}
+      &lt;h2&gt;Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)&lt;/h2&gt;
+    \{{/paper-toolbar-tools}}
+  \{{/paper-toolbar}}
+
+  {{~/code-block}}
+
 </div>
 {{/paper-content}}
diff --git a/tests/integration/components/paper-toolbar-test.js b/tests/integration/components/paper-toolbar-test.js
@@ -6,14 +6,25 @@ moduleForComponent('paper-toolbar', 'Integration | Component | paper toolbar', {
 });
 
 test('uses md-tall class tall=true', function(assert) {
-  // Template block usage:
+  assert.expect(1);
+
   this.render(hbs`
     {{#paper-toolbar tall=true}}
-      <h2 class="md-toolbar-tools">
-        <span>Toolbar: tall, accent</span>
-      </h2>
     {{/paper-toolbar}}
   `);
 
   assert.ok(this.$('md-toolbar').hasClass('md-tall'));
 });
+
+test('paper-toolbar-tools uses .md-toolbar-tools class', function(assert) {
+  assert.expect(1);
+
+  this.render(hbs`
+    {{#paper-toolbar tall=true}}
+      {{#paper-toolbar-tools}}
+      {{/paper-toolbar-tools}}
+    {{/paper-toolbar}}
+  `);
+
+  assert.equal(this.$('.md-toolbar-tools').length, 1);
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import PaperToolbarTools from 'ember-paper/components/paper-toolbar-tools';

		export default PaperToolbarTools;