From 67ed89ded8b38a326ed61c1abc06a47592bee200 Mon Sep 17 00:00:00 2001
From: Kelvin Dart <kelvin.dart1@gmail.com>
Date: Tue, 20 Aug 2019 15:24:30 +0100
Subject: [PATCH] fix(alert): apply styling to disabled items (#18545)

* fix(datetime): ensure hasValue returns correct value

* fix(alert): apply styling to disabled items

* test(datetime): add tests for empty value datetime

* fix(): update getter for stencil update

* fix: change default opacity to disabled button opacity

* test(select): add tests to ion-select-option disabled items

* Revert "test(select): add tests to ion-select-option disabled items"

This reverts commit b7ac8675

* update disabled css to use classes
---
 core/src/components/alert/alert.scss          | 11 ++++++++++
 core/src/components/alert/alert.tsx           | 21 ++++++++++++++++---
 .../components/alert/test/basic/index.html    | 11 ++++++++--
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index 68ec20f7ece..23f66a0ea72 100644
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -150,6 +150,17 @@
   height: 100%;
 }
 
+
+// Alert Button: Disabled
+// --------------------------------------------------
+.alert-input-disabled,
+.alert-checkbox-button-disabled .alert-button-inner,
+.alert-radio-button-disabled .alert-button-inner {
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
+}
+
 .alert-tappable {
   @include margin(0);
   @include padding(0);
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 122316c544d..b0530224cd7 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -303,7 +303,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
             disabled={i.disabled}
             tabIndex={0}
             role="checkbox"
-            class="alert-tappable alert-checkbox alert-checkbox-button ion-focusable"
+            class={{
+              'alert-tappable': true,
+              'alert-checkbox': true,
+              'alert-checkbox-button': true,
+              'ion-focusable': true,
+              'alert-checkbox-button-disabled': i.disabled || false
+            }}
           >
             <div class="alert-button-inner">
               <div class="alert-checkbox-icon">
@@ -335,7 +341,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
             disabled={i.disabled}
             id={i.id}
             tabIndex={0}
-            class="alert-radio-button alert-tappable alert-radio ion-focusable"
+            class={{
+              'alert-radio-button': true,
+              'alert-tappable': true,
+              'alert-radio': true,
+              'ion-focusable': true,
+              'alert-radio-button-disabled': i.disabled || false
+            }}
             role="radio"
           >
             <div class="alert-button-inner">
@@ -369,7 +381,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
               id={i.id}
               disabled={i.disabled}
               tabIndex={0}
-              class="alert-input"
+              class={{
+                'alert-input': true,
+                'alert-input-disabled': i.disabled || false
+              }}
             />
           </div>
         ))}
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index cf096428a34..76ce7d4baaf 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -129,6 +129,11 @@
             value: 'hello',
             placeholder: 'Placeholder 2'
           },
+          {
+            type: 'text',
+            placeholder: 'Placeholder 3',
+            disabled: true
+          },
           {
             name: 'name3',
             type: 'text',
@@ -207,7 +212,8 @@
           {
             type: 'radio',
             label: 'Radio 5',
-            value: 'value5'
+            value: 'value5',
+            disabled: true
           },
           {
             type: 'radio',
@@ -267,7 +273,8 @@
           {
             type: 'checkbox',
             label: 'Checkbox 5',
-            value: 'value5'
+            value: 'value5',
+            disabled: true
           },
 
           {