From 62f60516ec584dae89694a2ddb3d4a29e8f1475b Mon Sep 17 00:00:00 2001
From: Dan Bucholtz <dan.bucholtz@gmail.com>
Date: Thu, 1 Feb 2018 11:17:59 -0600
Subject: [PATCH] refactor(menu-toggle): change menu-button to be a generic
 menu-toggle instead

---
 packages/core/src/components.d.ts             |  61 +++--
 .../components/menu-button/test/basic/e2e.js  |  31 ---
 .../menu-toggle.ios.scss}                     |   0
 .../menu-toggle.md.scss}                      |   0
 .../menu-toggle.tsx}                          |  28 +-
 .../{menu-button => menu-toggle}/readme.md    |  14 -
 .../test/basic/index.html                     |  23 +-
 .../menu-toggle/test/button/index.html        |  64 +++++
 .../menu-toggle/test/list/index.html          | 240 ++++++++++++++++++
 9 files changed, 354 insertions(+), 107 deletions(-)
 delete mode 100644 packages/core/src/components/menu-button/test/basic/e2e.js
 rename packages/core/src/components/{menu-button/menu-button.ios.scss => menu-toggle/menu-toggle.ios.scss} (100%)
 rename packages/core/src/components/{menu-button/menu-button.md.scss => menu-toggle/menu-toggle.md.scss} (100%)
 rename packages/core/src/components/{menu-button/menu-button.tsx => menu-toggle/menu-toggle.tsx} (58%)
 rename packages/core/src/components/{menu-button => menu-toggle}/readme.md (74%)
 rename packages/core/src/components/{menu-button => menu-toggle}/test/basic/index.html (84%)
 create mode 100644 packages/core/src/components/menu-toggle/test/button/index.html
 create mode 100644 packages/core/src/components/menu-toggle/test/list/index.html

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 1596c16716..9d8b854a6d 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -1539,37 +1539,6 @@ declare global {
 }
 
 
-import {
-  MenuButton as IonMenuButton
-} from './components/menu-button/menu-button';
-
-declare global {
-  interface HTMLIonMenuButtonElement extends IonMenuButton, HTMLElement {
-  }
-  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 {
-      iconName?: string;
-      menu?: string;
-    }
-  }
-}
-
-
 import {
   MenuController as IonMenuController
 } from './components/menu-controller/menu-controller';
@@ -1600,6 +1569,36 @@ declare global {
 }
 
 
+import {
+  MenuToggle as IonMenuToggle
+} from './components/menu-toggle/menu-toggle';
+
+declare global {
+  interface HTMLIonMenuToggleElement extends IonMenuToggle, HTMLElement {
+  }
+  var HTMLIonMenuToggleElement: {
+    prototype: HTMLIonMenuToggleElement;
+    new (): HTMLIonMenuToggleElement;
+  };
+  interface HTMLElementTagNameMap {
+    "ion-menu-toggle": HTMLIonMenuToggleElement;
+  }
+  interface ElementTagNameMap {
+    "ion-menu-toggle": HTMLIonMenuToggleElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "ion-menu-toggle": JSXElements.IonMenuToggleAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface IonMenuToggleAttributes extends HTMLAttributes {
+      menu?: string;
+    }
+  }
+}
+
+
 import {
   Menu as IonMenu
 } from './components/menu/menu';
