fix(menu-button): get proper styles when used inside ion-buttons

core/package.json

@@ -24,7 +24,7 @@
     "css/"
   ],
   "dependencies": {
-    "ionicons": "4.2.4"
+    "ionicons": "4.2.5"
   },
   "devDependencies": {
     "@stencil/core": "^0.10.7",

core/src/components.d.ts

@@ -3766,10 +3766,18 @@ declare global {
        * Automatically hides the menu button when the corresponding menu is not active
        */
       'autoHide': boolean;
+      /**
+       * The color to use for the background of the item.
+       */
+      'color': Color;
       /**
        * 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
        */
       'menu': string;
+      /**
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+       */
+      'mode': Mode;
     }
   }
 
@@ -3796,10 +3804,18 @@ declare global {
        * Automatically hides the menu button when the corresponding menu is not active
        */
       'autoHide'?: boolean;
+      /**
+       * The color to use for the background of the item.
+       */
+      'color'?: Color;
       /**
        * 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
        */
       'menu'?: string;
+      /**
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+       */
+      'mode'?: Mode;
     }
   }
 }

core/src/components/app/test/cordova/index.html

@@ -112,11 +112,7 @@
           <ion-header>
             <ion-toolbar color='primary'>
               <ion-buttons slot='start'>
-                <ion-menu-toggle>
+                <ion-menu-button></ion-menu-button>
-                  <ion-button>
-                    <ion-icon slot="icon-only" name="menu"></ion-icon>
-                  </ion-button>
-                </ion-menu-toggle>
               </ion-buttons>
               <ion-segment color='light'>
                 <ion-segment-button checked>All</ion-segment-button>

core/src/components/buttons/buttons.ios.scss

@@ -5,7 +5,7 @@
 // iOS Toolbar Button Default
 // --------------------------------------------------
 
