fix(): update to Stencil One 🎉🎊

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

@@ -1,9 +1,13 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from '@stencil/core';
 
-import { Color, Mode, RouterDirection } from '../../interface';
+import { getIonMode } from '../../global/ionic-global';
+import { Color, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
 @Component({
   tag: 'ion-fab-button',
   styleUrls: {
@@ -17,11 +21,6 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
 
   @Prop({ context: 'window' }) win!: Window;
 
-  /**
-   * The mode determines which platform styles to use.
-   */
-  @Prop() mode!: Mode;
-
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -113,11 +112,12 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
   hostData() {
     const { el, disabled, color, activated, show, translucent, size } = this;
     const inList = hostContext('ion-fab-list', el);
+    const mode = getIonMode(this);
     return {
       'aria-disabled': disabled ? 'true' : null,
       class: {
         ...createColorClasses(color),
-        [`${this.mode}`]: true,
+        [`${mode}`]: true,
         'fab-button-in-list': inList,
         'fab-button-translucent-in-list': inList && translucent,
         'fab-button-close-active': activated,
@@ -132,6 +132,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
   }
 
   render() {
+    const mode = getIonMode(this);
     const TagType = this.href === undefined ? 'button' : 'a' as any;
     const attrs = (TagType === 'button')
       ? { type: this.type }
@@ -157,7 +158,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
         <span class="button-inner">
           <slot></slot>
         </span>
-        {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+        {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
       </TagType>
     );
   }

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

@@ -40,12 +40,10 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
 
 ```tsx
 import React from 'react';
-
 import { IonContent, IonFab, IonFabButton } from '@ionic/react';
 
-const Example: React.SFC<{}> = () => (
+export const FabButtonExample: React.FunctionComponent = () => (
   <IonContent>
-
     {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
     <IonFab>
       <IonFabButton>Button</IonFabButton>
@@ -65,8 +63,7 @@ const Example: React.SFC<{}> = () => (
     <IonFabButton color="dark">Dark</IonFabButton>
   </IonContent>
 );
-
-export default Example
+```
 
 
 ### Vue
@@ -149,6 +146,21 @@ export default Example
 | `--transition`           | Transition of the button                |
 
 
+## Dependencies
+
+### Depends on
+
+- ion-icon
+- [ion-ripple-effect](../ripple-effect)
+
+### Graph
+```mermaid
+graph TD;
+  ion-fab-button --> ion-icon
+  ion-fab-button --> ion-ripple-effect
+  style ion-fab-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

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

@@ -8,8 +8,8 @@
   <link href="../../../../../css/core.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script src="../../../../../dist/ionic.js"></script>
-</head>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
 
 <body>
   <h3>Default</h3>

core/src/components/fab-button/usage/react.md

@@ -1,11 +1,9 @@
 ```tsx
 import React from 'react';
-
 import { IonContent, IonFab, IonFabButton } from '@ionic/react';
 
-const Example: React.SFC<{}> = () => (
+export const FabButtonExample: React.FunctionComponent = () => (
   <IonContent>
-
     {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
     <IonFab>
       <IonFabButton>Button</IonFabButton>
@@ -25,5 +23,4 @@ const Example: React.SFC<{}> = () => (
     <IonFabButton color="dark">Dark</IonFabButton>
   </IonContent>
 );
-
-export default Example
+```