javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(buttons): use proper button colors based on CSS variables when inside of a toolbar (#20633)

Browse Source
This commit is contained in:
Brandy Carney
2020-02-27 16:22:39 -05:00
committed by GitHub
parent 0e0e401d86
commit c1d7bf229d
11 changed files with 360 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/back-button/back-button.scss
View File

@ -239,6 +239,6 @@ ion-icon {
// Back Button in Toolbar: Global Theming
// --------------------------------------------------
:host(.in-toolbar) {
:host(.in-toolbar:not(.in-toolbar-color)) {
color: #{var(--ion-toolbar-color, var(--color))};
}

1
core/src/components/back-button/back-button.tsx
View File

@ -114,6 +114,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
'back-button-disabled': disabled,
'back-button-has-icon-only': hasIconOnly,
'in-toolbar': hostContext('ion-toolbar', this.el),
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
'ion-activatable': true,
'ion-focusable': true,
'show-back-button': showBackButton

8
core/src/components/button/button.ios.scss
View File

@ -175,4 +175,12 @@
:host(.button-solid.ion-color:hover) .button-native::after {
background: #{current-color(tint)};
}
// Solid buttons inside of a toolbar should use a tint of the current
// background so use white to tint it
:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after {
background: #fff;
opacity: 0.10;
}
}

16
core/src/components/button/button.scss
View File

@ -305,3 +305,19 @@ ion-ripple-effect {
background: transparent;
color: current-color(base);
}
// Button in Toolbar
// --------------------------------------------------
:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
color: #{var(--ion-toolbar-color, var(--color))};
}
:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
border-color: #{var(--ion-toolbar-color, var(--color, var(--border-color)))};
}
:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
background: #{var(--ion-toolbar-color, var(--background))};
color: #{var(--ion-toolbar-background, var(--color))};
}

5
core/src/components/button/button.tsx
View File

@ -4,7 +4,7 @@ import { getIonMode } from '../../global/ionic-global';
import { Color, RouterDirection } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { hasShadowDom } from '../../utils/helpers';
import { createColorClasses, openURL } from '../../utils/theme';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@ -208,7 +208,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
[`${buttonType}-${shape}`]: shape !== undefined,
[`${buttonType}-${fill}`]: true,
[`${buttonType}-strong`]: strong,
'in-toolbar': hostContext('ion-toolbar', this.el),
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
'button-has-icon-only': hasIconOnly,
'button-disabled': disabled,
'ion-activatable': true,

58
core/src/components/buttons/buttons.ios.scss
View File

