From 89f062759d529ae240fd31e9c8bc5a68f83fe60b Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Fri, 8 Apr 2016 11:11:47 -0700
Subject: [PATCH 1/2] add an alternative that just styles a native button

---
 paper-item-shared-styles.html | 24 +++++++++++++++------
 paper-item.html               | 12 +++++++++++
 test/paper-item.html          | 40 +++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/paper-item-shared-styles.html b/paper-item-shared-styles.html
index 0a08590..e0358e5 100644
--- a/paper-item-shared-styles.html
+++ b/paper-item-shared-styles.html
@@ -9,43 +9,53 @@
 -->
 
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../paper-styles/default-theme.html">
 <link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="../paper-styles/default-theme.html">
+<llink rel="import" href="../paper-styles/typography.html">
 
 <dom-module id="paper-item-shared-styles">
   <template>
     <style>
-      :host {
+      :host, .paper-item {
         display: block;
         position: relative;
         min-height: var(--paper-item-min-height, 48px);
         padding: 0px 16px;
       }
 
-      :host([hidden]) {
+      .paper-item {
+        @apply(--paper-font-subhead);
+        border:none;
+        outline: none;
+        background: white;
+        width: 100%;
+        text-align: left;
+      }
+
+      :host([hidden]), .paper-item[hidden] {
         display: none !important;
       }
 
-      :host(.iron-selected) {
+      :host(.iron-selected), .paper-item.iron-selected {
         font-weight: var(--paper-item-selected-weight, bold);
 
         @apply(--paper-item-selected);
       }
 
-      :host([disabled]) {
+      :host([disabled]), .paper-item[disabled] {
         color: var(--paper-item-disabled-color, --disabled-text-color);
 
         @apply(--paper-item-disabled);
       }
 
-      :host(:focus) {
+      :host(:focus), .paper-item:focus {
         position: relative;
         outline: 0;
 
         @apply(--paper-item-focused);
       }
 
-      :host(:focus):before {
+      :host(:focus):before, .paper-item:focus:before {
         @apply(--layout-fit);
 
         background: currentColor;
diff --git a/paper-item.html b/paper-item.html
index 622502c..60b4692 100644
--- a/paper-item.html
+++ b/paper-item.html
@@ -39,6 +39,18 @@
       <paper-item raised>Polymer Project</paper-item>
     </a>
 
+If you are concerned about performance and want to use `paper-item` in a `paper-listbox`
+with many items, you can just use a native `button` with the `paper-item` class
+applied (provided you have correctly included the shared styles):
+
+    <style is="custom-style" include="paper-item-shared-styles"></style>
+
+    <paper-listbox>
+      <button class="paper-item" role="option">Inbox</button>
+      <button class="paper-item" role="option">Starred</button>
+      <button class="paper-item" role="option">Sent mail</button>
+    </paper-listbox>
+
 ### Styling
 
 The following custom properties and mixins are available for styling:
diff --git a/test/paper-item.html b/test/paper-item.html
index e7a8266..7c99b83 100644
--- a/test/paper-item.html
+++ b/test/paper-item.html
@@ -37,6 +37,14 @@
       </template>
     </test-fixture>
 
+    <test-fixture id="button">
+      <template>
+        <div role="listbox">
+          <button class="paper-item" role="option">item</button>
+        </div>
+      </template>
+    </test-fixture>
+
     <test-fixture id="iconItem">
       <template>
         <div role="listbox">
@@ -91,6 +99,37 @@
           }, 1);
         });
 
+        test('enter triggers a click event', function(done) {
+          MockInteractions.pressEnter(item);
+          Polymer.Base.async(function(){
+            // You need two ticks, one for the MockInteractions event, and one
+            // for the button event.
+            Polymer.Base.async(function(){
+              expect(clickHandler.callCount).to.be.equal(1);
+              done();
+            }, 1);
+          }, 1);
+        });
+
+        test('click triggers a click event', function(done) {
+          MockInteractions.tap(item);
+          Polymer.Base.async(function(){
+            expect(clickHandler.callCount).to.be.equal(1);
+            done();
+          }, 1);
+        });
+      });
+
+      suite('button basic', function() {
+        var item, clickHandler;
+
+        setup(function() {
+          item = fixture('button').querySelector('button');
+          clickHandler = sinon.spy();
+          item.addEventListener('click', clickHandler);
+        });
+
+        // Button also natively fires click after pressing space and enter.
         test('click triggers a click event', function(done) {
           MockInteractions.tap(item);
           Polymer.Base.async(function(){
@@ -196,6 +235,7 @@
         });
 
         a11ySuite('item');
+        a11ySuite('button');
         a11ySuite('iconItem');
       });
 

From dd32c574b4237c65bcbb24fa704be6464cc96e97 Mon Sep 17 00:00:00 2001
From: Monica Dinculescu <noms@google.com>
Date: Tue, 12 Apr 2016 10:28:12 -0700
Subject: [PATCH 2/2] remove tests that don't test anything

---
 test/paper-item.html | 27 ---------------------------
 1 file changed, 27 deletions(-)

diff --git a/test/paper-item.html b/test/paper-item.html
index 7c99b83..a728d6c 100644
--- a/test/paper-item.html
+++ b/test/paper-item.html
@@ -110,33 +110,6 @@
             }, 1);
           }, 1);
         });
-
-        test('click triggers a click event', function(done) {
-          MockInteractions.tap(item);
-          Polymer.Base.async(function(){
-            expect(clickHandler.callCount).to.be.equal(1);
-            done();
-          }, 1);
-        });
-      });
-
-      suite('button basic', function() {
-        var item, clickHandler;
-
-        setup(function() {
-          item = fixture('button').querySelector('button');
-          clickHandler = sinon.spy();
-          item.addEventListener('click', clickHandler);
-        });
-
-        // Button also natively fires click after pressing space and enter.
-        test('click triggers a click event', function(done) {
-          MockInteractions.tap(item);
-          Polymer.Base.async(function(){
-            expect(clickHandler.callCount).to.be.equal(1);
-            done();
-          }, 1);
-        });
       });
 
       suite('paper-icon-item basic', function() {