Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from May 31, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
778c833
feat(menu-button): add variables for hover and focused states
brandyscarney May 31, 2019
d75d5e2
chore(build): run docs generation
brandyscarney May 31, 2019
e72d667
Merge branch 'master' into feat-menu-button-states
brandyscarney May 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions core/api.txt
View file
Open in desktop
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion core/src/components/buttons/buttons.md.scss
View file
Open in desktop
Expand Up @@ -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 {
Expand Down
2 changes: 2 additions & 0 deletions core/src/components/menu-button/menu-button.ios.scss
View file
Open in desktop
Expand Up @@ -7,6 +7,8 @@
--color: #{ion-color(primary, base)};
--padding-start: 5px;
--padding-end: 5px;

height: 32px;
}

:host(.activated) {
Expand Down
24 changes: 22 additions & 2 deletions core/src/components/menu-button/menu-button.md.scss
View file
Open in desktop
Expand Up @@ -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)};
}
42 changes: 38 additions & 4 deletions core/src/components/menu-button/menu-button.scss
View file
Open in desktop
Expand Up @@ -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;

Expand All @@ -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));
Expand All @@ -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;

Expand All @@ -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
// --------------------------------------------------

Expand Down
7 changes: 5 additions & 2 deletions core/src/components/menu-button/menu-button.tsx
View file
Open in desktop
@@ -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',
Expand Down Expand Up @@ -39,6 +40,8 @@ export class MenuButton implements ComponentInterface {
hostData() {
return {
class: {
...createColorClasses(this.color),

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

'button': true, // ion-buttons target .button
Expand All @@ -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>
Expand Down
20 changes: 13 additions & 7 deletions core/src/components/menu-button/readme.md
View file
Open in desktop
Expand Up @@ -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 |


----------------------------------------------
Expand Down
10 changes: 10 additions & 0 deletions core/src/components/menu-button/test/basic/e2e.ts
View file
Open in desktop
@@ -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();
});
106 changes: 106 additions & 0 deletions core/src/components/menu-button/test/basic/index.html
View file
Open in desktop
@@ -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>