fix: ensure correct alignment, add visual tests (#25)

vaadin · Mar 4, 2019 · 5c46456 · 5c46456
1 parent 2006e3c
commit 5c46456
Show file tree

Hide file tree

Showing 19 changed files with 214 additions and 6 deletions.
diff --git a/bower.json b/bower.json
@@ -30,14 +30,15 @@
     "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.0",
     "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.3.3",
-    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.0"
+    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.2"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",
     "iron-form": "^2.0.0",
     "vaadin-text-field": "vaadin/vaadin-text-field#^2.3.0",
     "vaadin-time-picker": "vaadin/vaadin-time-picker#^1.1.1",
     "vaadin-date-picker": "vaadin/vaadin-date-picker#^3.3.2",
+    "vaadin-form-layout": "vaadin/vaadin-form-layout#^2.1.0",
     "vaadin-select": "vaadin/vaadin-select#^2.0.2",
     "webcomponentsjs": "^1.0.0",
     "web-component-tester": "^6.1.5",

diff --git a/src/vaadin-custom-field.html b/src/vaadin-custom-field.html
@@ -13,7 +13,15 @@
   <template>
     <style>
       :host {
+        display: inline-flex;
+      }
+
+      :host::before {
+        content: "\2003";
+        width: 0;
         display: inline-block;
+        /* Size and position this element on the same vertical position as the input-field element
+           to make vertical align for the host element work as expected */
       }
 
       :host([hidden]) {

diff --git a/test/visual/alignment.html b/test/visual/alignment.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`
+      <link rel="import" href="../../theme/${theme}/vaadin-custom-field.html">
+      <link rel="import" href="../../../vaadin-combo-box/theme/${theme}/vaadin-combo-box.html">
+      <link rel="import" href="../../../vaadin-date-picker/theme/${theme}/vaadin-date-picker.html">
+      <link rel="import" href="../../../vaadin-select/theme/${theme}/vaadin-select.html">
+      <link rel="import" href="../../../vaadin-text-field/theme/${theme}/vaadin-email-field.html">
+      <link rel="import" href="../../../vaadin-text-field/theme/${theme}/vaadin-number-field.html">
+      <link rel="import" href="../../../vaadin-text-field/theme/${theme}/vaadin-password-field.html">
+      <link rel="import" href="../../../vaadin-text-field/theme/${theme}/vaadin-text-field.html">
+      <link rel="import" href="../../../vaadin-time-picker/theme/${theme}/vaadin-time-picker.html">
+    `);
+
+    window.addEventListener('WebComponentsReady', function() {
+      customElements.whenDefined('vaadin-custom-field').then(() => {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
+  </script>
+</head>
+
+<body>
+  <div id="alignment-tests" style="padding: 10px;">
+    <vaadin-custom-field invalid error-message="Invalid">
+      <vaadin-number-field value="1"></vaadin-number-field>
+      <vaadin-password-field value="password"></vaadin-password-field>
+    </vaadin-custom-field>
+    <vaadin-text-field invalid error-message="Invalid"></vaadin-text-field>
+    <vaadin-time-picker value="09:00"></vaadin-time-picker>
+    <br>
+    <br>
+    <vaadin-custom-field label="Custom field">
+      <vaadin-select value="+358">
+        <template>
+          <vaadin-list-box>
+            <vaadin-item>+358</vaadin-item>
+            <vaadin-item>+46</vaadin-item>
+            <vaadin-item>+34</vaadin-item>
+          </vaadin-list-box>
+        </template>
+      </vaadin-select>
+      <vaadin-text-field></vaadin-text-field>
+    </vaadin-custom-field>
+    <vaadin-text-field label="Text field" value="Text"></vaadin-text-field>
+    <vaadin-select label="Plain select" value="Option one">
+      <template>
+        <vaadin-list-box>
+          <vaadin-item>Option one</vaadin-item>
+          <vaadin-item>Option two</vaadin-item>
+        </vaadin-list-box>
+      </template>
+    </vaadin-select>
+    <br>
+    <br>
+    <vaadin-custom-field label="Custom field" invalid error-message="Invalid">
+      <vaadin-email-field value="[email protected]"></vaadin-email-field>
+      <vaadin-date-picker value="1980-08-14"></vaadin-date-picker>
+    </vaadin-custom-field>
+    <vaadin-number-field label="Number" value="2" invalid error-message="Invalid"></vaadin-number-field>
+    <vaadin-date-picker label="Date" invalid error-message="Invalid"></vaadin-date-picker>
+    <br>
+    <br>
+    <vaadin-custom-field label="Custom field" invalid error-message="Invalid">
+      <vaadin-combo-box value="Combo item" allow-custom-value></vaadin-combo-box>
+      <vaadin-time-picker value="09:00"></vaadin-time-picker>
+    </vaadin-custom-field>
+    <vaadin-combo-box label="Combo" value="Combo item" allow-custom-value></vaadin-combo-box>
+    <vaadin-password-field value="password"></vaadin-password-field>
+  </div>
+
+</body>
diff --git a/test/visual/form-layout.html b/test/visual/form-layout.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`
+      <link rel="import" href="../../theme/${theme}/vaadin-custom-field.html">
+      <link rel="import" href="../../../vaadin-text-field/theme/${theme}/vaadin-text-field.html">
+      <link rel="import" href="../../../vaadin-form-layout/theme/${theme}/vaadin-form-layout.html">
+    `);
+
+    window.addEventListener('WebComponentsReady', function() {
+      customElements.whenDefined('vaadin-custom-field').then(() => {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
+  </script>
+</head>
+
+<body>
+  <div id="form-layout-tests">
+    <vaadin-form-layout style="width: 60em">
+      <vaadin-text-field label="Text field" invalid error-message="Error"></vaadin-text-field>
+      <vaadin-custom-field label="Custom field" invalid error-message="Error">
+        <vaadin-text-field></vaadin-text-field>
+      </vaadin-custom-field>
+    </vaadin-form-layout>
+    <br>
+    <vaadin-form-layout style="width: 60em">
+      <vaadin-text-field label="Text field" theme="always-float-label"></vaadin-text-field>
+      <vaadin-custom-field label="Custom field">
+        <vaadin-text-field></vaadin-text-field>
+      </vaadin-custom-field>
+    </vaadin-form-layout>
+  </div>
+
+</body>
diff --git a/test/visual/screens/vaadin-custom-field/alignment-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-custom-field/alignment-tests-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-custom-field/alignment-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-custom-field/alignment-tests-lumo/default/firefox.png
diff --git a/.../visual/screens/vaadin-custom-field/alignment-tests-material/default/chrome.png b/.../visual/screens/vaadin-custom-field/alignment-tests-material/default/chrome.png
diff --git a/...visual/screens/vaadin-custom-field/alignment-tests-material/default/firefox.png b/...visual/screens/vaadin-custom-field/alignment-tests-material/default/firefox.png
diff --git a/test/visual/screens/vaadin-custom-field/default-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-custom-field/default-tests-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-custom-field/default-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-custom-field/default-tests-lumo/default/firefox.png
diff --git a/test/visual/screens/vaadin-custom-field/default-tests-material/default/chrome.png b/test/visual/screens/vaadin-custom-field/default-tests-material/default/chrome.png
diff --git a/test/visual/screens/vaadin-custom-field/default-tests-material/default/firefox.png b/test/visual/screens/vaadin-custom-field/default-tests-material/default/firefox.png
diff --git a/test/visual/screens/vaadin-custom-field/form-layout-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-custom-field/form-layout-tests-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-custom-field/form-layout-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-custom-field/form-layout-tests-lumo/default/firefox.png
diff --git a/...isual/screens/vaadin-custom-field/form-layout-tests-material/default/chrome.png b/...isual/screens/vaadin-custom-field/form-layout-tests-material/default/chrome.png
diff --git a/...sual/screens/vaadin-custom-field/form-layout-tests-material/default/firefox.png b/...sual/screens/vaadin-custom-field/form-layout-tests-material/default/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -24,6 +24,20 @@ gemini.suite('vaadin-custom-field', function(rootSuite) {
         .setCaptureElements('#default-tests')
         .capture('default');
     });
+
+    gemini.suite(`alignment-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`alignment.html?theme=${theme}`)
+        .setCaptureElements('#alignment-tests')
+        .capture('default');
+    });
+
+    gemini.suite(`form-layout-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`form-layout.html?theme=${theme}`)
+        .setCaptureElements('#form-layout-tests')
+        .capture('default');
+    });
   });
 
 });
diff --git a/theme/lumo/vaadin-custom-field-styles.html b/theme/lumo/vaadin-custom-field-styles.html
@@ -14,12 +14,40 @@
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         -webkit-tap-highlight-color: transparent;
-        padding: var(--lumo-space-xs) 0;
+        padding: 0;
       }
 
-      :host(:not([has-label])) [part="label"]::after {
+      :host::before {
+        margin-top: calc((0.8em + var(--lumo-space-xs) * 3.5) * -1);
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+      }
+
+      :host([has-label]) {
+        padding-top: calc(var(--lumo-space-s) + var(--lumo-space-xs));
+      }
+
+      :host([has-label]) [part="label"] {
+        top: var(--lumo-space-xs);
+      }
+
+      :host([has-label][invalid])::before {
+        margin-top: calc(var(--lumo-space-xs) * -1.5);
+      }
+
+      :host(:not([has-label])) [part="label"] {
         display: none;
       }
+
+      /* align with text-field error message */
+      :host([invalid]) [part="error-message"]:not(:empty)::before {
+        height: calc(0.4em - var(--lumo-space-xs));
+      }
+
+      :host([invalid]) [part="error-message"]:not(:empty)::after {
+        height: calc(0.4em + var(--lumo-space-xs));
+      }
     </style>
   </template>
 </dom-module>
diff --git a/theme/material/vaadin-custom-field-styles.html b/theme/material/vaadin-custom-field-styles.html
@@ -6,6 +6,9 @@
   <template>
     <style include="material-required-field">
       :host {
+        display: inline-flex;
+        position: relative;
+        margin-bottom: 8px;
         outline: none;
         color: var(--material-body-text-color);
         font-size: var(--material-body-font-size);
@@ -14,9 +17,43 @@
         -moz-osx-font-smoothing: grayscale;
       }
 
-      [part="label"] {
-        position: relative;
-        top: 0;
+      :host::before {
+        line-height: 32px;
+        display: inline-flex;
+        align-items: center;
+        box-sizing: border-box;
+      }
+
+      :host([has-label]) {
+        padding-top: 24px;
+      }
+
+      :host([has-label]) [part="label"] {
+        top: 8px;
+      }
+
+      :host([has-label])::before {
+        margin-top: -8px;
+      }
+
+      /* align with text-field error message */
+      :host([invalid]) [part="error-message"]:not(:empty) {
+        margin-top: -8px;
+        margin-bottom: -10px;
+      }
+
+      :host([has-label]) ::slotted(vaadin-text-field),
+      :host([has-label]) ::slotted(vaadin-email-field),
+      :host([has-label]) ::slotted(vaadin-number-field),
+      :host([has-label]) ::slotted(vaadin-password-field) {
+        padding-top: 0;
+      }
+
+      :host([has-label]) ::slotted(vaadin-select),
+      :host([has-label]) ::slotted(vaadin-combo-box),
+      :host([has-label]) ::slotted(vaadin-date-picker),
+      :host([has-label]) ::slotted(vaadin-time-picker) {
+        margin-top: -8px;
       }
     </style>
   </template>