diff --git a/packages/core/src/components/menu-button/test/basic/e2e.js b/packages/core/src/components/menu-button/test/basic/e2e.js
deleted file mode 100644
index 4c571ff22d..0000000000
--- a/packages/core/src/components/menu-button/test/basic/e2e.js
+++ /dev/null
@@ -1,31 +0,0 @@
-'use strict';
-
-const { By, until } = require('selenium-webdriver');
-const { register, Page, platforms } = require('../../../../../scripts/e2e');
-
-class E2ETestPage extends Page {
-  constructor(driver, platform) {
-    super(driver, `http://localhost:3333/src/components/menu/test/basic?ionicplatform=${platform}`);
-  }
-
-  present(buttonId) {
-    this.navigate();
-    this.driver.findElement(By.id(buttonId)).click();
-    this.driver.wait(until.elementLocated(By.css('.menu-inner')));
-    return this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.menu-inner'))));
-  }
-}
-
-platforms.forEach(platform => {
-  describe('menu/basic', () => {
-    register('should init', driver => {
-      const page = new E2ETestPage(driver, platform);
-      return page.navigate();
-    });
-
-    register('should open left menu', driver => {
-      const page = new E2ETestPage(driver, platform);
-      return page.present('left');
-    });
-  });
-});
diff --git a/packages/core/src/components/menu-button/menu-button.ios.scss b/packages/core/src/components/menu-toggle/menu-toggle.ios.scss
similarity index 100%
rename from packages/core/src/components/menu-button/menu-button.ios.scss
rename to packages/core/src/components/menu-toggle/menu-toggle.ios.scss
diff --git a/packages/core/src/components/menu-button/menu-button.md.scss b/packages/core/src/components/menu-toggle/menu-toggle.md.scss
similarity index 100%
rename from packages/core/src/components/menu-button/menu-button.md.scss
rename to packages/core/src/components/menu-toggle/menu-toggle.md.scss
diff --git a/packages/core/src/components/menu-button/menu-button.tsx b/packages/core/src/components/menu-toggle/menu-toggle.tsx
similarity index 58%
rename from packages/core/src/components/menu-button/menu-button.tsx
rename to packages/core/src/components/menu-toggle/menu-toggle.tsx
index d1affe1337..76082a8812 100644
--- a/packages/core/src/components/menu-button/menu-button.tsx
+++ b/packages/core/src/components/menu-toggle/menu-toggle.tsx
@@ -1,30 +1,26 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Listen, Prop } from '@stencil/core';
 import { getOrAppendElement } from '../../utils/helpers';
 import { StencilElement } from '../..';
 
 @Component({
-  tag: 'ion-menu-button',
+  tag: 'ion-menu-toggle',
   styleUrls: {
-    ios: 'menu-button.ios.scss',
-    md: 'menu-button.md.scss'
+    ios: 'menu-toggle.ios.scss',
+    md: 'menu-toggle.md.scss'
   },
   host: {
-    theme: 'back-button'
+    theme: 'menu-toggle'
   }
 })
