fix(fab): fix fab activation

ionic-team · Apr 11, 2018 · a203534 · a203534
1 parent 49e5b7e
commit a203534
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 144 deletions.
diff --git a/angular/BREAKING.md b/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.                                  |
-| right        | `horizontal="right"` | Positions to the right of the viewport.                                 |
+| left         | Removed              |                                                                         |
+| 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>

diff --git a/core/src/components.d.ts b/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,14 +1728,15 @@ 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';
     }
   }
 }
 
 
 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"`.
        */

diff --git a/core/src/components/fab-button/fab-button.tsx b/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,11 +11,10 @@ import { CssClassMap } from '../../index';
   }
 })
 export class FabButton {
-  @Element() private el: HTMLElement;
 
-  @State() private inContainer = false;
+  private inList = false;
 
-  @State() private inList = false;
+  @Element() private el: HTMLElement;
 
   /**
    * The color to use from your Sass `$colors` map.
@@ -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;
 
-
-  componentDidLoad() {
+  componentWillLoad() {
     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}
-        onClick={this.clickedFab.bind(this)}>
+        href={this.href}>
         <ion-icon name='close' class='fab-button-close-icon'></ion-icon>
         <span class='fab-button-inner'>
           <slot></slot>

diff --git a/core/src/components/fab-button/readme.md b/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

diff --git a/core/src/components/fab-list/fab-list.scss b/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-right .fab-button-in-list {
+.fab-list-side-start .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);
 

diff --git a/core/src/components/fab-list/fab-list.tsx b/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++) {
-      const fab = fabs[i];
+    fabs.forEach((fab, 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() {

diff --git a/core/src/components/fab/fab.scss b/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);
-Original file line number
+Diff line change
@@ Expand Up @@
     boolean
-    #### toggleActive
     #### translucent
     boolean
@@ Expand Down Expand Up @@
     boolean
-    #### toggle-active
     #### translucent
     boolean
@@ Expand Down @@