fix(fab-button): sets pointer-events none when disabled

relates to #15129 fixes #15120
ionic-team · Aug 10, 2018 · 04d33e5 · 04d33e5
1 parent b70bb70
commit 04d33e5
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
@@ -15,6 +15,8 @@
   --padding-top: calc((#{$fab-size} - var(--size)) / 2);
   --padding-bottom: calc((#{$fab-size} - var(--size)) / 2);
 
+  display: block;
+
   color: #{current-color(contrast)};
 
   font-size: 14px;
@@ -27,6 +29,9 @@
   font-kerning: none;
 }
 
+:host(.fab-button-disabled) {
+  pointer-events: none;
+}
 
 :host(.activated) {
   --background: #{current-color(tint)};

diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
@@ -81,6 +81,7 @@ export class FabButton {
       class: {
         ...createColorClasses(this.color),
         ...this.getFabClassMap(),
+        'fab-button-disabled': this.disabled,
         'fab-button-translucent': this.translucent
       }
     };

diff --git 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 disabled>FAB</ion-fab-button>
+      <ion-fab-button disabled onclick="throw 'no clickable'">FAB</ion-fab-button>
 
       <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
         <ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight">