Update checkbox-group to use required field mixin (vaadin#125)

* Update checkbox-group to use required field mixin * Update demos
DanielTurner · Sep 14, 2018 · 96d5b55 · 96d5b55
1 parent df62df2
commit 96d5b55
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 137 deletions.
diff --git a/bower.json b/bower.json
@@ -30,8 +30,8 @@
     "polymer": "^2.0.0",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
     "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.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"
   },
   "devDependencies": {

diff --git a/demo/checkbox-group-demos.html b/demo/checkbox-group-demos.html
@@ -37,29 +37,29 @@ <h3>Checkbox Group Disabled</h3>
     <h3>Checkbox Group with Iron Form with same names</h3>
     <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-iron-form">
       <template preserve-content>
-        <iron-form id="test-form">
+        <iron-form>
           <form>
             <vaadin-checkbox-group>
               <vaadin-checkbox name="checkbox-group" value="1">1</vaadin-checkbox>
               <vaadin-checkbox name="checkbox-group" value="2">2</vaadin-checkbox>
               <vaadin-checkbox name="checkbox-group" value="3">3</vaadin-checkbox>
               <vaadin-checkbox name="checkbox-group" value="4">4</vaadin-checkbox>
             </vaadin-checkbox-group>
-            <vaadin-button id="submit-button">Submit</vaadin-button>
+            <vaadin-button>Submit</vaadin-button>
           </form>
-          <div id="iron-form-output"></div>
+          <div id="form-output"></div>
         </iron-form>
         <script>
           window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-iron-form', function(document) {
-            const testForm = document.getElementById('test-form');
-            const submitButton = document.getElementById('submit-button');
+            const testForm = document.querySelector('iron-form');
+            const submitButton = document.querySelector('vaadin-button');
 
             submitButton.addEventListener('click', function(event) {
               testForm.submit();
             });
 
             testForm.addEventListener('iron-form-submit', function(event) {
-              this.querySelector('#iron-form-output').innerHTML = JSON.stringify(event.detail);
+              document.querySelector('#form-output').textContent = JSON.stringify(event.detail);
             });
           });
         </script>
@@ -69,29 +69,29 @@ <h3>Checkbox Group with Iron Form with same names</h3>
     <h3>Checkbox Group with Iron Form with different names</h3>
     <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-iron-form-with-custom-value">
       <template preserve-content>
-        <iron-form id="test-form-custom-value">
+        <iron-form>
           <form>
             <vaadin-checkbox-group>
               <vaadin-checkbox name="first-checkbox-group" value="1">1</vaadin-checkbox>
               <vaadin-checkbox name="second-checkbox-group" value="2">2</vaadin-checkbox>
               <vaadin-checkbox name="third-checkbox-group" value="3">3</vaadin-checkbox>
               <vaadin-checkbox name="fourth-checkbox-group" value="4">4</vaadin-checkbox>
             </vaadin-checkbox-group>
-            <vaadin-button id="submit-button-custom-value">Submit</vaadin-button>
+            <vaadin-button>Submit</vaadin-button>
           </form>
-          <div id="iron-form-output-custom-value"></div>
+          <div id="form-output"></div>
         </iron-form>
         <script>
           window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-iron-form-with-custom-value', function(document) {
-            const testForm = document.getElementById('test-form-custom-value');
-            const submitButton = document.getElementById('submit-button-custom-value');
+            const testForm = document.querySelector('iron-form');
+            const submitButton = document.querySelector('vaadin-button');
 
             submitButton.addEventListener('click', function(event) {
               testForm.submit();
             });
 
             testForm.addEventListener('iron-form-submit', function(event) {
-              this.querySelector('#iron-form-output-custom-value').innerHTML = JSON.stringify(event.detail);
+              document.querySelector('#form-output').textContent = JSON.stringify(event.detail);
             });
           });
         </script>

diff --git a/demo/checkbox-group-validation-demos.html b/demo/checkbox-group-validation-demos.html
@@ -9,50 +9,50 @@
     <h3>Checkbox Group with validation message</h3>
     <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-validation-message">
     <template preserve-content>
-        <vaadin-checkbox-group required label="Preferred language of contact:" error-message="Please choose a language.">
-            <vaadin-checkbox name="language" value="en">English</vaadin-checkbox>
-            <vaadin-checkbox name="language" value="fr">Français</vaadin-checkbox>
-            <vaadin-checkbox name="language" value="de">Deutsch</vaadin-checkbox>
-        </vaadin-checkbox-group>
-        <vaadin-button id="submit-button-validation-message">Validate</vaadin-button>
-        <script>
-          window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-validation-message', function(document) {
-            const checkboxGroup = document.querySelector('vaadin-checkbox-group');
-            const submitButton = document.getElementById('submit-button-validation-message');
+      <vaadin-checkbox-group required label="Preferred language of contact:" error-message="Please choose a language.">
+        <vaadin-checkbox name="language" value="en">English</vaadin-checkbox>
+        <vaadin-checkbox name="language" value="fr">Français</vaadin-checkbox>
+        <vaadin-checkbox name="language" value="de">Deutsch</vaadin-checkbox>
+      </vaadin-checkbox-group>
+      <vaadin-button>Validate</vaadin-button>
+      <script>
+        window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-validation-message', function(document) {
+          const checkboxGroup = document.querySelector('vaadin-checkbox-group');
+          const submitButton = document.querySelector('vaadin-button');
 
