fix(): update to Stencil One 🎉🎊

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

@@ -1,6 +1,7 @@
-import { Component, ComponentInterface, Prop } from '@stencil/core';
+import { Component, ComponentInterface, 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 } from '../../utils/theme';
 
@@ -23,11 +24,6 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
    */
   @Prop() color?: Color;
 
-  /**
-   * The mode determines which platform styles to use.
-   */
-  @Prop() mode!: Mode;
-
   /**
    * If `true`, the user cannot interact with the menu button.
    */
@@ -49,6 +45,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
   hostData() {
+    const mode = getIonMode(this);
     const { color, disabled } = this;
 
     return {
@@ -56,7 +53,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
       class: {
         ...createColorClasses(color),
 
-        [`${this.mode}`]: true,
+        [`${mode}`]: true,
 
         'button': true,  // ion-buttons target .button
         'menu-button-disabled': disabled,
@@ -67,6 +64,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
   }
 
   render() {
+    const mode = getIonMode(this);
     const menuIcon = this.config.get('menuIcon', 'menu');
 
     const attrs = {
@@ -81,9 +79,9 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
           class="button-native"
         >
           <slot>
-            <ion-icon icon={menuIcon} mode={this.mode} lazy={false}></ion-icon>
+            <ion-icon icon={menuIcon} mode={mode} lazy={false}></ion-icon>
           </slot>
-          {this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
+          {mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
         </button>
       </ion-menu-toggle>
     );

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

@@ -14,7 +14,6 @@ Menu Button is component that automatically creates the icon and functionality t
 | `color`    | `color`     | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`             | `undefined` |
 | `disabled` | `disabled`  | If `true`, the user cannot interact with the menu button.                                                                                                                                                                                                              | `boolean`                         | `false`     |
 | `menu`     | `menu`      | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle                                                                                                                 | `string \| undefined`             | `undefined` |
-| `mode`     | `mode`      | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                   | `undefined` |
 | `type`     | `type`      | The type of the button.                                                                                                                                                                                                                                                | `"button" \| "reset" \| "submit"` | `'button'`  |
 
 
@@ -35,6 +34,23 @@ Menu Button is component that automatically creates the icon and functionality t
 | `--padding-top`        | Padding top of the button                  |
 
 
+## Dependencies
+
+### Depends on
+
+- [ion-menu-toggle](../menu-toggle)
+- ion-icon
+- [ion-ripple-effect](../ripple-effect)
+
+### Graph
+```mermaid
+graph TD;
+  ion-menu-button --> ion-menu-toggle
+  ion-menu-button --> ion-icon
+  ion-menu-button --> ion-ripple-effect
+  style ion-menu-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/menu-button/test/basic/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/menu-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>
   <h1>Default</h1>