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

ionic-team · Jul 23, 2018 · 811eee7 · 811eee7
1 parent f6c8f3f
commit 811eee7
Show file tree

Hide file tree

Showing 20 changed files with 118 additions and 140 deletions.
diff --git a/core/package.json b/core/package.json
@@ -24,7 +24,7 @@
     "css/"
   ],
   "dependencies": {
-    "ionicons": "4.2.4"
+    "ionicons": "4.2.5"
   },
   "devDependencies": {
     "@stencil/core": "^0.10.7",

diff --git a/core/src/components.d.ts b/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;
     }
   }
 }

diff --git a/core/src/components/app/test/cordova/index.html b/core/src/components/app/test/cordova/index.html
@@ -112,11 +112,7 @@ <h1>Content of doom</h1>
           <ion-header>
             <ion-toolbar color='primary'>
               <ion-buttons slot='start'>
-                <ion-menu-toggle>
-                  <ion-button>
-                    <ion-icon slot="icon-only" name="menu"></ion-icon>
-                  </ion-button>
-                </ion-menu-toggle>
+                <ion-menu-button></ion-menu-button>
               </ion-buttons>
               <ion-segment color='light'>
                 <ion-segment-button checked>All</ion-segment-button>

diff --git a/core/src/components/buttons/buttons.ios.scss b/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;
 }
 

diff --git a/core/src/components/buttons/buttons.md.scss b/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(*) ion-button.button-outline {
+::slotted(*) .button.button-solid,
+::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;
 }

diff --git a/core/src/components/buttons/buttons.scss b/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;

diff --git a/core/src/components/buttons/usage/angular.md b/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-button>
-        <ion-icon slot="icon-only" name="menu"></ion-icon>
-      </ion-button>
-    </ion-menu-toggle>
+    <ion-menu-button autoHide="false"></ion-menu-button>
   </ion-buttons>
 </ion-toolbar>
 ```
diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss
@@ -4,37 +4,14 @@
 // iOS Menu Button
 // --------------------------------------------------
 
-.menu-button-inner {
-  @include padding(0);
-  @include margin(2px, 0, 0, 0);
-
-  min-height: 32px;
-
-  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;
+:host {
+  --ion-color-base: #{ion-color(primary, base)};
+}
 
-  &.activated {
-    opacity: .4;
-  }
+button {
+  padding: 0 5px;
 }
 
 ion-icon {
-  @include padding(0);
-  @include margin(0, -3px, 0, 0);
-
-  display: inherit;
-
-  font-size: 1.75em;
-  pointer-events: none;
+  font-size: 31px;
 }
diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss
@@ -4,40 +4,14 @@
 // MD Menu Button
 // --------------------------------------------------
 
-.menu-button-inner {
-  @include margin(2px, 6px, 0, 0);
-  @include padding(0, 5px);
-
-  min-width: 44px;
-  height: 32px;
-
-  border: 0;
-
-  background-color: transparent;
-  color: $menu-button-md-color;
-
-  font-size: 14px;
-  font-weight: 500;
-
-  text-transform: uppercase;
-
-  box-shadow: none;
+:host {
+  --ion-color-base: currentColor;
+}
 
-  &.activated {
-    opacity: .4;
-  }
+button {
+  padding: 0 8px;
 }
 
 ion-icon {
-  @include padding-horizontal(null, .3em);
-  @include margin(0);
-  @include padding(0, 6px);
-
-  font-size: 24px;
-  font-weight: normal;
-
-  line-height: .67;
-
-  text-align: start;
-  pointer-events: none;
+  font-size: 26px;
 }
diff --git a/core/src/components/menu-button/menu-button.scss b/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;
+}
diff --git a/core/src/components/menu-button/menu-button.tsx b/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>

diff --git a/core/src/components/menu-button/readme.md b/core/src/components/menu-button/readme.md
@@ -15,13 +15,28 @@ 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
 
 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,13 +46,28 @@ 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
 
 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"`.
+
+
 
 ----------------------------------------------
 

diff --git a/core/src/components/menu-toggle/test/preview/index.html b/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-button>
-                <ion-icon slot="icon-only" name="menu"></ion-icon>
-              </ion-button>
-            </ion-menu-toggle>
+            <ion-menu-button></ion-menu-button>
           </ion-buttons>
           <ion-title>Menu Toggle</ion-title>
         </ion-toolbar>

diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
@@ -139,6 +139,9 @@ Emitted when the menu is open.
 #### close()
 
 
+#### getWidth()
+
+
 #### isActive()