fix(): change fabs so that state is in the container and props are passed down to button and lists.

packages/core/src/components.d.ts

@@ -629,7 +629,6 @@ declare global {
           mode?: string,
           color?: string,
         
-          pickerCtrl?: any,
           disabled?: boolean,
           min?: string,
           max?: string,
@@ -647,8 +646,7 @@ declare global {
           dayNames?: any,
           dayShortNames?: any,
           pickerOptions?: any,
-          placeholder?: string,
+          placeholder?: string
-          value?: string
       }
   }
 }
@@ -708,6 +706,7 @@ declare global {
           mode?: string,
           color?: string,
         
+          activated?: boolean
       }
   }
 }
@@ -737,8 +736,10 @@ declare global {
           mode?: string,
           color?: string,
         
-          close?: any,
           href?: string,
+          activated?: boolean,
+          toggleActive?: any,
+          show?: boolean,
           disabled?: boolean
       }
   }

packages/core/src/components/fab/fab-container.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Method } from '@stencil/core';
+import { Component, Element, Method, State } from '@stencil/core';
 
 
 /**
@@ -89,16 +89,30 @@ import { Component, Element, Method } from '@stencil/core';
 export class FabContainer {
   @Element() private el: HTMLElement;
 
+  @State() activated: boolean = false;
+
   /**
    * Close an active FAB list container
    */
   @Method()
   close() {
-    const fab: any = this.el.querySelector('ion-fab-button');
+    this.activated = false;
-    fab.close();
+  }
+
+  toggleActive = () => {
+    this.activated = !this.activated;
   }
 
   protected render() {
+    const fab: any = this.el.querySelector('ion-fab-button');
+    fab.toggleActive = this.toggleActive;
+    fab.activated = this.activated;
+
+    const lists = this.el.querySelectorAll('ion-fab-list');
+    for (let i = 0, length = lists.length; i < length; i += 1) {
+      lists[i].activated = this.activated;
+    }
+
     return (
       <slot></slot>
     );

packages/core/src/components/fab/fab-list.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, PropDidChange, State } from '@stencil/core';
+import { Component, Element, Prop, PropDidChange } from '@stencil/core';
 
 
 /**
@@ -31,7 +31,7 @@ import { Component, Element, PropDidChange, State } from '@stencil/core';
 export class FabList {
   @Element() private el: HTMLElement;
 
-  @State() activated: boolean = false;
+  @Prop() activated: boolean = false;
 
   @PropDidChange('activated')
   activatedChange(activated: boolean) {

packages/core/src/components/fab/fab.tsx

@@ -1,4 +1,4 @@
-import { Component, CssClassMap, Element, Method, Prop, State } from '@stencil/core';
+import { Component, CssClassMap, Element, Method, Prop, State, PropDidChange } from '@stencil/core';
 import { createThemedClasses, getElementClassObject } from '../../utils/theme';
 
 
@@ -61,10 +61,11 @@ export class FabButton {
   private color: string;
 
   @Prop() href: string;
+  @Prop() activated: boolean = false;
+  @Prop() toggleActive: Function = () => {};
 
-  @State() show: boolean = false;
+  @Prop() show: boolean = false;
 
-  @State() private activated: boolean = false;
   @State() private inContainer: boolean = false;
   @State() private inList: boolean = false;
 
@@ -80,37 +81,13 @@ export class FabButton {
     this.inContainer = (parentNode === 'ION-FAB');
   }
 
+
   clickedFab() {
     if (this.inContainer) {
-      const activated = !this.activated;
+      this.toggleActive();
-      this.setActiveLists(activated);
     }
   }
 
-  /**
-   * @hidden
-   */
-  setActiveLists(activated: boolean) {
-    const lists = this.el.parentElement.querySelectorAll('ion-fab-list');
-
-    if (lists.length > 0) {
-      this.activated = activated;
-    }
-
-    for (var i = 0; i < lists.length; i++) {
-      const list = lists[i];
-      list.activated = activated;
-    }
-  }
-
-  /**
-   * Close an active FAB list container
-   */
-  @Method()
-  close() {
-    this.setActiveLists(false);
-  }
-
   /**
    * @hidden
    * Get the classes for fab buttons in lists