From b86861170ca15e40551c41baf867429f9ad77c1b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 13 Feb 2018 19:48:33 -0500
Subject: [PATCH] fix(item): add disabled property and styles

---
 packages/core/src/components.d.ts           |  1 +
 packages/core/src/components/item/item.scss |  6 ++++++
 packages/core/src/components/item/item.tsx  |  8 +++++++-
 packages/core/src/components/item/readme.md | 14 ++++++++++++++
 4 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 47c8e1dce8..f947369366 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -1438,6 +1438,7 @@ declare global {
   namespace JSXElements {
     export interface IonItemAttributes extends HTMLAttributes {
       color?: string;
+      disabled?: boolean;
       href?: string;
       mode?: 'ios' | 'md';
       onclick?: (this: HTMLElement, ev: MouseEvent) => any;
diff --git a/packages/core/src/components/item/item.scss b/packages/core/src/components/item/item.scss
index 5e746816d2..b8722a7f25 100644
--- a/packages/core/src/components/item/item.scss
+++ b/packages/core/src/components/item/item.scss
@@ -104,4 +104,10 @@ ion-input.item {
 
 .item .button {
   @include margin(0);
+}
+
+.item-disabled {
+  cursor: default;
+  opacity: .4;
+  pointer-events: none;
 }
\ No newline at end of file
diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx
index 49f55fa548..8c32fe3968 100644
--- a/packages/core/src/components/item/item.tsx
+++ b/packages/core/src/components/item/item.tsx
@@ -31,6 +31,11 @@ export class Item {
    */
   @Prop() mode: 'ios' | 'md';
 
+  /**
+   * If true, the user cannot interact with the item. Defaults to `false`.
+   */
+  @Prop() disabled = false;
+
   /**
    * Contains a URL or a URL fragment that the hyperlink points to.
    * If this property is set, an anchor tag will be rendered.
@@ -95,7 +100,8 @@ export class Item {
       ...childStyles,
       ...createThemedClasses(this.mode, this.color, 'item'),
       ...getElementClassMap(this.el.classList),
-      'item-block': true
+      'item-block': true,
+      'item-disabled': this.disabled,
     };
 
     this.hasStyleChange = false;
diff --git a/packages/core/src/components/item/readme.md b/packages/core/src/components/item/readme.md
index 7043ed59b9..33a6cff15b 100644
--- a/packages/core/src/components/item/readme.md
+++ b/packages/core/src/components/item/readme.md
@@ -16,6 +16,13 @@ Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"da
 For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
+#### disabled
+
+boolean
+
+If true, the user cannot interact with the item. Defaults to `false`.
+
+
 #### href
 
 string
@@ -60,6 +67,13 @@ Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"da
 For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
+#### disabled
+
+boolean
+
+If true, the user cannot interact with the item. Defaults to `false`.
+
+
 #### href
 
 string