diff --git a/CHANGELOG.md b/CHANGELOG.md index c7753d4e2..4ea9fc9d4 100644 --- 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 new file mode 100644 index 000000000..4ddd3dd33 --- /dev/null +++ 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 index 5a9fc1fc5..c2638ba77 100644 --- 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 new file mode 100644 index 000000000..b43660f63 --- /dev/null +++ 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 new file mode 100644 index 000000000..13f6de3ce --- /dev/null +++ b/app/templates/components/paper-toolbar.hbs @@ -0,0 +1,3 @@ +{{yield (hash + tools=(component "paper-toolbar-tools") +)}} \ No newline at end of file diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index f1c0a2bd3..21e0261aa 100644 --- 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 index d3c696c5c..a8ebabb1c 100644 --- a/tests/dummy/app/templates/toolbar.hbs +++ b/tests/dummy/app/templates/toolbar.hbs @@ -1,128 +1,125 @@ {{#paper-toolbar}} -
+ {{#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}} Toolbars -
+ {{/paper-toolbar-tools}} {{/paper-toolbar}} {{#paper-content class="md-padding"}}
- {{#paper-toolbar}} -
- {{#paper-button}}Example button{{/paper-button}} - {{#paper-button}}Example button{{/paper-button}} -
- {{/paper-toolbar}} - -

"md-toolbar-tools" is a class that centers your elements in the toolbar.

- {{#paper-toolbar}} -
- {{#paper-button}} - {{paper-icon 'menu'}} + {{#paper-toolbar-tools}} + {{#paper-button iconButton=true}} + {{paper-icon "menu"}} {{/paper-button}}

- Toolbar with Icon Buttons + Toolbar with Icon Buttons

- - {{#paper-button}} - {{paper-icon 'favorite'}} + + {{#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}} -
+ {{/paper-toolbar-tools}} {{/paper-toolbar}} +
- {{#paper-toolbar}} -
+ + {{#paper-toolbar as |toolbar|}} + {{#toolbar.tools}} {{#paper-button}} Go Back {{/paper-button}} -

- Toolbar with Standard Buttons -

- +

Toolbar with Standard Buttons

+ {{#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}} -
+ {{/toolbar.tools}} {{/paper-toolbar}} +
+ {{#paper-toolbar tall=true accent=true}} -

- Toolbar: tall, accent -

+ {{#paper-toolbar-tools}} +

Toolbar: tall=true, accent=true

+ {{/paper-toolbar-tools}} {{/paper-toolbar}} +
- {{#paper-toolbar tall=true class="md-warn md-hue-3"}} + + {{#paper-toolbar tall=true warn=true}} -

- Toolbar: tall with actions pin to the bottom (md-warn md-hue-3) -

+ {{#paper-toolbar-tools}} +

Toolbar: tall with actions pin to the bottom (tall=true warn=true)

+ {{/paper-toolbar-tools}} {{/paper-toolbar}} + +

Template

- {{#code-block language='handlebars'}} - \{{#paper-toolbar}} - <div class="md-toolbar-tools"> - \{{#paper-button}}Example button\{{/paper-button}} - \{{#paper-button}}Example button\{{/paper-button}} - </div> - - \{{#paper-toolbar}} - <div class="md-toolbar-tools"> - \{{#paper-button}} - \{{paper-icon 'menu'}} - \{{/paper-button}} - <h2> - <span>Toolbar with Icon Buttons</span> - </h2> - <span flex></span> - \{{#paper-button}} - \{{paper-icon 'favorite'}} - \{{/paper-button}} - \{{#paper-button}} - \{{paper-icon 'more-vert'}} - \{{/paper-button}} - </div> - \{{/paper-toolbar}} - - \{{#paper-toolbar}} - <div class="md-toolbar-tools"> - \{{#paper-button}} - Go Back - \{{/paper-button}} - <h2> - <span>Toolbar with Standard Buttons</span> - </h2> - <span flex></span> - \{{#paper-button raised=true}} - Learn More - \{{/paper-button}} - \{{#paper-button mini=true fab=true aria-label="Favorite"}} - \{{paper-icon 'favorite'}} - \{{/paper-button}} - </div> - \{{/paper-toolbar}} - - \{{#paper-toolbar tall=true accent=true}} - <h2 class="md-toolbar-tools"> - <span>Toolbar: tall, accent</span> - </h2> - \{{/paper-toolbar}} - \{{/paper-toolbar}} - - \{{#paper-toolbar tall=true class="md-warn md-hue-3"}} - <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> + {{#code-block language="handlebars"}} + \{{#paper-toolbar}} + \{{#paper-toolbar-tools}} + \{{#paper-button iconButton=true}} + \{{paper-icon "menu"}} + \{{/paper-button}} + <h2> + Toolbar with Icon Buttons </h2> - \{{/paper-toolbar}} - {{/code-block}} + <span class="flex"></span> + \{{#paper-button iconButton=true}} + \{{paper-icon "favorite"}} + \{{/paper-button}} + \{{#paper-button iconButton=true}} + \{{paper-icon "more_vert"}} + \{{/paper-button}} + \{{/paper-toolbar-tools}} + \{{/paper-toolbar}} + + <br /> + + \{{!-- using contextual components form --}} + \{{#paper-toolbar as |toolbar|}} + \{{#toolbar.tools}} + \{{#paper-button}} + Go Back + \{{/paper-button}} + <h2>Toolbar with Standard Buttons</h2> + <span class="flex"></span> + \{{#paper-button raised=true}} + Learn More + \{{/paper-button}} + \{{#paper-button mini=true aria-label="Favorite"}} + \{{paper-icon "favorite"}} + \{{/paper-button}} + \{{/toolbar.tools}} + \{{/paper-toolbar}} + + <br /> + + \{{#paper-toolbar tall=true accent=true}} + \{{#paper-toolbar-tools}} + <h2>Toolbar: tall=true, accent=true</h2> + \{{/paper-toolbar-tools}} + \{{/paper-toolbar}} + + <br /> + + \{{#paper-toolbar tall=true warn=true}} + <span class="flex"></span> + \{{#paper-toolbar-tools}} + <h2>Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</h2> + \{{/paper-toolbar-tools}} + \{{/paper-toolbar}} + + {{~/code-block}} +
{{/paper-content}} diff --git a/tests/integration/components/paper-toolbar-test.js b/tests/integration/components/paper-toolbar-test.js index 5e7a177cc..49b57cfb3 100644 --- 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}} -

- Toolbar: tall, accent -

{{/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); +}); \ No newline at end of file