From 6d6aba6d40d7bd72a0c16a3edb0538e632120678 Mon Sep 17 00:00:00 2001
From: Antoine <41809103+antoinecfmws@users.noreply.github.com>
Date: Mon, 16 Dec 2019 13:47:17 -0500
Subject: [PATCH] docs(item): add button property to items with click handler
 (#20049)

---
 core/src/components/item/readme.md           | 32 ++++++++++----------
 core/src/components/item/usage/angular.md    |  8 ++---
 core/src/components/item/usage/javascript.md |  8 ++---
 core/src/components/item/usage/react.md      |  8 ++---
 core/src/components/item/usage/vue.md        |  8 ++---
 5 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md
index 6aa3432b8c..41ef7c5bd4 100644
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -72,7 +72,7 @@ Basic Usage
 </ion-item>
 
 <!-- Item as a Button -->
-<ion-item (click)="buttonClick()">
+<ion-item button (click)="buttonClick()">
   <ion-label>
     Button Item
   </ion-label>
@@ -101,7 +101,7 @@ Detail Arrows
   </ion-label>
 </ion-item>
 
-<ion-item (click)="buttonClick()" detail>
+<ion-item button (click)="buttonClick()" detail>
   <ion-label>
     Button Item with Detail Arrow
   </ion-label>
@@ -218,7 +218,7 @@ Item Lines
 Media Items
 
 ```html
-<ion-item (click)="testClick()">
+<ion-item button (click)="testClick()">
   <ion-avatar slot="start">
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </ion-avatar>
@@ -247,7 +247,7 @@ Media Items
   <ion-button fill="outline" slot="end">View</ion-button>
 </ion-item>
 
-<ion-item (click)="testClick()">
+<ion-item button (click)="testClick()">
   <ion-thumbnail slot="start">
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </ion-thumbnail>
@@ -396,7 +396,7 @@ Basic Usage
 </ion-item>
 
 <!-- Item as a Button -->
-<ion-item onclick="buttonClick()">
+<ion-item button onclick="buttonClick()">
   <ion-label>
     Button Item
   </ion-label>
@@ -425,7 +425,7 @@ Detail Arrows
   </ion-label>
 </ion-item>
 
-<ion-item onclick="buttonClick()" detail>
+<ion-item button onclick="buttonClick()" detail>
   <ion-label>
     Button Item with Detail Arrow
   </ion-label>
@@ -542,7 +542,7 @@ Item Lines
 Media Items
 
 ```html
-<ion-item onclick="testClick()">
+<ion-item button onclick="testClick()">
   <ion-avatar slot="start">
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </ion-avatar>
@@ -571,7 +571,7 @@ Media Items
   <ion-button fill="outline" slot="end">View</ion-button>
 </ion-item>
 
-<ion-item onclick="testClick()">
+<ion-item button onclick="testClick()">
   <ion-thumbnail slot="start">
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </ion-thumbnail>
@@ -724,7 +724,7 @@ const Example: React.FC<{}> = () => (
     </IonItem>
 
     {/*-- Item as a Button --*/}
-    <IonItem onClick={() => {}}>
+    <IonItem button onClick={() => {}}>
       <IonLabel>
         Button Item
       </IonLabel>
@@ -751,7 +751,7 @@ const Example: React.FC<{}> = () => (
       </IonLabel>
     </IonItem>
 
-    <IonItem onClick={() => {}} detail>
+    <IonItem button onClick={() => {}} detail>
       <IonLabel>
         Button Item with Detail Arrow
       </IonLabel>
@@ -859,7 +859,7 @@ const Example: React.FC<{}> = () => (
 
 
 
-    <IonItem onClick={() => {}}>
+    <IonItem button onClick={() => {}}>
       <IonAvatar slot="start">
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
       </IonAvatar>
@@ -888,7 +888,7 @@ const Example: React.FC<{}> = () => (
       <IonButton fill="outline" slot="end">View</IonButton>
     </IonItem>
 
-    <IonItem onClick={() => {}}>
+    <IonItem button onClick={() => {}}>
       <IonThumbnail slot="start">
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
       </IonThumbnail>
@@ -1035,7 +1035,7 @@ Basic Usage
   </ion-item>
 
   <!-- Item as a Button -->
-  <ion-item @click="buttonClick()">
+  <ion-item button @click="buttonClick()">
     <ion-label>
       Button Item
     </ion-label>
@@ -1066,7 +1066,7 @@ Detail Arrows
     </ion-label>
   </ion-item>
 
-  <ion-item @click="buttonClick()" detail>
+  <ion-item button @click="buttonClick()" detail>
     <ion-label>
       Button Item with Detail Arrow
     </ion-label>
@@ -1189,7 +1189,7 @@ Media Items
 
 ```html
 <template>
-  <ion-item @click="testClick()">
+  <ion-item button @click="testClick()">
     <ion-avatar slot="start">
       <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </ion-avatar>
@@ -1218,7 +1218,7 @@ Media Items
     <ion-button fill="outline" slot="end">View</ion-button>
   </ion-item>
 
-  <ion-item @click="testClick()">
+  <ion-item button @click="testClick()">
     <ion-thumbnail slot="start">
       <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </ion-thumbnail>
diff --git a/core/src/components/item/usage/angular.md b/core/src/components/item/usage/angular.md
index 345d5a2434..f2c5b93787 100644
--- a/core/src/components/item/usage/angular.md
+++ b/core/src/components/item/usage/angular.md
@@ -9,7 +9,7 @@ Basic Usage
 </ion-item>
 
 <!-- Item as a Button -->
-<ion-item (click)="buttonClick()">
+<ion-item button (click)="buttonClick()">
   <ion-label>
     Button Item
   </ion-label>
@@ -38,7 +38,7 @@ Detail Arrows
   </ion-label>
 </ion-item>
 
-<ion-item (click)="buttonClick()" detail>
+<ion-item button (click)="buttonClick()" detail>
   <ion-label>
     Button Item with Detail Arrow
   </ion-label>
@@ -155,7 +155,7 @@ Item Lines
 Media Items
 
 ```html
-<ion-item (click)="testClick()">
+<ion-item button (click)="testClick()">
   <ion-avatar slot="start">
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </ion-avatar>
@@ -184,7 +184,7 @@ Media Items
   <ion-button fill="outline" slot="end">View</ion-button>
 </ion-item>
 
-<ion-item (click)="testClick()">
+<ion-item button (click)="testClick()">
   <ion-thumbnail slot="start">
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </ion-thumbnail>
diff --git a/core/src/components/item/usage/javascript.md b/core/src/components/item/usage/javascript.md
index 8385247e41..180ef6243f 100644
--- a/core/src/components/item/usage/javascript.md
+++ b/core/src/components/item/usage/javascript.md
@@ -9,7 +9,7 @@ Basic Usage
 </ion-item>
 
 <!-- Item as a Button -->
-<ion-item onclick="buttonClick()">
+<ion-item button onclick="buttonClick()">
   <ion-label>
     Button Item
   </ion-label>
@@ -38,7 +38,7 @@ Detail Arrows
   </ion-label>
 </ion-item>
 
-<ion-item onclick="buttonClick()" detail>
+<ion-item button onclick="buttonClick()" detail>
   <ion-label>
     Button Item with Detail Arrow
   </ion-label>
@@ -155,7 +155,7 @@ Item Lines
 Media Items
 
 ```html
-<ion-item onclick="testClick()">
+<ion-item button onclick="testClick()">
   <ion-avatar slot="start">
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </ion-avatar>
@@ -184,7 +184,7 @@ Media Items
   <ion-button fill="outline" slot="end">View</ion-button>
 </ion-item>
 
-<ion-item onclick="testClick()">
+<ion-item button onclick="testClick()">
   <ion-thumbnail slot="start">
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </ion-thumbnail>
diff --git a/core/src/components/item/usage/react.md b/core/src/components/item/usage/react.md
index 46981a2d98..beb1393847 100644
--- a/core/src/components/item/usage/react.md
+++ b/core/src/components/item/usage/react.md
@@ -13,7 +13,7 @@ const Example: React.FC<{}> = () => (
     </IonItem>
 
     {/*-- Item as a Button --*/}
-    <IonItem onClick={() => {}}>
+    <IonItem button onClick={() => {}}>
       <IonLabel>
         Button Item
       </IonLabel>
@@ -40,7 +40,7 @@ const Example: React.FC<{}> = () => (
       </IonLabel>
     </IonItem>
 
-    <IonItem onClick={() => {}} detail>
+    <IonItem button onClick={() => {}} detail>
       <IonLabel>
         Button Item with Detail Arrow
       </IonLabel>
@@ -148,7 +148,7 @@ const Example: React.FC<{}> = () => (
 
 
 
-    <IonItem onClick={() => {}}>
+    <IonItem button onClick={() => {}}>
       <IonAvatar slot="start">
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
       </IonAvatar>
@@ -177,7 +177,7 @@ const Example: React.FC<{}> = () => (
       <IonButton fill="outline" slot="end">View</IonButton>
     </IonItem>
 
-    <IonItem onClick={() => {}}>
+    <IonItem button onClick={() => {}}>
       <IonThumbnail slot="start">
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
       </IonThumbnail>
diff --git a/core/src/components/item/usage/vue.md b/core/src/components/item/usage/vue.md
index 875558cc35..dcb9844375 100644
--- a/core/src/components/item/usage/vue.md
+++ b/core/src/components/item/usage/vue.md
@@ -10,7 +10,7 @@ Basic Usage
   </ion-item>
 
   <!-- Item as a Button -->
-  <ion-item @click="buttonClick()">
+  <ion-item button @click="buttonClick()">
     <ion-label>
       Button Item
     </ion-label>
@@ -41,7 +41,7 @@ Detail Arrows
     </ion-label>
   </ion-item>
 
-  <ion-item @click="buttonClick()" detail>
+  <ion-item button @click="buttonClick()" detail>
     <ion-label>
       Button Item with Detail Arrow
     </ion-label>
@@ -164,7 +164,7 @@ Media Items
 
 ```html
 <template>
-  <ion-item @click="testClick()">
+  <ion-item button @click="testClick()">
     <ion-avatar slot="start">
       <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </ion-avatar>
@@ -193,7 +193,7 @@ Media Items
     <ion-button fill="outline" slot="end">View</ion-button>
   </ion-item>
 
-  <ion-item @click="testClick()">
+  <ion-item button @click="testClick()">
     <ion-thumbnail slot="start">
       <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </ion-thumbnail>