fix(fab): add styles for disabled

fixes #14867

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) {

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(),

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">