fix(fab): fab list colors

fixes #9225

src/components/fab/fab.ios.scss

@@ -31,12 +31,12 @@ $fab-ios-list-button-background-color-activated:  color-shade($fab-ios-list-butt
   background-color: $fab-ios-background-color-activated;
 }
 
-.fab-ios.fab-in-list {
+.fab-ios-in-list {
   color: $fab-ios-list-button-text-color;
   background-color: $fab-ios-list-button-background-color;
 }
 
-.fab-ios.fab-in-list.activated {
+.fab-ios-in-list.activated {
   background-color: $fab-ios-list-button-background-color-activated;
 }
 

src/components/fab/fab.md.scss

@@ -44,12 +44,12 @@ $fab-md-list-button-background-color-activated:   color-shade($fab-md-list-butto
   box-shadow: $fab-md-box-shadow-activated;
 }
 
-.fab-md.fab-in-list {
+.fab-md-in-list {
   color: $fab-md-list-button-text-color;
   background-color: $fab-md-list-button-background-color;
 }
 
-.fab-md.fab-wp.fab-in-list.activated {
+.fab-md-in-list.activated {
   background-color: $fab-md-list-button-background-color-activated;
 }
 

src/components/fab/fab.ts

@@ -128,14 +128,23 @@ export class FabButton extends Ion {
 export class FabList {
   _visible: boolean = false;
   _fabs: FabButton[] = [];
+  _mode: string;
 
-  constructor(private _elementRef: ElementRef, private _renderer: Renderer) { }
+  constructor(
+    private _elementRef: ElementRef,
+    private _renderer: Renderer,
+    config: Config
+  ) {
+    this._mode = config.get('mode');
+  }
 
   @ContentChildren(FabButton)
   set _setbuttons(query: QueryList<FabButton>) {
-    let fabs = this._fabs = query.toArray();
+    const fabs = this._fabs = query.toArray();
+    const className = `fab-${this._mode}-in-list`;
     for (var fab of fabs) {
       fab.setElementClass('fab-in-list', true);
+      fab.setElementClass(className, true);
     }
   }
 
@@ -284,13 +293,17 @@ export class FabContainer {
    * @private
    */
   ngAfterContentInit() {
-    this._events.listen(this._mainButton.getNativeElement(), 'click', this.pointerUp.bind(this));
+    if (!this._mainButton || !this._mainButton.getNativeElement()) {
+      console.error('FAB container needs a main <button ion-fab>');
+      return;
+    }
+    this._events.listen(this._mainButton.getNativeElement(), 'click', this.clickHandler.bind(this));
   }
 
   /**
    * @private
    */
-  pointerUp(ev: any) {
+  clickHandler(ev: any) {
     if (this.canActivateList(ev)) {
       this.toggleList();
     }

src/components/fab/fab.wp.scss

@@ -31,12 +31,12 @@ $fab-wp-list-button-background-color-activated:   color-shade($fab-wp-list-butto
   background-color: $fab-wp-background-color-activated;
 }
 
-.fab-wp.fab-in-list {
+.fab-wp-in-list {
   color: $fab-wp-list-button-text-color;
   background-color: $fab-wp-list-button-background-color;
 }
 
-.fab-wp.fab-in-list.activated {
+.fab-wp-in-list.activated {
   background-color: $fab-wp-list-button-background-color-activated;
 }
 

src/components/fab/test/basic/app-module.ts

@@ -6,17 +6,26 @@ import { IonicApp, IonicModule, FabContainer } from '../../../..';
 })
 export class E2EPage {
   array: number[] = [];
+  log: string = '';
 
   add() {
     this.array.push(1);
+    this.log += 'add\n';
   }
 
   clickMainFAB() {
-    console.log('Clicked open social menu');
+    let message = 'Clicked open social menu';
+
+    console.log(message);
+    this.log += message + '\n';
   }
 
   openSocial(network: string, fab: FabContainer) {
-    console.log('Share in ' + network);
+    let message = 'Share in ' + network;
+
+    console.log(message);
+    this.log += message + '\n';
+
     fab.close();
   }
 }

src/components/fab/test/basic/e2e.ts

@@ -0,0 +1,8 @@
+
+it('should open fab lists ', function() {
+  element(by.css('.e2eFabTopRight')).click();
+  element(by.css('.e2eFabBottomRight')).click();
+  element(by.css('.e2eFabTopLeft')).click();
+  element(by.css('.e2eFabBottomLeft')).click();
+  element(by.css('.e2eFabCenter')).click();
+});

src/components/fab/test/basic/main.html

@@ -7,11 +7,13 @@
 <ion-content fullscreen>
   <div f></div>
   <div f></div>
+
+  <pre ion-fixed style="right:10px; bottom:20px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);">{{log}}</pre>
   <button ion-button>Test</button>
   <div f *ngFor="let a of array"></div>
 
   <ion-fab top right edge #fab1>
-    <button ion-fab mini (click)="clickMainFAB()"><ion-icon name="add"></ion-icon></button>
+    <button ion-fab mini (click)="clickMainFAB()" class="e2eFabTopRight"><ion-icon name="add"></ion-icon></button>
     <ion-fab-list>
       <button ion-fab (click)="openSocial('facebook', fab1)"><ion-icon name="logo-facebook"></ion-icon></button>
       <button ion-fab (click)="openSocial('twitter', fab1)"><ion-icon name="logo-twitter"></ion-icon></button>
@@ -20,8 +22,8 @@
     </ion-fab-list>
   </ion-fab>
 
-  <ion-fab right bottom edge #fab2>
-    <button ion-fab color="dark"><ion-icon name="arrow-dropleft"></ion-icon></button>
+  <ion-fab bottom right edge #fab2>
+    <button ion-fab color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></button>
     <ion-fab-list side="left">
       <button ion-fab (click)="openSocial('facebook', fab2)"><ion-icon name="logo-facebook"></ion-icon></button>
       <button ion-fab (click)="openSocial('twitter', fab2)"><ion-icon name="logo-twitter"></ion-icon></button>
@@ -30,8 +32,8 @@
     </ion-fab-list>
   </ion-fab>
 
-  <ion-fab left top #fab3>
-    <button ion-fab color="secondary"><ion-icon name="arrow-dropright"></ion-icon></button>
+  <ion-fab top left #fab3>
+    <button ion-fab color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></button>
     <ion-fab-list side="right">
       <button ion-fab (click)="openSocial('facebook', fab3)"><ion-icon name="logo-facebook"></ion-icon></button>
       <button ion-fab (click)="openSocial('twitter', fab3)"><ion-icon name="logo-twitter"></ion-icon></button>
@@ -40,8 +42,8 @@
     </ion-fab-list>
   </ion-fab>
 
-  <ion-fab left bottom #fab4>
-    <button ion-fab color="light"><ion-icon name="arrow-dropup"></ion-icon></button>
+  <ion-fab bottom left #fab4>
+    <button ion-fab color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></button>
     <ion-fab-list side="top">
       <button ion-fab (click)="openSocial('facebook', fab4)"><ion-icon name="logo-facebook"></ion-icon></button>
       <button ion-fab (click)="openSocial('twitter', fab4)"><ion-icon name="logo-twitter"></ion-icon></button>
@@ -51,7 +53,7 @@
   </ion-fab>
 
   <ion-fab center middle #fab5>
-    <a ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></a>
+    <a ion-fab color="danger" (click)="clickMainFAB()" class="e2eFabCenter"><ion-icon name="md-share"></ion-icon></a>
     <ion-fab-list side="top">
       <button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
     </ion-fab-list>

src/util/mock-providers.ts

@@ -378,7 +378,7 @@ export const mockTabs = function(app?: App): Tabs {
 export const mockMenu = function (): Menu {
   let app = mockApp();
   let gestureCtrl = new GestureController(app);
-  return new Menu(null, null, null, null, null, null, null, gestureCtrl);
+  return new Menu(null, null, null, null, null, null, null, gestureCtrl, app);
 };
 
 export const mockDeepLinkConfig = function(links?: any[]): DeepLinkConfig {