Merge pull request #82 from PolymerElements/add-a-button-alternative

Add an alternative that just styles a native button
PolymerElements · Apr 12, 2016 · ffcc205 · ffcc205
2 parents 2027e3c + dd32c57
commit ffcc205
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,11 +99,15 @@
           }, 1);
         });
 
-        test('click triggers a click event', function(done) {
-          MockInteractions.tap(item);
+        test('enter triggers a click event', function(done) {
+          MockInteractions.pressEnter(item);
           Polymer.Base.async(function(){
-            expect(clickHandler.callCount).to.be.equal(1);
-            done();
+            // 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);
         });
       });
@@ -196,6 +208,7 @@
         });
 
         a11ySuite('item');
+        a11ySuite('button');
         a11ySuite('iconItem');
       });