fix(): update to Stencil One 🎉🎊

core/src/components/backdrop/backdrop.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Event, EventEmitter, Listen, Prop } from '@stencil/core';
 
-import { Mode } from '../../interface';
+import { getIonMode } from '../../global/ionic-global';
 import { GESTURE_CONTROLLER } from '../../utils/gesture';
 import { now } from '../../utils/helpers';
 
@@ -13,7 +13,6 @@ import { now } from '../../utils/helpers';
   shadow: true
 })
 export class Backdrop implements ComponentInterface {
-  mode!: Mode;
 
   private lastClick = -10000;
   private blocker = GESTURE_CONTROLLER.createBlocker({
@@ -77,10 +76,12 @@ export class Backdrop implements ComponentInterface {
   }
 
   hostData() {
+    const mode = getIonMode(this);
+
     return {
       tabindex: '-1',
       class: {
-        [`${this.mode}`]: true,
+        [`${mode}`]: true,
         'backdrop-hide': !this.visible,
         'backdrop-no-tappable': !this.tappable,
       }

core/src/components/backdrop/readme.md

@@ -78,11 +78,10 @@ backdrop.stopPropagation = false;
 
 ```tsx
 import React from 'react';
+import { IonBackdrop, IonContent } from '@ionic/react';
 
-import { IonBackdrop } from '@ionic/react';
-
-const Example: React.SFC<{}> = () => (
-  <>
+export const BackdropExample: React.FunctionComponent = () => (
+  <IonContent>
     {/*-- Default backdrop --*/}
     <IonBackdrop />
 
@@ -95,15 +94,9 @@ const Example: React.SFC<{}> = () => (
     {/*-- Backdrop with propagation --*/}
     <IonBackdrop stopPropagation={false} />
 
-    <IonBackdrop
-      tappable={true}
-      visible={true}
-      stopPropagation={true}
-    />
-  </>
+    <IonBackdrop tappable={true} visible={true} stopPropagation={true} />
+  </IonContent>
 );
-
-export default Example;
 ```
 
 
@@ -161,6 +154,31 @@ export default Example;
 | `ionBackdropTap` | Emitted when the backdrop is tapped. | `CustomEvent<void>` |
 
 
+## Dependencies
+
+### Used by
+
+ - [ion-action-sheet](../action-sheet)
+ - [ion-alert](../alert)
+ - [ion-loading](../loading)
+ - [ion-menu](../menu)
+ - [ion-modal](../modal)
+ - [ion-picker](../picker)
+ - [ion-popover](../popover)
+
+### Graph
+```mermaid
+graph TD;
+  ion-action-sheet --> ion-backdrop
+  ion-alert --> ion-backdrop
+  ion-loading --> ion-backdrop
+  ion-menu --> ion-backdrop
+  ion-modal --> ion-backdrop
+  ion-picker --> ion-backdrop
+  ion-popover --> ion-backdrop
+  style ion-backdrop fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/backdrop/usage/react.md

@@ -1,10 +1,9 @@
 ```tsx
 import React from 'react';
+import { IonBackdrop, IonContent } from '@ionic/react';
 
-import { IonBackdrop } from '@ionic/react';
-
-const Example: React.SFC<{}> = () => (
-  <>
+export const BackdropExample: React.FunctionComponent = () => (
+  <IonContent>
     {/*-- Default backdrop --*/}
     <IonBackdrop />
 
@@ -17,13 +16,7 @@ const Example: React.SFC<{}> = () => (
     {/*-- Backdrop with propagation --*/}
     <IonBackdrop stopPropagation={false} />
 
-    <IonBackdrop
-      tappable={true}
-      visible={true}
-      stopPropagation={true}
-    />
-  </>
+    <IonBackdrop tappable={true} visible={true} stopPropagation={true} />
+  </IonContent>
 );
-
-export default Example;
 ```