Skip to content
Permalink
Browse files

feat(menu-button): add variables for hover and focused states (#18434)

references #18279
  • Loading branch information...
brandyscarney committed May 31, 2019
1 parent c8104a2 commit 5ba0aa9aac7c9be9489f69cd60d7f6144edbcf3a
@@ -578,7 +578,13 @@ ion-menu-button,prop,autoHide,boolean,true,false,false
ion-menu-button,prop,color,string | undefined,undefined,false,false
ion-menu-button,prop,menu,string | undefined,undefined,false,false
ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
ion-menu-button,css-prop,--background
ion-menu-button,css-prop,--background-focused
ion-menu-button,css-prop,--background-hover
ion-menu-button,css-prop,--border-radius
ion-menu-button,css-prop,--color
ion-menu-button,css-prop,--color-focused
ion-menu-button,css-prop,--color-hover
ion-menu-button,css-prop,--padding-bottom
ion-menu-button,css-prop,--padding-end
ion-menu-button,css-prop,--padding-start
@@ -31,7 +31,8 @@
--color: initial;
--color-activated: initial;
--color-focused: initial;
--background-focused: #{current-color(contrast, .1)};
--background-hover: #{current-color(contrast, .08)};
--background-focused: #{current-color(contrast, .24)};
}

:host-context(.ion-color)::slotted(*) .button-solid {
@@ -7,6 +7,8 @@
--color: #{ion-color(primary, base)};
--padding-start: 5px;
--padding-end: 5px;

height: 32px;
}

