fix(menu-button): hide menu button when auto hide or split pane (#18702)

- updates menu-button to use the host element
- moves menu-toggle logic to a utils file for menu button to share
- removes the dependency on menu-toggle
- adds an e2e test for an auto-hidden menu button

fixes #18666

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

@@ -77,6 +77,13 @@ ion-icon {
   pointer-events: none;
 }
 
+// Menu Button: Hidden
+// --------------------------------------------------
+
+:host(.menu-button-hidden) {
+  display: none;
+}
+
 // Menu Button: Disabled
 // --------------------------------------------------
 

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

@@ -1,10 +1,11 @@
-import { Component, ComponentInterface, Prop, h } from '@stencil/core';
+import { Component, ComponentInterface, Host, Listen, Prop, State, h } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import { Color } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
 import { createColorClasses } from '../../utils/theme';
+import { toggleMenu, updateVisibility } from '../menu-toggle/menu-toggle-util';
 
 @Component({
   tag: 'ion-menu-button',
@@ -16,6 +17,8 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class MenuButton implements ComponentInterface, ButtonInterface {
 
+  @State() visible = false;
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -43,35 +46,51 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
    */
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
-  hostData() {
-    const mode = getIonMode(this);
-    const { color, disabled } = this;
+  async componentDidLoad() {
+    await this.setVisibility();
+  }
 
-    return {
-      'aria-disabled': disabled ? 'true' : null,
-      class: {
-        ...createColorClasses(color),
+  @Listen('ionMenuChange', { target: 'body' })
+  @Listen('ionSplitPaneVisible', { target: 'body' })
+  async visibilityChanged() {
+    await this.setVisibility();
+  }
 
-        [mode]: true,
+  private setVisibility = async () => {
+    this.visible = await updateVisibility(this.menu);
+  }
 
-        'button': true,  // ion-buttons target .button
-        'menu-button-disabled': disabled,
-        'ion-activatable': true,
-        'ion-focusable': true
-      }
-    };
+  private onClick = async () => {
+    await toggleMenu(this.menu);
   }
 
   render() {
+    const { color, disabled } = this;
     const mode = getIonMode(this);
     const menuIcon = config.get('menuIcon', 'menu');
+    const hidden = this.autoHide && !this.visible;
 
     const attrs = {
       type: this.type
     };
 
     return (
-      <ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
+      <Host
+        onClick={this.onClick}
+        aria-disabled={disabled ? 'true' : null}
+        aria-hidden={hidden ? 'true' : null}
+        class={{
+          [mode]: true,
+
+          ...createColorClasses(color),
+
+          'button': true,  // ion-buttons target .button
+          'menu-button-hidden': hidden,
+          'menu-button-disabled': disabled,
+          'ion-activatable': true,
+          'ion-focusable': true
+        }}
+      >
         <button
           {...attrs}
           disabled={this.disabled}
@@ -82,7 +101,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
           </slot>
           {mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
         </button>
-      </ion-menu-toggle>
+      </Host>
     );
   }
 }

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

@@ -38,14 +38,12 @@ Menu Button is component that automatically creates the icon and functionality t
 
 ### 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

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

@@ -84,6 +84,13 @@
         </ion-buttons>
         <ion-title>Success</ion-title>
       </ion-toolbar>
+
+      <ion-toolbar color="dark">
+        <ion-buttons slot="start">
+          <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Hidden</ion-title>
+      </ion-toolbar>
     </ion-content>
   </ion-app>
 
@@ -92,7 +99,7 @@
       padding-left: 16px;
     }
 
-    ion-menu-button {
+    ion-menu-button[auto-hide="false"] {
       display: inline-block;
     }