refactor(item): [tappable] -> [button]

core/src/components.d.ts

@@ -2591,12 +2591,16 @@ declare global {
 
 declare global {
   interface HTMLIonItemElement extends HTMLStencilElement {
+    /**
+     * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
+     */
+    'button': boolean;
     /**
      * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
      */
     'color': string;
     /**
-     * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `tappable` property is present.
+     * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
      */
     'detail': boolean;
     /**
@@ -2612,10 +2616,6 @@ declare global {
      * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
      */
     'mode': 'ios' | 'md';
-    /**
-     * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
-     */
-    'tappable': boolean;
   }
   var HTMLIonItemElement: {
     prototype: HTMLIonItemElement;
@@ -2634,12 +2634,16 @@ declare global {
   }
   namespace JSXElements {
     export interface IonItemAttributes extends HTMLAttributes {
+      /**
+       * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
+       */
+      'button'?: boolean;
       /**
        * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
        */
       'color'?: string;
       /**
-       * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `tappable` property is present.
+       * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
        */
       'detail'?: boolean;
       /**
@@ -2655,10 +2659,6 @@ declare global {
        * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
        */
       'mode'?: 'ios' | 'md';
-      /**
-       * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
-       */
-      'tappable'?: boolean;
     }
   }
 }

core/src/components/item/item.tsx

@@ -33,7 +33,7 @@ export class Item {
 
   /**
    * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
-   * is `ios` and an `href`, `onclick` or `tappable` property is present.
+   * is `ios` and an `href`, `onclick` or `button` property is present.
    */
   @Prop() detail: boolean;
 
@@ -52,7 +52,7 @@ export class Item {
    * Whether or not this item should be tappable.
    * If true, a button tag will be rendered. Defaults to `false`.
    */
-  @Prop() tappable = false;
+  @Prop() button = false;
 
   @Prop() goBack = false;
 
@@ -99,7 +99,7 @@ export class Item {
       childStyles = Object.assign(childStyles, this.itemStyles[key]);
     }
 
-    const clickable = !!(this.href || this.el.onclick || this.tappable);
+    const clickable = !!(this.href || this.el.onclick || this.button);
 
     const TagType = clickable
       ? this.href ? 'a' : 'button'

core/src/components/item/readme.md

@@ -7,6 +7,14 @@
 
 ## Properties
 
+#### button
+
+boolean
+
+Whether or not this item should be tappable.
+If true, a button tag will be rendered. Defaults to `false`.
+
+
 #### color
 
 string
@@ -21,7 +29,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
 boolean
 
 If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
-is `ios` and an `href`, `onclick` or `tappable` property is present.
+is `ios` and an `href`, `onclick` or `button` property is present.
 
 
 #### disabled
@@ -53,7 +61,9 @@ Possible values are: `"ios"` or `"md"`.
 For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
-#### tappable
+## Attributes
+
+#### button
 
 boolean
 
@@ -61,8 +71,6 @@ Whether or not this item should be tappable.
 If true, a button tag will be rendered. Defaults to `false`.
 
 
-## Attributes
-
 #### color
 
 string
@@ -77,7 +85,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
 boolean
 
 If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
-is `ios` and an `href`, `onclick` or `tappable` property is present.
+is `ios` and an `href`, `onclick` or `button` property is present.
 
 
 #### disabled
@@ -109,14 +117,6 @@ Possible values are: `"ios"` or `"md"`.
 For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
-#### tappable
-
-boolean
-
-Whether or not this item should be tappable.
-If true, a button tag will be rendered. Defaults to `false`.
-
-
 
 ----------------------------------------------
 

core/src/components/item/test/buttons/index.html

@@ -28,7 +28,7 @@
           <ion-label>a[ion-item] secondary</ion-label>
         </ion-item>
 
-        <ion-item tappable id="attachClick">
+        <ion-item button id="attachClick">
           <ion-label>button[ion-item]</ion-label>
         </ion-item>
 

core/src/components/item/test/standalone/index.html

@@ -13,11 +13,11 @@
     <ion-label>Item Text</ion-label>
   </ion-item>
 
-  <ion-item tappable color="danger">
+  <ion-item button color="danger">
     <ion-label>Item Tappable Danger</ion-label>
   </ion-item>
 
-  <ion-item tappable color="danger" class="activated">
+  <ion-item button color="danger" class="activated">
     <ion-label>Item Tappable Danger.activated</ion-label>
   </ion-item>