@ -17,12 +17,11 @@
font-weight: 400;
}
::slotted(*) ion-button:not(.button-round) {
--border-radius: #{$toolbar-ios-button-border-radius};
}
// iOS Toolbar with Color: Default Buttons
// --------------------------------------------------
@ -38,6 +37,8 @@
--background-focused-opacity: .12;
--background-activated: #000;
--background-activated-opacity: .12;
--background-hover: #{current-color(base)};
--background-hover-opacity: 0.45;
--color: #{current-color(base)};
--color-focused: #{current-color(base)};
}
@ -53,38 +54,21 @@
}
// iOS Toolbar Button Clear
// iOS Toolbar Button Clear / Outline
// --------------------------------------------------
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear:not(.ion-color) {
--color: #{var(--ion-toolbar-color, ion-color(primary, base))};
--color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
--background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
}
// iOS Toolbar Button Outline
// --------------------------------------------------
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline:not(.ion-color) {
--color: #{var(--ion-toolbar-color, ion-color(primary, base))};
--color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
--color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
--border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
--background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
::slotted(*) .button-clear,
::slotted(*) .button-outline {
--background-activated: transparent;
--background-focused: currentColor;
--background-hover: transparent;
}
// iOS Toolbar Button Solid
// --------------------------------------------------
:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid:not(.ion-color) {
--color: #{$toolbar-ios-background};
--color-activated: #{$toolbar-ios-background};
--color-focused: #{$toolbar-ios-background};
--background: #{var(--ion-toolbar-color, ion-color(primary, base))};
--background-hover: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
--background-hover-opacity: 0.1;
::slotted(*) .button-solid:not(.ion-color) {
--background-focused: #000;
--background-focused-opacity: .12;
--background-activated: #000;
@ -121,25 +105,3 @@
line-height: .67;
}
// iOS Toolbar Menu Toggle
// --------------------------------------------------
// .button-menutoggle-ios {
// order: map-get($toolbar-order-ios, menu-toggle-start);
// min-width: 36px;
// --padding-top: 0;
// --padding-bottom: 0;
// --padding-start: 0;
// --padding-end: 0;
// ion-icon {
// @include padding(0, 6px);
// font-size: 28px;
// }
// }

7
core/src/components/buttons/buttons.md.scss
View File

@ -77,7 +77,6 @@
::slotted(*) .button-solid {
--color: #{$toolbar-md-background};
--color-activated: #{$toolbar-md-background};
--background: #{$toolbar-md-color};
--background-activated: transparent;
--background-focused: currentColor;
@ -89,13 +88,11 @@
::slotted(*) .button-outline {
--color: initial;
--color-activated: currentColor;
--color-focused: #{$toolbar-md-color};
--background: transparent;
--background-activated: transparent;
--background-focused: currentColor;
--background-hover: currentColor;
--border-color: #{$toolbar-md-color};
--border-color: currentColor;
}
@ -104,8 +101,6 @@
::slotted(*) .button-clear {
--color: initial;
--color-focused: #{$toolbar-md-color};
--color-activated: currentColor;
--background: transparent;
--background-activated: transparent;
--background-focused: currentColor;

4
core/src/components/menu-button/menu-button.scss
View File

@ -158,6 +158,6 @@ ion-icon {
// Menu Button in Toolbar: Global Theming
// --------------------------------------------------
:host(.in-toolbar) {
:host(.in-toolbar:not(.in-toolbar-color)) {
color: #{var(--ion-toolbar-color, var(--color))};
}
}

1
core/src/components/menu-button/menu-button.tsx
View File

@ -86,6 +86,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
'menu-button-hidden': hidden,
'menu-button-disabled': disabled,
'in-toolbar': hostContext('ion-toolbar', this.el),
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
'ion-activatable': true,
'ion-focusable': true
}}

19
core/src/components/toolbar/test/custom/e2e.ts Normal file
View File

@ -0,0 +1,19 @@
import { newE2EPage } from '@stencil/core/testing';
test('toolbar: custom', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/custom?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
test('toolbar:rtl: custom', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/custom?ionic:_testing=true&rtl=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

298
core/src/components/toolbar/test/custom/index.html Normal file
View File

@ -0,0 +1,298 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Toolbar - Custom</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 nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<ion-app>
<ion-content id="content">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button default-href="/" text=""></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-back-button default-href="/" text=""></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Color</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="secondary">
<ion-button fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Color</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary" class="themed-colors component-colors">
<ion-buttons slot="start">
<ion-back-button default-href="/" text=""></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Color: Themed</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary" class="themed-colors component-colors">
<ion-buttons slot="secondary">
<ion-button fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Color: Themed</ion-title>
</ion-toolbar>
<ion-toolbar class="themed-colors">
<ion-buttons slot="start">
<ion-back-button default-href="/" text=""></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Themed</ion-title>
</ion-toolbar>
<ion-toolbar class="themed-colors">
<ion-buttons slot="secondary">
<ion-button fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Themed</ion-title>
</ion-toolbar>
<ion-toolbar class="themed-colors">
<ion-buttons slot="start">
<ion-back-button color="danger" default-href="/" text=""></ion-back-button>
<ion-menu-button color="danger" auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="danger">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button color="danger">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Themed w / Color Buttons</ion-title>
</ion-toolbar>
<ion-toolbar class="themed-colors">
<ion-buttons slot="secondary">
<ion-button color="danger" fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button color="danger">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="danger" fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button color="danger" fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Themed w / Color Buttons</ion-title>
</ion-toolbar>
<ion-toolbar class="component-colors">
<ion-buttons slot="start">
<ion-back-button default-href="/" text=""></ion-back-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Component Level Vars</ion-title>
</ion-toolbar>
<ion-toolbar class="component-colors">
<ion-buttons slot="secondary">
<ion-button fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Component Level Vars</ion-title>
</ion-toolbar>
<ion-toolbar class="component-colors">
<ion-buttons slot="start">
<ion-back-button color="secondary" default-href="/" text=""></ion-back-button>
<ion-menu-button color="secondary" auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button color="secondary">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Component Level Vars w/ Color Buttons</ion-title>
</ion-toolbar>
<ion-toolbar class="component-colors">
<ion-buttons slot="secondary">
<ion-button color="secondary" fill="clear">
<ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
</ion-button>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="secondary" fill="solid">
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
<ion-button color="secondary" fill="outline">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Component Level Vars w/ Color Buttons</ion-title>
</ion-toolbar>
</ion-content>
</ion-app>
<style>
.themed-colors {
--ion-toolbar-background: #d9fae0;
--ion-toolbar-color: #b68928;
}
.component-colors {
--background: #fff4f5;
}
.component-colors,
.component-colors ion-back-button,
.component-colors ion-menu-button,
.component-colors ion-button {
--color: #aa3723;
}
.component-colors ion-button[fill="solid"] {
--background: #aa3723;
--color: #fff;
}
</style>
</body>
</html>