From 346ecb2a3c9ab75affbc4239fa8b6bdd0c625093 Mon Sep 17 00:00:00 2001
From: Kelvin Dart <kelvin.dart1@gmail.com>
Date: Thu, 28 Mar 2019 18:20:29 +0000
Subject: [PATCH] fix(item-option): styling and behaviour for disabled
 item-option (#17909)

fixes #17905
---
 .../components/item-option/item-option.scss   | 14 +++++++++++
 .../components/item-option/item-option.tsx    |  4 +++-
 .../item-sliding/test/basic/index.html        | 24 +++++++++++++++++++
 core/src/themes/test/css-variables/index.html |  2 +-
 4 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss
index 30ba65d8d4..b01024e6ec 100644
--- a/core/src/components/item-option/item-option.scss
+++ b/core/src/components/item-option/item-option.scss
@@ -112,3 +112,17 @@
   transition-property: none;
   transition-timing-function: cubic-bezier(.65, .05, .36, 1);
 }
+
+
+// Item Disabled Styling
+// --------------------------------------------------
+
+:host(.item-option-disabled) {
+  pointer-events: none;
+}
+
+:host(.item-option-disabled) .button-native {
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
+}
diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
index 1a231a1108..360aeb40f7 100644
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@@ -60,10 +60,12 @@ export class ItemOption implements ComponentInterface {
   }
 
   hostData() {
+    const { disabled, expandable } = this;
     return {
       class: {
         ...createColorClasses(this.color),
-        'item-option-expandable': this.expandable,
+        'item-option-disabled': disabled,
+        'item-option-expandable': expandable,
         'ion-activatable': true,
       }
     };
diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html
index 2ced8cc67a..3502bc6736 100644
--- a/core/src/components/item-sliding/test/basic/index.html
+++ b/core/src/components/item-sliding/test/basic/index.html
@@ -120,6 +120,30 @@
 
           </ion-item-sliding>
 
+          <ion-item-sliding id="item100">
+            <ion-item href="#">
+              <ion-label>
+                <h2>Disabled Buttons</h2>
+                <p>Buttons should not be clickable</p>
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options side="start">
+              <ion-item-option disabled>
+                Disabled
+              </ion-item-option>
+            </ion-item-options>
+            <ion-item-options side="end">
+              <ion-item-option color="danger" disabled>
+                <ion-icon slot="icon-only" name="trash"></ion-icon>
+              </ion-item-option>
+              <ion-item-option disabled>
+                <ion-icon slot="icon-only" name="star"></ion-icon>
+              </ion-item-option>
+            </ion-item-options>
+
+          </ion-item-sliding>
+
           <ion-item-sliding id="item0">
             <ion-item onclick="clickedItem('item0')">
               <ion-label text-wrap>
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index 2b159c182e..2b54ec52a2 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -189,7 +189,7 @@
                 <ion-item-sliding>
                   <ion-item><ion-label>Goldeneye 007</ion-label></ion-item>
                   <ion-item-options>
-                    <ion-item-option>More</ion-item-option>
+                    <ion-item-option disabled="true">More</ion-item-option>
                   </ion-item-options>
                 </ion-item-sliding>
               </ion-list>