:host(.activated) {
@@ -4,16 +4,36 @@
// --------------------------------------------------

:host {
--background-focused: rgba(66, 66, 66, 0.24);
--background-hover: rgba(66, 66, 66, 0.08);
--border-radius: 50%;
--color: initial;
--padding-start: 8px;
--padding-end: 8px;
}

button {
width: 48px;
height: 48px;
}

ion-icon {
font-size: 24px;
}

// Menu Button Color: Hover
// --------------------------------------------------

@media (any-hover: hover) {
:host(.ion-color:hover) .button-native {
background: #{current-color(base, .08)};
}
}


// Menu Button Color: Focused
// --------------------------------------------------


:host(.ion-color.ion-focused) .button-native {
background: #{current-color(base, .24)};
color: #{current-color(base)};
}
@@ -5,13 +5,24 @@

:host {
/**
* @prop --border-radius: Border radius of the menu button
*
* @prop --background: Background of the menu button
* @prop --background-hover: Background of the menu button on hover
* @prop --background-focused: Background of the menu button when focused
*
* @prop --color: Color of the menu button
* @prop --color-hover: Color of the menu button on hover
* @prop --color-focused: Color of the menu button when focused
*
* @prop --padding-top: Padding top of the button
* @prop --padding-end: Padding end of the button
* @prop --padding-bottom: Padding bottom of the button
* @prop --padding-start: Padding start of the button
*/
--background: transparent;
--color-focused: var(--color);
--border-radius: initial;
--padding-top: 0;
--padding-bottom: 0;

@@ -26,7 +37,8 @@
font-kerning: none;
}

button {
.button-native {
@include border-radius(var(--border-radius));
@include text-inherit();
@include margin(0);
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@@ -41,13 +53,14 @@ button {
align-items: center;
justify-content: center;

height: 32px;
width: 100%;
height: 100%;

border: 0;

outline: none;

background: transparent;
background: var(--background);

line-height: 1;

@@ -64,14 +77,35 @@ ion-icon {
pointer-events: none;
}


// Menu Button: Hover
// --------------------------------------------------

@media (any-hover: hover) {
:host(:hover) .button-native {
background: var(--background-hover);
color: var(--color-hover);
}
}


// Menu Button: Focused
// --------------------------------------------------

:host(.ion-focused) .button-native {
background: var(--background-focused);
color: var(--color-focused);
}


// Menu Button with Color
// --------------------------------------------------

// TODO this is not used
:host(.ion-color) .button-native {
color: current-color(base);
}


// Menu Button in Toolbar: Global Theming
// --------------------------------------------------

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';

import { Color, Config, Mode } from '../../interface';
import { createColorClasses } from '../../utils/theme';

@Component({
tag: 'ion-menu-button',
@@ -39,6 +40,8 @@ export class MenuButton implements ComponentInterface {
hostData() {
return {
class: {
...createColorClasses(this.color),

[`${this.mode}`]: true,

'button': true, // ion-buttons target .button
@@ -52,9 +55,9 @@ export class MenuButton implements ComponentInterface {
const menuIcon = this.config.get('menuIcon', 'menu');
return (
<ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
<button type="button">
<button type="button" class="button-native">
<slot>
<ion-icon icon={menuIcon} mode={this.mode} color={this.color} lazy={false} />
<ion-icon icon={menuIcon} mode={this.mode} lazy={false} />
</slot>
{this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
</button>
@@ -18,13 +18,19 @@ Menu Button is component that automatically creates the icon and functionality t

## CSS Custom Properties

| Name | Description |
| ------------------ | ---------------------------- |
| `--color` | Color of the menu button |
| `--padding-bottom` | Padding bottom of the button |
| `--padding-end` | Padding end of the button |
| `--padding-start` | Padding start of the button |
| `--padding-top` | Padding top of the button |
| Name | Description |
| ---------------------- | ------------------------------------------ |
| `--background` | Background of the menu button |
| `--background-focused` | Background of the menu button when focused |
| `--background-hover` | Background of the menu button on hover |
| `--border-radius` | Border radius of the menu button |
| `--color` | Color of the menu button |
| `--color-focused` | Color of the menu button when focused |
| `--color-hover` | Color of the menu button on hover |
| `--padding-bottom` | Padding bottom of the button |
| `--padding-end` | Padding end of the button |
| `--padding-start` | Padding start of the button |
| `--padding-top` | Padding top of the button |


----------------------------------------------
@@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';

test('menu-button: basic', async () => {
const page = await newE2EPage({
url: '/src/components/menu-button/test/basic?ionic:_testing=true'
});

const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html dir="ltr">

<head>
<meta charset="UTF-8">
<title>Menu Button - Basic</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>

<body>
<ion-app>
<ion-content>
<h1>Default</h1>
<ion-menu-button auto-hide="false"></ion-menu-button>
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>

<h1>Custom</h1>
<ion-menu-button auto-hide="false" class="custom"></ion-menu-button>
<ion-menu-button auto-hide="false" color="secondary" class="custom"></ion-menu-button>
<ion-menu-button auto-hide="false" class="custom ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" color="secondary" class="custom ion-focused"></ion-menu-button>

<h1>Colors</h1>
<ion-menu-button auto-hide="false" color="primary"></ion-menu-button>
<ion-menu-button auto-hide="false" color="secondary"></ion-menu-button>
<ion-menu-button auto-hide="false" color="tertiary"></ion-menu-button>
<ion-menu-button auto-hide="false" color="success"></ion-menu-button>
<ion-menu-button auto-hide="false" color="warning"></ion-menu-button>
<ion-menu-button auto-hide="false" color="danger"></ion-menu-button>
<ion-menu-button auto-hide="false" color="light"></ion-menu-button>
<ion-menu-button auto-hide="false" color="medium"></ion-menu-button>
<ion-menu-button auto-hide="false" color="dark"></ion-menu-button>

<br>

<ion-menu-button auto-hide="false" color="primary" class="ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" color="secondary" class="ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" color="tertiary" class="ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" color="success" class="ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" color="warning" class="ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" color="danger" class="ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" color="light" class="ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" color="medium" class="ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" color="dark" class="ion-focused"></ion-menu-button>

<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
</ion-buttons>
<ion-title>Default</ion-title>
</ion-toolbar>

<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
</ion-buttons>
<ion-title>Primary</ion-title>
</ion-toolbar>

<ion-toolbar color="light">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>

<ion-toolbar color="success">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
</ion-buttons>
<ion-title>Success</ion-title>
</ion-toolbar>
</ion-content>
</ion-app>

<style>
h1 {
padding-left: 16px;
}
ion-menu-button {
display: inline-block;
}
.custom {
--color: hotpink;
}
.custom.md {
--background-hover: rgb(255, 105, 180, .08);
--background-focused: rgb(255, 105, 180, .24);
}
</style>
</body>

</html>

0 comments on commit 5ba0aa9

Please sign in to comment.
You can’t perform that action at this time.