-::slotted(*) ion-button {
+::slotted(*) .button {
   --padding-top: 0;
   --pading-bottom: 0;
   --padding-start: 5px;
@@ -53,14 +53,14 @@
   pointer-events: none;
 }
 
-::slotted(*) ion-button.button-clear {
+::slotted(*) .button.button-clear {
   --height: 35px;
 }
 
 // iOS Toolbar Button Solid
 // --------------------------------------------------
 
-::slotted(*) ion-button.button-solid-ios:hover {
+::slotted(*) .button.button-solid-ios:hover {
   opacity: .4;
 }
 

core/src/components/buttons/buttons.md.scss

@@ -8,7 +8,7 @@
   @include margin(0, 2px);
 }
 
-::slotted(*) ion-button {
+::slotted(*) .button {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 8px;
@@ -48,14 +48,14 @@
   pointer-events: none;
 }
 
-::slotted(*) ion-button.button-solid,
+::slotted(*) .button.button-solid,
-::slotted(*) ion-button.button-outline {
+::slotted(*) .button.button-outline {
   --ion-color-base: #{$toolbar-md-text-color};
   --ion-color-contrast: #{$toolbar-md-background-color};
   --ion-color-shade: #{$toolbar-md-text-color};
 }
 
-::slotted(*) ion-button.button-clear {
+::slotted(*) .button.button-clear {
   --ion-color-base: currentColor;
   --height: 45px;
 }

core/src/components/buttons/buttons.scss

@@ -1,7 +1,9 @@
 @import "../../themes/ionic.globals";
 
 :host {
-  display: block;
+  display: flex;
+
+  align-items: center;
 
   transform: translateZ(0);
 
@@ -12,7 +14,7 @@
 // Toolbar Buttons
 // --------------------------------------------------
 
-::slotted(*) ion-button {
+::slotted(*) .button {
   --margin-top: 0;
   --margin-bottom: 0;
   --margin-start: 0;

core/src/components/buttons/usage/angular.md

@@ -31,11 +31,7 @@
   </ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
   <ion-buttons slot="end">
-    <ion-menu-toggle autoHide="false">
+    <ion-menu-button autoHide="false"></ion-menu-button>
-      <ion-button>
-        <ion-icon slot="icon-only" name="menu"></ion-icon>
-      </ion-button>
-    </ion-menu-toggle>
   </ion-buttons>
 </ion-toolbar>
 ```

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

@@ -4,37 +4,14 @@
 // iOS Menu Button
 // --------------------------------------------------
 
-.menu-button-inner {
+:host {
-  @include padding(0);
+  --ion-color-base: #{ion-color(primary, base)};
-  @include margin(2px, 0, 0, 0);
+}
 
-  min-height: 32px;
+button {
-
+  padding: 0 5px;
-  transform: translateZ(0);
-
-  border: 0;
-
-  background-color: transparent;
-  color: $menu-button-ios-color;
-
-  font-size: 17px;
-
-  line-height: 1;
-
-  overflow: visible;
-  z-index: $menu-button-ios-button-z-index;
-
-  &.activated {
-    opacity: .4;
-  }
 }
 
 ion-icon {
-  @include padding(0);
+  font-size: 31px;
-  @include margin(0, -3px, 0, 0);
-
-  display: inherit;
-
-  font-size: 1.75em;
-  pointer-events: none;
 }

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

@@ -4,40 +4,14 @@
 // MD Menu Button
 // --------------------------------------------------
 
-.menu-button-inner {
+:host {
-  @include margin(2px, 6px, 0, 0);
+  --ion-color-base: currentColor;
-  @include padding(0, 5px);
+}
 
-  min-width: 44px;
+button {
-  height: 32px;
+  padding: 0 8px;
-
-  border: 0;
-
-  background-color: transparent;
-  color: $menu-button-md-color;
-
-  font-size: 14px;
-  font-weight: 500;
-
-  text-transform: uppercase;
-
-  box-shadow: none;
-
-  &.activated {
-    opacity: .4;
-  }
 }
 
 ion-icon {
-  @include padding-horizontal(null, .3em);
+  font-size: 26px;
-  @include margin(0);
-  @include padding(0, 6px);
-
-  font-size: 24px;
-  font-weight: normal;
-
-  line-height: .67;
-
-  text-align: start;
-  pointer-events: none;
 }

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

@@ -5,6 +5,8 @@
 
 :host {
   pointer-events: all;
+
+  color: #{current-color(base)};
 }
 
 button {
@@ -13,6 +15,7 @@ button {
   @include font-smoothing();
 
   display: flex;
+  height: 32px;
   position: relative;
 
   flex-flow: row nowrap;
@@ -42,3 +45,9 @@ button {
   font-kerning: none;
   appearance: none;
 }
+
+ion-icon {
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+}

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

@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { Config, Mode } from '../../interface';
+import { Color, Config, Mode } from '../../interface';
 
 @Component({
   tag: 'ion-menu-button',
@@ -11,10 +11,19 @@ import { Config, Mode } from '../../interface';
 })
 export class MenuButton {
 
-  mode!: Mode;
-
   @Prop({ context: 'config' }) config!: Config;
 
+  /**
+   * The color to use for the background of the item.
+   */
+  @Prop() color?: Color;
+
+  /**
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   */
+  @Prop() mode!: Mode;
+
   /**
    * 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
    */
@@ -25,13 +34,21 @@ export class MenuButton {
    */
   @Prop() autoHide = true;
 
+  hostData() {
+    return {
+      class: {
+        'button': true
+      }
+    };
+  }
+
   render() {
     const menuIcon = this.config.get('menuIcon', 'menu');
     return (
       <ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
         <button>
           <slot>
-            <ion-icon icon={menuIcon} slot="icon-only" />
+            <ion-icon icon={menuIcon} mode={this.mode} color={this.color} lazy={false} />
           </slot>
         </button>
       </ion-menu-toggle>

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

@@ -15,6 +15,13 @@ boolean
 Automatically hides the menu button when the corresponding menu is not active
 
 
+#### color
+
+string
+
+The color to use for the background of the item.
+
+
 #### menu
 
 string
@@ -22,6 +29,14 @@ 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
+
+string
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
+
 ## Attributes
 
 #### auto-hide
@@ -31,6 +46,13 @@ boolean
 Automatically hides the menu button when the corresponding menu is not active
 
 
+#### color
+
+string
+
+The color to use for the background of the item.
+
+
 #### menu
 
 string
@@ -38,6 +60,14 @@ 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
+
+string
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
+
 
 ----------------------------------------------
 

core/src/components/menu-toggle/test/preview/index.html

@@ -61,11 +61,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-buttons slot="start">
-            <ion-menu-toggle>
+            <ion-menu-button></ion-menu-button>
-              <ion-button>
-                <ion-icon slot="icon-only" name="menu"></ion-icon>
-              </ion-button>
-            </ion-menu-toggle>
           </ion-buttons>
           <ion-title>Menu Toggle</ion-title>
         </ion-toolbar>

core/src/components/menu/readme.md

@@ -139,6 +139,9 @@ Emitted when the menu is open.
 #### close()
 
 
+#### getWidth()
+
+
 #### isActive()
 
 

core/src/components/split-pane/test/basic/index.html

@@ -52,11 +52,7 @@
           <ion-toolbar>
 
             <ion-buttons slot="start">
-              <ion-menu-toggle>
+              <ion-menu-button></ion-menu-button>
-                <ion-button>
-                  <ion-icon slot="icon-only" name="menu"></ion-icon>
-                </ion-button>
-              </ion-menu-toggle>
             </ion-buttons>
 
             <ion-title>Navigation</ion-title>

core/src/components/split-pane/test/preview/index.html

@@ -52,11 +52,7 @@
           <ion-toolbar>
 
             <ion-buttons slot="start">
-              <ion-menu-toggle>
+              <ion-menu-button></ion-menu-button>
-                <ion-button>
-                  <ion-icon slot="icon-only" name="menu"></ion-icon>
-                </ion-button>
-              </ion-menu-toggle>
             </ion-buttons>
 
             <ion-title>Navigation</ion-title>

core/src/components/toolbar/test/preview/index.html

@@ -88,11 +88,7 @@
 
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-menu-toggle auto-hide="false">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="menu"></ion-icon>
-            </ion-button>
-          </ion-menu-toggle>
         </ion-buttons>
         <ion-buttons slot="secondary">
           <ion-button>
@@ -110,11 +106,7 @@
         </ion-buttons>
         <ion-title>Right side menu toggle</ion-title>
         <ion-buttons slot="end">
-          <ion-menu-toggle auto-hide="false">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="menu"></ion-icon>
-            </ion-button>
-          </ion-menu-toggle>
         </ion-buttons>
       </ion-toolbar>
 

core/src/components/toolbar/test/scenarios/index.html

@@ -177,11 +177,7 @@
 
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-menu-toggle auto-hide="false">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="menu"></ion-icon>
-            </ion-button>
-          </ion-menu-toggle>
         </ion-buttons>
         <ion-buttons slot="secondary">
           <ion-button>
@@ -199,11 +195,7 @@
         </ion-buttons>
         <ion-title>Right side menu toggle</ion-title>
         <ion-buttons slot="end">
-          <ion-menu-toggle auto-hide="false">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="menu"></ion-icon>
-            </ion-button>
-          </ion-menu-toggle>
         </ion-buttons>
       </ion-toolbar>
 

core/src/components/toolbar/usage/angular.md

@@ -75,11 +75,8 @@
 
 <ion-toolbar>
   <ion-buttons slot="start">
-    <ion-menu-toggle autoHide="false">
+    <ion-menu-button autoHide="false"></ion-menu-button>
-      <ion-button>
+
-        <ion-icon slot="icon-only" name="menu"></ion-icon>
-      </ion-button>
-    </ion-menu-toggle>
   </ion-buttons>
   <ion-buttons slot="secondary">
     <ion-button>
@@ -97,11 +94,8 @@
   </ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
   <ion-buttons slot="end">
-    <ion-menu-toggle autoHide="false">
+    <ion-menu-button autoHide="false"></ion-menu-button>
-      <ion-button>
+
-        <ion-icon slot="icon-only" name="menu"></ion-icon>
-      </ion-button>
-    </ion-menu-toggle>
   </ion-buttons>
 </ion-toolbar>
 

core/src/components/toolbar/usage/javascript.md

@@ -75,11 +75,7 @@
 
 <ion-toolbar>
   <ion-buttons slot="start">
-    <ion-menu-toggle auto-hide="false">
+    <ion-menu-button auto-hide="false"></ion-menu-button>
-      <ion-button>
-        <ion-icon slot="icon-only" name="menu"></ion-icon>
-      </ion-button>
-    </ion-menu-toggle>
   </ion-buttons>
   <ion-buttons slot="secondary">
     <ion-button>
@@ -97,11 +93,7 @@
   </ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
   <ion-buttons slot="end">
-    <ion-menu-toggle auto-hide="false">
+    <ion-menu-button auto-hide="false"></ion-menu-button>
-      <ion-button>
-        <ion-icon slot="icon-only" name="menu"></ion-icon>
-      </ion-button>
-    </ion-menu-toggle>
   </ion-buttons>
 </ion-toolbar>