make list controls API more pleasant. update docs and tests.

miguelcobain · Nov 26, 2016 · 6c980fb · 6c980fb
1 parent 94b028e
commit 6c980fb
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 129 deletions.
diff --git a/app/templates/components/paper-item.hbs b/app/templates/components/paper-item.hbs
@@ -1,3 +1,7 @@
 <div class="md-no-style md-list-item-inner">
-{{yield}}
+  {{yield (hash
+    checkbox=(component "paper-checkbox" class="md-secondary")
+    button=(component "paper-button" class="md-secondary")
+    switch=(component "paper-switch" class="md-secondary")
+  )}}
 </div>
diff --git a/tests/dummy/app/controllers/demo/list-controls.js b/tests/dummy/app/controllers/demo/list-controls.js
@@ -1,42 +1,47 @@
 import Ember from 'ember';
 
-const { Controller, A } = Ember;
+const { Controller, computed } = Ember;
 
 export default Controller.extend({
-  listData: A([{
-    face: 'tomster.png',
-    who: 'tomster 1',
-    what: 'a message for you',
-    notes: 'this is a message for you about ember'
-  }, {
-    face: 'tomster.png',
-    who: 'tomster 2',
-    what: 'a message for you',
-    notes: 'this is a message for you about ember'
-  }, {
-    face: 'tomster.png',
-    who: 'tomster 3',
-    what: 'a message for you',
-    notes: 'this is a message for you about ember'
-  }, {
-    face: 'tomster.png',
-    who: 'tomster 4',
-    what: 'a message for you',
-    notes: 'this is a message for you about ember'
-  }, {
-    face: 'tomster.png',
-    who: 'tomster 5',
-    what: 'a message for you',
-    notes: 'this is a message for you about ember'
-  }]),
 
-  messageData: A([{
+  toppings: [
+    {
+      name: 'Pepperoni',
+      enabled: false
+    }, {
+      name: 'Sausage',
+      enabled: false
+    }, {
+      name: 'Black Olives',
+      enabled: true
+    }, {
+      name: 'Green Peppers',
+      enabled: false
+    }
+  ],
+
+  messageData: [{
     message: 'Message A'
   }, {
     message: 'Message B'
   }, {
     message: 'Message C'
-  }]),
+  }],
+
+  names: [
+    'Marina Augustine',
+    'Oddr Sarno',
+    'Nick Giannopoulos'
+  ],
+
+  listData: computed.map('names', function(c, index) {
+    let [firstName, lastName] = c.split(' ');
+    return {
+      name: c,
+      email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@example.com`,
+      img: `http://lorempixel.com/50/50/people?${index}`
+    };
+  }),
 
   actions: {
     transitionToWifiMenu() {
@@ -49,10 +54,10 @@ export default Controller.extend({
       alert('Secondary actions can be used for one click actions.');
     },
     goToPerson(person) {
-      alert(`Imagine you transition to the person full view for '${person.who}' here.`);
+      alert(`Imagine you transition to the person full view for '${person.name}' here.`);
     },
     secondaryPersonClick(person) {
-      alert(`'${person.who}'. Secondary actions can be used for one click actions.`);
+      alert(`'${person.name}'. Secondary actions can be used for one click actions.`);
     },
     transitionToDataUsage() {
       alert('Imagine you would be taken to data-usage.');

diff --git a/tests/dummy/app/templates/demo/list-controls.hbs b/tests/dummy/app/templates/demo/list-controls.hbs
@@ -1,93 +1,109 @@
 {{page-toolbar pageTitle="List Controls" isDemo=true isWIP=true}}
 
 {{#doc-content}}
-  <h2>Basic Usage</h2>
-  {{! BEGIN-SNIPPET list-controls }}
-  {{#paper-content class="md-whiteframe-z1 list-demo list-controls-demo"}}
-    {{#paper-list}}
-      {{#paper-subheader class="md-no-sticky"}}Single Action Checkboxes{{/paper-subheader}}
-
-      {{#paper-item}}
-        <p>Checkbox 1</p>
-        {{paper-checkbox class="md-secondary" value=checkboxEnabled1 onChange=(action (mut checkboxEnabled1))}}
-      {{/paper-item}}
-
-      {{#paper-item}}
-        <p>Checkbox 2</p>
-        {{paper-checkbox class="md-secondary" value=checkboxEnabled2 onChange=(action (mut checkboxEnabled2))}}
-      {{/paper-item}}
-
-      {{paper-divider}}
-
-      {{#paper-subheader class="md-no-sticky"}}Clickable Items with Secondary Controls{{/paper-subheader}}
-
-      {{#paper-item onClick="transitionToWifiMenu"}}
-        {{paper-icon "network_wifi"}}
-        <p>Wi-Fi</p>
-        {{paper-switch class="md-secondary" value=wifiEnabled onChange=(action (mut wifiEnabled))}}
-      {{/paper-item}}
-
-      {{#paper-item onClick="transitionToBluetoothMenu"}}
-        {{paper-icon "bluetooth"}}
-        <p>Bluetooth</p>
-        {{paper-switch class="md-secondary" value=bluetoothEnabled onChange=(action (mut bluetoothEnabled))}}
-      {{/paper-item}}
-
-      {{#paper-item onClick="transitionToDataUsage"}}
-        {{paper-icon "data_usage"}}
-        <p>Data Usage</p>
-      {{/paper-item}}
-
-      {{paper-divider}}
-
-      {{#paper-subheader class="md-no-sticky"}}Checkbox with Secondary Action{{/paper-subheader}}
-
-      {{#each messageData as |item|}}
-        {{#paper-item}}
-          {{#paper-checkbox value=item.checked onChange=(action (mut item.checked))}}{{/paper-checkbox}}
-          <p>{{item.message}}</p>
-          {{#paper-button class="md-secondary" iconButton=true onClick=(action "secondaryMessageClick" item)}}
-            {{paper-icon "message"}}
-          {{/paper-button}}
+
+  {{#paper-card}}
+    {{#paper-toolbar}}
+      {{#paper-toolbar-tools}}
+        <h2>Basic Usage</h2>
+      {{/paper-toolbar-tools}}
+    {{/paper-toolbar}}
+    {{#paper-content}}
+      {{! BEGIN-SNIPPET list-controls }}
+      {{#paper-list}}
+
+        {{#paper-subheader}}Single Action Checkboxes{{/paper-subheader}}
+        {{#each toppings as |topping|}}
+          {{#paper-item as |controls|}}
+            <p>{{topping.name}}</p>
+            {{controls.checkbox
+              value=topping.enabled
+              onChange=(action (mut topping.enabled))}}
+          {{/paper-item}}
+        {{/each}}
+
+        {{paper-divider}}
+
+        {{#paper-subheader}}Secondary Buttons{{/paper-subheader}}
+        {{#paper-item as |controls|}}
+          <p>Clicking the button to the right will fire the secondary action</p>
+          {{#controls.button onClick=(action "transitionToWifiMenu")}}
+            More Info
+          {{/controls.button}}
+        {{/paper-item}}
+        {{#paper-item as |controls|}}
+          <p>Click anywhere to fire the primary action, or the button to fire the secondary</p>
+          {{#controls.button onClick=(action "transitionToWifiMenu")}}
+            More Info
+          {{/controls.button}}
         {{/paper-item}}
-      {{/each}}
 
-      {{#paper-divider}}{{/paper-divider}}
+        {{paper-divider}}
 
-      {{#paper-subheader class="md-no-sticky"}}Clickable Avatars{{/paper-subheader}}
+        {{#paper-subheader}}Clickable Items with Secondary Controls{{/paper-subheader}}
+        {{#paper-item onClick=(action "transitionToWifiMenu") as |controls|}}
+          {{paper-icon "network-wifi"}}
+          <p>Wi-Fi</p>
+          {{controls.switch value=wifiEnabled onChange=(action (mut wifiEnabled))}}
+        {{/paper-item}}
+        {{#paper-item onClick=(action "transitionToBluetoothMenu") as |controls|}}
+          {{paper-icon "bluetooth"}}
+          <p>Bluetooth</p>
+          {{controls.switch value=bluetoothEnabled onChange=(action (mut bluetoothEnabled))}}
+        {{/paper-item}}
+        {{#paper-item onClick=(action "transitionToDataUsage")}}
+          {{paper-icon "data-usage"}}
+          <p>Data Usage</p>
+        {{/paper-item}}
 
-      {{#each listData as |item|}}
-        {{#paper-item class="md-3-line" onClick=(action "goToPerson" item)}}
-            <img src={{item.face}} alt={{item.who}} class="md-avatar">
+        {{paper-divider}}
+
+        {{#paper-subheader class="md-no-sticky"}}Checkbox with Secondary Action{{/paper-subheader}}
+        {{#each messageData as |item|}}
+          {{#paper-item as |controls|}}
+            {{paper-checkbox value=item.checked onChange=(action (mut item.checked))}}
+            <p>{{item.message}}</p>
+            {{#controls.button iconButton=true onClick=(action "secondaryMessageClick" item)}}
+              {{paper-icon "message"}}
+            {{/controls.button}}
+          {{/paper-item}}
+        {{/each}}
+
+        {{paper-divider}}
+
+        {{#paper-subheader}}Clickable Avatars{{/paper-subheader}}
+        {{#each listData as |item|}}
+          {{#paper-item class="md-3-line" onClick=(action "goToPerson" item)}}
+            <img src={{item.img}} alt={{item.name}} class="md-avatar">
             <div class="md-list-item-text">
-              <h3>{{item.what}}</h3>
-              <h4>{{item.who}}</h4>
-              <p>{{item.notes}}</p>
+              <h3>{{item.name}}</h3>
+              <h4>{{item.email}}</h4>
+              <p>Some notes here.</p>
             </div>
-        {{/paper-item}}
-      {{/each}}
-
-      {{paper-divider}}
+          {{/paper-item}}
+        {{/each}}
 
-      {{#paper-subheader class="md-no-sticky"}}Avatar with Secondary Action Icon{{/paper-subheader}}
+        {{paper-divider}}
 
-      {{#each listData as |item|}}
-        {{#paper-item class="md-3-line" onClick=(action "goToPerson" item)}}
-            <img src={{item.face}} alt={{item.who}} class="md-avatar">
+        {{#paper-subheader}}Avatar with Secondary Action Icon{{/paper-subheader}}
+        {{#each listData as |item|}}
+          {{#paper-item class="md-3-line" onClick=(action "goToPerson" item) as |controls|}}
+            <img src={{item.img}} alt={{item.name}} class="md-avatar">
             <div class="md-list-item-text">
-              <h3>{{item.what}}</h3>
-              <h4>{{item.who}}</h4>
-              <p>{{item.notes}}</p>
+              <h3>{{item.name}}</h3>
+              <h4>{{item.email}}</h4>
+              <p>Some notes here.</p>
             </div>
-            {{#paper-button iconButton=true class="md-secondary" onClick=(action "secondaryPersonClick" item)}}
+            {{#controls.button iconButton=true onClick=(action "secondaryPersonClick" item)}}
               {{paper-icon "phone"}}
-            {{/paper-button}}
-        {{/paper-item}}
-      {{/each}}
-
-    {{/paper-list}}
-  {{/paper-content}}
-  {{! END-SNIPPET }}
+            {{/controls.button}}
+          {{/paper-item}}
+        {{/each}}
+
+      {{/paper-list}}
+      {{! END-SNIPPET }}
+    {{/paper-content}}
+  {{/paper-card}}
 
   <h3>Template</h3>
   {{code-snippet name="list-controls.hbs"}}

diff --git a/tests/integration/components/paper-item-test.js b/tests/integration/components/paper-item-test.js
@@ -11,9 +11,9 @@ test('single action checkboxes should react to checkbox clicks', function(assert
   this.set('checkboxEnabled', false);
   this.render(hbs`
     {{#paper-list}}
-      {{#paper-item}}
+      {{#paper-item as |controls|}}
         <p>Checkbox 1</p>
-        {{paper-checkbox class="md-secondary" value=checkboxEnabled onChange=(action (mut checkboxEnabled))}}
+        {{controls.checkbox value=checkboxEnabled onChange=(action (mut checkboxEnabled))}}
       {{/paper-item}}
     {{/paper-list}}
   `);
@@ -29,9 +29,9 @@ test('single action checkboxes should not react to item clicks when disabled', f
   this.set('checkboxEnabled', false);
   this.render(hbs`
     {{#paper-list}}
-      {{#paper-item}}
+      {{#paper-item as |controls|}}
         <p>Checkbox 1</p>
-        {{paper-checkbox class="md-secondary" disabled=true value=checkboxEnabled onChange=(action (mut checkboxEnabled))}}
+        {{controls.checkbox disabled=true value=checkboxEnabled onChange=(action (mut checkboxEnabled))}}
       {{/paper-item}}
     {{/paper-list}}
   `);
@@ -47,9 +47,9 @@ test('single action checkboxes should react to item clicks', function(assert) {
   this.set('checkboxEnabled', false);
   this.render(hbs`
     {{#paper-list}}
-      {{#paper-item}}
+      {{#paper-item as |controls|}}
         <p>Checkbox 1</p>
-        {{paper-checkbox class="md-secondary" value=checkboxEnabled onChange=(action (mut checkboxEnabled))}}
+        {{controls.checkbox value=checkboxEnabled onChange=(action (mut checkboxEnabled))}}
       {{/paper-item}}
     {{/paper-list}}
   `);
@@ -73,12 +73,12 @@ test('Item checkbox with secondary action and no primary action is toggled by ch
 
   this.render(hbs`
     {{#paper-list}}
-      {{#paper-item}}
-        {{#paper-checkbox value=checked onChange=(action (mut checked))}}{{/paper-checkbox}}
+      {{#paper-item as |controls|}}
+        {{paper-checkbox value=checked onChange=(action (mut checked))}}
         <p>Item with checkbox and secondary action</p>
-        {{#paper-button class="md-secondary" iconButton=true onClick=(action (mut secondaryValue))}}
+        {{#controls.button iconButton=true onClick=(action (mut secondaryValue))}}
           {{paper-icon "message"}}
-        {{/paper-button}}
+        {{/controls.button}}
       {{/paper-item}}
     {{/paper-list}}
   `);
@@ -97,12 +97,12 @@ test('Item checkbox with secondary action and no primary action is toggled by pr
 
   this.render(hbs`
     {{#paper-list}}
-      {{#paper-item}}
-        {{#paper-checkbox value=checked onChange=(action (mut checked))}}{{/paper-checkbox}}
+      {{#paper-item as |controls|}}
+        {{paper-checkbox value=checked onChange=(action (mut checked))}}
         <p>Item with checkbox and secondary action</p>
-        {{#paper-button class="md-secondary" iconButton=true onClick=(action (mut secondaryValue))}}
+        {{#controls.button iconButton=true onClick=(action (mut secondaryValue))}}
           {{paper-icon "message"}}
-        {{/paper-button}}
+        {{/controls.button}}
       {{/paper-item}}
     {{/paper-list}}
   `);
@@ -125,12 +125,12 @@ test('Item checkbox with secondary action and primary action dont bubble seconda
 
   this.render(hbs`
     {{#paper-list}}
-      {{#paper-item onClick=(action primaryAction)}}
-        {{#paper-checkbox value=checked onChange=(action (mut checked))}}{{/paper-checkbox}}
+      {{#paper-item onClick=(action primaryAction) as |controls|}}
+        {{paper-checkbox value=checked onChange=(action (mut checked))}}
         <p>Item with checkbox and secondary action</p>
-        {{#paper-button class="md-secondary" iconButton=true onClick=(action (mut secondaryValue))}}
+        {{#controls.button iconButton=true onClick=(action (mut secondaryValue))}}
           {{paper-icon "message"}}
-        {{/paper-button}}
+        {{/controls.button}}
       {{/paper-item}}
     {{/paper-list}}
   `);
@@ -154,12 +154,12 @@ test('Item checkbox with secondary action and primary action dont bubble primary
 
   this.render(hbs`
     {{#paper-list}}
-      {{#paper-item onClick=(action primaryAction)}}
+      {{#paper-item onClick=(action primaryAction) as |controls|}}
         {{#paper-checkbox value=checked onChange=(action (mut checked))}}{{/paper-checkbox}}
         <p>Item with checkbox and secondary action</p>
-        {{#paper-button class="md-secondary" iconButton=true onClick=(action (mut secondaryValue))}}
+        {{#controls.button iconButton=true onClick=(action (mut secondaryValue))}}
           {{paper-icon "message"}}
-        {{/paper-button}}
+        {{/controls.button}}
       {{/paper-item}}
     {{/paper-list}}
   `);