-            submitButton.addEventListener('click', function(event) {
-              checkboxGroup.validate();
-            });
+          submitButton.addEventListener('click', function(event) {
+            checkboxGroup.validate();
           });
-        </script>
+        });
+      </script>
     </template>
     </vaadin-demo-snippet>
 
     <h3>Checkbox Group with Iron Form validation</h3>
     <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-with-iron-form-validation">
       <template preserve-content>
-        <iron-form id="test-form-validation">
+        <iron-form>
           <form>
             <vaadin-checkbox-group required label="Preferred language of contact:">
               <vaadin-checkbox name="language" value="en">English</vaadin-checkbox>
               <vaadin-checkbox name="language" value="fr">Français</vaadin-checkbox>
               <vaadin-checkbox name="language" value="de">Deutsch</vaadin-checkbox>
             </vaadin-checkbox-group>
-            <vaadin-button id="submit-button-validation">Submit</vaadin-button>
+            <vaadin-button>Submit</vaadin-button>
           </form>
-          <div id="iron-form-output-validation"></div>
+          <div id="form-output"></div>
         </iron-form>
         <script>
           window.addDemoReadyListener('#checkbox-group-demos-checkbox-group-with-iron-form-validation', function(document) {
-            const testForm = document.getElementById('test-form-validation');
-            const submitButton = document.getElementById('submit-button-validation');
+            const testForm = document.querySelector('iron-form');
+            const submitButton = document.querySelector('vaadin-button');
 
             submitButton.addEventListener('click', function(event) {
               testForm.submit();
             });
 
             testForm.addEventListener('iron-form-submit', function(event) {
-              this.querySelector('#iron-form-output-validation').innerHTML = JSON.stringify(event.detail);
+              document.querySelector('#form-output').textContent = JSON.stringify(event.detail);
             });
           });
         </script>

diff --git a/test/visual/screens/vaadin-checkbox/group-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-checkbox/group-tests-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/group-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-checkbox/group-tests-lumo/default/firefox.png
diff --git a/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/chrome.png b/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/firefox.png b/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/firefox.png
diff --git a/test/visual/screens/vaadin-checkbox/validation-tests-material/error/chrome.png b/test/visual/screens/vaadin-checkbox/validation-tests-material/error/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/validation-tests-material/error/firefox.png b/test/visual/screens/vaadin-checkbox/validation-tests-material/error/firefox.png
diff --git a/theme/lumo/vaadin-checkbox-group-styles.html b/theme/lumo/vaadin-checkbox-group-styles.html
@@ -1,6 +1,8 @@
+<link rel="import" href="../../../vaadin-lumo-styles/mixins/required-field.html">
+
 <dom-module id="lumo-checkbox-group" theme-for="vaadin-checkbox-group">
   <template>
-    <style>
+    <style include="lumo-required-field">
       :host {
         color: var(--lumo-body-text-color);
         font-size: var(--lumo-font-size-m);
@@ -18,71 +20,13 @@
         align-items: center;
       }
 
-      [part="label"] {
-        display: block;
-      }
-
-      /* 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="error-message"] {
-        max-height: 0;
-        overflow: hidden;
-        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;
-      }
-
       :host([theme~="vertical"]) [part="group-field"] {
         display: flex;
         flex-direction: column;
       }
 
-      :host([has-label])::before {
-        margin-top: calc(var(--lumo-font-size-s) * 1.5);
-      }
-
-      :host([has-label]) {
-        padding-top: var(--lumo-space-m);
-      }
-
       [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.7em;
-        padding-right: 1em;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        position: relative;
-        max-width: 100%;
-        box-sizing: border-box;
-      }
-
-      :host([invalid]) [part="label"]::after {
-        color: var(--lumo-error-text-color);
-        opacity: 1;
-      }
-
-      [part="error-message"][aria-hidden="false"] {
-        color: var(--lumo-error-text-color);
-        max-height: 5em;
       }
     </style>
   </template>

diff --git a/theme/material/vaadin-checkbox-group-styles.html b/theme/material/vaadin-checkbox-group-styles.html
@@ -1,6 +1,8 @@
+<link rel="import" href="../../../vaadin-material-styles/mixins/required-field.html">
+
 <dom-module id="material-checkbox-group" theme-for="vaadin-checkbox-group">
   <template>
-    <style>
+    <style include="material-required-field">
       :host {
         display: inline-flex;
         position: relative;
@@ -41,49 +43,6 @@
         color: var(--material-disabled-text-color);
         -webkit-text-fill-color: var(--material-disabled-text-color);
       }
-
-      [part="label"] {
-        display: block;
-        position: absolute;
-        top: 8px;
-        font-size: 1em;
-        line-height: 1;
-        height: 20px;
-        margin-bottom: -4px;
-        white-space: nowrap;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        color: var(--material-secondary-text-color);
-        transform-origin: 0 75%;
-        transform: scale(0.75);
-      }
-
-      :host([invalid]) [part="label"] {
-        color: var(--material-error-text-color);
-      }
-
-      [part="error-message"] {
-        font-size: .75em;
-        line-height: 1;
-        color: var(--material-error-text-color);
-        margin-top: 6px;
-      }
-
-      :host(:not([invalid])) [part="error-message"] {
-        margin-top: 0;
-        max-height: 0;
-        overflow: hidden;
-      }
-
-      :host([invalid]) [part="error-message"] {
-        animation: reveal 0.2s;
-      }
-
-      @keyframes reveal {
-        0% {
-          opacity: 0;
-        }
-      }
     </style>
   </template>
 </dom-module>