From 37b1c032936c6224f53de9aa542cbf3b05517c7e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 31 Jan 2018 12:24:33 -0500
Subject: [PATCH] fix(item): add support for rendering buttons inside of an
 item

TODO document
---
 packages/core/src/components.d.ts             |  2 ++
 packages/core/src/components/item/item.tsx    | 22 ++++++++++++++++---
 packages/core/src/components/item/readme.md   | 20 +++++++++++++++++
 .../components/item/test/buttons/index.html   | 20 ++++++++++++-----
 4 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 7ec1216e4e..c191169071 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -1338,6 +1338,8 @@ declare global {
       color?: string;
       href?: string;
       mode?: 'ios' | 'md';
+      onclick?: (this: HTMLElement, ev: MouseEvent) => any;
+      tappable?: boolean;
     }
   }
 }
diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx
index 8fac195f71..b7c4bf39d1 100644
--- a/packages/core/src/components/item/item.tsx
+++ b/packages/core/src/components/item/item.tsx
@@ -37,6 +37,18 @@ export class Item {
    */
   @Prop() href: string;
 
+  /**
+   * @input {any} Callback function.
+   * If this property is set, a button tag will be rendered.
+   */
+  @Prop() onclick: (this: HTMLElement, ev: MouseEvent) => any;
+
+  /**
+   * @input {boolean} Whether or not this item should be tappable.
+   * If true, a button tag will be rendered. Default `true`.
+   */
+  @Prop() tappable = false;
+
   @Listen('ionStyle')
   itemStyle(ev: UIEvent) {
     ev.stopPropagation();
@@ -87,8 +99,12 @@ export class Item {
 
     this.hasStyleChange = false;
 
-    // TODO add support for button items
-    const TagType = this.href ? 'a' : 'div';
+    const clickable = this.href || this.onclick || this.tappable;
+
+    let TagType = 'div';
+    if (clickable) {
+      TagType = this.href ? 'a' : 'button';
+    }
 
     return (
       <TagType class={themedClasses}>
@@ -99,7 +115,7 @@ export class Item {
           </div>
           <slot name='end'></slot>
         </div>
-        { this.href && this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
+        { clickable && this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
       </TagType>
     );
   }
diff --git a/packages/core/src/components/item/readme.md b/packages/core/src/components/item/readme.md
index 7e72c01bd6..c904ea2230 100644
--- a/packages/core/src/components/item/readme.md
+++ b/packages/core/src/components/item/readme.md
@@ -22,6 +22,16 @@ string
 
 
 
+#### onclick
+
+
+
+
+#### tappable
+
+boolean
+
+
 ## Attributes
 
 #### color
@@ -39,6 +49,16 @@ string
 
 
 
+#### onclick
+
+
+
+
+#### tappable
+
+boolean
+
+
 
 ----------------------------------------------
 
diff --git a/packages/core/src/components/item/test/buttons/index.html b/packages/core/src/components/item/test/buttons/index.html
index 626c52ce8e..413a948960 100644
--- a/packages/core/src/components/item/test/buttons/index.html
+++ b/packages/core/src/components/item/test/buttons/index.html
@@ -28,16 +28,20 @@
           a[ion-item] secondary
         </ion-item>
 
-        <ion-item onclick="testClick(event)">
-          button[ion-item]
+        <ion-item tappable id="attachClick">
+          button[ion-item] tappable click listener
         </ion-item>
 
-        <ion-item class="activated" onclick="testClick(event)">
-          button[ion-item].activated
+        <ion-item ONCLICK="testClick(event)">
+          button[ion-item] ONCLICK
+        </ion-item>
+
+        <ion-item class="activated" onClick="testClick(event)">
+          button[ion-item].activated onClick
         </ion-item>
 
         <ion-item color="danger" onclick="testClick(event)">
-          button[ion-item] danger
+          button[ion-item] danger onclick
         </ion-item>
 
         <ion-item onclick="testClickOutsize(event)">
@@ -134,6 +138,12 @@
   </ion-app>
 
   <script>
+    const attach = document.getElementById('attachClick');
+
+    attach.addEventListener('click', (ev) => {
+      console.log('clicked me!', ev);
+    });
+
     function testClick(ev) {
       console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
     }