From 520da8d373f43bbe307eca87b0f968391da92743 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Sat, 28 Jul 2018 17:45:45 +0200
Subject: [PATCH] fix(fab): add styles for disabled

fixes #14867
---
 core/src/components/fab-button/fab-button.scss | 12 ++++++++----
 core/src/components/fab-button/fab-button.tsx  |  2 +-
 core/src/components/fab/test/basic/index.html  |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
index b616c0b068..a88d61d4c1 100755
--- a/core/src/components/fab-button/fab-button.scss
+++ b/core/src/components/fab-button/fab-button.scss
@@ -20,6 +20,7 @@
   font-size: 14px;
 }
 
+
 :host(.activated) {
   --background: #{current-color(tint)};
 }
@@ -40,6 +41,8 @@
 
   border: 0;
 
+  outline: none;
+
   background: var(--background);
   background-clip: padding-box;
   color: inherit;
@@ -63,11 +66,12 @@
   z-index: 0;
   font-kerning: none;
   appearance: none;
+}
 
-  &:active,
-  &:focus {
-    outline: none;
-  }
+.fab-button-native[disabled] {
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
 }
 
 ::slotted(ion-icon) {
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 736ea648a7..7756ce591c 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -76,7 +76,7 @@ export class FabButton {
   hostData() {
 
     return {
-      'tappable': true,
+      'tappable': !this.disabled,
       class: {
         ...createColorClasses(this.color),
         ...this.getFabClassMap(),
diff --git a/core/src/components/fab/test/basic/index.html b/core/src/components/fab/test/basic/index.html
index 577cc48dc2..fd940b71b0 100644
--- a/core/src/components/fab/test/basic/index.html
+++ b/core/src/components/fab/test/basic/index.html
@@ -24,7 +24,7 @@
 
       <pre id="log" style="right:10px; bottom:50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);" slot="fixed">log</pre>
       <ion-button>Test</ion-button>
-      <ion-fab-button>FAB</ion-fab-button>
+      <ion-fab-button disabled>FAB</ion-fab-button>
 
       <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
         <ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight">