fix(): update to Stencil One 🎉🎊

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

@@ -1,9 +1,13 @@
-import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Listen, Prop, h } from '@stencil/core';
 
-import { Color, Config, Mode } from '../../interface';
+import { getIonMode } from '../../global/ionic-global';
+import { Color, Config } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
 import { createColorClasses, openURL } from '../../utils/theme';
 
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
 @Component({
   tag: 'ion-back-button',
   styleUrls: {
@@ -14,6 +18,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
 })
 export class BackButton implements ComponentInterface, ButtonInterface {
 
+  private mode = getIonMode(this);
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'config' }) config!: Config;
@@ -26,11 +31,6 @@ export class BackButton implements ComponentInterface, ButtonInterface {
    */
   @Prop() color?: Color;
 
-  /**
-   * The mode determines which platform styles to use.
-   */
-  @Prop() mode!: Mode;
-
   /**
    * The url to navigate back to by default when there is no history.
    */

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

@@ -119,16 +119,15 @@ To change what is displayed in the back button, use the `text` and `icon` proper
 
 ```tsx
 import React from 'react';
+import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
 
-import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton } from '@ionic/react';
-
-const Example: React.SFC<{}> = () => (
-  <>
+export const BackButtonExample: React.FunctionComponent = () => (
+  <IonContent>
     {/*-- Default back button --*/}
     <IonHeader>
       <IonToolbar>
         <IonButtons slot="start">
-          <IonBackButton goBack={() => {}} />
+          <IonBackButton />
         </IonButtons>
       </IonToolbar>
     </IonHeader>
@@ -137,7 +136,7 @@ const Example: React.SFC<{}> = () => (
     <IonHeader>
       <IonToolbar>
         <IonButtons slot="start">
-          <IonBackButton goBack={() => {}} defaultHref="home" />
+          <IonBackButton defaultHref="home" />
         </IonButtons>
       </IonToolbar>
     </IonHeader>
@@ -146,11 +145,7 @@ const Example: React.SFC<{}> = () => (
     <IonHeader>
       <IonToolbar>
         <IonButtons slot="start">
-          <IonBackButton
-            goBack={() => {}}
-            text="buttonText"
-            icon="buttonIcon"
-          />
+          <IonBackButton text="buttonText" icon="buttonIcon" />
         </IonButtons>
       </IonToolbar>
     </IonHeader>
@@ -159,7 +154,7 @@ const Example: React.SFC<{}> = () => (
     <IonHeader>
       <IonToolbar>
         <IonButtons slot="start">
-          <IonBackButton goBack={() => {}} text="" icon="add" />
+          <IonBackButton text="" icon="add" />
         </IonButtons>
       </IonToolbar>
     </IonHeader>
@@ -169,14 +164,12 @@ const Example: React.SFC<{}> = () => (
       <IonToolbar>
         <IonButtons slot="start">
           <IonMenuButton />
-          <IonBackButton goBack={() => {}} color="danger" />
+          <IonBackButton color="danger" />
         </IonButtons>
       </IonToolbar>
     </IonHeader>
-  </>
+  </IonContent>
 );
-
-export default Example;
 ```
 
 
@@ -286,6 +279,21 @@ export default Example;
 | `--transition`          | Transition of the button              |
 
 
+## Dependencies
+
+### Depends on
+
+- ion-icon
+- [ion-ripple-effect](../ripple-effect)
+
+### Graph
+```mermaid
+graph TD;
+  ion-back-button --> ion-icon
+  ion-back-button --> ion-ripple-effect
+  style ion-back-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/back-button/test/basic/index.html

@@ -9,8 +9,8 @@
   <link href="../../../../../css/ionic.bundle.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>
   <ion-app>

core/src/components/back-button/test/host-element/index.html

@@ -8,8 +8,8 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script src="../../../../../dist/ionic.js"></script>
-  <script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>  <script>
     class PageOne extends HTMLElement {
       connectedCallback() {
         this.innerHTML = `

core/src/components/back-button/test/navigation/index.html

@@ -8,7 +8,7 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script src="../../../../../dist/ionic.js"></script>
+  <script src="../../../../../dist/ionic/ionic.js"></script>
 </head>
 
 <body onload="loadFirstPage()">

core/src/components/back-button/test/preview/index.html

@@ -8,8 +8,8 @@
   <link href="../../../../../css/ionic.bundle.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 onload="loadFirstPage()">
   <ion-app>

core/src/components/back-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/back-button/test/toolbar/index.html

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

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

@@ -1,15 +1,14 @@
 ```tsx
 import React from 'react';
+import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
 
-import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton } from '@ionic/react';
-
-const Example: React.SFC<{}> = () => (
-  <>
+export const BackButtonExample: React.FunctionComponent = () => (
+  <IonContent>
     {/*-- Default back button --*/}
     <IonHeader>
       <IonToolbar>
         <IonButtons slot="start">
-          <IonBackButton goBack={() => {}} />
+          <IonBackButton />
         </IonButtons>
       </IonToolbar>
     </IonHeader>
@@ -18,7 +17,7 @@ const Example: React.SFC<{}> = () => (
     <IonHeader>
       <IonToolbar>
         <IonButtons slot="start">
-          <IonBackButton goBack={() => {}} defaultHref="home" />
+          <IonBackButton defaultHref="home" />
         </IonButtons>
       </IonToolbar>
     </IonHeader>
@@ -27,11 +26,7 @@ const Example: React.SFC<{}> = () => (
     <IonHeader>
       <IonToolbar>
         <IonButtons slot="start">
-          <IonBackButton
-            goBack={() => {}}
-            text="buttonText"
-            icon="buttonIcon"
-          />
+          <IonBackButton text="buttonText" icon="buttonIcon" />
         </IonButtons>
       </IonToolbar>
     </IonHeader>
@@ -40,7 +35,7 @@ const Example: React.SFC<{}> = () => (
     <IonHeader>
       <IonToolbar>
         <IonButtons slot="start">
-          <IonBackButton goBack={() => {}} text="" icon="add" />
+          <IonBackButton text="" icon="add" />
         </IonButtons>
       </IonToolbar>
     </IonHeader>
@@ -50,12 +45,10 @@ const Example: React.SFC<{}> = () => (
       <IonToolbar>
         <IonButtons slot="start">
           <IonMenuButton />
-          <IonBackButton goBack={() => {}} color="danger" />
+          <IonBackButton color="danger" />
         </IonButtons>
       </IonToolbar>
     </IonHeader>
-  </>
+  </IonContent>
 );
-
-export default Example;
 ```