From 811eee70f83e5bec6e79ef8dd22fb8e9c0b2ce07 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 24 Jul 2018 01:56:52 +0200 Subject: [PATCH] fix(menu-button): get proper styles when used inside ion-buttons --- core/package.json | 2 +- core/src/components.d.ts | 16 ++++++++ .../components/app/test/cordova/index.html | 6 +-- core/src/components/buttons/buttons.ios.scss | 6 +-- core/src/components/buttons/buttons.md.scss | 8 ++-- core/src/components/buttons/buttons.scss | 6 ++- core/src/components/buttons/usage/angular.md | 6 +-- .../menu-button/menu-button.ios.scss | 35 +++-------------- .../menu-button/menu-button.md.scss | 38 +++---------------- .../components/menu-button/menu-button.scss | 9 +++++ .../components/menu-button/menu-button.tsx | 25 ++++++++++-- core/src/components/menu-button/readme.md | 30 +++++++++++++++ .../menu-toggle/test/preview/index.html | 6 +-- core/src/components/menu/readme.md | 3 ++ .../split-pane/test/basic/index.html | 6 +-- .../split-pane/test/preview/index.html | 6 +-- .../toolbar/test/preview/index.html | 12 +----- .../toolbar/test/scenarios/index.html | 12 +----- core/src/components/toolbar/usage/angular.md | 14 ++----- .../components/toolbar/usage/javascript.md | 12 +----- 20 files changed, 118 insertions(+), 140 deletions(-) diff --git a/core/package.json b/core/package.json index dfb0e88504..26bf14b172 100644 --- 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 index b6f2dc140d..e0f77c4cfd 100644 --- 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 index c306b4d362..ad19ad1e86 100644 --- a/core/src/components/app/test/cordova/index.html +++ b/core/src/components/app/test/cordova/index.html @@ -112,11 +112,7 @@ - - - - - + All diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss index 22a20a7e4a..4503502a8c 100644 --- 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 index f0ad55f55f..e0042f62d8 100644 --- 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 index ace5e4371f..832553439f 100644 --- 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 index 722cd58570..d60803aa07 100644 --- a/core/src/components/buttons/usage/angular.md +++ b/core/src/components/buttons/usage/angular.md @@ -31,11 +31,7 @@ Right side menu toggle - - - - - + ``` \ No newline at end of file diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss index 724d269ed7..fcf4a93cd4 100644 --- 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); +:host { + --ion-color-base: #{ion-color(primary, base)}; +} - 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; - - &.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 index 8227a956af..e0fb8a1c25 100644 --- 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); +:host { + --ion-color-base: currentColor; +} - 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; - - &.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 index a165c21ee7..17378347a9 100644 --- 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 index 885c6584a9..14a3885538 100644 --- 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 ( diff --git a/core/src/components/menu-button/readme.md b/core/src/components/menu-button/readme.md index ee9b5b51cd..abb371915f 100644 --- a/core/src/components/menu-button/readme.md +++ b/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"`. + + ---------------------------------------------- diff --git a/core/src/components/menu-toggle/test/preview/index.html b/core/src/components/menu-toggle/test/preview/index.html index 067c62cb13..7e6949b8b8 100644 --- a/core/src/components/menu-toggle/test/preview/index.html +++ b/core/src/components/menu-toggle/test/preview/index.html @@ -61,11 +61,7 @@ - - - - - + Menu Toggle diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md index c332e3eecf..7f88ed206c 100644 --- 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() diff --git a/core/src/components/split-pane/test/basic/index.html b/core/src/components/split-pane/test/basic/index.html index a241a7649e..449262ed95 100644 --- a/core/src/components/split-pane/test/basic/index.html +++ b/core/src/components/split-pane/test/basic/index.html @@ -52,11 +52,7 @@ - - - - - + Navigation diff --git a/core/src/components/split-pane/test/preview/index.html b/core/src/components/split-pane/test/preview/index.html index 50f44b33d8..90e2d74d2f 100644 --- a/core/src/components/split-pane/test/preview/index.html +++ b/core/src/components/split-pane/test/preview/index.html @@ -52,11 +52,7 @@ - - - - - + Navigation diff --git a/core/src/components/toolbar/test/preview/index.html b/core/src/components/toolbar/test/preview/index.html index 1583d7b94a..5823632dfc 100644 --- a/core/src/components/toolbar/test/preview/index.html +++ b/core/src/components/toolbar/test/preview/index.html @@ -88,11 +88,7 @@ - - - - - + @@ -110,11 +106,7 @@ Right side menu toggle - - - - - + diff --git a/core/src/components/toolbar/test/scenarios/index.html b/core/src/components/toolbar/test/scenarios/index.html index db21a39ff3..184cd20db4 100644 --- a/core/src/components/toolbar/test/scenarios/index.html +++ b/core/src/components/toolbar/test/scenarios/index.html @@ -177,11 +177,7 @@ - - - - - + @@ -199,11 +195,7 @@ Right side menu toggle - - - - - + diff --git a/core/src/components/toolbar/usage/angular.md b/core/src/components/toolbar/usage/angular.md index 42d3e0a863..ba2c07952a 100644 --- a/core/src/components/toolbar/usage/angular.md +++ b/core/src/components/toolbar/usage/angular.md @@ -75,11 +75,8 @@ - - - - - + + @@ -97,11 +94,8 @@ Right side menu toggle - - - - - + + diff --git a/core/src/components/toolbar/usage/javascript.md b/core/src/components/toolbar/usage/javascript.md index fbdf4ca589..d307e5aec8 100644 --- a/core/src/components/toolbar/usage/javascript.md +++ b/core/src/components/toolbar/usage/javascript.md @@ -75,11 +75,7 @@ - - - - - + @@ -97,11 +93,7 @@ Right side menu toggle - - - - - +