fix(fab): add side as a property for fab list

packages/core/src/components.d.ts

@@ -908,6 +908,7 @@ declare global {
   namespace JSXElements {
     export interface IonFabListAttributes extends HTMLAttributes {
       activated?: boolean;
+      side?: 'left' | 'right' | 'top' | 'bottom';
     }
   }
 }

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

@@ -13,6 +13,10 @@ import { CssClassMap } from '../../index';
 export class FabButton {
   @Element() private el: HTMLElement;
 
+  @State() private inContainer = false;
+
+  @State() private inList = false;
+
   /**
    * The color to use from your Sass `$colors` map.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -27,6 +31,16 @@ export class FabButton {
    */
   @Prop() mode: 'ios' | 'md';
 
+  /**
+   * If true, the fab button will be show a close icon. Defaults to `false`.
+   */
+  @Prop() activated = false;
+
+  /**
+   * If true, the user cannot interact with the fab button. Defaults to `false`.
+   */
+  @Prop() disabled = false;
+
   /**
    * Contains a URL or a URL fragment that the hyperlink points to.
    * If this property is set, an anchor tag will be rendered.
@@ -38,18 +52,10 @@ export class FabButton {
    */
   @Prop() translucent = false;
 
-  @Prop() activated = false;
   @Prop() toggleActive: Function;
 
   @Prop() show = false;
 
-  @State() private inContainer = false;
-  @State() private inList = false;
-
-  /**
-   * If true, the user cannot interact with the fab button. Defaults to `false`.
-   */
-  @Prop() disabled = false;
 
   componentDidLoad() {
     const parentNode = this.el.parentNode;
@@ -74,7 +80,6 @@ export class FabButton {
       'fab-button-in-list': this.inList,
       [`fab-button-${this.mode}-in-list`]: this.inList,
       [`fab-button-translucent-${this.mode}-in-list`]: (this.inList && this.translucent),
-
       'fab-button-close-active': this.activated,
       'fab-button-show': this.show,
     };

packages/core/src/components/fab-button/readme.md

@@ -42,6 +42,8 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
 
 boolean
 
+If true, the fab button will be show a close icon. Defaults to `false`.
+
 
 #### color
 
@@ -99,6 +101,8 @@ If true, the fab button will be translucent. Defaults to `false`.
 
 boolean
 
+If true, the fab button will be show a close icon. Defaults to `false`.
+
 
 #### color
 

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

@@ -38,26 +38,26 @@ ion-fab-list {
   transform: scale(1);
 }
 
-ion-fab-list[side=left] .fab-button-in-list,
+.fab-list-side-left .fab-button-in-list,
-ion-fab-list[side=right] .fab-button-in-list {
+.fab-list-side-right .fab-button-in-list {
   @include margin(0, 8px);
 }
 
-ion-fab-list[side=top] {
+.fab-list-side-top {
   top: auto;
   bottom: 0;
 
   flex-direction: column-reverse;
 }
 
-ion-fab-list[side=left] {
+.fab-list-side-left {
   @include margin(0, $fab-size + $fab-list-margin);
   @include position-horizontal(null, 0);
 
   flex-direction: row-reverse;
 }
 
-ion-fab-list[side=right] {
+.fab-list-side-right {
   @include margin(0, $fab-size + $fab-list-margin);
   @include position(null, null, null, 0);
 

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

@@ -8,6 +8,9 @@ import { Component, Element, Prop, Watch } from '@stencil/core';
 export class FabList {
   @Element() private el: HTMLIonFabElement;
 
+  /**
+   * If true, the fab list will be show all fab buttons in the list. Defaults to `false`.
+   */
   @Prop() activated = false;
 
   @Watch('activated')
@@ -22,10 +25,17 @@ export class FabList {
     }
   }
 
+  /**
+   * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
+   */
+  @Prop() side: 'left' | 'right' | 'top' | 'bottom' = 'bottom';
+
+
   hostData() {
     return {
       class: {
-        'fab-list-active': this.activated
+        'fab-list-active': this.activated,
+        [`fab-list-side-${this.side}`]: this.side
       }
     };
   }

packages/core/src/components/fab-list/readme.md

@@ -33,6 +33,15 @@ The `ion-fab-list` element is a container for multiple FAB buttons. This collect
 
 boolean
 
+If true, the fab list will be show all fab buttons in the list. Defaults to `false`.
+
+
+#### side
+
+
+
+The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
+
 
 ## Attributes
 
@@ -40,6 +49,15 @@ boolean
 
 boolean
 
+If true, the fab list will be show all fab buttons in the list. Defaults to `false`.
+
+
+#### side
+
+
+
+The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
+
 
 
 ----------------------------------------------