fix(fab): fix fab activation

angular/BREAKING.md

@@ -305,7 +305,7 @@ Buttons inside of an `<ion-fab>` container should now be written as an `<ion-fab
 **New Usage Example:**
 
 ```html
-<ion-fab vertical="top" horizontal="right" edge>
+<ion-fab vertical="top" horizontal="end" edge>
   <ion-fab-button>
     <ion-icon name="add"></ion-icon>
   </ion-fab-button>
@@ -334,8 +334,8 @@ The attributes to align the fab horizontally are now combined under the `horizon
 
 | Old Property | New Property         | Property Behavior                                                       |
 |--------------|----------------------|-------------------------------------------------------------------------|
-| left         | `horizontal="left"`  | Positions to the left of the viewport.                                  |
+| left         | Removed              |                                                                         |
-| right        | `horizontal="right"` | Positions to the right of the viewport.                                 |
+| right        | Removed              |                                                                         |
 | center       | `horizontal="center"`| Positions to the center of the viewport.                                |
 | start        | `horizontal="start"` | Positions to the left of the viewport in LTR, and to the right in RTL.  |
 | end          | `horizontal="end"`   | Positions to the right of the viewport in LTR, and to the left in RTL.  |
@@ -360,7 +360,7 @@ _Note that `middle` has been changed to `center` for the vertical positioning._
 **New Usage Example:**
 
 ```html
-<ion-fab vertical="top" horizontal="right" edge>
+<ion-fab vertical="top" horizontal="end" edge>
   <!-- fab buttons and lists -->
 </ion-fab>
 
@@ -387,7 +387,7 @@ The `<ion-fab>` container was previously placed inside of the fixed content by d
 **New Usage Example:**
 
 ```html
-<ion-fab vertical="top" horizontal="right" edge slot="fixed">
+<ion-fab vertical="top" horizontal="end" edge slot="fixed">
   <!-- fab buttons and lists -->
 </ion-fab>
 <ion-content>

core/src/components.d.ts

@@ -1635,13 +1635,12 @@ declare global {
     /**
      * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
      */
-    'href': string;
+    'href': string | undefined;
     /**
      * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
      */
     'mode': 'ios' | 'md';
     'show': boolean;
-    'toggleActive': Function;
     /**
      * If true, the fab button will be translucent. Defaults to `false`.
      */
@@ -1679,13 +1678,12 @@ declare global {
       /**
        * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
        */
-      'href'?: string;
+      'href'?: string | undefined;
       /**
        * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
        */
       'mode'?: 'ios' | 'md';
       'show'?: boolean;
-      'toggleActive'?: Function;
       /**
        * If true, the fab button will be translucent. Defaults to `false`.
        */
@@ -1704,7 +1702,7 @@ declare global {
     /**
      * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
      */
-    'side': 'left' | 'right' | 'top' | 'bottom';
+    'side': 'start' | 'end' | 'top' | 'bottom';
   }
   var HTMLIonFabListElement: {
     prototype: HTMLIonFabListElement;
@@ -1730,7 +1728,7 @@ declare global {
       /**
        * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
        */
-      'side'?: 'left' | 'right' | 'top' | 'bottom';
+      'side'?: 'start' | 'end' | 'top' | 'bottom';
     }
   }
 }
@@ -1738,6 +1736,7 @@ declare global {
 
 declare global {
   interface HTMLIonFabElement extends HTMLStencilElement {
+    'activated': boolean;
     /**
      * Close an active FAB list container
      */
@@ -1747,9 +1746,9 @@ declare global {
      */
     'edge': boolean;
     /**
-     * Where to align the fab horizontally in the viewport. Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
+     * Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`.
      */
-    'horizontal': 'left' | 'right' | 'center' | 'start' | 'end';
+    'horizontal': 'start' | 'end' | 'center';
     /**
      * Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`.
      */
