feature(menu-button): initial implementation of menu-button, needs better css support and better dom structure

packages/core/src/components.d.ts

@@ -4,8 +4,6 @@
  * and imports for stencil collections that might be configured in your stencil.config.js file
  */
 
-import 'ionicons';
-
 import {
   AnimationBuilder,
   FrameworkDelegate,
@@ -1686,6 +1684,38 @@ declare global {
 }
 
 
+import {
+  MenuButton as IonMenuButton
+} from './components/menu-button/menu-button';
+
+declare global {
+  interface HTMLIonMenuButtonElement extends IonMenuButton, HTMLStencilElement {
+  }
+  var HTMLIonMenuButtonElement: {
+    prototype: HTMLIonMenuButtonElement;
+    new (): HTMLIonMenuButtonElement;
+  };
+  interface HTMLElementTagNameMap {
+    "ion-menu-button": HTMLIonMenuButtonElement;
+  }
+  interface ElementTagNameMap {
+    "ion-menu-button": HTMLIonMenuButtonElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "ion-menu-button": JSXElements.IonMenuButtonAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface IonMenuButtonAttributes extends HTMLAttributes {
+      autoHide?: boolean;
+      menu?: string;
+      mode?: 'ios' | 'md';
+    }
+  }
+}
+
+
 import {
   MenuController as IonMenuController
 } from './components/menu-controller/menu-controller';

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

@@ -0,0 +1,64 @@
+import { Component, Element, Prop, State } from '@stencil/core';
+import { Config } from '../../index';
+
+@Component({
+  tag: 'ion-menu-button',
+  styleUrls: {
+    ios: 'menu-button.ios.scss',
+    md: 'menu-button.md.scss'
+  },
+  host: {
+    theme: 'menu-button'
+  }
+})
+export class MenuButton {
+
+  @State() custom: boolean;
+
+  /**
+   * 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).
+   */
+  @Prop() mode: 'ios' | 'md';
+
+  /**
+   * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
+   */
+  @Prop() menu: string;
+
+  /**
+   * Automatically hides the content when the corresponding menu is not
+   * active
+   */
+  @Prop() autoHide = true;
+
+
+  @Prop({ context: 'config' }) config: Config;
+
+  @Element() el: HTMLElement;
+
+  componentWillLoad() {
+    this.custom = this.el.childElementCount > 0;
+  }
+
+  render() {
+    const menuIcon = this.config.get('menuIcon', 'menu');
+
+    if (this.custom) {
+      return (
+        <ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
+          <slot />
+        </ion-menu-toggle>
+      );
+    } else {
+      return (
+        <ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
+          <ion-button>
+            <ion-icon slot="icon-only" name={menuIcon}></ion-icon>
+          </ion-button>
+        </ion-menu-toggle>
+      );
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+# ion-menu-button
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+#### autoHide
+
+boolean
+
+Automatically hides the content when the corresponding menu is not
+active
+
+
+#### menu
+
+string
+
+Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
+
+
+#### mode
+
+
+
+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).
+
+
+## Attributes
+
+#### auto-hide
+
+boolean
+
+Automatically hides the content when the corresponding menu is not
+active
+
+
+#### menu
+
+string
+
+Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
+
+
+#### mode
+
+
+
+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).
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/core/src/components/menu-toggle/menu-toggle.tsx

@@ -7,11 +7,16 @@ import { Component, Listen, Prop, State } from '@stencil/core';
 export class MenuToggle {
 
   @State() visible = false;
+
   /**
    * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
    */
   @Prop() menu: string;
 
+  /**
+   * Automatically hides the content when the corresponding menu is not
+   * active
+   */
   @Prop() autoHide = true;
 
   componentDidLoad() {

packages/core/src/components/menu-toggle/readme.md

@@ -11,6 +11,9 @@
 
 boolean
 
+Automatically hides the content when the corresponding menu is not
+active
+
 
 #### menu
 
@@ -25,6 +28,9 @@ Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `ri
 
 boolean
 
+Automatically hides the content when the corresponding menu is not
+active
+
 
 #### menu
 

packages/core/stencil.config.js

@@ -27,7 +27,7 @@ exports.config = {
     { components: ['ion-infinite-scroll', 'ion-infinite-scroll-content'] },
     { components: ['ion-input', 'ion-textarea'] },
     { components: ['ion-loading', 'ion-loading-controller'] },
-    { components: ['ion-menu', 'ion-menu-controller'] },
+    { components: ['ion-menu', 'ion-menu-controller', 'ion-menu-toggle', 'ion-menu-button'] },
     { components: ['ion-modal', 'ion-modal-controller'] },
     { components: ['ion-nav', 'ion-page', 'ion-back-button'] },
     { components: ['ion-popover', 'ion-popover-controller'] },