docs(fab): fab docs WIP

src/components/fab/fab.ts

@@ -6,6 +6,53 @@ import { Ion } from '../ion';
 import { UIEventManager } from '../../util/ui-event-manager';
 import { isTrueProperty } from '../../util/util';
 
+/**
+  * @name FabButton
+  * @module ionic
+  *
+  * @description
+  * FABs (Floating Action Buttons) are standard material design components but in Ionic, they can be used across any platform.
+  * They are shaped as a circle that represents a promoted action. When pressed, it may contain more related actions.
+  *
+  * FABs as its name suggests are floating over the content in a fixed position. This is not achieved exclusively with `<button ion-fab>Button</button>`
+  * but it has to wrapped with the `<ion-fab>` component, like this:
+  *
+  * ```html
+  * <!-- Real floating action button, fixed. It will not scroll with the content -->
+  * <ion-fab>
+  *   <button ion-fab>Button</button>
+  * </ion-fab>
+  *
+  * <!-- Button shaped as a circle that just like a normal button scrolls with the content -->
+  * <button ion-fab>Button</button>
+  *
+  * ```
+  *
+  * In case the button is not wrapped with `<ion-fab>`, the fab button will behave like a normal button, scrolling with the content.
+  *
+  * See [ion-fab] to learn more information about how to position the fab button.
+  *
+  * @property [mini] - Makes a fab button with a reduced size.
+  * @property [color] - Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc).
+  *
+  * @usage
+  *
+  * ```html
+  *
+  * <!-- Colors -->
+  * <ion-fab>
+  *   <button ion-fab color="primary">Button</button>
+  * </ion-fab>
+  *
+  * <!-- Mini -->
+  * <ion-fab>
+  *   <button ion-fab mini>Small</button>
+  * </ion-fab>
+  * ```
+  *
+  * @demo /docs/v2/demos/src/fab/
+  * @see {@link /docs/v2/components#fabs FAB Component Docs}
+ */
 @Component({
   selector: '[ion-fab]',
   template:
@@ -54,7 +101,7 @@ export class FabButton extends Ion  {
 }
 
 /**
-  * @name Fab
+  * @name FabList
   * @module ionic
   *
   * @demo /docs/v2/demos/fab/
@@ -96,11 +143,85 @@ export class FabList {
 
 }
 
+/**
+  * @name FabContainer
+  * @module ionic
+  *
+  * @description
+  * `<ion-fab>` is not a FAB button by itself but a container that assist the fab button (`<button ion-fab>`) allowing it
+  * to be placing in fixed position that does not scroll with the content. It is also used to implement "material design speed dial",
+  * ie. a FAB buttons displays a small lists of related actions when clicked.
+  *
+  * @property [top] - Places the container on the top of the content
+  * @property [bottom] - Places the container on the bottom  of the content
+  * @property [left] - Places the container on the left
+  * @property [right] - Places the container on the right
+  * @property [middle] - Places the container on the middle vertically
+  * @property [center] - Places the container on the center horizontally
+  * @property [edge] - Used to place the container between the content and the header/footer
+  *
+  * @usage
+  *
+  * ```html
+  * <!-- this fab is placed at top right -->
+  * <ion-fab top right>
+  *   <button ion-fab>Button</button>
+  * </ion-fab>
+  *
+  * <!-- this fab is placed at the center of the content viewport -->
+  * <ion-fab center middle>
+  *   <button ion-fab>Button</button>
+  * </ion-fab>
+  * ```
+  *
+  * Ionic's FAB also supports "material design's fab speed dial". It is a normal fab button
+  * that shows a list of related actions when clicked.
+  *
+  * The same `ion-fab` container can contain several `ion-fab-list` with different side values:
+  * `top`, `bottom`, `left` and `right`. For example, if you want to have a list of button that are
+  * on the top of the main button, you should use `side="top"` and so on. By default, if side is ommited, `side="bottom"`.
+  *
+  * ```html
+  * <!-- this fab is placed at top right -->
+  * <ion-fab bottom right >
+  *   <button ion-fab>Share</button>
+  *   <ion-fab-list side="top">
+  *     <button ion-fab>Facebook</button>
+  *     <button ion-fab>Twitter</button>
+  *     <button ion-fab>Youtube</button>
+  *   </ion-fab-list>
+  *   <ion-fab-list side="left">
+  *     <button ion-fab>Vimeo</button>
+  *   </ion-fab-list>
+  * </ion-fab>
+  * ```
+  *
+  * A FAB speed dial can also be closed programatically.
+  *
+  * ```html
+  * <ion-fab bottom right #fab>
+  *   <button ion-fab>Share</button>
+  *   <ion-fab-list side="top">
+  *     <button ion-fab (click)="share('facebook', fab)">Facebook</button>
+  *     <button ion-fab (click)="share('twitter', fab)">Twitter</button>
+  * </ion-fab>
+  * ```
+  *
+  * ```ts
+  * share(socialNet: string, fab: FabContainer) {
+  *   fab.close();
+  *   console.log("Sharing in", socialNet);
+  * }
+  * ```
+  *
+  * @demo /docs/v2/demos/src/fab/
+  * @see {@link /docs/v2/components#fabs FAB Component Docs}
+ */
 @Component({
   selector: 'ion-fab',
   template: '<ng-content></ng-content>'
 })
-export class Fab {
+export class FabContainer {
   _events: UIEventManager = new UIEventManager();
   _listsActive: boolean = false;
 

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

@@ -1,5 +1,5 @@
 import { Component, NgModule } from '@angular/core';
-import { IonicApp, IonicModule, Fab } from '../../../..';
+import { IonicApp, IonicModule, FabContainer } from '../../../..';
 
 @Component({
   templateUrl: 'main.html'
@@ -15,7 +15,7 @@ export class E2EPage {
     console.log('Clicked open social menu');
   }
 
-  openSocial(network: string, fab: Fab) {
+  openSocial(network: string, fab: FabContainer) {
     console.log('Share in ' + network);
     fab.close();
   }

src/directives.ts

@@ -11,7 +11,7 @@ import { Checkbox } from './components/checkbox/checkbox';
 import { Chip } from './components/chip/chip';
 import { Content } from './components/content/content';
 import { DateTime } from './components/datetime/datetime';
-import { Fab, FabButton, FabList } from './components/fab/fab';
+import { FabContainer, FabButton, FabList } from './components/fab/fab';
 import { Fixed } from './components/fixed/fixed';
 import { Grid, Row, Col } from './components/grid/grid';
 import { Icon } from './components/icon/icon';
@@ -80,7 +80,7 @@ export { Checkbox } from './components/checkbox/checkbox';
 export { Chip } from './components/chip/chip';
 export { Content } from './components/content/content';
 export { DateTime } from './components/datetime/datetime';
-export { Fab, FabButton, FabList } from './components/fab/fab';
+export { FabContainer, FabButton, FabList } from './components/fab/fab';
 export { Fixed } from './components/fixed/fixed';
 export { Grid, Row, Col } from './components/grid/grid';
 export { Icon } from './components/icon/icon';
@@ -173,7 +173,7 @@ export const IONIC_DIRECTIVES: any[] = [
   Col,
   Content,
   DateTime,
-  Fab,
+  FabContainer,
   FabButton,
   FabList,
   Fixed,