@@ -1772,14 +1771,15 @@ declare global {
   }
   namespace JSXElements {
     export interface IonFabAttributes extends HTMLAttributes {
+      'activated'?: boolean;
       /**
        * If true, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot.
        */
       'edge'?: boolean;
       /**
-       * Where to align the fab horizontally in the viewport. Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
+       * Where to align the fab horizontally in the viewport. Possible values are: `"center"`, `"start"`, `"end"`.
        */
-      'horizontal'?: 'left' | 'right' | 'center' | 'start' | 'end';
+      'horizontal'?: 'start' | 'end' | 'center';
       /**
        * Where to align the fab vertically in the viewport. Possible values are: `"top"`, `"center"`, `"bottom"`.
        */

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

@@ -1,4 +1,4 @@
-import { Component, Element, Prop, State } from '@stencil/core';
+import { Component, Element, Prop } from '@stencil/core';
 import { createThemedClasses, getElementClassMap } from '../../utils/theme';
 import { CssClassMap } from '../../index';
 
@@ -11,12 +11,11 @@ import { CssClassMap } from '../../index';
   }
 })
 export class FabButton {
+
+  private inList = false;
+
   @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"`.
@@ -45,37 +44,26 @@ export class FabButton {
    * Contains a URL or a URL fragment that the hyperlink points to.
    * If this property is set, an anchor tag will be rendered.
    */
-  @Prop() href: string;
+  @Prop() href: string | undefined;
 
   /**
    * If true, the fab button will be translucent. Defaults to `false`.
    */
   @Prop() translucent = false;
 
-  @Prop() toggleActive: Function;
-
   @Prop() show = false;
 
-
+  componentWillLoad() {
-  componentDidLoad() {
     const parentNode = this.el.parentNode;
     const parentTag = parentNode ? parentNode.nodeName : null;
 
     this.inList = (parentTag === 'ION-FAB-LIST');
-    this.inContainer = (parentTag === 'ION-FAB');
-  }
-
-
-  clickedFab() {
-    if (this.inContainer) {
-      this.toggleActive();
-    }
   }
 
   /**
    * Get the classes for fab buttons in lists
    */
-  getFabClassMap(): CssClassMap {
+  private getFabClassMap(): CssClassMap {
     return {
       'fab-button-in-list': this.inList,
       [`fab-button-${this.mode}-in-list`]: this.inList,
@@ -89,10 +77,7 @@ export class FabButton {
     const themedClasses = createThemedClasses(this.mode, this.color, 'fab-button');
     const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-button-translucent') : {};
     const hostClasses = getElementClassMap(this.el.classList);
-
-
     const TagType = this.href ? 'a' : 'button';
-
     const fabClasses = {
       ...this.getFabClassMap(),
       ...themedClasses,
@@ -104,8 +89,7 @@ export class FabButton {
       <TagType
         class={fabClasses}
         disabled={this.disabled}
-        href={this.href}
+        href={this.href}>
-        onClick={this.clickedFab.bind(this)}>
         <ion-icon name='close' class='fab-button-close-icon'></ion-icon>
         <span class='fab-button-inner'>
           <slot></slot>

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

@@ -83,11 +83,6 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 boolean
 
 
-#### toggleActive
-
-
-
-
 #### translucent
 
 boolean
@@ -142,11 +137,6 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 boolean
 
 
-#### toggle-active
-
-
-
-
 #### translucent
 
 boolean

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

@@ -38,8 +38,8 @@ ion-fab-list {
   transform: scale(1);
 }
 
-.fab-list-side-left .fab-button-in-list,
+.fab-list-side-start .fab-button-in-list,
-.fab-list-side-right .fab-button-in-list {
+.fab-list-side-end .fab-button-in-list {
   @include margin(0, 8px);
 }
 
@@ -50,14 +50,14 @@ ion-fab-list {
   flex-direction: column-reverse;
 }
 
-.fab-list-side-left {
+.fab-list-side-start {
   @include margin(0, $fab-size + $fab-list-margin);
   @include position-horizontal(null, 0);
 
   flex-direction: row-reverse;
 }
 
-.fab-list-side-right {
+.fab-list-side-end {
   @include margin(0, $fab-size + $fab-list-margin);
   @include position(null, null, null, 0);
 

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

@@ -15,20 +15,19 @@ export class FabList {
 
   @Watch('activated')
   protected activatedChanged(activated: boolean) {
-    const fabs = this.el.querySelectorAll('ion-fab-button');
+    const fabs = Array.from(this.el.querySelectorAll('ion-fab-button'));
 
     // if showing the fabs add a timeout, else show immediately
     const timeout = activated ? 30 : 0;
-    for (let i = 0; i < fabs.length; i++) {
+    fabs.forEach((fab, i) => {
-      const fab = fabs[i];
       setTimeout(() => fab.show = activated, i * timeout);
-    }
+    });
   }
 
   /**
    * The side the fab list will show on relative to the main fab button. Defaults to `'bottom'`.
    */
-  @Prop() side: 'left' | 'right' | 'top' | 'bottom' = 'bottom';
+  @Prop() side: 'start' | 'end' | 'top' | 'bottom' = 'bottom';
 
 
   hostData() {

core/src/components/fab/fab.scss

@@ -12,26 +12,6 @@ ion-fab {
 // FAB Horizontal Positioning
 // --------------------------------------------------
 
-.fab-horizontal-left {
-  // scss-lint:disable PropertySpelling
-  @include multi-dir() {
-    left: $fab-content-margin;
-
-    left: calc(#{$fab-content-margin} + constant(safe-area-inset-left));
-    left: calc(#{$fab-content-margin} + env(safe-area-inset-left));
-  }
-}
-
-.fab-horizontal-right {
-  // scss-lint:disable PropertySpelling
-  @include multi-dir() {
-    right: $fab-content-margin;
-
-    right: calc(#{$fab-content-margin} + constant(safe-area-inset-right));
-    right: calc(#{$fab-content-margin} + env(safe-area-inset-right));
-  }
-}
-
 .fab-horizontal-center {
   @include position(null, null, null, 50%);
   @include margin-horizontal(-$fab-size / 2, null);

core/src/components/fab/fab.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Method, Prop, State } from '@stencil/core';
+import { Component, Element, Listen, Method, Prop, Watch } from '@stencil/core';
 
 
 @Component({
@@ -6,29 +6,52 @@ import { Component, Element, Method, Prop, State } from '@stencil/core';
   styleUrl: 'fab.scss'
 })
 export class Fab {
-  @Element() private el: HTMLElement;
 
-  @State() activated = false;
+  @Element() private el: HTMLElement;
 
   /**
    * Where to align the fab horizontally in the viewport.
-   * Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
+   * Possible values are: `"center"`, `"start"`, `"end"`.
    */
-  @Prop() horizontal: 'left' | 'right' | 'center' | 'start' | 'end';
+  @Prop() horizontal: 'start' | 'end' | 'center';
 
   /**
    * Where to align the fab vertically in the viewport.
    * Possible values are: `"top"`, `"center"`, `"bottom"`.
    */
-  @Prop() vertical: 'top' | 'center' | 'bottom';
+  @Prop() vertical: 'top' | 'bottom' | 'center';
 
   /**
    * If true, the fab will display on the edge of the header if
    * `vertical` is `"top"`, and on the edge of the footer if
    * it is `"bottom"`. Should be used with a `fixed` slot.
    */
-  @Prop() edge: boolean;
+  @Prop() edge = false;
 
+  @Prop({mutable: true}) activated = false;
+  @Watch('activated')
+  activatedChanged() {
+    const activated = this.activated;
+    const fab = this.el.querySelector('ion-fab-button');
+    if (fab) {
+      fab.activated = activated;
+    }
+    Array.from(this.el.querySelectorAll('ion-fab-list')).forEach(list => {
+      list.activated = activated;
+    });
+  }
+
+  componentDidLoad() {
+    this.activatedChanged();
+  }
+
+  @Listen('click')
+  onClick() {
+    const hasList = !!this.el.querySelector('ion-fab-list');
+    if (hasList) {
+      this.activated = !this.activated;
+    }
+  }
 
   /**
    * Close an active FAB list container
@@ -38,35 +61,14 @@ export class Fab {
     this.activated = false;
   }
 
-  toggleActive = () => {
-    this.activated = !this.activated;
-  }
-
   hostData() {
     return {
       class: {
-        [`fab-horizontal-${this.horizontal}`]: this.horizontal,
+        [`fab-horizontal-${this.horizontal}`]: !!this.horizontal,
-        [`fab-vertical-${this.vertical}`]: this.vertical,
+        [`fab-vertical-${this.vertical}`]: !!this.vertical,
         ['fab-edge']: this.edge
       }
     };
   }
 
-  render() {
-    const fab = this.el.querySelector('ion-fab-button');
-    if (fab) {
-      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>
-    );
-  }
-
 }

core/src/components/fab/readme.md

@@ -100,6 +100,11 @@ The fab should have one main fab button. Fabs can also contain fab lists which c
 
 ## Properties
 
+#### activated
+
+boolean
+
+
 #### edge
 
 boolean
@@ -114,7 +119,7 @@ it is `"bottom"`. Should be used with a `fixed` slot.
 string
 
 Where to align the fab horizontally in the viewport.
-Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
+Possible values are: `"center"`, `"start"`, `"end"`.
 
 
 #### vertical
@@ -127,6 +132,11 @@ Possible values are: `"top"`, `"center"`, `"bottom"`.
 
 ## Attributes
 
+#### activated
+
+boolean
+
+
 #### edge
 
 boolean
@@ -141,7 +151,7 @@ it is `"bottom"`. Should be used with a `fixed` slot.
 string
 
 Where to align the fab horizontally in the viewport.
-Possible values are: `"left"`, `"right"`, `"center"`, `"start"`, `"end"`.
+Possible values are: `"center"`, `"start"`, `"end"`.
 
 
 #### vertical

core/src/components/fab/test/basic/index.html

@@ -23,7 +23,7 @@
         <ion-button>Test</ion-button>
         <ion-fab-button>FAB</ion-fab-button>
 
-        <ion-fab vertical="top" horizontal="right" edge id="fab1" slot="fixed">
+        <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
           <ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
           <ion-fab-list>
             <ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -33,7 +33,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="bottom" horizontal="right" edge id="fab2" slot="fixed">
+        <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
           <ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
           <ion-fab-list side="start">
             <ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -43,7 +43,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
+        <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
           <ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
           <ion-fab-list side="end">
             <ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -53,7 +53,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="bottom" horizontal="left" id="fab4" slot="fixed">
+        <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
           <ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
           <ion-fab-list side="top">
             <ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -79,7 +79,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab horizontal="right" vertical="center" slot="fixed">
+        <ion-fab horizontal="end" vertical="center" slot="fixed">
           <ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
         </ion-fab>
       </ion-content>
@@ -115,26 +115,11 @@
       function clickMainFAB(container) {
         let message = 'Clicked open social menu';
         insertLog(message);
-
-        toggleLists(container);
       }
 
       function openSocial(network, container) {
         let message = 'Share in ' + network;
         insertLog(message);
-
-        toggleLists(container);
-      }
-
-      function toggleLists(container) {
-        var fabButton = document.getElementById(container).querySelector('ion-fab-button');
-        var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');
-
-        fabButton.activated = !fabButton.activated;
-
-        for (var i = 0; i < fabLists.length; i++) {
-          fabLists[i].activated = !fabLists[i].activated;
-        }
       }
 
       function closeLists() {

core/src/components/fab/test/preview/index.html

@@ -23,7 +23,7 @@
         <ion-button>Test</ion-button>
         <ion-fab-button>FAB</ion-fab-button>
 
-        <ion-fab vertical="top" horizontal="right" edge id="fab1" slot="fixed">
+        <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
           <ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
           <ion-fab-list>
             <ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -33,7 +33,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="bottom" horizontal="right" edge id="fab2" slot="fixed">
+        <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
           <ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
           <ion-fab-list side="start">
             <ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -43,7 +43,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
+        <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
           <ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
           <ion-fab-list side="end">
             <ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -53,7 +53,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="bottom" horizontal="left" id="fab4" slot="fixed">
+        <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
           <ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
           <ion-fab-list side="top">
             <ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -79,7 +79,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab horizontal="right" vertical="center" slot="fixed">
+        <ion-fab horizontal="end" vertical="center" slot="fixed">
           <ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
         </ion-fab>
       </ion-content>

core/src/components/fab/test/standalone/index.html

@@ -13,7 +13,7 @@
   <f></f>
   <ion-fab-button>FAB</ion-fab-button>
 
-  <ion-fab vertical="top" horizontal="right" id="fab1" slot="fixed">
+  <ion-fab vertical="top" horizontal="end" id="fab1" slot="fixed">
     <ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
     <ion-fab-list>
       <ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -23,7 +23,7 @@
     </ion-fab-list>
   </ion-fab>
 
-  <ion-fab vertical="bottom" horizontal="right" id="fab2" slot="fixed">
+  <ion-fab vertical="bottom" horizontal="end" id="fab2" slot="fixed">
     <ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
     <ion-fab-list side="start">
       <ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -33,7 +33,7 @@
     </ion-fab-list>
   </ion-fab>
 
-  <ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
+  <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
     <ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
     <ion-fab-list side="end">
       <ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -43,7 +43,7 @@
     </ion-fab-list>
   </ion-fab>
 
-  <ion-fab vertical="bottom" horizontal="left" id="fab4" slot="fixed">
+  <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
     <ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
     <ion-fab-list side="top">
       <ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -69,7 +69,7 @@
     </ion-fab-list>
   </ion-fab>
 
-  <ion-fab horizontal="right" vertical="center" slot="fixed">
+  <ion-fab horizontal="end" vertical="center" slot="fixed">
     <ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
   </ion-fab>
 

core/src/components/fab/test/translucent/index.html

@@ -32,7 +32,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 vertical="top" horizontal="right" edge id="fab1" slot="fixed">
+        <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
           <ion-fab-button translucent onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
           <ion-fab-list>
             <ion-fab-button translucent onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -42,7 +42,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="bottom" horizontal="right" edge id="fab2" slot="fixed">
+        <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
           <ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
           <ion-fab-list side="start">
             <ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -52,7 +52,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
+        <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
           <ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
           <ion-fab-list side="end">
             <ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -62,7 +62,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="bottom" horizontal="left" id="fab4" slot="fixed">
+        <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
           <ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
           <ion-fab-list side="top">
             <ion-fab-button translucent onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
@@ -88,7 +88,7 @@
           </ion-fab-list>
         </ion-fab>
 
-        <ion-fab horizontal="right" vertical="center" slot="fixed">
+        <ion-fab horizontal="end" vertical="center" slot="fixed">
           <ion-fab-button translucent color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
         </ion-fab>
       </ion-content>