Skip to content

Commit

Permalink
Use CSS variables to set vaadin-button lumo colors (#105)
Browse files Browse the repository at this point in the history
This enables vaadin-button styles to be applied for buttons that are
not direct children of the vaadin-notification-card.

Fixes #104

Add workaround for IE11 CSS properties
  • Loading branch information
pekam authored Apr 26, 2019
1 parent 41e349b commit 449e262
Show file tree
Hide file tree
Showing 9 changed files with 96 additions and 34 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"iron-demo-helpers": "^2.0.0",
"webcomponentsjs": "^1.0.0",
"web-component-tester": "^6.1.5",
"vaadin-button": "vaadin/vaadin-button#^2.1.0",
"vaadin-button": "vaadin/vaadin-button#^2.2.0",
"vaadin-checkbox": "vaadin/vaadin-checkbox#^2.2.1",
"vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^2.0.1",
"vaadin-radio-button": "vaadin/vaadin-radio-button#^1.1.0",
Expand Down
24 changes: 24 additions & 0 deletions src/vaadin-notification.html
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,7 @@
}

this._animatedAppendNotificationCard();
setTimeout(() => this._updateShadyButtonStyles());
} else if (this._card) {
this._closeNotificationCard();
}
Expand Down Expand Up @@ -548,6 +549,29 @@
}
}
}

_updateShadyButtonStyles() {
// ShadyCSS doesn't propagate CSS properties to slotted children,
// so this is done manually to allow vaadin-buttons to be themed
// correctly on IE11
if (window.ShadyCSS && !this.__buttonStylesPending) {
customElements.whenDefined('vaadin-button').then(() => {
const isButton = node => node instanceof customElements.get('vaadin-button');
Array.from(this._card.querySelectorAll('*')).filter(isButton).forEach(btn => {
const styles = ['--_lumo-button-color', '--_lumo-button-background-color',
'--_lumo-button-primary-color', '--_lumo-button-primary-background-color']
.reduce((obj, propName) => {
const propValue = window.ShadyCSS.getComputedStyleValue(this._card, propName);
propValue && (obj[propName] = propValue);
return obj;
}, {});
btn.updateStyles(styles);
});
this.__buttonStylesPending = false;
});
this.__buttonStylesPending = true;
}
}
}

customElements.define(NotificationContainer.is, NotificationContainer);
Expand Down
50 changes: 50 additions & 0 deletions test/visual/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,56 @@
</template>
</vaadin-notification>

<vaadin-notification opened duration="0" position="bottom-end">
<template>
<div>
With nested buttons (default)
<vaadin-button>Dismiss</vaadin-button>
<vaadin-button theme="primary">Accept</vaadin-button>
</div>
</template>
</vaadin-notification>

<vaadin-notification opened duration="0" position="bottom-end" theme="primary">
<template>
<div>
With nested buttons (primary)
<vaadin-button>Dismiss</vaadin-button>
<vaadin-button theme="primary">Accept</vaadin-button>
</div>
</template>
</vaadin-notification>

<vaadin-notification opened duration="0" position="bottom-end" theme="contrast">
<template>
<div>
With nested buttons (contrast)
<vaadin-button>Dismiss</vaadin-button>
<vaadin-button theme="primary">Accept</vaadin-button>
</div>
</template>
</vaadin-notification>

<vaadin-notification opened duration="0" position="bottom-end" theme="success">
<template>
<div>
With nested buttons (success)
<vaadin-button>Dismiss</vaadin-button>
<vaadin-button theme="primary">Accept</vaadin-button>
</div>
</template>
</vaadin-notification>

<vaadin-notification opened duration="0" position="bottom-end" theme="error">
<template>
<div>
With nested buttons (error)
<vaadin-button>Dismiss</vaadin-button>
<vaadin-button theme="primary">Accept</vaadin-button>
</div>
</template>
</vaadin-notification>

<vaadin-notification opened duration="0" position="bottom-center">
<template>
bottom-center
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 20 additions & 32 deletions theme/lumo/vaadin-notification-styles.html
Original file line number Diff line number Diff line change
Expand Up @@ -137,59 +137,47 @@
color: var(--lumo-primary-contrast-color);
}

:host([theme~="primary"]) [part="content"] ::slotted(vaadin-button) {
background: var(--lumo-shade-20pct);
color: var(--lumo-primary-contrast-color);
}

:host([theme~="primary"]) [part="content"] ::slotted(vaadin-button[theme~="primary"]) {
background: var(--lumo-primary-contrast-color);
color: var(--lumo-primary-text-color);
:host([theme~="primary"]) {
--_lumo-button-background-color: var(--lumo-shade-20pct);
--_lumo-button-color: var(--lumo-primary-contrast-color);
--_lumo-button-primary-background-color: var(--lumo-primary-contrast-color);
--_lumo-button-primary-color: var(--lumo-primary-text-color);
}

:host([theme~="contrast"]) [part="overlay"] {
background: var(--lumo-contrast);
color: var(--lumo-base-color);
}

:host([theme~="contrast"]) [part="content"] ::slotted(vaadin-button) {
background: var(--lumo-contrast-20pct);
color: var(--lumo-base-color);
}

:host([theme~="contrast"]) [part="content"] ::slotted(vaadin-button[theme~="primary"]) {
background: var(--lumo-base-color);
color: var(--lumo-contrast);
:host([theme~="contrast"]) {
--_lumo-button-background-color: var(--lumo-contrast-20pct);
--_lumo-button-color: var(--lumo-base-color);
--_lumo-button-primary-background-color: var(--lumo-base-color);
--_lumo-button-primary-color: var(--lumo-contrast);
}

:host([theme~="success"]) [part="overlay"] {
background: var(--lumo-success-color);
color: var(--lumo-success-contrast-color);
}

:host([theme~="success"]) [part="content"] ::slotted(vaadin-button) {
background: var(--lumo-shade-20pct);
color: var(--lumo-success-contrast-color);
}

:host([theme~="success"]) [part="content"] ::slotted(vaadin-button[theme~="primary"]) {
background: var(--lumo-success-contrast-color);
color: var(--lumo-success-text-color);
:host([theme~="success"]) {
--_lumo-button-background-color: var(--lumo-shade-20pct);
--_lumo-button-color: var(--lumo-success-contrast-color);
--_lumo-button-primary-background-color: var(--lumo-success-contrast-color);
--_lumo-button-primary-color: var(--lumo-success-text-color);
}

:host([theme~="error"]) [part="overlay"] {
background: var(--lumo-error-color);
color: var(--lumo-error-contrast-color);
}

:host([theme~="error"]) [part="content"] ::slotted(vaadin-button) {
background: var(--lumo-shade-20pct);
color: var(--lumo-error-contrast-color);
}

:host([theme~="error"]) [part="content"] ::slotted(vaadin-button[theme~="primary"]) {
background: var(--lumo-error-contrast-color);
color: var(--lumo-error-text-color);
:host([theme~="error"]) {
--_lumo-button-background-color: var(--lumo-shade-20pct);
--_lumo-button-color: var(--lumo-error-contrast-color);
--_lumo-button-primary-background-color: var(--lumo-error-contrast-color);
--_lumo-button-primary-color: var(--lumo-error-text-color);
}
</style>
</template>
Expand Down
2 changes: 1 addition & 1 deletion wct.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ module.exports = {
exclude: [],
thresholds: {
global: {
statements: 88
statements: 84
}
}
}
Expand Down

0 comments on commit 449e262

Please sign in to comment.