-export class MenuButton {
-
-  /**
-   * The name of the icon to use for the button. It defaults to menu.
-   */
-  @Prop() iconName = 'menu';
+export class MenuToggle {
 
   /**
    * 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 = null;
 
-  toggleMenu() {
+  @Listen('child:click')
+  toggle() {
     const menuControllerElement = getOrAppendElement('ion-menu-controller') as HTMLIonMenuControllerElement;
     return (menuControllerElement as any as StencilElement).componentOnReady().then(() => {
       const menu = menuControllerElement.get(this.menu);
@@ -35,13 +31,7 @@ export class MenuButton {
   }
 
   render() {
-    return [
-      <ion-button onClick={() => {
-        this.toggleMenu();
-      }}>
-        <ion-icon slot='icon-only' name={this.iconName}></ion-icon>
-      </ion-button>
-    ];
+    return <slot></slot>;
   }
 
 }
diff --git a/packages/core/src/components/menu-button/readme.md b/packages/core/src/components/menu-toggle/readme.md
similarity index 74%
rename from packages/core/src/components/menu-button/readme.md
rename to packages/core/src/components/menu-toggle/readme.md
index de3979e9ea..6cd5b9b881 100644
--- a/packages/core/src/components/menu-button/readme.md
+++ b/packages/core/src/components/menu-toggle/readme.md
@@ -7,13 +7,6 @@
 
 ## Properties
 
-#### iconName
-
-string
-
-The name of the icon to use for the button. It defaults to menu.
-
-
 #### menu
 
 string
@@ -23,13 +16,6 @@ Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `ri
 
 ## Attributes
 
-#### iconName
-
-string
-
-The name of the icon to use for the button. It defaults to menu.
-
-
 #### menu
 
 string
diff --git a/packages/core/src/components/menu-button/test/basic/index.html b/packages/core/src/components/menu-toggle/test/basic/index.html
similarity index 84%
rename from packages/core/src/components/menu-button/test/basic/index.html
rename to packages/core/src/components/menu-toggle/test/basic/index.html
index b6390695dc..3e2b93dd09 100644
--- a/packages/core/src/components/menu-button/test/basic/index.html
+++ b/packages/core/src/components/menu-toggle/test/basic/index.html
@@ -59,11 +59,15 @@
 
       <ion-header>
         <ion-toolbar>
-          <ion-title>Menu Button - Basic</ion-title>
+          <ion-buttons slot="start">
+            <ion-menu-toggle>
+              <ion-button>
+                <ion-icon slot="icon-only" name="menu"></ion-icon>
+              </ion-button>
+            </ion-menu-toggle>
+          </ion-buttons>
+          <ion-title>Menu Toggle - Basic</ion-title>
         </ion-toolbar>
-        <ion-buttons slot="start">
-          <ion-menu-button></ion-menu-button>
-        </ion-buttons>
       </ion-header>
 
       <ion-content padding>
@@ -85,29 +89,24 @@
   <script>
 
     async function openDefault() {
-      const menuButton = document.querySelector('ion-menu-button');
+      const menuButton = document.querySelector('ion-menu-toggle');
       await menuButton.componentOnReady();
       menuButton.menu = null;
     }
 
     async function openLeft() {
-      const menuButton = document.querySelector('ion-menu-button');
+      const menuButton = document.querySelector('ion-menu-toggle');
       await menuButton.componentOnReady();
       menuButton.menu = 'left';
     }
 
     async function openRight() {
-      const menuButton = document.querySelector('ion-menu-button');
+      const menuButton = document.querySelector('ion-menu-toggle');
       await menuButton.componentOnReady();
       menuButton.menu = 'right';
     }
   </script>
   <style>
-  ion-menu-button {
-    height: 44px;
-    background-color: blue;
-    display: block !important;
-  }
   </style>
 </body>
 </html>
diff --git a/packages/core/src/components/menu-toggle/test/button/index.html b/packages/core/src/components/menu-toggle/test/button/index.html
new file mode 100644
index 0000000000..fc97939faa
--- /dev/null
+++ b/packages/core/src/components/menu-toggle/test/button/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Menu - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu side="left" class="e2eLeftMenu">
+
+      <ion-header>
+        <ion-toolbar color="secondary">
+          <ion-title>Left Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-item>Open Right Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+        </ion-list>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar color="secondary">
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+
+    </ion-menu>
+
+    <ion-page main>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu Toggle - Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <ion-menu-toggle>
+          <ion-button>Toggle Menu</ion-button>
+        </ion-menu-toggle>
+      </ion-content>
+    </ion-page>
+
+  </ion-app>
+  <ion-menu-controller></ion-menu-controller>
+</body>
+</html>
diff --git a/packages/core/src/components/menu-toggle/test/list/index.html b/packages/core/src/components/menu-toggle/test/list/index.html
new file mode 100644
index 0000000000..461511ee13
--- /dev/null
+++ b/packages/core/src/components/menu-toggle/test/list/index.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Menu - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu side="left" class="e2eLeftMenu">
+
+      <ion-header>
+        <ion-toolbar color="secondary">
+          <ion-title>Left Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        Menu Content
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar color="secondary">
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+
+    </ion-menu>
+
+    <ion-page main>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu Toggle - List</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <ion-list>
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+
+          <ion-menu-toggle>
+            <ion-item>
+              <ion-label>
+                  List Item
+              </ion-label>
+            </ion-item>
+          </ion-menu-toggle>
+      </ion-content>
+    </ion-page>
+
+  </ion-app>
+  <ion-menu-controller></ion-menu-controller>
+</body>
+</html>