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.

Sign up for GitHub

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

Update text-field styles to use required field mixin #257

Merged
merged 3 commits into from Sep 21, 2018
Merged

Update text-field styles to use required field mixin #257

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
211fef4
Update text-field styles to use required field mixin
web-padawan Sep 13, 2018
dfc201a
Add istanbul-ignore comments for some workarounds
web-padawan Sep 13, 2018
6aea94e
Don’t depend on a fixed loading timeout in visual tests
web-padawan Sep 19, 2018
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
2 changes: 1 addition & 1 deletion .travis.yml
View file
Open in desktop
Expand Up @@ -39,7 +39,7 @@ script:
polymer lint --rules polymer-2 --input ./src/*.html ./theme/**/*.html &&
if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" && "$TRAVIS_BRANCH" != quick/* ]]; then
if [[ "$TEST_SUITE" = "visual_tests" ]]; then
npm i -q --no-save gemini@^4.0.0 gemini-sauce gemini-polyserve &&
npm i -q --no-save gemini@^5.0.0 gemini-sauce gemini-polyserve &&
gemini test test/visual;
else
wct --env saucelabs;
Expand Down
6 changes: 3 additions & 3 deletions bower.json
View file
Open in desktop
Expand Up @@ -38,14 +38,14 @@
"webcomponentsjs": "^1.0.0",
"web-component-tester": "^6.1.5",
"vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^2.0.1",
"vaadin-button": "vaadin/vaadin-button#^2.1.0-beta2"
"vaadin-button": "vaadin/vaadin-button#^2.1.0"
},
"dependencies": {
"polymer": "^2.0.0",
"vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.1",
"vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
"vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0-beta1",
"vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.0-beta1",
"vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.2.0",
"vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.0",
"vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0"
},
"resolutions": {
Expand Down
3 changes: 3 additions & 0 deletions src/vaadin-text-field-mixin.html
View file
Open in desktop
Expand Up @@ -306,6 +306,7 @@
this._errorId = `${this.constructor.is}-error-${uniqueId}`;
this._labelId = `${this.constructor.is}-label-${uniqueId}`;

/* istanbul ignore if */
if (navigator.userAgent.match(/Trident/)) {
this._addIEListeners();
}
Expand Down Expand Up @@ -354,6 +355,7 @@
attributeChangedCallback(prop, oldVal, newVal) {
super.attributeChangedCallback(prop, oldVal, newVal);
// Needed until Edge has CSS Custom Properties (present in Edge Preview)
/* istanbul ignore if */
if (!(window.ShadyCSS && window.ShadyCSS.nativeCss) &&
/^(focused|focus-ring|invalid|disabled|placeholder|has-value)$/.test(prop)) {
this.updateStyles();
Expand All @@ -362,6 +364,7 @@
// Safari has an issue with repainting shadow root element styles when a host attribute changes.
// Need this workaround (toggle any inline css property on and off) until the issue gets fixed.
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
/* istanbul ignore if */
if (isSafari && this.root) {
const WEBKIT_PROPERTY = '-webkit-backface-visibility';
this.root.querySelectorAll('*').forEach(el => {
Expand Down
Binary file modified test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/chrome.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/visual/screens/vaadin-text-field/text-area-1-lumo/text-area-1/firefox.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion test/visual/test.js
View file
Open in desktop
@@ -1,6 +1,9 @@
gemini.suite('vaadin-text-field', function(rootSuite) {
function wait(actions, find) {
actions.wait(5000);
return actions
.waitForJSCondition(function(window) {
return window.webComponentsAreReady;
}, 60000);
}

function goToAboutBlank(actions, find) {
Expand Down
7 changes: 7 additions & 0 deletions test/visual/vaadin-password-field/password-field.html
View file
Open in desktop
Expand Up @@ -7,6 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-password-field.html">`);

window.addEventListener('WebComponentsReady', function() {
customElements.whenDefined('vaadin-password-field').then(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
<link href="../common.html" rel="import">
</head>
Expand Down
7 changes: 7 additions & 0 deletions test/visual/vaadin-password-field/rtl.html
View file
Open in desktop
Expand Up @@ -7,6 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-password-field.html">`);

window.addEventListener('WebComponentsReady', function() {
customElements.whenDefined('vaadin-password-field').then(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
<link href="../common.html" rel="import">
</head>
Expand Down
8 changes: 7 additions & 1 deletion test/visual/vaadin-text-area/rtl.html
View file
Open in desktop
Expand Up @@ -7,7 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-password-field.html">`);

window.addEventListener('WebComponentsReady', function() {
setTimeout(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
<link href="../common.html" rel="import">
</head>
Expand Down
7 changes: 7 additions & 0 deletions test/visual/vaadin-text-area/styling.html
View file
Open in desktop
Expand Up @@ -7,6 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);

window.addEventListener('WebComponentsReady', function() {
setTimeout(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
</head>

Expand Down
7 changes: 7 additions & 0 deletions test/visual/vaadin-text-area/text-area-1.html
View file
Open in desktop
Expand Up @@ -7,6 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);

window.addEventListener('WebComponentsReady', function() {
setTimeout(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
<link href="../common.html" rel="import">
</head>
Expand Down
7 changes: 7 additions & 0 deletions test/visual/vaadin-text-area/text-area-2.html
View file
Open in desktop
Expand Up @@ -7,6 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);

window.addEventListener('WebComponentsReady', function() {
setTimeout(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
<link href="../common.html" rel="import">
</head>
Expand Down
7 changes: 7 additions & 0 deletions test/visual/vaadin-text-area/text-area-3.html
View file
Open in desktop
Expand Up @@ -7,6 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-area.html">`);

window.addEventListener('WebComponentsReady', function() {
setTimeout(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
<link href="../common.html" rel="import">
</head>
Expand Down
8 changes: 7 additions & 1 deletion test/visual/vaadin-text-field/rtl.html
View file
Open in desktop
Expand Up @@ -7,7 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-field.html">`);
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-password-field.html">`);

window.addEventListener('WebComponentsReady', function() {
setTimeout(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
<link href="../common.html" rel="import">
</head>
Expand Down
7 changes: 7 additions & 0 deletions test/visual/vaadin-text-field/styling.html
View file
Open in desktop
Expand Up @@ -7,6 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-field.html">`);

window.addEventListener('WebComponentsReady', function() {
setTimeout(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
</head>

Expand Down
7 changes: 7 additions & 0 deletions test/visual/vaadin-text-field/text-field-1.html
View file
Open in desktop
Expand Up @@ -7,6 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-field.html">`);

window.addEventListener('WebComponentsReady', function() {
setTimeout(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
<link href="../common.html" rel="import">
</head>
Expand Down
7 changes: 7 additions & 0 deletions test/visual/vaadin-text-field/text-field-2.html
View file
Open in desktop
Expand Up @@ -7,6 +7,13 @@
<script>
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
document.write(`<link rel="import" href="../../../theme/${theme}/vaadin-text-field.html">`);

window.addEventListener('WebComponentsReady', function() {
setTimeout(function() {
window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
window.webComponentsAreReady = true; // Checked in gemini before capture callback
});
});
</script>
<link href="../common.html" rel="import">
</head>
Expand Down
80 changes: 2 additions & 78 deletions theme/lumo/vaadin-text-field-styles.html
View file
Open in desktop
Expand Up @@ -3,10 +3,11 @@
<link rel="import" href="../../../vaadin-lumo-styles/spacing.html">
<link rel="import" href="../../../vaadin-lumo-styles/style.html">
<link rel="import" href="../../../vaadin-lumo-styles/typography.html">
<link rel="import" href="../../../vaadin-lumo-styles/mixins/required-field.html">

<dom-module id="lumo-text-field" theme-for="vaadin-text-field">
<template>
<style>
<style include="lumo-required-field">
:host {
--lumo-text-field-size: var(--lumo-size-m);
color: var(--lumo-body-text-color);
Expand All @@ -25,52 +26,10 @@
align-items: center;
}

[part="label"] {
align-self: flex-start;
color: var(--lumo-secondary-text-color);
font-weight: 500;
font-size: var(--lumo-font-size-s);
margin-left: calc(var(--lumo-border-radius) / 4);
transition: color 0.2s;
line-height: 1;
padding-bottom: 0.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
max-width: 100%;
box-sizing: border-box;
}

:host([has-label])::before {
/* Label height + margin */
margin-top: calc(var(--lumo-font-size-s) * 1.5);
}

:host([has-label]) {
padding-top: var(--lumo-space-m);
}

:host([focused]:not([readonly])) [part="label"] {
color: var(--lumo-primary-text-color);
}

:host([required]) [part="label"] {
padding-right: 1em;
}

/* Used for required and invalid indicators */
[part="label"]::after {
content: var(--lumo-required-field-indicator, "•");
transition: opacity 0.2s;
opacity: 0;
color: var(--lumo-primary-text-color);
position: absolute;
right: 0;
width: 1em;
text-align: center;
}

[part="value"],
[part="input-field"] ::slotted([part="value"]) {
cursor: inherit;
Expand Down Expand Up @@ -235,18 +194,8 @@
-webkit-text-fill-color: var(--lumo-disabled-text-color);
}

/* Required field style */

:host([required]:not([has-value])) [part="label"]::after {
opacity: 1;
}

/* Invalid style */

:host([invalid]) [part="label"]::after {
color: var(--lumo-error-text-color);
}

:host([invalid]) [part="input-field"] {
background-color: var(--lumo-error-color-10pct);
}
Expand All @@ -259,31 +208,6 @@
box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
}

/* Error message */

[part="error-message"] {
margin-left: calc(var(--lumo-border-radius) / 4);
font-size: var(--lumo-font-size-xs);
line-height: var(--lumo-line-height-xs);
color: var(--lumo-error-text-color);
will-change: max-height;
transition: 0.4s max-height;
max-height: 5em;
}

/* Margin that doesn’t reserve space when there’s no error message */
[part="error-message"]:not(:empty)::before,
[part="error-message"]:not(:empty)::after {
content: "";
display: block;
height: 0.4em;
}

:host(:not([invalid])) [part="error-message"] {
max-height: 0;
overflow: hidden;
}

/* Small theme */

:host([theme~="small"]) {
Expand Down