fix(item-option): styling and behaviour for disabled item-option (#17909)

fixes #17905

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;
+}

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,
       }
     };

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>

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>